Angular Unit Testing

Attending the NG Conf in 2018 was quite an experience.  The organizers did an amazing job delivering a alot of good information along with some great presentations.  However, information related to unit testing was a bit sparse.  Throughout the conference I met a few people and had some good discussions on this topic.  Considering my experience at the conference, and taking away what I have learned, I put together a small series of tutorials aimed at getting someone started on testing as well as some examples on unit testing Angular components.  Let’s get started:

Installing Angular CLI

1. Download and install npm from here

2. Create a folder for a new project

ex: “C:\proj\tutorials\unittests”

3. Open a command prompt and go to that folder

cd “C:\proj\tutorials\unittests”

4. Type this command to install the latest version of the CLI
npm install -g @angular/cli



5. Create your new project, e.g. “angular-testing”
ng new angular-testing


This will create the project and install all the dependencies needed to create tests.

In command window, make sure you are in the project directory

6. Run the ng serve command to test the install and you should see that the code compiled

ng serve -o

A browser should open with the basic Angular app

That’s it!

NPM

Npm is the package manager for node.js.  It is used to help developers easily share package modules.

More information on npm

Angular CLI

Angular CLI is a command line interface for Angular.  It is used to create and maintain Angular applications.  When installing the Angular CLI, Jasmine and Karma are configured by default to use for testing.

More information on Angular CLI

Jasmine

Jasmine is an open source testing framework for JavaScript.  It does not come with a built-in test runner.

More information on Jasmine

Karma

Karma is a JavaScript test runner that provides tools to work with Jasmine from the command line.  It will run in a browser and execute the Jasmine tests.  The results of the test will show in the command window as well as the browser.

More information on Karma