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.
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.
await wait()
to observe the effects of an async function.Jasmine für Fortgeschrittene
(2023, in our library)Integrate Jasmine into your MovieDB app and perform the following exercises.
Tip
If you've forked Show archive.org snapshot your MovieDB in the beginning, Jasmine is already integrated in your code base.
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. Forclick
events there is also the shortcutelement.click()
.
Use custom elements or Unpoly compilers to build a <delayed-load>
element. It should afford an API like this:
<delayed-load id="news" url="/foo" delay="5000">
This will load soon...
</delayed-load>
It should work like this:
/foo
.[id]
(news
in the example).DOMParser
) and extracts the element with the matching [id]
attribute.<delayed-load>
component with the matching element from the server.There are some edge cases to consider:
<delayed-load>
will be replaced by a message like Error 404 while loading
.[id]
, the inner text of <delayed-load>
will be replaced by a message like Element not found
.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 aResponse
Show archive.org snapshot .