E2E - testing TransferState

In this lesson you will learn how you can verify the TransferState registry content in your E2E tests.

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:

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

Notice that you've set up the environment variable PORT to value 4200. You need to do that, because by default production build of Angular Universal is running on port 4000 while your protractor tests are looking for the app on port 4200.

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:

Testing TransferState#

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

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:


This page is a preview of The newline Guide to Angular Universal

No discussions yet