TestingEnd-to-End Tests
End-to-end tests are tests that mimic user behavior in the browser. Quite literally, an end-to-end test simulates the opening of a browser, visiting URLs, and interacting with your application as your tests specify.
In Pup, end-to-end tests are defined and run using the TestCafe framework. Tests are written alongside the UI they're testing in a file called index.e2e.js
. The .e2e.js
part is significant as the framework used to write and run end-to-end tests, TestCafe, is configured to look for files with this naming convention.
On the right, an example end-to-end test from the <Login />
page component in Pup is displayed. Here, a test is being performed to check that users are redirected to the /documents
page in Pup after they've logged in.
To start the test, the fixture()
method from TestCafe is called, passing the name of the test suite (a group of related tests) as a string. Next, the .page()
method is called on the fixture()
to designate what URL testing should originate from.
Next, the actual test()
is written, with the name/description of the test passed as a string, followed by a function to call to run the test. Notice that the async
keyword is used here to designate that our test contains the await
keyword. This tells JavaScript—and by extension, our test—that we should wait on the code with the await
keyword in front of it before moving to the next instruction.
Here, we await
the login()
function to complete before calling browser.expect()
, passing the getPageUrl()
helper. Chained on the end of this, the .contains()
method is an assertion (the actual test being performed) which returns a boolean true
value if the value returned by the getPageUrl()
contains the string /documents
.
Testing JavaScript Course
If you're looking to dig deeper into the what, why, and how of testing in JavaScript, the Testing JavaScript course by Kent C. Dodds is highly recommended.
import { login, getPageUrl } from '../../../tests/helpers/e2e';
fixture('/login').page('http://localhost:3000/login');
test('should allow users to login and see their documents', async (browser) => {
await login({
email: 'user+1@test.com',
password: 'password',
browser,
});
await browser.expect(getPageUrl()).contains('/documents');
});
Running End-to-End Tests
To run your end-to-end tests, the test-e2e
NPM script should be used.
meteor npm run test-e2e