328 Testing JavaScript with Jasmine [1.5d]

Jasmine Show archive.org snapshot is a great tool to unit test your JavaScript components without writing an expensive end-to-end test for every little thing.

Jasmine is a purely client-side tool. It cannot ask Rails to render a view or access the database. Any HTTP calls must be mocked.

Learn

What do we test with Jasmine?

Just as unit tests are a direct way to closely look at your classes, Jasmine is a very direct way to look at your JavaScript components.

For example, when you want to test that a date picker opens a calendar sheet on click, Jasmine lets you quickly instantiate the date picker and emit a click event. You do not need to login with a user, or find a screen that has a date picker.

Like with the unit tests, we would still add an E2E test for the happy path, just to ensure successful integration. However, all the details and edge cases of a component would be tested in Jasmine only.

Resources

• Jasmine Tutorials Show archive.org snapshot (all tutorials on the right side)
• Ensure passing Jasmine specs from your Ruby E2E tests
• Jasmine: using async/await to write nice asynchronous specs
  • Especially understand the section Dealing with uncooperative code. You will often need to await wait() to observe the effects of an async function.
• Jasmine: Adding custom matchers
• Testing setTimeout and setInterval with Jasmine
• Jasmine: Testing complex types for equality
• Jasmine: Test that an object is an instance of a given class
• Jasmine: Expecting objects as method invocation arguments
• Jasmine: Cleaning up the DOM after each test
  
• Jasmine: Creating DOM elements effectively
• Hennings talk Jasmine für Fortgeschrittene (2023, in our library)
• jasmine-dom matchers Show archive.org snapshot

Exercises

Integrate Jasmine

Integrate Jasmine into your MovieDB app and perform the following exercises.

Tip

If you've forked your MovieDB in the beginning, Jasmine is already integrated in your code base.

Movie counter

In Working with the DOM you implemented a button to count the number of movies in a list.

Write a Jasmine spec for that button.

Tip

• Create the required DOM directly from your Jasmine spec. You cannot ask Rails to render a view.
• You can use Element#dispatchEvent() Show archive.org snapshot to emit events on a DOM element programmatically. For click events there is also the shortcut element.click().

Loading elements after a delay

Use custom elements or Unpoly compilers to build a <delayed-load> element. It should afford an API like this:

Copy<delayed-load id="news" url="/foo" delay="5000">
  This will load soon...
</delayed-load>

It should work like this:

• After the given delay (5 seconds in the example), the component makes a request to /foo.
• The server is expected to respond with HTML containing an element with the same [id] (news in the example).
• The component parses the server response (using DOMParser) and extracts the element with the matching [id] attribute.
• The component replaces the <delayed-load> component with the matching element from the server.
• If the server takes more than 5 seconds to respond, no additional request should be made while another request is already pending. Once the response is received, the component should wait a full 5 seconds before making a request.

There are some edge cases to consider:

• When the server responds with a non-2xx status code, the inner text of <delayed-load> will be replaced by a message like Error 404 while loading.
• When the server does not respond with HTML containing an element with matching [id], the inner text of <delayed-load> will be replaced by a message like Element not found.
• When the element is removed from the DOM before the delay, no request is made.

Write Jasmine specs for every case.

Tip

• Don't actually wait for time to pass in your test. Instead, mock the time using jasmine.clock.
• Your specs should test which HTTP requests are sent by the component. Use Jasmine spies to mock the window.fetch() method, inspect its calls and return a promise for a Response Show archive.org snapshot .