Chapter 13.4☕ 15 min read

Integration Testing & Best Practices

Integration tests verify that components, services, and templates work together. They catch real bugs that unit tests miss.

01Unit vs Integration Testing

Unit tests test ONE thing in isolation. Integration tests test MULTIPLE things together.

"Unit = ek player ki practice, Integration = team match."

Unit tests: fast, targeted, 70% of your tests
Integration tests: catch connection bugs, 20% of tests
E2E tests: full user flow in browser, 10% of tests

Integration catches: wrong service method, bad data mapping, broken bindings, missing @Inputs.

02Integration Test Example

Integration test: REAL service (not mocked) with mocked HTTP.

// REAL service, fake HTTP
TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [
    BiryaniService,  // REAL service!
    { provide: Router, useValue: routerSpy }
  ]
});

"Real service + fake HTTP = integration test."

Catches: wrong method call, wrong data mapping, wrong template binding, missing error handling.

03Testing Router in Components

Mock Router to test navigation:

let routerSpy = jasmine.createSpyObj("Router", ["navigate"]);

it("should go to menu", () => {
  component.goToMenu();
  expect(routerSpy.navigate)
    .toHaveBeenCalledWith(["/menu"]);
});

"Router mock karo — navigate call hua ya nahi check karo."

04Testing Forms

Form testing: Set values, validate, submit.

it("should validate required fields", () => {
  component.form.patchValue({
    name: "Hyderabadi", price: 500
  });
  expect(component.form.valid).toBeTrue();

  component.form.get("name")?.setValue("");
  expect(component.form.valid).toBeFalse();
});

"Form fill karo, validate check karo, submit karo, service call check karo."

05Testing Best Practices

Best Practices Summary:

Arrange-Act-Assert — Setup, call, check. Every test follows this.
One assertion per test (or closely related group)
Descriptive names — "should show error when name is empty"
Test edge cases — empty array, null, long strings
Do not test Angular — test YOUR logic, not Angular internals
80% coverage goal — focus on integration tests after 80%

"Good tests = documentation — padhne se samajh aaye component kya karta hai."

Key Takeaways

Unit tests isolate one piece; Integration tests test connections
Integration: real service + fake HTTP + mock Router
Mock Router with jasmine.createSpyObj and toHaveBeenCalledWith
Test forms by patching values and triggering validation
Follow Arrange-Act-Assert; aim for 80% coverage

Previous13.3 — Testing Services & HTTP 📋 All Chapters Next Chapter14.1 — SSR Setup →