Your one-stop platform to prepare, practice and ace your interviews.
Loading your questions…
20 hand-picked Angular Testing interview questions with detailed answers. Open the interactive version above to search, filter by difficulty, run code, bookmark questions and track your progress.
The pyramid: lots of unit tests, fewer integration, fewest e2e.
Jasmine is the testing framework — describe/it/expect with matchers and spies. Karma is the test runner that launches real browsers and reports results. (Newer Angular is moving to Jest/Vitest + web-test-runner.)
describe('MathUtil', () => {
it('adds', () => { expect(add(2, 3)).toBe(5); });
});TestBed creates an Angular testing module — a mini environment where you declare/import the component under test and provide (usually mocked) dependencies. TestBed.createComponent() then gives you a ComponentFixture.
await TestBed.configureTestingModule({
imports: [MyComponent],
providers: [{ provide: DataService, useValue: mockData }]
}).compileComponents();The fixture wraps the component + its DOM. detectChanges() runs change detection (nothing renders until you call it). nativeElement is the raw DOM; debugElement is Angular's wrapper with query(By.css()) for finding elements.
const fixture = TestBed.createComponent(MyComponent);
fixture.detectChanges();
const h1 = fixture.debugElement.query(By.css('h1')).nativeElement;
expect(h1.textContent).toContain('Hello');A spy records calls and can fake return values. spyOn(obj, 'method') replaces a real method; jasmine.createSpyObj builds a whole mock. Assert with toHaveBeenCalledWith.
const svc = jasmine.createSpyObj('DataService', ['load']);
svc.load.and.returnValue(of([1, 2]));
expect(svc.load).toHaveBeenCalledWith(42);Import HttpClientTestingModule and inject HttpTestingController. It intercepts requests so no real network happens: expectOne(url) asserts the request, flush(data) returns a fake response, and verify() ensures nothing is outstanding.
service.getUsers().subscribe(u => expect(u.length).toBe(2));
const req = httpMock.expectOne('/api/users');
expect(req.request.method).toBe('GET');
req.flush([{ id: 1 }, { id: 2 }]);fakeAsync runs a test in a virtual time zone; tick(ms) advances timers synchronously and flush() drains all pending ones — ideal for setTimeout/debounce. async/whenStable waits for real async tasks (promises) to settle.
it('debounces', fakeAsync(() => {
component.onType('a');
tick(300);
expect(component.results.length).toBe(1);
}));Subscribe and assert inside the callback. For synchronous streams (of) assertions run immediately; for async use fakeAsync/done. Verify emitted values and completion.
service.data$.subscribe(v => {
expect(v).toEqual([1, 2, 3]);
});A way to test RxJS timing using ASCII 'marble diagrams' with the TestScheduler. Characters represent virtual time: - a frame, letters emissions, | complete, # error. Great for operators like debounceTime and switchMap.
testScheduler.run(({ cold, expectObservable }) => {
const source$ = cold('-a-b-c|');
expectObservable(source$.pipe(map(x => x.toUpperCase())))
.toBe('-A-B-C|');
});Services are plain classes — instantiate directly or via TestBed.inject(), mock their dependencies, call methods, and assert results/side effects. No fixture/DOM needed unless the service touches HTTP.
const service = TestBed.inject(CalcService);
expect(service.total([1, 2, 3])).toBe(6);Pipes are pure functions — instantiate the class and assert transform() output for various inputs. No TestBed required.
const pipe = new TruncatePipe();
expect(pipe.transform('hello world', 5)).toBe('hello…');Create a tiny host component whose template uses the directive, render it via TestBed, then assert the directive's effect on the host element (classes, styles, events).
@Component({ template: `<div appHighlight></div>` })
class HostComponent {}Input: set the property on component, call detectChanges(), assert the rendered result. Output: subscribe to the EventEmitter (or spy on it), trigger the action, and assert it emitted the expected payload.
let emitted;
component.saved.subscribe(v => (emitted = v));
component.onSave();
expect(emitted).toEqual(expectedItem);From @angular/cdk/testing: a harness is a reusable API for interacting with a component in tests without depending on its DOM structure — so tests don't break when internal markup changes. Angular Material ships harnesses for its components.
const loader = TestbedHarnessEnvironment.loader(fixture);
const button = await loader.getHarness(MatButtonHarness);
await button.click();Provide the router in test mode (RouterTestingModule or provideRouter([])), spy on Router.navigate, or use a RouterTestingHarness to drive real navigation and assert the activated component.
const router = TestBed.inject(Router);
const spy = spyOn(router, 'navigate');
component.logout();
expect(spy).toHaveBeenCalledWith(['/login']);Coverage measures which lines/branches your tests execute (ng test --code-coverage). It shows untested code but not test quality — 100% coverage of trivial getters proves little. Aim for meaningful coverage of logic and edge cases, not a vanity number.
ng test --code-coverageProtractor was Angular's original e2e tool — now deprecated. Modern choices are Cypress (great DX, time-travel debugging) and Playwright (multi-browser, fast, auto-wait). They drive the real app and assert user-visible behaviour.
// Cypress
cy.visit('/login');
cy.get('[data-cy=email]').type('a@b.com');
cy.contains('Sign in').click();Provide fakes in TestBed via providers: [{ provide: RealService, useValue: mock }] or useClass/useFactory. Build mocks with jasmine.createSpyObj (or Jest fns) and return Observables with of(...)/throwError(...) to match real APIs.
const userService = jasmine.createSpyObj<UserService>('UserService', ['getUser']);
userService.getUser.and.returnValue(of({ id: '1', name: 'Ann' }));
await TestBed.configureTestingModule({
imports: [UserComponent],
providers: [{ provide: UserService, useValue: userService }]
}).compileComponents();OnPush components re-render on input reference changes, events, or explicit mark-for-check — not on random field mutations. In tests, set inputs with fixture.componentRef.setInput() (or new input object references), trigger events, then detectChanges(). Mutating an input object in place often won’t update the view.
fixture.componentRef.setInput('user', { id: '1', name: 'Ann' });
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('Ann');
// new reference required for another update
fixture.componentRef.setInput('user', { id: '1', name: 'Bob' });
fixture.detectChanges();