Angular Unit test

medium.com/swlh/angular-unit-testing-jasmine-karma-step-by-step-e3376d110ab4

Angular: Unit Testing Jasmine, Karma (step by step)

TDD(Test-Driven development) 방식 : 테스트 접근 방식 

 

Benefit of Unit Testing

•  Improve th design of implementations : Starting coding a feature without giving it lot of thought to th design is a very common mistake amon devlipers.
•  Allows refactoring : Since you already have tests that ensure that everything is working as expectd.
•  Add new features without breaking anything : When you are adding a new feature you can run the tests to ensure that you ain't breaking any other part of th application

Create an anugular project with jasmine and karma

 

As the angular team recommends we are going to angular-cli to create our app.

 

Install angular-cli and create a new project

• npm install -g @angular/cli
• ng new angular-unit-testing

let's go through the more important ones;

• jasmine-core : jasmin is the framework we are going to use to create our tests. It has a bunch of functionalisties to allow us the wirte different kinds of tests.
• karma. karma is a task runner for our tests. It uses a configuration file in order to set the startup file, the reporters, the testing framework, the browser among other things.

To run the test you only need to run the command "ng test"

 

Karma config

• framework: this is where jasmine gets set as a testing framework. If you want to use another framework this is the place to do it.
•  reporter: this is where you set the reporters. you can change them or add new ones.
• autoWatch : if this is set to true, the test run in watch mode. If you change any test and save the file the test are re-build and re-run
• browers : this is where you set the browser where the test should run.

Test entry file

The angular -cli configuration of karma uses the file test.ts as the entry point of the test for th application.

• An environment to run angular tests is being created using all the imports at the beginning of the file.
• Testbed is a powerful unit testing tool provided by angular. 
• Finally, karma loads all the test files of the application matching their names aganist a regular expression. All files inside our app folder that has "spec.ts" on its name are considered a test.

On first step

• We import all the angular testing tools taht we are going to use.
• we import all the dependecies that this component has.
• we use a "describe" to start our test block with the title matching the tested component name.
• we use an asyn before each. the purpose of the async is to let all the possible asynchronous code to finishe before continuing.

For app.component we need to configure a dummy routes module and use a provider to set the base href, without this the test is not going to compile because we are setting the routing module and it needs a base href.

 

1. In the first test, we are cheking that the component actually contains the expected text in the title property.
2. firstm we need to have an instance of the app.compoenet, for what we use the create component function of the angular testbed, as a result, we gat a fixture object that is going to allow us to cratee an instance of that component
3. Now that we have an instance of app.component we can check the value in the text property an make jasmine expect to be equal to the expeced value
4. the second test does someting similar but it checks that the dom renders the text property.
5. it does the same as the oter test, gets the app.component fixture, then it executes the detect function, the function applies component changes to the HTML
6. Then it gets the native element of the complied HTML 
7. Finally, we select the h1 containing the "text" value and expect that the slected HTML contains the expected value.

Test code