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.

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