check-testing

Angular Test Coverage and Quality Analysis

Analyze test coverage and quality in the Angular project.

What This Command Does

1. Coverage Analysis

   • Line coverage
   • Branch coverage
   • Function coverage
   • Statement coverage

2. Test Quality

   • Test patterns (AAA)
   • Mock usage
   • Async handling
   • Edge case coverage

3. Generated Report

   • Coverage metrics
   • Missing tests
   • Quality recommendations

Testing Standards

1. Component Testing

// ✅ Good - Comprehensive component test
describe('UserCardComponent', () => {
  let fixture: ComponentFixture<UserCardComponent>;
  let component: UserCardComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserCardComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(UserCardComponent);
    component = fixture.componentInstance;
  });

  describe('rendering', () => {
    it('should display user name', () => {
      // Arrange
      const user = { id: '1', name: 'John Doe', email: '[email protected]' };

      // Act
      fixture.componentRef.setInput('user', user);
      fixture.detectChanges();

      // Assert
      expect(fixture.nativeElement.textContent).toContain('John Doe');
    });

    it('should show loading state', () => {
      fixture.componentRef.setInput('loading', true);
      fixture.detectChanges();

      expect(fixture.nativeElement.querySelector('.loading')).toBeTruthy();
    });
  });

  describe('interactions', () => {
    it('should emit selected event on click', () => {
      // Arrange
      const user = { id: '1', name: 'John' };
      fixture.componentRef.setInput('user', user);
      fixture.detectChanges();

      const spy = vi.fn();
      component.selected.subscribe(spy);

      // Act
      fixture.nativeElement.querySelector('button').click();

      // Assert
      expect(spy).toHaveBeenCalledWith('1');
    });
  });
});

2. Service Testing

// ✅ Good - Service test with mocked HTTP
describe('UsersApiService', () => {
  let service: UsersApiService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        UsersApiService,
        provideHttpClient(),
        provideHttpClientTesting()
      ]
    });

    service = TestBed.inject(UsersApiService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify(); // Verify no outstanding requests
  });

  describe('getUsers', () => {
    it('should return users list', () => {
      const mockUsers = [{ id: '1', name: 'John' }];

      service.getUsers().subscribe(users => {
        expect(users).toEqual(mockUsers);
      });

      const req = httpMock.expectOne('/api/users');
      expect(req.request.method).toBe('GET');
      req.flush(mockUsers);
    });

    it('should handle error', () => {
      service.getUsers().subscribe({
        error: err => expect(err.status).toBe(500)
      });

      const req = httpMock.expectOne('/api/users');
      req.flush('Error', { status: 500, statusText: 'Server Error' });
    });
  });
});