Intermediate React, v4 Testing UI Interactions

Transcript from the "Testing UI Interactions" Lesson

[00:00:00]
>> So, we have this pet adoption app, right? And if I click on this image, this image to change to match it, right? So as a user, if I click on a thumbnail I expect the main image to change, again, it's another user story, right? It's not me testing does the active hook, it gets sent to the be the correct thing, that's the wrong thing to test.

[00:00:27] If a user clicks this, they expect to see this kind of logic, so let's go do that. So make a new file in here inside of test,this is gonna be called Carousel.test.js. Okay, import {expect, test} from @jest/globals, import {render} from @ testing-library/ react and import Carousel from ../Carousel.

[00:01:21] We are also gonna need our little, Thing up here as well, this comment to let it know to run this in a GSM environment. Okay. So you can see right away, it picked it up, it's already a failing test cuz it's like, hey, your test suite needs to test things.

[00:01:51] Otherwise, it's not a very good test suite. Okay, so this is going to lets users click on thumbnails to make them the hero Image, okay, async function. Okay, let's make another array of images, const images = (0.jpg,1.jpg, 2.jpg, 3.jpg). Okay, const carousel = render, we don't need to bring static router this time, because there's no links, right?

[00:02:41] We only have to do that when react router DOM is involved, that's fine. We're gonna make carousel, we're gonna make images = images. The const hero = await carousel.findByTestId, right? Yeah, Test Id. And we'll call that 1 hero cool. And then out of the bat, off the bat, not out of the bat, maybe out of the bat too, off the bat, we expect 0.jpg to be the hero image, right?

[00:03:23] The first one obviously should be set to that. So we're gonna say, expect(hero.src) equal to not equal, but toContain rather images 0, right? So, we expect this one to be the hero of the bat. Okay, and then we can write a for loop that's gonna go click each one of them, and make sure that it works.

[00:03:57] So for( let i = 0,i < images.length; i ++) now, we absolutely could have just said done one click test. And say, well if one click works then probably multiple work, but I mean maybe you have a problem that does every second click doesn't work. You'd catch a problem like that, const image = images( i).

[00:04:28] Const thumb = await carousel.findByTestId, and then we'll do thumbnails (i), and then we'll go make these Tests Ids later. Okay, first thing we do is were gonna do thumb.click, because we got this from react testing library, they give us a bunch of helper functions on here. So you can see here, this is actually an HTML element or just actually calling click on it, right?

[00:05:04] And then, here we'll expect, (hero.src).toContain(image). And then, we can also go and make sure that the correct highlighting, right? So, if I click on this one, you can see it's kind of grayed out a little bit. So here, we can say, expect( thumb.classList).toContain( active). Okay, so our test is failing, that's good.

[00:05:48] It's good because, we haven't added the Test Ids yet, right? So this one already is failing, because it doesn't have a Test Id for hero, so let's head over into carousel and make that happen. So where's the hero? The hero is Is this one, right? So we're gonna say, data- Test id = hero.

[00:06:15] And then the image here, we're gonna say that this is data- testid = and we have to add, thumbnail$ {index}, right? Cool, so it looks like our test is still failing, let's figure out why that is? And I put an extra s in there, so in carousel test remove this s here, it should just be thumbnail.

[00:07:01] Whatever it is as long as they match each other, doesn't matter what they're called, right? But now our test works. So, again, here in Carousel we added a data-Testid to hero and we added a dat- Testid to here. This index is like whatever index is on that loop, right?

[00:07:22] In fact, if you wanna look at it and I inspect image here, this one is data- index = 0, date to data, I do interesting. This is actually not even running, so you'd have to be running your server to make that work which we can, right? We can say, npm run dev, I have to break that as well, this is just giving you warnings, ignore all these warnings it's fine.

[00:08:08] Okay, but now if I inspect this, You can see now, that this has the thumbnail ID for the testid right there, it's actually output to the DOM as well. People get weird about is like, well I'm shipping testing module for production, should I do that or not do that?

[00:08:29] Again, we're talking about the on the order of a few bites here and there, if you end up with better tests because of it. I think that means, less broken code for users, which I think is on the whole positive for users. Okay. Trash that one, that's fine.

[00:08:51] All right, so there we are, we're so far so good, we got 3 total test going, this carousel 1 is a pretty good test, I'm pretty happy with it, right? This test quite a bit and one little test here, I feel pretty confident that if I do this that my testing logic works pretty well.

[00:09:08] Notice that it even works on the first run through, it's gonna to click on 0, right? It's already set to 0, so we're also testing that, if I click on this multiple times even though, this is set this is not gonna error out, right? So, pretty exhaustive tests here that I'm really happy with.