End-to-End Testing

When creating or updating a core feature in ToyNet, it is expected to update or create an e2e test for it. Cypress is used for e2e testing of ToyNet. The end-to-end tests, test the working functionality between the frontend, backend, and mininet.

Folder and File Structure

|-- toynet-react
  |-- cypress
    |-- fixtures // static data that can be used with tests
      |-- integrations // Test files
        |-- toynet // e2e tests for specifically for ToyNet
      |-- plugins
      |-- screenshots // screenshot results from the tests
      |-- videos // video results of the tests
      |-- support // place for custom commands

Writing an e2e Test

Cypress looks for tests in cypress/integration directory and runs any files that match the *.spec.ts.

If the feature being created is part of a file that is already created, simply add a new it block to the top level describe. If the feature is part of a brand new page, then create a new file called {page name}.spec.ts and add a new describe block to the top level.

splash_screen.spec.ts

describe('The splash screen page', () => {
  it('should contain a link to the emulator', () => {
    cy.visit('http://localhost:3000/');
    cy.contains(/try it/i).click();
    cy.url().should('include', 'emulator');
  });
});

Running e2e Tests

It is best to run e2e test in the same way that the app will be deployed. ToyNet uses docker containers for this.

1. Run npm run start:cypress:test to start the frontend, backend, and mininet services using docker compose.

2. Run Cypress

   1. To run all of the e2e tests run npm run cy:run this will run Cypress headless.

   2. To run individual tests run npx cypress open and select the spec file to run.