Unit tests for the root app 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/seed-ng4-and-unit-tests
In the previous task, we configured our Karma-Jasmine-Typescript-Webpack setup to get us started with writing our unit tests using typescript with Jasmine framework, get those pre-processed with webpack and run with Karma.
With that setup done, lets write and run our first angular test for the root app component we created in Task 1.
- Setting up Angular Testbed for our unit tests:
In the previous task, we configured karma.conf.js and webpack-test.config.js to start packing our tests from the entry point file - ./src/unit-tests.ts .
So, lets set up Angular testbed for our unit tests in this file.
In ./src/unit-tests.ts, import TestBed and initialize the testbed’s testing environment with BrowserDynamicTesting.
We also need to import core-js and zone.js for ES6 polyfills for phantom.
Update the file as below (I got the code from seeder project generated by angular-cli)
Note line #28 above where all the spec.ts files are being imported, added to the context and then karma started to run the tests.
2. Next, lets write unit tests for the root app component.
In the folder ./src/components/app , create a file app.component.spec.tswith the below tests:
3. Now, run the test using the command npm run test.
Yay! 👏 we got our root app component’s unit tests up and running.
