Automated Testing in Angular: IntroductionAuthor: Gergely Bikki

This is the fifth, and also final post in the Automated Testing in Angular series:

In the previous posts we have discussed the different types of automated tests, how they are written and what traits they have. There is one thing that we have not covered in this series yet: executing the tests in different environments and publishing the results in form of reports.

There is a good chance that you have already used npm test or npm e2e to execute your tests in your development environment. Executing these commands have opened the Chrome browser with the Karma runner for you, executed the tests and then waited for any changes in the code. While this behavior is perfectly fine for your development machine, it will not work on a build server since:

  • it has no visual interface, so it cannot open a browser window,
  • it has limited terminal interactivity, so it cannot display progress correctly,
  • it has no interest in waiting for code changes, so it would hang there indefinitely.

The good news is that there is a simple solution for all these!

Executing unit tests on a build server

The Angular team has already dedicated a section to this problem in their official documentation.

We have to setup a headless Chrome configuration for CI. You probably already have the browsers array in your karma.conf.js file, so you will need to append only the customLaunchers section:

browsers: ['Chrome'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},
          

After adding the custom launcher, we can execute the unit tests using the following CI-ready command:

npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
          

Executing e2e tests on a build server

In the previous post we have discussed that executing e2e tests is a two-step procedure:

  1. we have to launch the development server using npm start in the first terminal,
  2. we have to execute the e2e tests using npm run cypress in the second terminal.

This plan will not work in on build server, since we can usually launch only one command at a time and we would not be able to launch the second command until the first one finished.

However, there is a very useful tool that helps us overcome this issue. The npm package is called start-server-and-test and it basically does what the name says: first it launches the development server, then it runs the e2e tests concurrently and finally it shuts down the development server gracefully.

The following command is CI-ready and can be used without any additional changes:

start-server-and-test start http://localhost:4200 "cypress run"
          

In case you are executing the tests in a Docker container, make sure you are using the Cypress version of the node image, so you won’t have to bother with dependency installation: https://docs.cypress.io/examples/examples/docker.html

Publishing the results of automated tests

Let’s be honest here for a second: reviewing test results always requires some knowledge of reading the terminal output and is not the most appropriate option for convincing the business department that everything works. They like charts, diagrams, the green color, checkmarks, percentage signs and many more.

So how could we communicate the test results to them in a more business-friendly manner?

If you are using a CI pipeline, there is a good chance that the pipeline has built-in support for parsing generated reports and then displaying them on a nice interface. JUnit-styled XML reports are one of the most popular solutions and we going to proceed by setting up test reporters for this.

You might have to point the pipeline at the folder of the reports in case it does not pick them up by default. You should check the documentation always to be aware of the pipeline settings.

JUnit-styled reports for unit tests

JUnit reports are not supported by default in the Karma runner, so we will have to manually install the plugin and enable it.

We have to install the JUnit reporter for Karma:

npm install karma-junit-reporter --save-dev
          

We also have to edit the karma.conf.js file, register the plugin, enable the reporter and set the output directory of the reports:

module.exports = function (config) {
  config.set({
    plugins: [
      require("karma-junit-reporter")
    ],
    junitReporter: {
      outputDir: "reports",
    },
    reporters: ["junit"]
  });
};
          

And we are done :)

If you run npm test, you will have a reports/ directory with the XML report in it.

Don’t forget to add reports/ in the .gitignore file!

JUnit-styled reports for e2e tests

Cypress has built-in support for JUnit-styled reports, which means we can use the command line to enable the reporter:

cypress run --reporter junit --reporter-options "mochaFile=reports/e2e.xml,toConsole=true"
        

You will also want to update the cypress run command in the CI-ready command for e2e tests like this:

start-server-and-test start http://localhost:4200 "cypress run --reporter junit --reporter-options \"mochaFile=reports/e2e.xml,toConsole=true\""
          

Summary

You made it this far with us? Congratulations!

We have reached the end of this series. After a brief introduction to the testing methodology, we have explored how to build behavior-driven tests and replace Protractor with Cypress. Seeing our test results on a nice and clean interface is just as important as writing maintainable test suites.