Testing React Applications, v2 Configuring Cypress Solution

[00:00:00]
>> Kent C. Dodds: Okay, so let's go in and we'll work through this solution. So what we need is, I'm gonna just create a new user so that I can login in that user cuz we already have the registration test. So we don't need to have any other kind of confirmation that the registration works.

[00:00:17] So I'm gonna use this custom command, createNewUser. That will hit the endpoint directly to create the user for me and give me back that user object. So I'm going to create the user variable here, let user. And then before each one of these tests, before any of the tests run, I'm going to queue up for Cypress a couple of commands to run and accomplish before it runs any of my tests.

[00:00:43] So here I'm going to say createNewUser. And then for each of these commands, whatever that command is, it's premise based. So whatever that premise resolves to is going to be called the subject. And so the subject of the next thing, of the next command I execute, is how I select the username field and then I type this.

[00:01:12] That type command is gonna execute on the subject. And so I need to get that user that was created. So I'm gonna add a then, and the subject of the then is going to be what was resolved by this createNewUser. So I realize this is, if you look at this, you're like, well no, that's just how premises work.

[00:01:28] It's sort of how premises work. That's why I described it in a different way. So then I'm gonna get the user and I'll just assign user to that user. And then once we have the user created, I'll visit the app at the root. Okay, cool. So here, let's go ahead and do this.

[00:01:54] Okay, so when I start my test, I've already visited the app, so I'm gonna look for the login link, so I'll getByText{'Login'}, and then I'll .click() it. I'm gonna save that and we'll pop open our browser. Here I'm gonna get rid of this thing and we're just in the login.todo.

[00:02:21]
>> off screen male: Is it visit, not visit out?
>> [INAUDIBLE]
>> Kent C. Dodds: Here we go, okay. [SOUND] Logout, that should work. There we go, okay, thank you. So great, so we're just gonna visit that. And then we go to the login and we click, click, or we click on the login, that gets us to the login screen, okay?

[00:02:48] So far, so good. So next, I'm going to getByLabelText, I want the Username field, and I'm going to type in user.username. And then I'll .getByLabelText again, the password, this changes the subject. So the next command I execute will operate on that subject, .type(user.password). And then I'll .getByText the submit button.

[00:03:19] And I'll click on it.
>> Kent C. Dodds: And let's just see what that does.
>> Kent C. Dodds: Cool, and I'm logged in. And I can verify that the display name is correct, and potentially that the route is in the right place. And yeah, so on and so forth. So I'll just actually copy this right quick.

[00:03:42] So the assert route is a handy command, like I said, that I think should really be built in. But it just makes sure that the URL is equal to whatever route I pass in. And then we’re gonna get the username-display and expect that it contains our user's username.

[00:04:03] And that gets our test to pass.
>> Kent C. Dodds: All right, what questions do you have about cypress and writing end-to-end tasks?
>> Kent C. Dodds: Anything from chat that I may have missed?
>> off screen male: To clarify something. Get labeled text over here in Cypress land. Is that also case insensitive by default?
>> Kent C. Dodds: Yeah, it works exactly the same way.

[00:04:37] Actually under the hood, it uses dom-testing-library, which is the same thing React testing library uses. Yeah, so you could use Regex here too. So if you wanted it to be case sensitive, for example, then you just turn it to Regex, and if you wanted to be like, it only is this thing, it's starts with and ends with, and that should actually still work too.

[00:04:57]
>> off screen male: But kinda following the idea that the user really doesn't care whether it's initial capped or not. Isn't the inclusion of the initial caps here almost suggestive that you're looking for that, you know what I mean?
>> Kent C. Dodds: I see, so you're suggesting maybe I should just do lowercase password?

[00:05:16] Yeah, that could be, and that's totally fair. I actually was kinda wrestling with that myself recently. Maybe I should just have it all be lowercase, or uppercase, as the case may be. [LAUGH]
>> Kent C. Dodds: Any other questions, yeah?
>> off screen male: Yeah, so without the Cypress testing library then, and you was to use Cypress, you'd be using things like getByID, getByClassName

[00:05:45]
>> Kent C. Dodds: Yeah, yeah so they have the get and then this is query selector. And so I could say, some-class-name, and then I could do that.
>> off screen male: So you could use a pseudo selector there?
>> Kent C. Dodds: Yeah, you could use pseudo selector there.
>> Kent C. Dodds: Like I said, Cypress is very well documented, so Cypress.ao is the website.

[00:06:09] Here, just so you know it when you see it. I should have just opened it up in Cypress. This is what it looks like, and then it has docs. By the way, it does have a pricing right here. So I probably should explain that because people are always concerned like, it costs money.

[00:06:30] So Cypress is totally open source. It has been for over a year now, or about a year I think. And the pricing is for the dashboard feature. So it's really awesome. It's basically just a place to store all of your CI runs of Cypress. Cypress collects a silly amount of data and takes the video.

[00:06:54] And so what this is, is you hook it up with your CI and it'll send all of the data to their dashboard and then it allows you to manage the runs of Cypress. So a lot of really awesome features, but that's the part that costs money. That's how Cypress can exist as a company and support this open source stuff, but all the stuff that you saw right now, that's all open source, will be forever.

[00:07:19] You can run it behind your own servers, everything.