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:
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.
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:
- 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!