Input Testing Solution

[00:00:00]
>> Our challenge was to take a number of different inputs, right? And basically control the Cyprus, and then evaluate that the result is what we would expect, right? And really make sure that when we set a different input field, that it did the thing, right? Because one of the things if you play with it, you might have noticed that setting the value doesn't necessarily for the DOM framework of your choice.

[00:00:32]
Always update any of the state, so you both need to set the value as well as trigger it, right? And that's why we have that second column there, to make sure that like not only did we set it we also updated anything that depends on it as well, right?

[00:00:45]
And like I said, this is basically true of any of the frameworks that you might be using, so it is kind of agnostic across them as well. So for most of them, they just have a selector for each, and so they have in this case, we're gonna type I thought in there.

[00:01:05]
And then we're gonna make sure that the result contains the exact same thought in this case, right? And this case the thought being that ravioli is are a subset of public PopTarts. So, we saw what we can do with a select, right, so I should be kind of just taking what we saw in the previous example.

[00:01:24]
And paying for, does anyone so the Select is your favorite Avenger? Does anyone anyone liked it? I only pick the original six, it's not like an end game situation here. Mostly that wasn't typing that all out, does anyone wanna cast a vote, I mean would you have to change it?

[00:01:43]
From my choice, let's go with store, so we'll go ahead and we know this one we just call select on it, right? And then we should see that on the other side, we will just use contains in this case, right? Cuz we're just verifying that we've updated the DOM appropriately, we'll check on that one a second.

[00:02:04]
The checkboxes on the other hand, let's go look at how it behaves and see what we would like to do in this case. So checking one displays it checking two, basically or three gives some amount of comma separated values in this case. So let's go ahead and we can either pick one or something along those lines.

[00:02:24]
If you're unclear on what the right selectors are, you have the kind of ability to go either into you can look at the elements to in the regular Chrome Inspector, or you can use a selector playground as well. I think that these also have data attributes, it's interesting that the playground wants to use the for attribute.

[00:02:45]
But that also works as well and there's only one on the page, so like if you're ever like I don't know this is what I want. You can at least get some of the data around that as well, pretty sure let's see. Grab one of these is because the label has the four and then there is the actual data test attribute as well.

[00:03:07]
So you can use either one of those depending on what 20 like better honestly. So in this case, we will go ahead, so in this we have it is saying it contains none, and then we can change the result. So why don't we go ahead, we'll make sure it starts with none, let's take tomato, sardines, and then the result.

[00:03:38]
I guess you could theoretically do each one separately, you should just contain these two words, but let's try tomato, sardines. So these are we actually have to this won't do anything yet, this test will fail because we didn't actually check them, right? You can click them we're gonna use the check one in this case, but let's just watch it fail in this case.

[00:04:03]
You can see like, hey, I look for 4000 milliseconds, which sounds a lot longer than four seconds. But look for 4000 milliseconds to see that over in here and it didn't happen, right? Because some things happen maybe on the next event loop cycle, or maybe they're had you an Ajax request, so on so forth.

[00:04:21]
So it doesn't go like immediately it wasn't there, it will normally give you a little bit of a grace period and then give up. This is like in a lot of cases not something that a lot of the predecessors to cybers did, right? If it wasn't there your test failed, and you'd play the game of like you'd open up a PR.

[00:04:37]
And you'd spend almost as much time as to write the feature figuring out why your test cases were flaky. Cuz maybe like some service that you didn't have stubbed out was taking too long or something along those lines. So in this case, let's go ahead and we can flip back, and should just be able to check it.

[00:04:59]
So we'll check both of those and we'll see what we get. Now we see that one passes, and the reason we don't see it on the page at the end, cuz we're revisiting the page for the first time before every test, right? We could theoretically have one test that did all of these, that would arguably be faster, right?

[00:05:17]
Cuz we wouldn't reset the page go and reload all those things, so it all depends, you might want to have everything separated for the cases of learning gather separated. So you can like figure out which one is failing, but there's nothing stopping you from just having a run that does all the things on the page, and expects things to end up a certain way.

[00:05:35]
All right, cool So radio buttons are also you can also check them as well, so in this case, we can check Ringo. Which is the one we kind of have preloaded, not my favorite beatle, but it's fine. It's Paul, in case you were all wondering. So that should contain Ringo in this case, as we go through, perfect.

[00:06:00]
All right, so the color input, so this one has a value that is some hexadecimal color, but we clearly can't type into it. It's not really a select, what do we do? This one is very similar to the range operator, where we have to basically set its value, and then invote the change event.

[00:06:26]
So here we'll say we'll invoke the value, and we'll set this to I don't have a favorite hex color that they wanna share.
>> Abcdef.
>> Abcdef, suite and then we'll trigger an input event. And then the value I'm pretty sure that the behavior of the actual HTML element is it keeps it lowercase, regardless of what we type in, but we can find that out too.

[00:07:04]
A, b, c, d, e, f. All right, I just have to know.
>> Brownish red I think.
>> No so it's a bluish, right? Cuz the higher values are on the, yeah, I quite like that color actually, it's like one might even call it a periwinkle. All right, so the date input this one's I kinda alluded to in the setup for this, what you see is not necessarily what you get.

[00:07:41]
So this is a date of input you can kind of click on any of the different date fields, you get this cool built in calendar. But like there's a bunch of pseudo elements that are kinda hard to get to, so in this case, again, we would probably set the value and invoke a change.

[00:07:58]
And it's kinda interesting to think about, what the use case would be for me testing this. It's probably, I think about the use case that I most recently used on this one which is I should change it that should trigger an API request. And I wanted to make sure that the query params going to the API request, were the correct ones, and that triggered an API request.

[00:08:18]
So the actual like, can I click a native Chrome or Firefox date and field is not that important to me. I assume that the chromium team or the human Mozilla have tested the actual mechanisms of that box. I usually want the downstream effects of that change, right? So in that case, we would go ahead and we would invoke that value method again.

[00:08:48]
And we got to put it in year, month, day, cuz that is effectively the normalized structure that is keeping that in. So we'll do, I don't have a favorite day, what's today is 2021-12-17, cool, so I put in my birthday, I don't need to dox myself right now.

[00:09:11]
And we'll go ahead and basically verify that is what gets rendered at the other end, because if we put in something. I am actually somewhat curious what happens if we put in invalid data, we invoke that what it does, we can find out. So I do have to get rid of that only, otherwise none of this will work the way I planned.

[00:09:30]
So we'll go ahead and again this will contains what we think it does. Cool, out of my head, just for my own curiosity, let's go ahead and just, I wonder if you give it a good Americanized date. What it will do in that sense? Actually it gets a little funky, where the value that renders is correct, but the Date field doesn't know what to do with it.

[00:10:08]
So we learned something today. All right, the range that we saw before that is again the same move. And what we'll see a little bit is there are ways to kind of add additional functionality to Cypress. And so this might be a thing that you would choose necessarily add is what we call a command, right?

[00:10:26]
And there are ways to make commands that becomes the start at the chain, intermediary in the chain, and you can create kind of your own custom pieces as well. I usually don't, because sometimes I want different events, there's not enough of them to really justify it for me.

[00:10:44]
So what are the options here, it's just it's probably one to 10, so we'll say six, and will say. 26 and we got a clear that only. Great, and so that one, Anyone know what I did wrong? I accidentally told you before, I changed the value, I didn't trigger anything.

[00:11:23]
I'd love to tell you that I purposely mentioned it earlier and then forgot to do it, I'd love for that to be the story. In fact, that's totally what happened, I didn't make a mistake, I don't make mistakes. I just cursed myself for the remainder of this workshop, so all right, cool.

[00:11:44]
The file input like I mentioned before you can do the same trick, there is I'll show you in a little bit. There is a plugin also, that gives you a new method that Cypress does include called Attach File. And it will allow you to do that as well, but we can also set it as a value in this case, it is kind of interesting.

[00:12:04]
I don't actually think I have a file on my desktop, but is easily accessible, and I don't feel like digging through my file system at this moment. But essentially, if you like show the file on the page, it's like C colon slash fake data slash the file name, right?

[00:12:18]
And so that's actually how the the normal input itself behaves, but under the hood for any browser that does not support any of these different types of infield, they all fall back to a textfield. So under the hood, they are all text inputs at the end of the day for browsers that don't support them.

[00:12:38]
The same way if you just said input type and you just gave it like pizza, it would be a text field, right? And that is the default behavior with the progressive enhancement of those features as we go through.