[RxJS] Introduction to RxJS Marble testing

Marble testing is an expressive-to-test observables by utilizing Marble diagrams. This lesson'll walk you through the syntax and features, preparing your to start writing marble tests today!

Grep the files from the RXJS

• Https://github.com/ReactiveX/rxjs/blob/master/spec/helpers/marble-testing.ts
• Https://github.com/ReactiveX/rxjs/blob/master/spec/helpers/test-helper.ts

/*    RxJS Marble Testing allows for a more natural style of testing observables. To get started, need to include a few helpers libraries, marble-testing.ts and Test-helper.ts, in your karma.conf o     R wallaby.js configuration file. These files provide helpers for parsing marble diagrams and asserting against the subscription points and result of your R observables under test.    For these examples I'll be using the Jasmine, but Mocha and Chai works just as well.    Let's get started with the basics of marble testing!    First, let's understand the pieces that make up a valid marble diagram.    Dash:indicates a passing of time, you can think of each dash as 10ms when it comes to your tests.    -----<-----50ms Characters:each character inside the dash indicates an emission. -----A-----b-----C <-----Emit ' a ' at 60ms, ' B ' @ 120ms, ' C ' at 180ms Pipes |: Pipes indicate the completion poi    NT of an observable.               -----a| <-----Emit ' A ' at 60ms and complete (70ms) parenthesis (): parenthesis indicate multiple emissions in same time frame, think Obs           Ervable.of (-----) (abc|) <-----Emit ' a ' B ' C ' for 60ms then complete (60ms) Caret ^: Indicates the starting point of a subscription, used wit    H expectsubscription Assertion.    ^-------<-----Subscription point at caret.    Exclamation point-!: Indicates the end point of a subscription, also used with expectsubscription assertion.              ^------!    <-----Subscription starts at caret, ends at exclamation point. Pound Sign-#: Indicates an error---a---# <-----Emit ' a ' in 40ms, error at 80ms there is also a    Few methods included to parse marble sequences and transpose values.  Cold (marbles:string, values?: Object, error?: any): Subscription starts when Test begins cold (--a--b--|, {a: ' Hello ', B: "World") <-----Emit ' Hello ' at 30ms and "World" at 60ms, complete at 90ms    Hot (marbles:string, Values?: Object, error?: any): behaves as subscription starts at point of caret hot (--^--a- --b--|, {A: ' Goodbye ', B: ' World ') <-----Subscription begins at point of caret*/

For example we want to test:

Const Source =       "---a---b---c--|"  =   "---a---b---c--|";

They should be equal.

Here each '-' means 1. Frames.

' | ' means completed.

The method we need to use are ' expectobservable ' & ' cold ':

    It (' should parse marble diagrams ', () = {        = cold ('---a---b---c---| ' );         =    '---a---b---c---| ' ;        Expectobservable (source). ToBe (Expected)    });

Cold would treat the beginning of the diagram as a subscription point. Now the test passing.

If we change a little bit:

    It (' should parse marble diagrams ', () = {        = cold ('---a---b---c---| ' );         =    '---a--b---c---| ' ;        Expectobservable (source). ToBe (Expected)    });

It Reports Error:

expected {"Frame": "Notification": {"kind": "N", "Value": "A", "HasValue":true}}    {"Frame": -, "notification": {"kind": "N", "value": "B", "HasValue":true}}    {"Frame": the, "notification": {"kind": "N", "Value": "C", "HasValue":true}}    {"Frame": Max, "notification": {"kind": "C", "HasValue":false}} to deep equal {"Frame": "Notification": {"kind": "N", "Value": "A", "HasValue":true}}    {"Frame": -, "notification": {"kind": "N", "value": "B", "HasValue":true}}    {"Frame": -, "notification": {"kind": "N", "Value": "C", "HasValue":true}}    {"Frame": $, "notification": {"kind": "C", "HasValue":false}}

Test ' concat ' opreator:

    It (' should work with cold observables ', () = {        = cold ('-a---b-| ') );         = Cold ('-c---d-| ' );         = '-A---b--c---d-| ' ;        Expectobservable (Obs1.concat (OBS2)). ToBe (Expectedconcatres)    });

'hot ' observable:hot'll actually let's identify the subscription point yourself:

When testing hot observables You can specify the subscription point using a caret '^', similar to how you speci FY subscriptions when utilizing the Expectsubscriptions assertion.

    It (' Should observables ', ()        = = Hot     ('---a--^--b---| ' );         = Hot  ('-----c---^-----------------d-| ' );         =           '---b--------------d-| ' ;        Expectobservable (Obs1.concat (OBS2)). ToBe (expected);    });

Algin the ^, easy for Read

Spread Subscription and Marble diagram:

    /*For certain operators-want to confirm, the point at which a observable is subscribed or UNSUBSC Ribed. Marble testing makes this possible by using the Expectsubscriptions helper method. The cold and hot methods return a subscriptions object, including the frame at which the observable would b e subscribed and unsubscribed.         You can then assert against these subscription points by supplying a diagram which indicates the expected behavior.        ^-indicated the subscription point. !        -Indicates the which the observable was unsubscribed. Example Subscriptions object: {"Subscribedframe": +, "unsubscribedframe":*/It (' should identify subscription points ', () ={Const OBS1= Cold ('-a---b-| '); Const OBS2= Cold ('-c---d-| ') const expected= '-A---b--c---d-| '; Const SUB1= ' ^------! 'Const SUB2= '-------^------! 'expectobservable (Obs1.concat (OBS2)). ToBe (expected);        Expectsubscriptions (obs1.subscriptions). ToBe (SUB1);    Expectsubscriptions (obs2.subscriptions). ToBe (SUB2); })

Object to map the key and value:

    /* Both the hot         and cold methods, as well the ToBe method accept an object map        as a second parameter, indica Ting the values to output for the appropriate placeholder.        When the test was executed these values rather than the matching string in the marble diagram.     */     It (' should correctly sub in Values ', () = {        = {a:3, b:2};         = Cold (  '---a---b---| ' , values);         =      '---a---b---| ' ;        Expectobservable (source). ToBe (expected, values);    });

    /*         multiple emissions occuring in same time frame can is represented by grouping in parenthesis.        Complete and error symbols can also is included in the same grouping as simulated outputs.     */     It (' should handle emissions in same time frame ', () = {        = observable.of (1,2,3,4); c12/>= ' (abcd|) ' ;         1, B:2, C:3, D:4});    

    /* For         Asynchronous tests RxJS supplies a testscheduler.        How it works ...     */     It (' should work with asynchronous operators ', () = {        = Observable            . Interval ( Rxtestscheduler). Take            (5)            = v% 2 = = 0);         = '-a-b-(c|) ' ;         0, B:2, C:4});    });

Error Handling:

    /*observables that encounter errors is represented by the pound (#) sign.        In this case, we observable is retried twice before ultimately emitting an error.    A third value can supplied to the ToBe method specifying the error to be matched. */It (' Should handle Errors ', () ={Const source= Observable.of (1,2,3,4). Map (Val= {                if(Val > 3){                    Throw' Number too high! ';                }; returnVal; }). Retry (2); Const expected= ' (abcabcabc#) '; Expectobservable (source). ToBe (expected, {a:1, B:2, C:3, d:4}, ' number too high! '); }); 

[RxJS] Introduction to RxJS Marble testing