Learn Front-End Development and Automated Testing with Angular/

...

/

E2E Tests for Event Creation

E2E Tests for Event Creation

Let's add an E2E test to test our event creation functionality.

We'll cover the following...

With our feature now complete, we can move on to writing the E2E tests. First, create a new file for our feature.

touch cypress/integration/event-create.js
Terminal 1
Terminal
Loading...

Here is the updated code after creating the file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
event-create.js file

Configuration

Add the initial setup for the tests.

  1. Configure Cypress and clear the database before each test, as usual.

  2. Create a new user by using our signup command, select the “New Event” button on the dashboard, and click it with the expectation that the URL is now /event/.

Press + to interact
// cypress/integration/event-create.js
describe('Event Create', () => {
  before(() => {
    Cypress.config('baseUrl', 'http://0.0.0.0:8081');
  });
  beforeEach(() => {
    cy.request('DELETE', 'http://0.0.0.0:3000/api/test');
  });
  beforeEach(() => {
    cy
      .signup()
      .get('[data-test=new-event]').click()
      .url().should('include', '/event');
  });
});

E2E tests

Let’s add our first test for a successful form submission.

Test case: successful submission

This test is a bit denser than our previous ones, so there are some comments here for some additional details.

  1. Verify that the success message isn’t visible.

  2. Select the title and description inputs, adding text to both.

  3. Select the location input, add a city, and use the ...