Angular Unit Testing pt.2

Set Up

If you do not already have a basic Angular CLI project, check out Installing Angular CLI

Create and Execute Unit Tests

Open Visual Studio Code

File>Open Folder> C:\proj\tutorials\unittests\angular-testing > Select Folder

Expand the src>app node to show the app.component.

Open a command prompt and go to the project app directory:

Cd C:\proj\tutorials\unittests\angular-testing\src\app

Create a new component named “registration”

ng generate component registration

You should now see the new registration folder and components

Show the registration component in the app by adding it to the bottom of the app.component.html, remove the other links which are not necessary:

Run the ng serve command to build and run the code in a browser

ng serve -o

A browser should open with the basic Angular app with the registration component showing

Add the RegistrationComponent to app.component.spec.ts, delete everything else

Go back to the command line and hit Ctrl + C to stop the server, then type “y”

Type command to execute tests

ng test

The browser will open and should show a successful test run

Create a variable ”resultsExist” and 2 functions in RegistrationComponent to hide and show results

Default the variable ”resultsExist” to false

Open registrationcomponent.spec.ts

Add “showResults should set resultsExist to true” and “hideResults should set resultsExist to false”

You should now see the results of the 3 tests that are in registration.component.spec

It’s that simple.  You have just created 2 basic unit tests for the registration component!

More information on the unit tests

Our test component file “registration.component.spect.ts” was created for us when we created the registration component with the command “ng generate component registration”.

describe(‘RegistrationComponent’)…

The word “describe” starts a test block.  In this case, it is starting tests for the registration component, in other words, “for the registration component, include these tests”.  In the next tutorial we will be adding more test blocks.

beforeEach

“beforeEach” sets the dependencies before running the tests that follow.  You can see that it is setting the “fixture” variable to the component while creating it.  Then it is setting the “component” to the actual instance so we can use it to test methods.  Finally, we are executing detectChanges which triggers change detection where Angular checks property bindings.

‘should create’ – The first unit test provided by default

This test is given to use by default when the test file is generated.  It simply does a check to make sure the component is created.  Although it is simple, this test will fail if the file is missing a dependency, for example.

‘showResults should set resultsExist to true’

This is one of the tests that we created above.  First, we are calling the showResults method on the RegistrationComponent, then we are “expecting” the “resultsExists “variable to be true.

 

These are very simple tests just to get started.  Stick around for some more examples of how to set up more complicated tests and dependencies.