How to Test Angular Applications on AWS CodeBuild

Takahiro Iwasa

May 4, 2020

3 min read

Angular CodeBuild

Testing Angular applications in CI/CD pipelines is essential for ensuring quality and reliability. AWS CodeBuild, combined with Headless Chrome, provides a robust platform for executing automated tests efficiently. In this post, we will walk through the configuration and commands required to run Angular tests on CodeBuild.

Before proceeding, ensure the following requirements are met:

• An AWS CodeBuild Project is set up with appropriate permissions.
• Your Angular application is configured with @angular/cli.

The buildspec.yml file defines the commands and phases for CodeBuild. Below is an example configuration tailored for Angular testing:

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g @angular/cli
      # Install puppeteer as a dev dependency
      - npm i -D puppeteer
      - npm i -D @angular-devkit/build-angular
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Upgrade apt
      - apt-get upgrade
      # Update libs
      - apt-get update
      # Install apt-transport-https
      - apt-get install -y apt-transport-https
      # Use apt to install the Chrome dependencies
      - apt-get install -y libxcursor1
      - apt-get install -y libgtk-3-dev
      - apt-get install -y libxss1
      - apt-get install -y libasound2
      - apt-get install -y libnspr4
      - apt-get install -y libnss3
      - apt-get install -y libx11-xcb1
      # Print out missing libs
      - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | grep not
      # Install project dependencies
      - npm install
  build:
    commands:
      - echo Testing started on `date`
      - ng test --watch=false --browsers=ChromeHeadless

• Headless Browser: The --browsers=ChromeHeadless flag (line 35) ensures tests run in a headless Chrome environment, ideal for CI/CD pipelines.
• Dependencies: Installing libraries like libgtk-3-dev and libx11-xcb1 ensures compatibility with Chrome in a headless environment.
• Debugging: Using ldd to check for missing libraries before and after installation helps troubleshoot common issues.

When running the above configuration, you may encounter the following error:

[1889:1889:0502/194708.787545:ERROR:browser_main_loop.cc(1512)] Unable to open X display.

To resolve this, confirm that all required dependencies are installed, as shown in the install phase of the buildspec file.

• Use Headless Chrome: Optimize CI/CD pipelines by avoiding the need for a display server.
• Test Dependency Updates: Regularly update library versions in buildspec.yml to avoid compatibility issues.
• Monitor Test Coverage: Integrate tools like Karma or Istanbul to track code coverage over time.
• Parallel Builds: Configure CodeBuild to run parallel builds for faster feedback during testing.

By following the steps outlined above, you can seamlessly integrate Angular testing into your AWS CodeBuild pipelines, ensuring reliable and consistent application quality. With proper configuration, running tests in a headless environment becomes straightforward and efficient.

Happy Coding! 🚀