Running Tests in Docker for Front-end Developers (ng2+)

By -

Unit tests (karma/jasmine) & End-to-end tests (protractor)

If you are comfortable with Docker and Angular 2, all you need is the Dockerfile. If you are new to testing in Docker, this short article will bring you up to speed. If you need more help getting up to speed with Docker, begin with my previous article: Docker for Angular 2 devs.

Installation 

In order to develop Angular 2+ in a container, you need to install Docker on a computer or VM. Docker takes a bit of memory and can take a lot of space so the biggest box you can give it is best. Once Docker is installed, start is up.

Make sure all your docker commands are run from the folder that contains the Dockerfile.

Dockerfile 

Docker works by reading the description of a Dockerfile (or several in conjunction), to build out an image. Once the image is running, it is called a container.

This particular Dockerfile is based on a Docker image that already has headless chrome, markadams/chromium-xvfb-js:7. There are several Dockerfiles at Docker hub for headless chrome. If this base image or my additions do not work, feel free to play around with other Dockerfiles. You will find references/websites at the bottom of this article.

What Does this Dockerfile do 

This Dockerfile installs the angular2-webpack-starter (and all dependencies). I use it as a development environment that I connect to and run the tests myself as I develop. I'm using the angular2-webpack-starter as my base test that the Dockerfile has all the needed dependencies to complete both the unit tests and the end-to-end tests successfully.

If the starter can run both types of tests, it should be fairly straightforward to add your own repository to the container for development and testing. The container has the full stack for this: Git, NPM, Yarn, Node, and Angular+, ng-cli, Webpack, Karma, Jasmine, Protractor, http-server.

Why use the angular2-webpack-starter?

I wanted an Angular 2+ project that used as much of the same stack as my current projects that also had unit tests and e2e tests. In order to validate I have the right Dockerfile configuration, all I have to do is run both types of tests in this repository. If they succeed, my own tests for my own projects should succeed as well.

Can I see it working?  

Yes, I have a short 4 minute video showing it from building the docker image to the final e2e test run. I've cut out 11 minutes of Docker building the image as there is a lot of installation of dependencies.



Using as a Development Environment 

I use this container as my main development & testing environment. I share my local repository folder into the container with the –v param and expose a small range of ports to allow for several front-end and api servers to run at once.

The angular2-webpack-starter runs on port 3000 so I open 3000-3005. This allows you to use your host computer to access the website (http://localhost:3000) as long as the port isn't in use on your host machine.

What are the important parts of the Dockerfile?  

There are definitely packages and settings in the Dockerfile you may not use, but there are a few you need to keep.

Protractor needs to know where the Chrome bin directory is. If you remove that environment variable, Protractor will not be able to run the tests. Protractor also needs the default-jre.

Getting karma/jasmine tests working in a container using headless chrome seems to be easy compared to protractor e2e tests. If you change the file, always use the protractor e2e test run as the verification that the change did no harm.

Git Commit Hash 

Since the repositories for both my Dockerfile and the angular2-webpack-starter will change over time, I'm noting the git commit hashes of the versions I used.

https://github.com/AngularClass/angular2-webpack-starter
commit e9521a42  - Sat Apr 22 19:27:33 2017 -0400

https://github.com/dfberry/DockerFiles/blob/master/headless-chromium/Dockerfile
commit 38b7554c Sun Apr 30 13:23:17 2017 -0700

References 

https://github.com/mark-adams/docker-chromium-xvfb
https://hub.docker.com/r/yukinying/chrome-headless/
https://hub.docker.com/r/justinribeiro/chrome-headless/

Popular posts from this blog

Yet once more into the breech (of altered programming logic)

By -
Once upon a time, long long ago, I wrote 8-bit programs in Tiny-C with absolute addressing being the only reality.  Then we had Borland Turbo-C with relative addresses and the joys of relative assembly jumps. Enter Windows and the joys of locking and unlocking memory blocks that you must allocated and manage yourself. Then came Visual Basic which evolved into .Net CLR and decreasing awareness of what is happening under the hood.   With VS2010 including F# and enhanced parallelism in .Net4, we actually have to go retro a bit – back to the world of having to understand the hardware. CPU speeds are no longer increasing – I have an old laptop from six+ years ago that ran at 3.2 GHz. This year I updated one of my machines off-the-shelf from Costco.com, an I7-920 with 4 cores and hyper-threading (8 CPUs appears in Task Manager) and 12 GB of DDR3 RAM. This week I ordered from Costco a Phenom II X6 (Yes – 6 REAL CORES) for one of my daughters.  This CPU will (according to YouTube demos) o
Read more

Simple WP7 Mango App for Background Tasks, Toast, and Tiles: Code Explanation

By -
Image
This is a continuation of this post , explaining how the sample app works. Caution : This sample isn’t meant as an example of best patterns and practices. If you see something in the code you would never do, then don’t. Solution File Organization The app has three Visual Studio Projects: the app, the agent, and the shared code library between them. One of the great things about Mango is that now the built-in Visual Studio Unit test functionality is available. By separating out the meat of the work into the SampleShared project, I can also focus my unit testing there. SampleApp1 The app has a MainPage, a ViewModel, and the WMAppManifest.xml file modified to note my ExtendedTask of BackgroundServiceAgent. The Agent is extremely simple with a call to the shared library, an update to the Tile, and a call to pop up Toast. The meat of the work is in the SampleShared library. The AgentMgr manages the background agent : add, remove, find, run now. It is only called f
Read more

How to convert SVG data to a Png Image file Using InkScape

By -
Image
Introduction The project required the need to put the visual pie chart on a web page on the client and in a Pdf file created on the server. I eventually choose to use a Telerik Kendo DataViz Chart control on the client, and use a PNG file on the server for the Pdf file. This blog post will explain the process and code to convert the client-side pie chart Svg data to a Png file, and provide a download to the working code. Prerequisites You need to have a trial version of the Telerik Kendo library installed in order to make the sample code work. You also need InkScape installed. InkScape is the application that does the actual conversion. You will need to change the Web.config appSetting of “ExeDirectoryForInkscape” to represent your own installation location. Any SVG Data Will Work The pie chart was created using the Telerik Kendo DataViz chart control. While I name a specific control, as long as you have access to the SVG data, the same conversion process on the server will
Read more