Programmatically Generating Tests

[00:00:00]
>> So one of the other things that's cool about Cypress is that at the end of the day, everything that you're doing is just JavaScript, right. And so though describing it our methods, you've got the chains, you've got the methods for assertion, so on and so forth. So for instance, if we have.

[00:00:23]
We wanna generate a lot of tests and really kind of get our code coverage very high. One of things we can do is, like use the JavaScript programming language to generate our tests, right. So if we wanted to kind of test out all the different permutations of each restaurant that you could pick.

[00:00:42]
We could just iterate over that array right, we could find all the checkboxes based on an array go check each one on and off and make sure it does the thing that we think it's going to do. We could have all the different ratings and adjust the input field to make sure the ones we expect on the page are there.

[00:01:03]
And that seems silly, but actually for things like server side rendering, at first, you could actually find a bug where if someone starts moving stuff before JavaScript loads, right. Or if they have JavaScript turned off, right, or something along those lines, it won't actually behave the way you think.

[00:01:22]
Right, and so you've got to figure out do you want to show those things after the JavaScript loads. Like what is your progressive enhancement like, strategy around this. So like, there are different things that actually like some of these things are useful because like I see that as somebody who found a bug in their fake app preparing for this workshop, right.

[00:01:43]
So there are definitely situations where this kind of behooves us. So what we wanna do is we basically we have these values and I'll do one or two and I'll give you about five minutes to try one as well. Is, basically use a programming construct to see how that kind of manifests itself in the actual cypress tool once we go about using it.

[00:02:07]
So we've got properties, we've got the restaurant filter and we've got the rating slider we know how to manipulate selects. We know how to manipulate range sliders. We know how to manipulate checkboxes. So it doesn't really matter which one I do wish when I leave to y'all. I think I'm gonna go with the checkboxes because it's a little bit trickier because there's just more of them and you've got to like interpolate the selector.

[00:02:36]
And I'm just feeling like somewhat extra generous right now. So I will go ahead and do that one. Now, let's go over into the tool. And we'll go back and we'll pick a secret menu spec. Or that fire up instead, so we've got yeah show name for the actual checkboxes.

[00:02:59]
We're using IDs in this case. So we can grab any of those, and so what we could do is since we have all the different properties here, we can basically just say. For cars properties, right just use a regular and you want to use a radar for each go for.

[00:03:21]
It's just JavaScript. You do what you want. So we'll go through each one of those. And we'll basically say, it should have a column for. Property. All right, I'll just change that to a template string. And so now as we go through, I can say in the DOM.

[00:03:56]
There's a name column or where to order column, each different property dash column has an ID. And so I can start by just verifying that all those exist, and so I could say. Property column. And what you'll notice is that I have taken some of the tedium of making all of those by hand, hope we are getting yelled at is made the test.

[00:04:25]
We can see where I made the mistake. I'm pretty sure I didn't put the # for the ID. Right, so it's going through. And like yet we've generated a test for each one of those columns, right ,that they exist on the page, and we have everything that we think we should have.

[00:04:41]
Right, let's say you have an API theoretically, you could take that object and iterate over the keys or object to make sure that all rendered on the page, especially as you're pulling in. Data from other places you could take, for a lot of stuff. We're doing it to portal, I've got protobuf definitions, right.

[00:04:58]
And so I generally know the structure of the data that I'm getting back from the API. So I can go ahead and then verify that. Like if I'm iterating through all the pieces, everything's on the page, or something went wrong or the API change. Some of these are.

[00:05:12]
We do seek to a lot of times test. There's a test wide mock out and stub out all of my network requests those are useful for is my UI doing the thing I wanted to do. I also have some tests that are like hitting existing things so just to make sure that things change I'm aware of them.

[00:05:28]
That's an option as well, I think our focus is going to just be in our zone of control. Which is our UI and make sure that if it gets back the network requests, we're expecting that it does the thing that we meant to do. But that's an option as well.

[00:05:40]
So we can go basically just make sure that each one of those exists. Now, if we click the appropriate input field then we should make sure it's not on the page right, so it. Should hide column if unchecked. And here we'll go ahead and we will find that particular input field.

[00:06:16]
We'll say, what was it again, was it? Pretty sure it was show and then the property name, cool, show. Property, right and we will check it, sweet. We can also click it to write, and then we wanna make sure that the given column should be hidden in this case.

[00:06:52]
So we'll grab that. Should be hidden. And now we'll go through and you can see that it's iterating through all of our tests. It's clearly not working on that one percent, which is probably gonna be all of them in this case. So looking for that property column should be hidden.

[00:07:16]
So the big question is, Maybe not on the checkbox, go ahead and click it in this case. It might be the thing where I had the wrong element. But in this case now, they're all passing when I click on it. We go through each one. We should probably name the property in here.

[00:07:38]
We should hide the, Property column if unchecked. And so yeah, with honestly two tests we're now checking every single situation, right. And if one of them fails for some reason, right. Now, these are all roughly the same code path but you could theoretically have a bunch of different options and stuff along those lines.

[00:08:01]
The major point is that anything that you can do in JavaScript you have here as well.