The First Step to Write Angular Unit Test Cases

If you want to check that your application is working fine, the best way to follow is Unit Testing. It helps you to maintain your code and increase the code quality. Here we are going to start writing unit test cases for your code from the beginner level. In this blog post, we are talking about the test case writing for components and services.

Component Class Test Case Writing

Here, we have to write test cases only for a single unit, and it should be clean and understandable. The important thing is you need to know what do you expect after running the test case.

Let’s see what are the specs files first. Using spec files, we can write test cases for your source files. Angular applications have a .spec.ts file for each .ts file. They are running using the Jasmine JavaScript test framework through the Karma test runner when you use the ng test command.

Here is the sample component that we are going to use for test case writing.

Before starting, we have to study about few elements which are using in unit test case writing. This diagram shows the basic structure of the .spec.ts file.

describe(“Focused specs”, function() {
    beforeEach(() => {}) //this should be executed before each test case in the current test class
    it(‘is not focused and will not run’, function(){});
    fit(“is focused and will run”, function() {});
})

Let’s discuss the TestBed and its key elements.

TestBed

Configure and initialize environment for unit testing and provide methods for creating components and services

TestBed.configureTestingModule

Declare the component to test

TestBed.createComponent

Create an instance of the component

ComponentFixture

Use to interact with the created component and its corresponding element

TestBed.inject

Use to combine(inject) the service to TestBed configuration

As mentioned before, we have to write a test case for every single unit. Above .spec.ts shows how I write the test cases for the above sample .ts file. Here, we have to use async because TestBed.compileComponents() is an asynchronous method.

In this example, we are using Message Service to get the title. We call message service as the depender to the component. We have to provide the service to the TestBed before executing the test using the provider property. The most important thing is not to use the service directly to the provider. We can use Mock Service for this. As defined in the example, we can write a Mock class for the service. Finally, we can inject the service to the testbed using TestBed.inject().

Service Class Test Case Writing

When writing test cases for a service class, we do not want to create a component. What we need to do is provide the service and continue the test case writing. Here is the small sample service which we used in the previous example.

export class MessageService {
getTitle(){ return “Welcome to Unit Test”; }
}

Below is the sample test case which I wrote for this single service.

Conclusion

To increase the maintainability of the code, we can easily use unit test cases. Here we discuss the beginner approach to unit test case writing for the angular component and service. The main thing of these both is creating the testbed correctly. This post guide you to create basic testbeds for both component and service and writing the test cases.

Thank you for reading the blog post.