Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

E2E Tests for Event Creation

Explore how to create end-to-end tests for event creation in an Angular application using Cypress. Learn to configure tests, handle user interactions with forms, simulate successful and failed event submissions, and validate responses to ensure reliable application behavior.

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/.

Javascript (babel-node)
// 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 ...