Angular 4 and testing: angular/cli + gitlab-ci + ng test + PhantomJS + TDD.

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

Sponsored by: www.letsboot.com

Check out our Angular In-House trainings or a public Angular courses.
Try out fossilo.com our angular project to archive complete websites.

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

Angular Continuous Delivery / Deployment with gitlab-ci, stage on commit and prod on git-tag

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:

1. Create a new angular/cli project
2. Write some simple tests and solve their exceptions(TDD)
3. Configure PhantomJS as Test-Browser
4. Put it on gitlab.com
5. Configure gitlab-ci.yml
6. 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.

Tip by Jonas Bandi: Stay on @angular/cli 1.0.6 to use debugging in your karma tests till the linked issue is solve.

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:

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

Let’s solve the tests:

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

Booom!!!! You used test driven development.

Let’s Install PhantomJS

1. open terminal in project folder “letslearn”
2. 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.

1. Open “src/polyfills.ts”
2. 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!