Blog>
Snippets

Unit Testing Angular Plugins

Provide code samples for unit testing Angular plugins using Jasmine and Angular's TestBed, focusing on mock dependencies and ensuring the plugin's functionality.
import { TestBed } from '@angular/core/testing';
import { MyPluginModule } from './my-plugin.module';
import { MyPluginService } from './my-plugin.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('MyPluginService', () => {
  let service: MyPluginService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [MyPluginModule, HttpClientTestingModule],
      providers: [MyPluginService]
    });
    service = TestBed.inject(MyPluginService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  // Example test for a method getData from MyPluginService
  it('should retrieve data', () => {
    const dummyData = [{ name: 'Test Data' }];
    service.getData().subscribe(data => {
      expect(data.length).toBe(1);
      expect(data).toEqual(dummyData);
    });

    const request = httpMock.expectOne(`${service.apiUrl}/data`);
    expect(request.request.method).toBe('GET');
    request.flush(dummyData);
  });

  afterEach(() => {
    httpMock.verify();
  });
});
This Jasmine test suite initializes the Angular TestBed with HttpClientTestingModule to mock HTTP requests and MyPluginService. It contains tests to ensure the service is created and that its getData method functions correctly by expecting a mock HTTP GET request and comparing the response to an expected dummy data object.