Angular Testing
சோதனை செய்வது components மற்றும் services-ஐ lightweight அமைப்புகளுடன் சரிபார்க்கிறது.
Testing Essentials
Component & services: DOM-style சரிபார்ப்புகள் மற்றும் lightweight அமைப்புகளுடன் சோதிக்கவும் (NgModules தேவையில்லை).
TestBed (lite): components-ஐ அவற்றின் providers-உடன் திறமையாக உருவாக்கவும்.
Pure logic: எளிதான சோதனைக்காக pure functions-இல் logic-ஐ வைக்கவும்.
Mocks: தேவைக்கேற்ப HTTP மற்றும் router-ஐ mock செய்யவும்.
Disable Animations in Tests
// Disable animations in tests for stability
import { provideNoopAnimations } from '@angular/platform-browser/animations';
bootstrapApplication(App, { providers: [provideNoopAnimations()] });Jassif Team Notes:
Components and Services பற்றி காண்க.
சிறிய, நிர்ணயமான சோதனைகளைப் பயன்படுத்தவும்.
Unit tests-இல் HTTP மற்றும் router-ஐ mock செய்யவும்.
Component Smoke Test
Simple Component Test
@Component({ standalone: true, template: `<p>{{ add(2,3) }}</p>` })
class App { add(a:number,b:number){ return a+b; } }Complete Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
function add(a: number, b: number) { return a + b; }
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Testing Smoke</h3>
<p>2 + 3 = {{ add(2,3) }} (expect 5)</p>
`
})
class App { add = add; }
bootstrapApplication(App);Example Explained:
Interpolation {{ expression }}: Angular component-க்கு எதிரான வெளிப்பாட்டை மதிப்பிடுகிறது மற்றும் முடிவை DOM-இல் உரையாக செருகுகிறது.
"expect 5": டெம்ப்ளேட்டில் உள்ள சொற்றொடர் வாசகருக்கான விளக்க உரை, சோதனை உறுதிப்படுத்தல் அல்ல.
Real assertions: Unit tests-இல், முடிவுகளைச் சரிபார்க்க expect(actual).toBe(expected) (அல்லது toEqual(expected)) பயன்படுத்தவும்.
Testing Tips:
provideNoopAnimations() மூலம் சோதனைகளில் அனிமேஷன்களை முடக்கவும்.
கூறு நிலை மூலம் DOM-ஐ இயக்கவும்; கையேடு DOM அழைப்புகளைத் தவிர்க்கவும்.
தேவைப்படும்போது மட்டுமே மாற்றத்தைக் கண்டறியவும் (எ.கா., உள்ளீடுகளைப் புதுப்பித்த பிறகு).
Test Strategies
- Unit test pure functions நேரடியாக விரைவான கருத்துக்கு.
- Shallow component tests டெம்ப்ளேட் நடத்தைக்கு.
- Integration tests நடத்தை components-ஐக் கடக்கும்போது சேர்க்கவும்.
Async Testing Example
import { fakeAsync, tick } from '@angular/core/testing';
it('waits for async work', fakeAsync(() => {
let done = false;
setTimeout(() => done = true, 10);
tick(10);
expect(done).toBeTrue();
}));Async Test Explained:
expect(actual): சோதனை செய்யப்படும் உண்மையான மதிப்புடன் ஒரு உறுதிப்படுத்தலை உருவாக்குகிறது. கடுமையான சமத்துவத்திற்கு (===) toBe(expected), ஆழமான கட்டமைப்பு சமத்துவத்திற்கு toEqual(expected) மற்றும் பூலியன் சரிபார்ப்புகளுக்கு toBeTrue()/toBeFalse() பயன்படுத்தவும்.
fakeAsync(testFn): நேரத்தை நிர்ணயமாக முன்னேற்ற முடியும் என்பதால் testFn-ஐ போலி async மண்டலத்தில் இயக்குகிறது.
tick(ms): நிலுவையில் உள்ள டைமர்கள் மற்றும் மைக்ரோடாஸ்க்களை வெளியேற்றுவதற்கு ms மில்லி விநாடிகளால் மெய்நிகர் கடிகாரத்தை முன்னேற்றுகிறது.
Alternatives: waitForAsync(testFn) நிலுவையில் உள்ள async வேலையை முடித்த பிறகு சோதனையை நிறைவு செய்கிறது; whenStable() எந்த பணிகளும் எஞ்சியிருக்காதபோது தீர்க்கிறது.
HTTP Testing
HTTP Testing (Conceptual)
// HTTP testing (conceptual)
import { TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
TestBed.configureTestingModule({ imports: [HttpClientTestingModule] });
const http = TestBed.inject(HttpClient);
const httpMock = TestBed.inject(HttpTestingController);
http.get('/api/todos/1').subscribe(data => expect(data).toBeTruthy());
httpMock.expectOne('/api/todos/1').flush({ id: 1, title: 'Test' });
httpMock.verify();HTTP Testing Explained:
HttpClientTestingModule: HttpClient-க்கு ஒரு mock backend வழங்குகிறது, எனவே உண்மையான நெட்வொர்க் அழைப்புகள் செய்யப்படுவதில்லை.
HttpTestingController: HttpClient மூலம் செய்யப்படும் HTTP கோரிக்கைகளைப் பரிசோதிக்கவும், பொருந்தவும் மற்றும் பதிலளிக்கவும் உங்களை அனுமதிக்கிறது.
expectOne(match): match (URL சரம், RegExp, அல்லது predicate) பொருந்தும் சரியாக ஒரு நிலுவையில் உள்ள கோரிக்கை இருப்பதாக உறுதிப்படுத்துகிறது மற்றும் ஒரு TestRequest-ஐ வழங்குகிறது.
flush(body, options?): கொடுக்கப்பட்ட body மற்றும் விருப்பமான options (எ.கா., status, statusText, headers) உடன் பொருந்திய கோரிக்கைக்கு ஒரு mock பதிலை அனுப்புகிறது.
verify(): முடிவில் பொருந்தாத அல்லது நிலுவையில் உள்ள கோரிக்கைகள் இருந்தால் சோதனை தோல்வியடையும்.
Testing Guidelines
Best Practices
HTTP: கோரிக்கைகளை mock செய்ய HttpClientTestingModule மற்றும் HttpTestingController பயன்படுத்தவும்.
Router: உண்மையான வழிசெலுத்தலைத் தவிர்க்க router சோதனை utilities பயன்படுத்தவும்.
Async: டைமர்களுக்குப் பதிலாக fakeAsync/tick அல்லது waitForAsync/whenStable பயன்படுத்தவும்.
Queries: சிறிய CSS-க்கு மேல் நிலையான selectors மற்றும் role/text queries பயன்படுத்தவும்.
Avoid
Real HTTP calls in unit tests
Manual DOM manipulation instead of component state
Unstable CSS selectors for element queries
Real timers in async tests