End-to-End Tests for Angular Universal Applications#

Let's move on to end-to-end (E2E) testing. Unfortunately, Angular does not support Universal E2E tests out of the box. If you run the npm run e2e script right now, Angular will only build and test a production version of the browser application, ignoring the server-side part.

Running Protractor tests with your Universal application#

Before running Protractor tests against your Universal application, you need to build and start it up. Install an additional dependency:

npm i -D concurrently

Now, add a new script, serve:e2e, to package.json:

"serve:e2e": 

"npm run build:ssr && concurrently \"PORT=4200 npm run serve:ssr\" \"npm run e2e\" --kill-others --success first"

Moreover, because you're going to run the Angular Universal application instead of the browser-side build, adjust the angular.json file and remove the projects.my-universal-app.architect.e2e.options.devServerTarget entry:

"devServerTarget": "my-universal-app:serve"

Testing TransferState#

Open e2e/src/app.po.ts and replace its content with the following code:

import {

  browser,

  by,

  element,

  ElementArrayFinder,

} from 'protractor';

export class AppPage {

  async navigateTo(): Promise<void> {

    await browser.get(browser.baseUrl);

  }

  getProducts(): ElementArrayFinder {

    return element.all(

      by.css('app-products-list app-product-details')

    );

  }

  getTitleText(): Promise<string> {

    return element(

      by.css('app-header strong')

    ).getText() as Promise<string>;

  }

}

The code above introduces two getters:

• getProducts() returns the list of products displayed on a page.

• getTitleText() returns the application title.

You've also modified the navigateTo() method to wait for the page to load synchronously.

Now you need to prepare code that will be responsible for retrieving objects from the TransferState registry. Create a new file, e2e/src/utils.ts, and add the following code to it:

import { by, element, ElementFinder } from 'protractor';

export class Utils {

  public static async getTransferStateStore() {

    const cacheScript: ElementFinder = await element(

      by.id('serverApp-state')

    );

    const rawValue: string = await cacheScript.getAttribute(

      'textContent'

    );

    return JSON.parse(this.unescapeHtml(rawValue));

  }