Unit Test for ‘app-header’ component

- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/add-header-component

In the previous task, we added a new component app-header to our application.

In this task, we’ll add unit-tests for this app-header component.

But before that, lets first fix the unit-tests of our root component app-root that got broken after we added app-header component to its html template file.

1. Because we are now using app-header in the html template of app-root component. we have to register this component in the unit-test of app-root as well.
   So update app.component.spec.ts file as below:

👆 line#4, we imported the app-header component and then, on line#11, we added the component in the declarations array when configuring the testing model.

2. Now run the unit tests from command prompt:

npm run test

As we see in the screenshot above, we are back on track with the unit-tests of app-root component working 👍.

Unit tests for app-header component

1. Under the ./src/common/components/app-header folder, add the specs file app-header.component.spec.ts with the below test cases:

👆 line#21–22, note how we are getting the instance of the created object and setting its input property title for testing purpose.

Save the file, and , if not already running, run the command npm run test from the command/terminal and we should now see 4 unit tests passing:

Alright, now that we got the app-header component and its unit tests working, lets now set up using bootstrap for styling our app as our next task