Check out a free preview of the full Testing Web Apps with Cypress course

The "Mocking In Depth" Lesson is part of the full, Testing Web Apps with Cypress course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through some additional examples for mocking requests and data within Cypress. Requests can be intercepted based on the type of request such as GET or POST. Full API requests can be stubbed eliminating the need for the endpoint to be available during the test.


Transcript from the "Mocking In Depth" Lesson

>> So he starts to pull everything we've seen together. And then we'll kinda do one little fun little, bonus thing that just has a wow factor. But in this file you can say that, for post request, we yeah. For very simple, just getting the posts, we might use a fixture that we saw.

This is the same data that is seated in the database that we have a fixture for it. This is all the stuff that we see to the database with but in the case of just using JSON data. It all depends on what you're trying to accomplish. If we wanna say, hey, take the posts request and this is what we wanna send back without putting the database when we don't have a reliability on that either.

We wanna make sure they're cool. We get back a response we're supposed to put it on in the DOM that will happen right because we're intercepting a post request and putting in there as well. Kind of again we have some aliases as we go through. This just grabs the first post and aliases while using that side wrap that we saw right you might just have your own fixture for that too.

But showing you that you have that programmability as we saw also earlier in the workshop looking down a little bit cool we grab the posts and then we should see that the previews happen. Have the number of posts that we think, right? So we are going and visiting that page.

We know that the getting all the posts has been stubbed with this fixture,right? So however many posts were in that fixture, make sure what you showed on the page is the same, right? This gives you that programmability around your fixtures Is right? So you can actually if you had it in a JavaScript object towards the top, yeah what it is then?

Is just side I get a previous should have length posts.length, right? This is so if you need to get at that underlying fixture Write that then will always drop you in to the real JavaScript or jQuery, which is a JavaScript thing, I guess Cypress also real JavaScript, what I mean?

It'll drop you down those layers of abstraction, as you kind of go through, right, kind of again pulling the rest of this together, right, you can again drop in towards that interception. You could also say this is to get it separately so that we can check it against the path name right.

So go to the first one click on it wait for something to hit the single posted API and then make sure the path name, right? Is the one that we went to go search for right? Again this is all things we've kind of covered hitting Enter should also hit the create post API.

This is not using about then it's using its syntax that we saw before. And it should contain what you typed in the box. All right, that's in the request if you wanted the response as well. Making sure that the Delete button sends a delete request and the patch button sends a patch request right?

So these things that you don't necessarily need to test that the database is doing that ideally, you have server tests, right? You're just saying did you do the thing that that button was supposed to do? Let the server tests worry about whether the server did it. Now you can also use Sign Up request to send requests and then use site request to pull stuff back out and test your server as well if that is something you own and control on your team, right?

All of these kinds of features are there again going through again so when I click the edit button right, it should show me the form. When I hit the update button, it should send a patch request right? When I hit the Delete button, it should send a delete request.

I don't necessarily, if I'm supposed to wait for that response or remove it from the page, that might be another test that I write. Right but I probably wouldn't reach in with a task to check the database right, that, or that those are the tests for my server, right.

But again, you can kind of figure out lots of things that are kind of not to say possible with unit tests, right because you will again probably stumble out of stuff at the unit test as well. But real tedious and hope that you have almost perfect dependency injection in your code, right?

Yes if you are if you and everyone on your team writes perfect code all the time, maybe you could unit test it all right. But I think this is really also a really great option if you don't have a perfect code base. But you'd to not have it's one of those things, your tests find your bugs your customers find your bugs, your choice, right?

>> Would you say that this is also a good way to pull your testing into an environment that better approximate It's
>> Yeah, because it's just driving the browser, right and again, some of that kind of dropping to the JavaScript objects that we have is there when we need it, but I would treat it with caution right?

Because the more your tests have to know about the underlying mechanics of your code. The more likely it is that you might change as underlying mechanics and that might become problematic, Mark.
>> So Cypress is good for automating regression testing then?
>> Yeah, yep. And there are tools Applitools and, which also do visual regression testing.

Right, which is basically we'll kind of see in a little bit that you can run your CI/CD process it will take screenshots when we use Cypress dot run. And it will you can basically say cool compare this screenshot with the last time Cypress itself isn't necessarily doing this.

There are other tools you can use in conjunction with Cypress that will not only be regression testing for the functionality, right. But also literal visual regression testing did you meaningfully change the way the layout of this page was? Because you made a Flexbox booboo, right? Or something along those lines and catching those things.

And again with a regression testing it's always good because there are places where you might decide I wasn't even touching that. But I changed something somewhere and a change the layout of this nested view that I didn't even think to look at having that test coverage basically stops your paycheck from going off right?

Which is the ultimate goal, [LAUGH] Is to not be stressed out I'll be being on call.
>> Yeah. Are there also tools for what would be tagged text logging as it's going through things if you wanted to capture, say the state of the test, and this is very similar to taking pictures.

>> Yeah. So Cypress actually has a tool around that that's kind of similar so. Cypress also is a company, right? So the other part, if we kind of, I'll show you real quick. And I think we can even set up a quick CI/CD thing at some point. But you can actually connect it to a dashboard.

Will actually show you which ones your tests are flaky, which ones pass all the time, what the statistics around that are. All the kind of screenshots and kind of give you all the analytics around those tests. There's a pretty generous free tier. We can set up that original app with something as well and kind of see that in place in a few minutes as well, but you can connect it and get a lot of that.

Like I said for open source projects. I think there's a pretty generous free tier for private repos I there's a cost structure around it. That is how the company seeks to make money. But yeah, they provide tooling around that, which is kind, I think part of the business proposition.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now