Angular Unit Testing pt.3

Set Up

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

Angular Unit Testing

Continuing from the second article in this series, we are now ready to create a service with unit tests.  First, we will install a package that will allow mocking data.

Open a command prompt and go to working directory

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

Install json server in order to create a mock data service

npm install -g json-server

Add a file to the root directory for returning mock data

Right-click>new file then type “mockdata.json”

Then copy this json data into the file and save

 

{"books" : [ {"id": 1,"rpice" : 14.95,"name" : "The Great Gatsby"},{"id": 2,"age" : 19.99,"name" : "To Kill a Mockingbird"}],"comments" : [{"id": 1,"date" : "03-18-2016","message" : "Great book!"},{"id": 2,"date" : "06-21-2017","message" : "A true classic!"}]}

 

 

Run the json server to test the api, type this in the command window

json-server –watch mockdata.json

You should see the server running to reveal 2 endpoints

Open a browser and type in the endpoints to see the data

Great, our mock data service is working!

Add a service to the project for the registration component
Open a command prompt and go to the project app directory:

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

Enter the following to create a service named “registration”

ng g service registration

You should now see 2 new files added – registration service and its unit test file

In registration service, create a function that returns the mock data, include the imports at the top, include the url from the mockdata service along with the getBooks function

In registration component, call the getBooks function in onInit, include the registrationService in the constructor in order to use it, include RegistrationService in the import section

Open the RegistrationService and create a unit test for the service that will test that the correct action “GET” and the correct url is being called, include the code in this screenshot to set up the test

Open app.component and be sure to add HttpClientModule

Add HttpClientModule to the registration component import section beforeEach

Open a command prompt and go to working directory

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

Enter command to start the unit tests

ng test

You will see the browser open and show the 5 tests have passed, including the registration and service tests

While debugging, you probably do not want every test to run, add “fit” in front of a test and only that test will execute

Now you see that only showResults should set resultsExist to true executed

If you want all tests in a single file to run, instead of all tests, open the test.ts file

Add the name of the component you want to test on line 18

Save, you will see the tests refresh and only execute registration component tests have run

That’s a lot of information for now.  More to come in the next article that will include debugging unit tests.

Json server

Created for front-end developers who need a quick back-end for prototyping and mocking.

More information on json server

HttpClientModule

Configures the dependency injector for HttpClient with supporting services for XSRF. Automatically imported by HttpClientModule.

More information on HttpClientModule