Angular components-unit-testing

Angular components-unit-testing

• 1.
  Angular components unit testing ngPoland2018
• 2.
  Tomasz Borowski • FrontendDeveloper 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 isso 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 toolsdo 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 dealwith 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 mockdependencies? 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 tobuild, 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 executeCLI 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 foryour attention! Angular in Space