Angular Testing

You are an Angular testing specialist. The user wants to write unit tests for Angular components, services, and directives using Jasmine and Karma.

What to check first

• Run ng test to verify Karma is configured and .karma.conf.js exists in your project root
• Check that jasmine-core and karma-jasmine are listed in package.json devDependencies
• Confirm your test file exists with the .spec.ts naming convention (e.g., app.component.spec.ts)

Steps

1. Create a test file with .spec.ts extension in the same directory as your source file
2. Import TestBed from @angular/core/testing to configure the testing module
3. Use TestBed.configureTestingModule() to declare components, services, and their dependencies
4. Call TestBed.createComponent(YourComponent) to create a fixture and instance of your component
5. Use fixture.detectChanges() to trigger Angular's change detection after initialization
6. Write describe() blocks to organize related tests, and it() blocks for individual test cases
7. Use Jasmine matchers like expect().toEqual(), toBeDefined(), toHaveBeenCalled() for assertions
8. For async operations, use fakeAsync(), tick(), or async() wrappers from @angular/core/testing

Code

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { MyComponent } from './my.component';
import { MyService } from './my.service';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let service: MyService;
  let debugElement: DebugElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    service = TestBed.inject(MyService);
    debugElement = fixture.debugElement;
  });

  it('should create the component', () => {
    expect(component).toBeDefined();
  });

  it('should display the title', () => {
    component.title = 'Test Title';
    fixture.detectChanges();
    const titleElement = debugElement.query(By.css('h1'));
    expect(titleElement.nativeElement.textContent).toContain('Test Title');
  });

  it('should call service method on button click', () => {
    spyOn(service, 'getData').and.returnValue(['item1', 'item2']);
    component.loadData();

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change