Testing NgRx

Brian Love

CTO @ Briebug

brianflove.com

@brian_love

Demo Files

git clone git@github.com:blove/ngrx-testing.git

Marble Diagrams

Marbles for Testing

  • Marbles provide a simple way to describe observable streams.
  • They can be used to model and test observables
  • They can also be used to model and test subscriptions
  • Uses a scheduler to provide timing
  • Timing is done frame-by-frame
  • Each character in a marble is 10 frames​
    • A frame is a virtual "millisecond" or "clock cycle" of the scheduler

Marble Observable Syntax

  • The first character is "zero frame"
  • A dash "-" represents the passage of 10 frames
  • A pipe "|" indicates completion (.complete())
  • A hash "#" indicates error (.error())
  • A carrot "^" indicates subscription point in a hot observable
  • Any other character indicates emitted value (.next())

Marble Subscription Syntax

  • Also uses the scheduler to provide timing
  • Each character in a marble is 10 frames
  • A dash "-" represents the passage of 10 frames
  • A carrot "^" indicates subscription
  • A bang "!" indicates unsubscription

Emit a value and complete

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A pipe "|" represents completion
  • The below observable is 60 frames
cold("--a--|")

Emit a value and error

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A pipe "#" represents error
  • The below observable is 60 frames
cold("--a--#")

Multiple values & complete

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • The letter "b" represents our second emitted value
  • The below observable is 80 frames
cold("--a-b--|")

With Subscription

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A carrot "^" represents the point of subscription
  • The letter "b" represents our second emitted value
  • The below observable is 90 frames
  • The below subscription starts at frame 50 and is aligned with the observable stream
hot("--a-^-b-|")

    "    ^---!"

Demo Marbles Test

marbles.js

Made with Slides.com