Testing Search

[00:00:00]
>> So let's take a look at some of the things that we could do in our tests. So here we'll go over to the Pokemon search and for anything that we don't cover together, there is a completed version that we can kind of review as well. We'll do a few of them live coding, and we'll just kind of talk about some of the examples as well.

[00:00:20]
So one of the things is in this case, I have just a JavaScript object for my fixture data, right. Cause I decided that generally speaking, like this was probably good enough, right. But you can see in my fixtures file I have like the real API data for Bulbasaur, right?

[00:00:42]
And so I can put in that fixture and get that kind of as my API response as well. My general rule is that if it's tiny, it's nice to have it in the file, so I can see it. If it's big, I don't wanna have in the file because I don't wanna see it, it's purely a developer economics thing for me.

[00:00:59]
You can see like for the other app, the echo chamber or posts, right? Their users is everything that had the other app when I've seen the database, is all kind of here as well. So as to fill these together, and then I will let you kind of try some of them out as well.

[00:01:17]
So as you can see before he's just, we will go visit Pokemon search. We will go ahead and find that search field and alias it to search that label that has the exact same social image alias for that too. Alright, so should call the API when the user types cuz we saw that as soon as I typed in Bobe, it had loading for a hot second, and then it hit a local server.

[00:01:46]
So it didn't take that long, but you can see that that was a query params. So the part that I want there forever is only matched things where we're hitting the API. And then there's a query params after it, but we want to treat all of those we'll just call it API, it'll be fun.

[00:02:03]
So we wanna test that anytime they type in that input field we're sending a network request. We don't really have that ability, I mean, we have the ability. I just haven't shown you that you have it yet you have the power already and it's actually incredibly elegant and simple, right?

[00:02:20]
So the one part that we know that we need to do is go and get that search field. Right, and we'll type, do we have a favorite Pokemon that I can spell? There's no, what's that?
>> Ivysaur.
>> Ivysaur, sweet, so typing maybe IV, that should be good enough, right?

[00:02:45]
And then we just wanna see that it was that the API was called at all, right? At all, well, we'll get more nuanced about this later, was it called? In this case we could do sign up wait, and we'll say we LS is at API right and so what this test is gonna do.

[00:03:05]
Is it's gonna go find the search field it's gonna type IV into it and then it's gonna the same way it. Waited for a get to see like whether or not it should, did that thing appear on the page is gonna see like hey I'm gonna wait four seconds.

[00:03:20]
Did you fire network request that matches that glob, cuz if not I'm gonna be real upset with you. Right so you could do like should have been called and stuff like that you don't have to this will fail, if the wait is not triggered in the allotted amount of time.

[00:03:38]
So let's go through and we will stop the previous one, we'll go into this Pokemon search, maybe we should only this for a second Right, you can see that it fetched it and everything is good, right? The test passes in this case, I just run it one more time to verify, awesome, right?

[00:04:03]
And so you can actually see all the fishes that were made. You can actually see that the URL change as well, right and test for that yet, but I can see it happening, which is super cool as well as things happen. You can see us waiting for the API, and you can see look, this says request matched by site intercept spy with the alias API, right?

[00:04:22]
So there's all of a sudden, this is super helpful for when you I don't know, like five hours and just standing in front of people typing, make a mistake. You can say like, did I just misspell something, and like, did it not even hit the spy, or did it fail because my code was bad, right?

[00:04:42]
And so some of these little things are super nice, for the case of just, making sure everything works, right? And again, you can how to play through every step as well. Right, that's so if you saw it was cuz my mouse was over there, right, it wasn't reloading.

[00:04:59]
It's just as I scroll up, I can play through every scene of the test as well, all right, but like that's cool. Let's see I would be nice to say like it should also update that query parameter which we know that it does right. And so we can grab that cuz wait also won't that kind of like the code looks synchronous but it's really asynchronous.

[00:05:23]
It will hold on wait and now run anymore of the code until that API request has been made. So I can also say and I mean this theoretically should change the same time regardless or it doesnt primarily matter. But we saw that location from the previous example, all right, in this case, I care about the query puram.

[00:05:43]
And that it should, again, if you're only ever gonna have one query fram, you probably want equal. If you're gonna have multiple query params that could be set, I would just probably use contain, right? So I'll leave that as an exosuit whichever one you like better in this case.

[00:05:57]
So if I type in IV, then its name should be IV, and I'll clear the only on that one, we'll set it on this one, So yeah, it counts the question mark as part of the search param, I didn't type that which is why you might want contains.

[00:06:19]
Or you want the question mark it's really it failed for a good reason so you can see here it is it got that and everything was good. Sweet, there's other stuff that you can do we can type something new into it and it should change. The other thing if you want you can actually get at the actual full object I'm mostly gonna do this to kind of give you a sense.

[00:06:47]
To show everything in this case, like as you saw from our purposes, did it change the query parameter is right. But now we wannna see did it fire the right API request, right now did it change the query parameter and location. Did it fire the correct API request, right?

[00:07:09]
And so we'll kind of do this a little bit of a scroll your way, and then we'll show a little more nuanced way to do it, so we'll say sign up, wait. Let's go grab that IV, for the API, and then if I want that underlying interception object, right.

[00:07:29]
Which is just the intercepted API requests I could literally grab it, and then I could. I'm just gonna console log it for now, so you can kind of see all the things that are in there cuz sometimes I'm too lazy to read ducks. We got to only that one, so click only on this one, we'll set it on this one.

[00:07:54]
So in this case, I might go in okay and see the request object here with the headers, the method. Anything that I need to say about the URL for the response from the server, so on so forth, right? I can see all those things as well, if I wanna make sure that it had the API that I wanted to.

[00:08:16]
Like so it should like the the API is like slash, I think probably monster slash API. And then the query parameters we saw before, so it's like, hey, if I type in IV, it should be like /Pokemon searc/ API/ name equals IV. So I could do like an expected here where I like the other piece or I could say, Thing is what was it request, let's see.

[00:08:52]
That URL. Should contain. Right so here we actually looked at the Ajax requests that was fired, rather than the location of the page. So this is what I was talking about before with the temporal example, where I wanna make sure that the request that I sent was correct, right?

[00:09:26]
And formatted the right way, this is a simple example, but I gotta change stuff in all sorts of crazy ways, from what the input field is to what the API currently expects. So to make sure that logic works I can simply change all the fields look at the requests that I'm sending.

[00:09:46]
And verify that they perform the way that they're supposed to cool there are some other little things you can do kind of as we expand this. We could also with the pre population piece I could do sign up visit and put it in there but even site visit has a little more of that it can take a full object.

[00:10:15]
So we could do something like site visit and we'll say that the given an object this time and the URL is Pokmon search and the query string is an object, right. So then we're, there is basically put together that for us. So if we had a whole bunch of different parameters we wanna see we don't wanna definitely make it a string.

[00:10:37]
We don't care about the order, like go visit that, and then we wanna make sure that theoretically like, go do that. Wait for it to fire that initial API request, and make sure that like, that's in there somewhere. So it doesn't only, right, so there's all sorts of really interesting things you can do around the URI in this case.

[00:11:01]
So you can see the pre populated it, we got the right results, it fired the right API requests. Right and kind of just have a lot of opinions, all the ways back and forth. Sweet, the kind of last one that we'll kind of talk about for a second is we talked about the ability to have our own responses in there.

[00:11:22]
Right now we're sending out the requests, we wanna look at the responses as well.