Testing reactive streams (rxjs) using marble diagrams in the context of Angular applications.

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.

8. JASMINETEST EXAMPLE

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.

11. COLD
OBSERVABLE
EXAMPLE

12. HOT
OBSERVABLE
EXAMPLE

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

16. MORE MARBLE DIAGRAMS
http://rxmarbles.com

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!