As components are the key element in the Angular app architecture, they require a solid testing to ensure the high reliability of the application. During the talk you will be introduced to the key concepts of the unit testing and you will see that implementing tests for Angular components is not that difficult as it might seem to.

1. Angular components
unit testing
ngPoland 2018

2. Tomasz Borowski
• Frontend Developer at Jcommerce
• Trainer at Angular in Space
workshops

3. Angular components - unit testing
• why component is so special in testing?
• what testing tools do we get from Angular?
• how to deal with dependencies?
• example implementation of component tests

4. Why component is so special in testing?
Component
Class
Template is important part
of the component
• uses property bindings
• uses event bindings
• introduces dependencies
• contains logic
Component
Template

5. What testing tools do we get from Angular?
.createComponent(TestedComponent)
TestBed
.configureTestingModule({ imports: […], declarations: […], providers: […] })
ComponentFixture<TestedComponent>
.nativeElement.componentInstance .debugElement .detectChanges()
DebugElement
.triggerEventHandler(…)
.injector.get(…)
.nativeElement
.query(…) .queryAll(…)
elementinstance

6. How to deal with dependencies?
What can be a component dependency:
• input data
• injected services
• child components, directives, pipes
A
B
FC
E
D
In tests use only plain dependencies
and mock the complex ones.
Mock
B
Mock
C

7. How to mock dependencies?
class MockedService extends RealService {
constructor() { super(null); }
}
const mockedResource = {name: `John`};
spyOn(someService, `getResource`)
.and.returnValue(of(mockedResource));
@Component({
selector: `app-child`,
template: `mocked template`
})
class MockedComponent {
@Input() someInput;
@Output() someOutput;
constructor() { }
}

8. • allows to build, attack, repair
and destroy space ships
• accepts fleet name as input
Example: SpaceShips app SpaceShipService
LocalStorageService
SpaceFleetComponent
SpaceShipComponent
LongClickDirective source: http://spaceapp.angular-in-space.pl/
fleetName input
spaceShip input

9. Example: Preconditions
we execute CLI ng test command
we perform tests in browser
we use Jasmine & Karma

10. Let’s implement tests…

11. What’s next…
https://angular.io/guide/testing

12. Thank you for your attention!
Angular in Space