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

Navbar E2E Test

Explore how to create and organize end-to-end tests for an Angular navigation bar using Cypress. Learn to write test suites for different navbar states, implement reusable custom commands, and verify user interactions like signup, logout, and page redirections. This lesson helps you understand Cypress command creation and how to test dynamic UI elements in a real-world Angular app context.

We'll cover the following...

Now that all of our tests are passing, let’s finish this chapter by writing the E2E tests for our navbar.

Navbar E2E test

First, create the file.

touch cypress/integration/navbar.js
Terminal 1
Terminal
Loading...

The above command creates a navbar.js file in the integration directory. Here is the updated code:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "lets-get-lunch": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/lets-get-lunch",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "lets-get-lunch:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "lets-get-lunch:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "lets-get-lunch:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "lets-get-lunch:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "lets-get-lunch:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "lets-get-lunch"
}
navbar.js file

Add first test suite

Within that file, we can write our first few tests.

  1. Similar to our previous E2E tests, start by configuring Cypress’s baseUrl.
  2. Direct Cypress to our home page before each test.
  3. Similar to our unit tests for NavbarComponent, create two describe blocks here for the two different states of our navbar.
  4. Test to verify that clicking the “Signup” link redirects us to /signup and that clicking the navbar brand directs us to the home page.
JavaScript (JSX)
// cypress/integration/navbar.js
describe('Navbar', () => {
  before(() => {
    Cypress.config('baseUrl', 'http://0.0.0.0:8081');
  });
  beforeEach(() => {
    cy.visit('/');
  });
  describe('a user who isn\'t logged in', () => {
    it('should show a link to signup', () => {
      cy
        .get('[data-test=signup]').click().url().should('include', '/signup');
    });
    it('should redirect to the base url when the navbar brand is clicked', () => {
      cy
        .get('.navbar-brand').click().url().should('include', '/');
    });
  });
  describe('a user who is logged in', () => {
    ...
  });
});

In our next set of tests, we need to be logged in to ...