Loader Service Show Hide Unit Test Angular

Introduction

In this article, we will discuss how to write unit tests for loader service in Angular. The loader service is used to display a loading indicator while the application is fetching data or performing some operation that takes time to complete.

We will cover the following topics:

1. Setting up the test environment for Angular
2. Writing unit tests for the loader service
3. Testing the show and hide methods of the loader service
4. Using spies to test the show and hide methods

Setup

We need to set up the test environment for Angular before we can start writing unit tests. We need to import the TestBed and async from the @angular/core/testing library, create a test module, and configure it with the necessary providers and imports.

import { TestBed, async } from '@angular/core/testing';
import { LoaderService } from './loader.service';

describe('LoaderService', () => {
  let service: LoaderService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [LoaderService]
    });

    service = TestBed.inject(LoaderService);
  });

  it('should create the service', () => {
    expect(service).toBeTruthy();
  });
});

This code creates a test module and configures it with the LoaderService provider. The beforeEach method is run before each test and creates an instance of the LoaderService using the TestBed.inject method.

Unit Tests

Now that we have set up the test environment, we can start writing unit tests for the loader service. We will test the show and hide methods of the loader service, which are responsible for displaying and hiding the loading indicator.

describe('LoaderService', () => {
  // ...

  it('should show the loader', () => {
    service.show();
    expect(service.isLoading).toBeTruthy();
  });

  it('should hide the loader', () => {
    service.hide();
    expect(service.isLoading).toBeFalsy();
  });
});

These tests call the show and hide methods of the loader service and expect the isLoading property to be true or false, respectively.

Using Spies

We can also use spies to test the show and hide methods. Spies allow us to intercept calls to a method and check if it was called with the expected parameters. In this case, we can spy on the show and hide methods of the loader service and check if they were called when expected.

describe('LoaderService', () => {
  // ...

  it('should call show method', () => {
    const spy = spyOn(service, 'show');
    service.show();
    expect(spy).toHaveBeenCalled();
  });

  it('should call hide method', () => {
    const spy = spyOn(service, 'hide');
    service.hide();
    expect(spy).toHaveBeenCalled();
  });
});

These tests spy on the show and hide methods of the loader service, call them, and expect them to have been called using the toHaveBeenCalled matcher.

Conclusion

In this article, we have learned how to write unit tests for the loader service in Angular. We have covered how to set up the test environment, write tests for the show and hide methods, and use spies to check if they were called. Writing unit tests for services is an important aspect of software development that helps to ensure the reliability and stability of applications.