Advanced Angular
Testing Angular Apps
Jasmine, Karma, TestBed
💡 Testing ek QUALITY CONTROL inspector hai — code SHIP karne se PEHLE, automatically check karta hai "kya sab kuch SAHI kaam kar raha hai?" — bugs PRODUCTION mein pahunchne se PEHLE hi pakड़e jaate hain.
Angular CLI DEFAULT se Jasmine (testing framework — describe/it/expect syntax) aur Karma (test RUNNER, browser mein tests chalata hai) SETUP karta hai. TestBed Angular-specific testing UTILITY hai — components/services ko ISOLATED, test-friendly environment mein CREATE karta hai.
import { TestBed } from '@angular/core/testing';
import { CounterService } from './counter.service';
describe('CounterService', () => {
let service: CounterService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(CounterService);
});
it('should start at zero', () => {
expect(service.getCount()).toBe(0);
});
it('should increment count', () => {
service.increment();
expect(service.getCount()).toBe(1);
});
});
// Component testing (simplified):
// const fixture = TestBed.createComponent(UserCardComponent);
// fixture.componentInstance.user = { name: 'Test User' };
// fixture.detectChanges();
// expect(fixture.nativeElement.textContent).toContain('Test User');🧪
Testing ek QUALITY CONTROL inspector hai — code SHIP karne se PEHLE, automatically check karta hai "kya sab kuch SAHI kaam kar raha hai?" — bugs PRODUCTION mein pahunchne se PEHLE hi pakड़e jaate hain.
1 / 2
⚡ Quick Recap
- Jasmine = testing framework (describe/it/expect), Karma = test runner
- TestBed = Angular-specific testing utility, isolated environment
- ng generate automatically .spec.ts files banata hai — testing built-in culture hai
On this page (2 subtopics)
Component tests mein REAL service (jo actual HTTP calls karta hai) use karна SLOW aur UNRELIABLE hai — MOCK service (fake, predictable) provide karके, isolated, FAST tests likhते hain.
const mockUserService = {
getUsers: () => of([{ id: 1, name: 'Test User' }]) // fake Observable
};
TestBed.configureTestingModule({
providers: [
{ provide: UserService, useValue: mockUserService }
]
});
// Ab component REAL UserService ki jagah mockUserService use karegaTip: Dependency Injection (jo humne Services & DI category mein dekha) HI is testing pattern ko POSSIBLE banaता hai — agar services HARDCODE hote (DI ke bina), mocking IMPOSSIBLE hoती.
Async operations (HTTP calls, setTimeout) TEST karте waqt, fakeAsync/tick() ya waitForAsync() use karte hain — REAL time ka wait kiye bina, "simulate" karte hain ki time GUZAR gaya.
import { fakeAsync, tick } from '@angular/core/testing';
it('should load data after delay', fakeAsync(() => {
component.loadDataWithDelay(); // andar setTimeout hai
tick(1000); // 1000ms "guzarne" ka simulate karo
expect(component.data).toBeTruthy();
}));Tip: fakeAsync + tick() TESTS ko bahut FAST banaते hain — REAL setTimeout(1000) ka actual 1 second WAIT karne ke bajaye, tick(1000) INSTANTLY "simulate" kar deta hai ki time guzar gaya.