Creating Observables

[00:00:00]
>> So I am going to kind of take this first spin real quick. So I have this very kind of simple example right here. Where we have of and from, and one of the reasons we're taking a tour here is you're gonna try try this out yourself in a second in a slightly different file, but kind of walk you through what we're gonna do here.

[00:00:22]
One easy way to test observables is to basically go ahead and collect them all in an array, right? So here we have result. We don't have any code signifying what would actually happen here. Again, to use observable, you can set it up but nothing happens with an observable until you subscribe to it.

[00:00:45]
So observables are effectively lazy. You can establish when you say this is, you have 1, 2, 3, 4 but nothing is happening to those values until you subscribe to it and then it activates. And we'll go run through all of these things. Each time you subscribe to it, you get a fresh version of the observable, and we'll see how to deal with that a little bit later and it'll run through each one of those values, right?

[00:01:10]
In a case of or from you're gonna get it either immediately or in the case of a promise, when the promise resolves. Later on when we see intervals and events and stuff along those lines, it will be whenever the thing happens. All right, so what would this look like?

[00:01:24]
So we could say if we wanted to use of in this case, we could say observable. And I could say of four. And now clearly that's not gonna put anything into my result. So this test would fail if I ran it immediately. And so what we need to do here is say observable and then we'll subscribe to it and we'll get each value one by one.

[00:02:02]
Right? And this is kinda cool cuz it means that you can create an observable, whether it be from a promise from your API, whether it be from a given event. And you can separate the creation of the stream and what you wanna do with it, right? Which means you can kind of create this and yeah, this is obviously a super simple example.

[00:02:19]
But you could create this, export it in a given JavaScript module, import the idea of creating a stream multiple places, and then how you use it throughout your application can vary depending on what you need to do, right? So it could be you can have one observable listening to mouse clicks just on the document itself, or a keystroke, or something along those lines.

[00:02:40]
And different parts of your application, whether it's dismissing drop down menus or models or something along those lines can listen to that one event. It's not like okay, cool, this modal loaded. Let me add and different parts of your application, whether it's dismissing drop down menus or models or something along those lines can listen to that one event.

[00:02:50]
It's not like okay, cool, this modal loaded. Let me add an event listener and clean it up. When the modal goes away, I can literally just have this stream and the subscription is separated from the creation of the stream itself. So I can an event listener and clean it up.

[00:02:58]
When the modal goes away, I can literally just have this stream and the subscription is separated from the creation of the stream itself. So I can run this first test. And see that's running and this one passes, right. And again, from is very similar in this case, and so we could say observable.

[00:03:23]
At this point we'll just use the array instead, right? And you could write a generator in here. You could do whatever you want. We'll just grab this code from up here. And we'll put the same values into the array and this point we will not skip the test.

[00:03:38]
And we have both of them in place. So this is the kind of simplest possible version of this, that we can kinda use to kinda understand how exactly go about creating some of these, Mark.
>> For asynch events, does the expect method execute before the observable results?
>> Yes [LAUGH].

[00:04:01]
That is a great segue, right? So yeah, one thing. So the question was is for asynchronous events doesn't just get angry and ask for some kind of way to know that we're done doing whatever we need to do in order to run the actual expectation ingest, right? Yeah, just gets angry because the asynchronous events will happen after the test close.

[00:04:32]
So, pop quiz. An observable, we have next forgiving event, we saw that that's what we're using put things into an array. What do we have to know when we're totally done with the observable?
>> Complete?
>> Complete, right? And so what we could theoretically do here is if we only care about the next value, we just put in that function, right?

[00:04:55]
If we need to wait for the observable to be done to do something then we can use complete and that's when we would run our expectation. So in here we have an exercise with creating observables. And the reason why I love that question so much is kind of towards the bottom, we have some situations where we're creating it from a promise.

[00:05:19]
So ingest if it is an asynchronous test you can pass it a done as an argument in the it statement and then you call it whenever you are in fact done.