Exercise - Subscription

Recap

Previously, we created a test using a cold Observable. The cold Observable is immediately subscribed to, not by us, rather by the expectObservable() function. And, further, the cold observable was never unsubscribed from.

In this exercise we are going to use the hot() function that is a property in the RunHelpers object. This function enables us to create a hot Observable. Using a hot Observable we can assert for the notifications that occur while an Observer is subscribed.

As a quick recap, there are two characters that we use to signal the subscribing and unsubscribing events of an Observer:

• ^ represents the subscribing of an Observer.
• ! represents the unsubscribing of an Observer.

Exercise

In this exercise we are going to mock a hot Observable. The behavior of the source hot Observable is:

• Next notification value of 0 in frame 100.
• Next notification value of 1 in frame 200.
• Next notification value of 1 in frame 300.
• The Observable completes in the next frame (301).

You can think of this Observable as an interval that emits an incrementing integer starting from 0 every 100 milliseconds, and completes after 3 next notifications. It might look like this:

interval(100).pipe(take(3));

We want to test two subscription scenarios:

1. An Observer subscribes after 200 milliseconds, and then unsubscribes after 300 milliseconds (or 100 milliseconds later).
2. An Observer subscribes after 300 milliseconds, and never unsubscribes.

Here is your task:

1. Open exercise on codesandbox. I have already imported the necessary TestScheduler class, and set it up in the beforeEach() method.
2. Use the run() method on the TestScheduler instance, providing the callback function that is invoked with the RunHelpers object. You will need the hot and expectObservable properties.
3. Define a new values object that has three properties for each next notification and the associated values. In this test, we're asserting the timing of the subscriptions of each Observer and the next notifications that we expect. Therefore, the values are not important in this test. In fact, you could just skip setting up the values object if you prefer.
4. Create the source Observable using the hot() function, specifying the marble string, and optionally the values object as noted previously.
5. Define a new subscription1 string that represents the first Observer and its subscribing and unsubscribing behaviors.
6. Define a new subscription2 string that represents the second Observer and its subscribing and unsubscribing behaviors.
7. Define the expected1 string that represents the next notifications that the first Observer receives.
8. Define the expected2 string that represents the next notifications that the second Observer receives.
9. Invoke the expectObservable() function. The first argument is the source Observable, and the second argument is the subscription1 string. Chain the toBe() function and provide the expected1 string, and optionally, the values object.
10. Repeat the previous step. This time, use the subscription2 and expected2 strings.