=> Please follow us on Twitter & Medium for more!

Sponsored by: www.letsboot.com

Update: I recommend to use Chrome instead of PhantomJS — read here to learn how to do that:

Always start your projects with continuous integration and testing. Thanks to angular/cli, gitlab-ci and PhantomJs it’s so much fun.

(The snippets may contain /*…*/ which means I removed code for readability — don’t remove that code in your scripts, only copy what you need.)

What will we do:

Create a new angular/cli project Write some simple tests and solve their exceptions(TDD) Configure PhantomJS as Test-Browser Put it on gitlab.com Configure gitlab-ci.yml Watch the pipeline for continuous integration and smile

Create and run app:

Install https://nodejs.org/en/

Install https://code.visualstudio.com/

Install @angular/cli and create new app:

Now the default app shows in Browser.

Use Test Driven development:

We want:

Change the title to “Letslearn”

To show a value “points”

Button “plus1” that increases this number

Let’s write the tests:

Run “ng test” in a new terminal and keep it running Open “src/app/app.component.spec.ts” Adapt existing tests to look for new title: “Letslearn” Add a test that clicks a button and checks if “points” is increased by one.

Let’s solve the tests:

Open “src/app/app.component.ts” Change “title” variable to “Letslearn” Add “points = 1;” variable Add plus1() function that increases this.points++ Open “src/app/app.component.html” Remove all code Add title<h1>{{title}}</h1> Show {{points}} Add <button> and bind (click) to plus1 Check if “ng test” is still running and if the tests succeed

Booom!!!! You used test driven development.

Let’s Install PhantomJS

open terminal in project folder “letslearn” Install packages required by phantomjs:

npm install --save-dev phantomjs-prebuilt karma-phantomjs-launcher

npm install --save intl

Enable Polyfills needed by PhantomJS

PhantomJS browser needs so called polyfills to run all the nifty JS features used by Angular.

Open “src/polyfills.ts” Enable big polyfills block at the top and the intl related ones at the bottom

Add PhantomJS to your karma.conf.js

Add the karma-phantomjs-launcher plugin to the karma.conf.js and add PhantomJS in the browser list:

Run Test with PhantomJS

ng test --browser PhantomJS

This will run PhantomJS instead of Chrome. We need PhantomJS for continuous integration on gitlab-ci.

Add “.gitlab-ci.yml” configuration

Create new file “.gitlab-ci.yml” and configure basic test:

Example with separated build and test jobs by Clayton K. N. Passos.

Create gitlab project:

https://gitlab.com/projects/new

Add your ssh key to gitlab if you didn’t do that yet:

https://gitlab.com/profile/keys

- you get it here “cat ~/.ssh/id_rsa.pub”

- run “ssh-keygen” if you don’t have one

Copy git url: git@gitlab.com:XXyour_userXX/XXyour_projectXX.git

Upload your project:

Checkout your pipeline

https://gitlab.com/XXyour_userXX/XXyour_projectXX/-/jobs

Click on the icon to the left (either passed, running or pending) and look at life output:

This will make you feel very happy! Integrate it in your projects, do it, celebrate it and you’ll have a totally different feeling in life! You’ll walk the streets bold and know your TDD rocks with CI.

Next Step: Continuous delivery with deployment to firebase, google cloud, now, surge or whatever feels right to you.

=> Please follow on Twitter & Medium for more!