Step 2: Add E2E Test

By default, Nx uses Cypress to run E2E tests.

Open apps/todos-e2e/src/support/app.po.ts. It's a page object file that contains helpers for querying the page.

Add the following two helpers:

export const getTodos = () => cy.get('li.todo');
export const getAddTodoButton = () => cy.get('button#add-todo');

Next, update apps/todos-e2e/src/integration/app.spec.ts.

import { getAddTodoButton, getTodos } from '../support/app.po';

describe('TodoApps', () => {
  beforeEach(() => cy.visit('/'));

  it('should display todos', () => {
    getTodos().should(t => expect(t.length).equal(2));
    getAddTodoButton().click();
    getTodos().should(t => expect(t.length).equal(3));
  });
});

This is, obviously, not a great example of an E2E test, but the purposes of this tutorial it will do.

If you haven't done it already, stop the ng serve command and run ng e2e todos-e2e --watch.

!!!!! What assertion fails? !!!!! Expect 0 to equal 2 Nothing fails. Everything works. Cannot find any elements matching 'li.todo' Cannot find any elements matching 'button#add-todo'

1.1 KiB Raw Blame History

Step 2: Add E2E Test

1.1 KiB

Raw Blame History