Testing

• toolbox concept:
  • first first: motivation:
    • security about changes
    • prove code works
    • ensure, behavior doesn't change
  • after: why do we not do the usual stuff?!
    • karma for unit-testing
    • protractor for e2e testing
    • --> maybe later
  • customization requirements:
    • tests should be easily adaptable in projects (if they run tests)
  • then: explain the tools in depth, link to official documentation
  • second: explain scenarios, assign tools to that

Toolbox - Unit Testing

jest

• rich command line interface
• explain watch mode and benefits
  • patterns
  • re-runs
  • updating snapshots
    • also interactive

Angular TestBed

• built-in Angular tooling
• all purpose
• module definition
• dependency injection definition
  • providers
  • overrides
  • DummyComponent

jest snapshots/assertions

• expect().toX
• toMatchInlineSnapshot()
• jest serializers

parameterized tests

• jest.each instead of jasmine-data-provider

findAllIshElements & findAllDataTestingIDs

ts-mockito

• mocking calls, stubbing stuff
• provide: instance(mock())
• when().thenReturn()
• when().thenCall()
• verify().once() / .never()
• capture().last()
• provide with useFactory: () => instance(mock(...))

ng-mocks

• mocking Components, Pipes, Directives
• just for satisfying dependencies of TestBed
• access to inputs and outputs of components via componentInstance

Marble Testing

• testing for RxJS
• time-relevant accordance
• expect().toBeObservable(...)
  • schemes:

    • |
    • -a--
    • --(ab)--

HttpClientTestingModule

• seldomely used

TestStore

• self-implemented stuff
• ngrxTesting
• effect for tracking actions -> snapshot serializer

provideActions, provideMockStore

• ngRx testing utility
• no real store
  • initialize with a store
  • override selectors

Testing Time-dependant or asynchronous stuff

• Angular Testing async
  • async
  • fakeAsync with tick
• done callback
• real time
  • setTimeout
• fake time
  • virtual timers

Unit Testing WHAT?

Components

• TestBed
• ng-mocks
• snapshots
• findAllIshElements & findAllDataTestingIDs
• maybe marbles
• time stuff
• ts-mockito (EventEmitter)

Services

• TestBed
• ts-mockito
• maybe HttpClientTestingModule

ngRx

Effects

• TestBed
• TestStore
• provideX
• marbles
• time-stuff

Selectors

• TestBed
• TestStore
• what is a selector anyway?!

Integration Testing

• TestBed
• TestStore

Usual unit testing pitfalls

•     NullInjectorError: StaticInjectorError(DynamicTestModule)[HttpClient]:
      StaticInjectorError(Platform: core)[HttpClient]:
        NullInjectorError: No provider for HttpClient!
  

  • service was not mocked
    • --> explain how to read it!

• TypeError: Cannot read property 'pipe' of null

  • a method yielding an Observable hasn't been mocked with ts-mockito
    • --> explain how to read it!

•         Object {
    -     "frame": 60,
    +     "frame": 50,
          "notification": Notification {
            "error": undefined,
            "hasValue": true,
            "kind": "N",
            "value": LoadProductSuccess {
              "payload": Object {
                "product": Object {
                  "sku": "P123",
                },
              },
              "type": "[Shopping] Load Product Success",
            },
          },
        },
  
  

Toolbox - e2e Testing

• Page Objects