- In this section, we're going to dig a bit deeper
into reactive extensions for JavaScript.
In particular, we're going to see
how to create an observable
which emits not just one value
but a stream of multiple values.
And then we'll see how we can test the observable
in our test code.
We can receive multiple values which were emitted
and we'll also see how to test for errors as well.
An observable can emit errors as well as proper results.
So we'd need to test for that.
Okay. If you are interested in following along,
this is the folder where the demos are located
for this section testing RxJS techniques.
Okay. So we're gonna look at three different functions.
Each will return an observable
and we'll see how to test the observable in each case.
So the first function emit stream one.
So what I do is there's a form function
in the reactive extensions library,
the form function you give it an array
and it'll create an observable, which emits those values.
Okay? So this observable will emit the value a hundred
then 200, 300, 400, 500.
When it's finished, it'll emit a complete signal to say
no more data.
So if you wanted to test that,
if you wanted to test that the observable returns
the correct data, have a look at this.
This is my test for the emit stream one function,
a test in that function there.
So I call the function.
It returns an observable.
That observable is gonna pump out five values,
separated by a hundred.
Okay? So we would expect
the first value to be emitted to be a hundred.
We would expect the second value to be
200 and then 300 and so on.
So I've kind of got a little trick here.
What I've done is I've set up a, a help available
which is the value that I expect to receive next.
So I subscribe to my observable.
When I call that function, it returns an observable object.
I subscribe to it and I wait for the next value to arrive.
Now, the first value that comes in it should be a hundred.
So I check that value to be a hundred,
expected is the current value of my local variable.
Okay? So is the value emitted a hundred?
It should be.
And then being a bit crafty,
I then increment my local variable here
to be 200, ready to test the next value.
So when the next value is emitted,
we test that that value is 200
and then we increment our expected value to be 300.
Okay? So the next value that comes in is that value, 300.
So this value here in this hard coded example,
where I know that the values are separated
by a hundred each time,
I can kind of keep track of that in my code here
to check that the value that I've got
is the correct value and then a hundred more
for the next value and then a hundred more
for the next value.
And so on.
When it's finished emitting the value 500,
my observable will then emit the complete signal
which I have to handle here
because you have to, at some point, tell JS
there aren't any more values to come.
So when the complete signal comes from the observable,
remember when you subscribe to an observable,
it'll give you the next value each time
but it'll also tell you when it's finished.
So when it's finished, we have to tell JS we're done
and call in the JS callback function to say,
we can move on now, that's the end of that test.
There will be no more values emitted from that observable.
Okay. Now the next slide, a bit more realistic
where we don't necessarily know exactly
what the values are going to be.
So if we have a look at this,
we have a function called emit stream two.
It's going to create an observable
which emits a specified number of values.
So let's say I pass the value five into this function.
It'll create an observable based on this array,
this array in JavaScript, there's an array dot form function
equips an array of the specified length
and it generates each value via a lambda.
So if you have a length of five,
it'll create an array of five elements and it'll call
this function to generate each of those values.
Basically this generates a number
between zero and a hundred.
That's the basic idea.
So that's what's gonna be generated.
When I call this function it'll create an observable object
and that observable object will omit the values
in this array.
Each value, there will be five of them, let's say.
Each value will be or should be between zero and a hundred.
So let's see how we can test that function.
So to test emit stream two, call that function
with the value five.
So pass the value five in here,
it creates an array of five elements,
generates five random numbers between zero and a hundred
and emits those values in an observable.
So it returns an observable object.
Grab that observable object and subscribe to it.
Wait for the next value to arrive.
That should be a value between zero and a hundred.
Okay? So the value that's emitted here,
according to this business rule,
it should be a number between zero and a hundred.
Check that the value emitted is in the specified range
and then wait for the next value
and the next value.
That will go around five times,
that'll be called five times.
And eventually, you know, when the observable has finished
emitting all the values from the array,
it'll emit the complete signal,
handle that and tell JS that's the end of this test.
One last thing to think about.
Observables can also emit errors,
so let's check for that.
Have a look at this.
This is my third function.
So it takes a parameter, but it does some error check in.
If the parameter here is like,
it's meant to be a length of an array,
but if it's zero or negative, that's no good.
So in that case, this is how you can create an observable
which emits an error.
You say, rxjs throw error.
It creates an observable and observable raises this error.
Okay? It basically triggers an error callback
with that message.
So let's see when I call this function
with a negative value or zero value,
I can test but it does indeed throw an error.
Let's see how to do that.
Testing that end observable did raise an error.
So call the function with an invalid parameter.
That should all be in well
create an observable, which emits an error.
Let's subscribe to the observable
and let's see that it did actually throw an error.
Yes, it did.
What was the error message?
When an error is emitted,
the error has a message property.
Verify that the message 'bad length' is correct.
And then we can say to JS, we're done.
Now, if you wanna run any of these tests,
obviously you need to have the reactive extensions library
installed before you can actually run the tests.
So let's just take a quick look at the code.
I've opened up the code folder
for testing reactive extension techniques.
And what I wanted to pick out is the package.json.
Remember that you have to include
the reactive extensions library in your dependency.
Otherwise it'll just, you know, it won't work at all.
So you need to make sure that your package json
includes reactive extensions for JavaScript
and then you also need to do an NPM install.
Okay? So that'll install the reactive extensions library
in your local folder.
Once you've done that, once you've installed the local
once you've installed reactive extensions
in the local folder, then you can run the test.
So I had three functions that were being tested,
a function that emitted in array, a hundred,
200, 300, 400, 500.
The second function that emitted numbers
between zero and 100 five times.
And the third test, which emitted errors.
Okay? So they've all worked nicely.
So there we go.
It's quite important to know how to test reactive extensions
when you are writing in realistic JavaScript, you will,
you know, it's not something that you do all the time,
but you will need occasionally to have an observable
typically from a web socket or a server.
And you have to verify that your observable is
emitting the correct values and errors when expected.
And we've seen her do that.