I find that writing unit tests in JavaScript kind of sucks, so this post will (hopefully) serve as a cheat sheet of all the stuff I keep looking up. As such, it will be updated as I learn new stuffs.
How To: scope test run to specific tests
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Find this line in your test.ts | |
| const context = require.context('./', true, /\.spec\.ts$/); | |
| // And change it to: | |
| const context = require.context('./', true, /my-component.*\.spec\.ts$/); |
by Remember to set it back before you commit
How To: Set up a test spec
Note that this is done for you if you use the angular cli
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| import { MyComponent } from './my.component'; | |
| import { MyService } from '../services/my.service'; | |
| import { HttpClientTestingModule } from '@angular/common/http/testing'; | |
| describe('MyComponent', () => { | |
| let component: MyComponent; | |
| let service: MyService; | |
| beforeEach(async(() => { | |
| TestBed.configureTestingModule({ | |
| declarations: [ MyComponent ], | |
| providers: [ MyService ], | |
| imports: [ HttpClientTestingModule ] | |
| }) | |
| .compileComponents(); | |
| })); | |
| beforeEach(() => { | |
| fixture = TestBed.createComponent(MyComponent); | |
| component = fixture.componentInstance; | |
| service = TestBed.get(MyService); | |
| fixture.detectChanges(); | |
| }); | |
| }); |
How To: Check to see if a method was called on a service
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('myMethod', () => { | |
| it('should call myService', () => { | |
| // Create a spy | |
| const serviceSpy = spyOn(service, 'MyServiceMethod'); | |
| // Call the method | |
| component.myMethod(); | |
| // Assert that the call count is what you expect | |
| expect(serviceSpy.calls.count()).toBe(1); | |
| }); | |
| }); |
How To: Check to see if an argument was provided to a service method
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('myMethod', () => { | |
| it('should call myService with the correct argument', () => { | |
| // Create the expected outcome | |
| const expectedArgument = 'ExpectedArgumentValue'; | |
| // Set any variables on the component | |
| component.myValue = expectedArgument; | |
| // Create a spy | |
| const serviceSpy = spyOn(service, 'MyServiceMethod'); | |
| // Call the method -- the argument is provided in the implementation | |
| component.myMethod(); | |
| // Assert that a call to the service method contained the expected argument | |
| expect(serviceSpy).toHaveBeenCalledWith(expectedArgument); | |
| }); | |
| }); |
How To: Provide the output of a service call
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('myMethod', () => { | |
| it('should provide the result from myService', () => { | |
| // Create the expected outcome | |
| const expectedValue = 'ExpectedValue'; | |
| // Create a spy and set the expected result | |
| const serviceSpy = spyOn(service, 'MyServiceMethod').and.returnValue(expectedValue); | |
| // Call the method -- the argument is provided in the implementation | |
| const actual = component.myMethod(); | |
| // Assert that the result is what you expect | |
| expect(actual).toBe(expectedValue); | |
| }); | |
| }); |
How To: Test a router.navigate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Router } from '@angular/router'; | |
| import { RouterTestingModule } from '@angular/router/testing'; | |
| // ... | |
| // In the TestBed.configureTestingModule : | |
| imports: [ RouterTestingModule ] | |
| // ... | |
| let router: Router; | |
| // ... | |
| router = TestBed.get(Router); | |
| // ... | |
| describe('myMethod', () => { | |
| it('should navigate to a new route', () => { | |
| // Create the expected outcome | |
| const expectedArgument = 'ExpectedArgumentValue'; | |
| // Set any variables on the component | |
| component.myValue = expectedArgument; | |
| // Create a spy on the router | |
| const routerSpy = spyOn(router, 'navigate'); | |
| // Call the method -- the argument is provided in the implementation | |
| component.myMethod(); | |
| // Assert that the router navigated to the expected location. Note the [] around the route! | |
| expect(routerSpy).toHaveBeenCalledWith([`/my/expected/route/${expectedArgument}`]); | |
| }); | |
| }); |