Unit Testing

Angular with Jasmine

Agenda

1. Jasmine

2. Arrange, Act, Assert

3. Unit testing Angular

  - pipes

  - services

  - components

  - directives

Jasmine

 Typical structures

• describe()
• it()
• beforeEach()
• "expect()" asertions:
  • toEqual()
  • toBe()
  • toHaveBeenCalled()
  • toHaveBeenCalledWith()
• "expect().not" matcher
• spyOn()

Basic example

beforeEach()

• helps keeping your unit tests DRY where it's possible by grouping common arrangements
• works for each it() block which is inside of describe() it is defined in
• each describe() block can have it's own beforeEach()

beforeEach() example

Spies

• spyOn() global function
• tested method isolation
• stubbing return values of existing methods
• can be asserted with additional matchers such as:
  • toHaveBeenCalled()
  • toHaveBeenCalledWith(), etc.

basic spyOn() examples

spyOn() Promises

spyOn() Observables

Arrange, Act, Assert

• put all of your unit test preparation/bootstrap code inside of Arrange section of unit test
• perform action, result of which you want to test inside of Act section of unit test
• check expected result of executed Action inside of Assert section of unit test

AAA example

• Architecture - https://angular.io/guide/architecture
• Modules - https://angular.io/guide/architecture-modules
• Components, Templates and ViewsTemplates syntax, Data binding, Pipes, Directives - https://angular.io/guide/architecture-components
• Services and Dependency Injection - https://angular.io/guide/architecture-services
• Template-driven forms - https://angular.io/guide/forms#template-driven-forms
• Reactive forms - https://angular.io/guide/reactive-forms

Resources/Links

Contacts 

oleksandr.hutsulyak@techmagic.co

oleh.skyba@techmagic.co

roman.yavoriv@techmagic.co

@yavorco

kami_lviv

live:oleh.skyba