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:
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"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:
"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:
This page is a preview of The newline Guide to Angular Universal