Testing rx js using marbles within angular
1 like1,669 views
This document discusses testing RxJS observables using marble diagrams with Jasmine and Jasmine-Marbles. It introduces cold and hot observables, provides examples of marble diagram syntax for observables, subscriptions, and tests, and demonstrates how to test asynchronous RxJS code synchronously using the TestScheduler.
![BOUT ME
{
"name": "Ilia Idakiev",
"experience": [
"Developer / Founder @ HNS",
"Lecturer in 'Advanced JS' @ FMI",
"Contractor / Consultant",
"2 Angular Courses @ HB (2016 - 2017)",
"JavaScript Courses"
],
"involvedIn": [
"SofiaJS", "BeerJS", "Angular Sofia"
]
}](https://image.slidesharecdn.com/testingrxjsusingmarbleswithinangular-180203130050/85/Testing-rx-js-using-marbles-within-angular-2-320.jpg)
![BASIC METHODS
• hot(marbles: string, values?: object, error?: any) - creates a "hot" observable (a subject) that will behave as
though it's already "running" when the test begins.An interesting difference is that hot marbles allow a ^ character to
signal where the "zero frame" is.That is the point at which the subscription to observables being tested begins.
• cold(marbles: string, values?: object, error?: any) - creates a "cold" observable whose subscription starts when
the test begins.
• expectObservable(actual: Observable<T>)
.toBe(marbles: string, values?: object, error?: any) - schedules an assertion for when theTestScheduler
flushes.TheTestScheduler will automatically flush at the end of your jasmine it block.
• expectSubscriptions(actualSubscriptionLogs: SubscriptionLog[])
.toBe(subscriptionMarbles: string) - like expectObservable schedules an assertion for when the testScheduler
flushes. Both cold() and hot() return an observable with a property subscriptions of type SubscriptionLog[]. Give
subscriptions as parameter to expectSubscriptions to assert whether it matches the subscriptionsMarbles marble
diagram given in toBe(). Subscription marble diagrams are slightly different than Observable marble diagrams.](https://image.slidesharecdn.com/testingrxjsusingmarbleswithinangular-180203130050/85/Testing-rx-js-using-marbles-within-angular-19-320.jpg)
Testing rx js using marbles within angular
- 1. TESTING RXJS USING MARBLES within Angular ( Lightning talk )
- 2. BOUT ME { "name": "Ilia Idakiev", "experience": [ "Developer / Founder @ HNS", "Lecturer in 'Advanced JS' @ FMI", "Contractor / Consultant", "2 Angular Courses @ HB (2016 - 2017)", "JavaScript Courses" ], "involvedIn": [ "SofiaJS", "BeerJS", "Angular Sofia" ] }
- 3. UNITTESTING In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use. (wikipedia)
- 4. TESTING ANGULAR • Jasmine - test framework that provides everything needed to write basic tests. • Karma - test runner for writing and running unit tests while developing the application.
- 5. JASMINE SUITS - DESCRIBE A test suite begins with a call to the global Jasmine function describe with two parameters: a string and a function.The string is a name or title for a spec suite - usually what is being tested.The function is a block of code that implements the suite.
- 6. JASMINE SPECS - IT Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function.The string is the title of the spec and the function is the spec, or test. A spec contains one or more expectations that test the state of the code.An expectation in Jasmine is an assertion that is either true or false.A spec with all true expectations is a passing spec.A spec with one or more false expectations is a failing spec.
- 7. JASMINE EXPECTATIONS - EXPECT Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.
- 9. RXJS RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. https://github.com/ReactiveX/rxjs
- 10. HOTVS COLD OBSERVABLES • Cold observables start running upon individual subscriptions and values are not shared among subscribers. • The hot observable sequence is shared among all subscribers.When an observer subscribes to a hot observable sequence, it will get all values in the stream that are emitted after it subscribes.
- 13. ANALOGIES • Cold Observables - movies • Hot Observables - live performances. • Hot Observables replayed - live performances recorded on video. ( BehaviorSubject / ReplaySubject )
- 14. MARBLE DIAGRAMS Marble diagrams are frequently used to explaining how certain operators in Rx work.
- 15. MARBLE EXAMPLE
- 17. JASMINE-MARBLES Library that provides marble testing helpers for RxJS and Jasmine Marble tests use a specialized VirtualScheduler called the TestScheduler. They enable us to test asynchronous operations in a synchronous and dependable manner.
- 18. MARBLE SYNTAX • "-" time: 10 "frames" of time passage. • "|" complete: The successful completion of an observable.This is the observable producer signaling complete() • "#" error: An error terminating the observable.This is the observable producer signaling error() • "a" any character: All other characters represent a value being emitted by the producure signaling next() • "()" sync groupings: When multiple events need to single in the same frame synchronously, parenthesis are used to group those events.You can group nexted values, a completion or an error in this manner.The position of the initial ( determines the time at which its values are emitted. • "^" subscription point: (hot observables only) shows the point at which the tested observables will be subscribed to the hot observable.This is the "zero frame" for that observable, every frame before the ^ will be negative.
- 19. BASIC METHODS • hot(marbles: string, values?: object, error?: any) - creates a "hot" observable (a subject) that will behave as though it's already "running" when the test begins.An interesting difference is that hot marbles allow a ^ character to signal where the "zero frame" is.That is the point at which the subscription to observables being tested begins. • cold(marbles: string, values?: object, error?: any) - creates a "cold" observable whose subscription starts when the test begins. • expectObservable(actual: Observable<T>) .toBe(marbles: string, values?: object, error?: any) - schedules an assertion for when theTestScheduler flushes.TheTestScheduler will automatically flush at the end of your jasmine it block. • expectSubscriptions(actualSubscriptionLogs: SubscriptionLog[]) .toBe(subscriptionMarbles: string) - like expectObservable schedules an assertion for when the testScheduler flushes. Both cold() and hot() return an observable with a property subscriptions of type SubscriptionLog[]. Give subscriptions as parameter to expectSubscriptions to assert whether it matches the subscriptionsMarbles marble diagram given in toBe(). Subscription marble diagrams are slightly different than Observable marble diagrams.
- 20. MARBLE EXAMPLES • '-' or '------': Equivalent to Observable.never(), or an observable that never emits or completes • '|': Equivalent to Observable.empty() • '#': Equivalent to Observable.throw() • '--a--':An observable that waits 20 "frames", emits value a and then never completes. • '--a--b--|': On frame 20 emit a, on frame 50 emit b, and on frame 80, complete • '--a--b--#': On frame 20 emit a, on frame 50 emit b, and on frame 80, error • '-a-^-b--|': In a hot observable, on frame -20 emit a, then on frame 20 emit b, and on frame 50, complete. • '--(abc)-|': on frame 20, emit a, b, and c, then on frame 40 complete • '-----(a|)': on frame 50, emit a and complete.
- 21. EXAMPLE 1
- 22. EXAMPLE 2
- 23. SUBSCRIPTION MARBLE SYNTAX • "-" time: 10 "frames" of the passage. • "^" subscription point: shows the point in time at which a subscription happen. • "!" unsubscription point: shows the point in time at which a subscription is unsubscribed.
- 24. EXAMPLE 3
- 25. ANGULAR DEMO
- 26. CONTACT • GitHub - https://github/iliaidakiev (/slides/ - list of future and past events) • Twitter - @ilia_idakiev
- 27. THANKYOU!