Angular Unit Testing pt.2
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:
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
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
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”.
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” 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.