Browser tests with Angular and Gitlab CI

Hello there.
Recently, I’ve been trying out the GitLab CI for my side project, where I am using Angular for front-end.
Before diving deep into development with Angular 4, I decided to see how it works with the GitLab CI, whether everything works fine out of the box.
As it turned out, I had a problem with running tests on Chrome. I will sum it up.

Preparing the project

Starting with baby steps, I have created an Angular starter app as per official quick start guide. I’ve run the specs for the application via npm test and somehow the test runner got stuck when running the tests. This problem was solved by simple change in package.json:

  "scripts": {
    ...
    "test": "ng test",
    ...
 }

was changed to this:

  "scripts": {
    ...
    "test": "ng test --single-run",
    ...
  }

Setting up CI and resolving issues

That was the first part. After that, I’ve added a simple .gitlab-ci.yml file, which enabled the GitLab’s CI. Here is the code for it:

stages:
  - test

before_script:
   - apt-get update -yqqq
   - apt-get install -y google-chrome-stable
   - apt-get install -y xvfb

test-frontend:  
  image: node:7.7.4
  stage: test
  script: 
    - cd angular-app 
    - npm install
    - npm build
    - npm test

There was a problem launching Chrome on the build runner:

A quick search didn’t provide me a solution to this, so I went a path of least resistance – I’ve switched the target browser to Firefox. In order to do so, I’ve installed Karma launcher for Firefox plugin via npm install --save-dev karma-firefox-launcher and importing the plugin in karma.conf.js:

 plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-firefox-launcher')
    ]

I’ve also modified the before_script of .gitlab-ci.yml:

before_script:
- apt-get update -yqqq
- apt-get install -y xvfb
- apt-get install iceweasel -yqq
- Xvfb :99 -ac &
- export DISPLAY=:99

And that worked out fine, browser tests passed on the runner.

Closing remarks

I’ve decided to describe this solution mostly because of myself – this time, instead of going a “tunnel-vision” approach and trying to run the tests on Chrome (I’ve devoted some time to it, but didn’t want to spend more on that), I’ve decided to switch the browser. This may seem trivial at first glance, but I sometimes get stuck in this “I have to make it work this way” mindset that I don’t get any new insight on the problem.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s