DEV Community

Obinna Ogbonna
Obinna Ogbonna

Posted on • Updated on

CircleCI Test Configuration for Angular Projects

One of the best ways to keep your project bug free is through a test suite, but it's easy to forget to run tests all the time. Continuous integration (CI) servers let you set up your project repository so that your tests run on every commit and pull request.

CircleCI is a paid service, but it is provided free for open source projects. You can create a public project on Github and add CircleCI without paying.


Configure project for CircleCI

  • Create a folder called .circleci at the project rootCircleCI Folder

  • In the new folder, create a file called config.yml with the following content

    version: 2

    jobs:
        # The test job
        test:
            working_directory: ~/project-name
            docker:
                - image: circleci/node:10-browsers
            steps:
                # Checkout the code from the branch into the working_directory
                - checkout
                # Log the current branch
                - run:
                    name: Show current branch
                    command: echo ${CIRCLE_BRANCH}
                # Restore local dependencies from cache
                - restore_cache:
                    keys:
                    - v1-dependencies-{{ checksum "package-lock.json" }}
                    - v1-dependencies-
                # Install project dependencies
                - run:
                    name: Install local dependencies
                    command: npm install
                # Cache local dependencies if they don't exist
                - save_cache:
                    key: v1-dependencies-{{ checksum "package-lock.json" }}
                    paths:
                        - node_modules
                # Lint the source code
                - run:
                    name: Linting
                    command: npm run lint
                # Test the source code
                - run:
                    name: Testing
                    command: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
                # End to End test
                - run:
                    name: End to End Test
                    command: npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js

Enter fullscreen mode Exit fullscreen mode

Circle CI configuration file

A Circle CI config file has 3 main components; a version, a list of jobs and a list of workflows.

The version is simply the Circle CI version that we are going to use.

A job can be compared to an independent environment for running a list of commands or steps. Common things you can achieve with a job include;

  • instaling the tools you need to run/build/test your project.
  • executing bash commands.
  • storing or restoring items from the Circle CI cache.

A workflow is a way to manage your jobs. You may need a job to run only on specific branches or at specific times, or you want some of the jobs to run in parallel and some in sequence. Workflow is where you make these configurations.

In our case, we have only one job; the test job. These are the attributes of the test job.

  • The docker attribute: Specify a docker image used to create the container of the environment. Circle CI comes with a list of pre-built images that you can find here
    docker:
        - image: circleci/node:10-browsers
Enter fullscreen mode Exit fullscreen mode
  • The working directory attribute: The current directory which will be the place where all the steps run.
    working_directory: ~/project-name
Enter fullscreen mode Exit fullscreen mode
  • The steps attribute: This is a list of steps (commands) that you want to run in the current job.
    steps
        # Checkout the code from the branch into the working_directory
        # Log the current branch
        # Restore local dependencies from cache

Enter fullscreen mode Exit fullscreen mode

There are a few types of steps we'll use in our configuration.

  • The checkout step: used to checkout the code from the current branch into the working directory.
    - checkout
Enter fullscreen mode Exit fullscreen mode
  • The run step: used to execute a bash command. You can specify a descriptive name which you are going to see in the Circle CI interface
    - run:
        name: Testing the project
        command: npm run test
Enter fullscreen mode Exit fullscreen mode
  • The save_cache step: used to store a cache of a file or a directory in the Circle CI storage. A common use case is to install the npm dependencies only once and then cache the node_modules folder using a hash of the package-lock.json (or package.json) file as the cache key.
    -save_cache:
        key: v1-dependencies-{{ checksum "package-lock.json" }}
            paths:
                - node_modules
Enter fullscreen mode Exit fullscreen mode
  • The restore_cache step; used to restore a cached item using the cache key.
    - restore_cache:
        keys:
            - v1-dependencies-{{ checksum "package-lock.json" }}
            - v1-dependencies-
Enter fullscreen mode Exit fullscreen mode

Putting the CI job into a workflow

In this case, we want to run the test job when we commit to develop, staging or the master branch. A workflow by default is triggered by pushing to any branch.

The test workflow has a filter attribute which is used to select the branches that it will run on. The code snippet is shown below

    workflows:
        version: 2
        # the test workflow
        test_workflow:
            jobs:
                - deploy:
                    filters:
                        branches:
                            only:
                                - develop
                                - staging
                                - master
Enter fullscreen mode Exit fullscreen mode

Add the workflow code snippet to the config.yml file, commit and push your changes. Your project is ready to build.


Configure CLI for CI testing in Chrome

When the CLI commands ng test and ng e2e are generally running the CI tests in your environment, you might still need to adjust your configuration to run the Chrome browser tests.

Follow the steps below to configure CLI

  • In the Karma configuration file, karma.conf.js, add a custom launcher called ChromeHeadlessCI below browsers:
    browsers: ['Chrome'],
    customLaunchers: {
        ChromeHeadlessCI: {
            base: 'ChromeHeadless',
            flags: ['--no-sandbox']
        }
    },
Enter fullscreen mode Exit fullscreen mode
  • In the root folder of your e2e tests project, create a new file named protractor-ci.conf.js. This new file extends the original protractor.conf.js
    const config = require('./protractor.conf').config;

    config.capabilities = {
        browserName: 'chrome',
        chromeOptions: {
            args: ['--headless', '--no-sandbox']
        }
    };

    exports.config = config;
Enter fullscreen mode Exit fullscreen mode

Now you can run the following commands to use the --no-sandbox flag:

    ng test --no-watch --no-progress --browsers=ChromeHeadlessCI
    ng e2e --protractor -config=e2e/protractor-ci.conf.js
Enter fullscreen mode Exit fullscreen mode

References

Top comments (2)

Collapse
 
spock123 profile image
Lars Rye Jeppesen

This is awesome - thanks!!

Collapse
 
obinnaogbonnajoseph profile image
Obinna Ogbonna

Thanks all for liking. Would really love to know your thoughts on this, in the comment section. Cheers!