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
Testing NgRx
By Brian Love
Testing NgRx
- 655