Mudanças entre as edições de "Unit testing with default Angular installation"
De Basef
(7 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
Linha 37: | Linha 37: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
let mockedService = TestBed.get(YourService); | let mockedService = TestBed.get(YourService); | ||
+ | </source> | ||
+ | |||
+ | == Simple test structure == | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | it('should be created', () => { | ||
+ | expect(component).toBeTruthy(); | ||
+ | }); | ||
</source> | </source> | ||
Linha 46: | Linha 54: | ||
})); | })); | ||
</source> | </source> | ||
− | |||
== Asserting that some method is called == | == Asserting that some method is called == | ||
Linha 135: | Linha 142: | ||
expect(spySomeMethod.calls.count()).toEqual(2); | expect(spySomeMethod.calls.count()).toEqual(2); | ||
+ | </source> | ||
+ | |||
+ | == Executing code prior to each test == | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | beforeEach(() => { | ||
+ | // do your code here | ||
+ | }); | ||
+ | </source> | ||
+ | |||
+ | == Dependencies configuration == | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | describe('YourComponent', () => { | ||
+ | let component: YourComponent; | ||
+ | let fixture: ComponentFixture<YourComponent>; | ||
+ | |||
+ | beforeEach(async(() => { | ||
+ | TestBed.configureTestingModule({ | ||
+ | declarations: | ||
+ | [ ], | ||
+ | imports: | ||
+ | [ ], | ||
+ | providers: | ||
+ | [ ] | ||
+ | }) | ||
+ | .compileComponents(); | ||
+ | })); | ||
+ | |||
+ | beforeEach(() => { | ||
+ | fixture = TestBed.createComponent(YourComponent); | ||
+ | component = fixture.componentInstance; | ||
+ | fixture.detectChanges(); | ||
+ | }); | ||
+ | ... | ||
+ | }) | ||
+ | </source> | ||
+ | |||
+ | |||
+ | == Testing if a html tag and content exists == | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | it('should render title in a h1 tag', async(() => { | ||
+ | const fixture = TestBed.createComponent(AppComponent); | ||
+ | fixture.detectChanges(); | ||
+ | const compiled = fixture.debugElement.nativeElement; | ||
+ | expect(compiled.querySelector('h1').textContent).toContain('Website title'); | ||
+ | })); | ||
</source> | </source> | ||
− | [[Category: | + | [[Category: Angular]] |
Edição atual tal como às 09h39min de 27 de janeiro de 2020
Índice
- 1 Asserting that a value is equal to something
- 2 Asserting that a value is defined
- 3 Asserting that a value is true
- 4 Asserting that a value is false
- 5 Getting instance of a service
- 6 Simple test structure
- 7 Injecting a service into a test
- 8 Asserting that some method is called
- 9 Asserting that some method is called with given arguments
- 10 Mocked Http Requests
- 11 Expecting that a method is called X times
- 12 Executing code prior to each test
- 13 Dependencies configuration
- 14 Testing if a html tag and content exists
Asserting that a value is equal to something
expect(someVariable).toEqual('something');
Asserting that a value is defined
expect(someVariable).toBeDefined();
Asserting that a value is true
expect(someVariable).toBeTruthy();
Asserting that a value is false
expect(someVariable).toBeFalsy();
Getting instance of a service
let mockedService = TestBed.get(YourService);
Simple test structure
it('should be created', () => { expect(component).toBeTruthy(); });
Injecting a service into a test
it('your test', inject([YourService], (service: YourService) => { }));
Asserting that some method is called
let spySomeMethod = spyOn(someInstance, 'someMethod'); // do something here expect(spySomeMethod).toHaveBeenCalled();
Asserting that some method is called with given arguments
let spySomeMethod = spyOn(someInstance, 'someMethod').and.callFake((arg1, arg2) => { expect(arg1).toEqual(10); expect(arg2).toEqual(20); }); // do something here expect(spySomeMethod).toHaveBeenCalled();
Mocked Http Requests
1) Instead of using HttpClientModule, you should use HttpClientTestingModule. You will also use HttpTestingController. Below how to import and configure them:
... import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; ... describe('YourClass', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: ... [ AppRoutingModule, HttpClientTestingModule ] ... }); }); ... });
2) In your test you need to get an instance of HttpTestingController:
... it('your test', () => { let httpMock = TestBed.get(HttpTestingController); }); ...
3) In the same test you should assert that a call has been made with:
let mockedResponse = { statusCode: 200, body: { anything: 'your endpoint returns' } } const request = httpMock.expectOne('http://some.request.url/to/somewhere'); request.flush(mockedResponse); httpMock.verify();
Expecting that a method is called X times
let spySomeMethod = spyOn(someInstance, 'someMethod'); // do something here expect(spySomeMethod.calls.count()).toEqual(2);
Executing code prior to each test
beforeEach(() => { // do your code here });
Dependencies configuration
describe('YourComponent', () => { let component: YourComponent; let fixture: ComponentFixture<YourComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ], imports: [ ], providers: [ ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(YourComponent); component = fixture.componentInstance; fixture.detectChanges(); }); ... })
Testing if a html tag and content exists
it('should render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Website title'); }));