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

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');
  });
});
...