Exploring the Accident Counter Project

[00:00:00]
>> Steve Kinney: So we're going to this accident counter, right? This one you can actually do an NPM start and load up so you can see it.
>> Steve Kinney: I decided that seeing this stuff esoterically as you do it for the first time, maybe not that great. So here we've got a little counter.

[00:00:19]
You can hit this button, and you can update the days since the last JavaScript-related accident. You can hit Reset, Increment, Decrement. You'll also notice two other tasting notes here is that Decrement and Reset are disabled until there's something to decrement or reset. You also notice that I did incredibly hard work of correct polarization on the word day, right?

[00:00:56]
One thing I wanna show you is you're like, this is great, but also the title changes too. Yeah, yeah, one thing that I wanna bring to your attention real quick, cuz I think that'll make it easier than just trying to acquiesce what all these things are, is there is a little Chrome extension called Testing Playground, right?

[00:01:23]
>> Steve Kinney: What Testing Playground does is it's kind of that inspect element, but it will give you the best possible accessible selector for it. So that way if we were just looking at the ones in the terminal, you'd have to somehow know your accessibility queries better than I can assume anyone does, but here's what you do.

[00:01:43]
You can install that, you go into your dev tools, you find this little frog hanging out here,
>> Steve Kinney: I apologizes. But then you can go ahead and pick something and it's gonna show you basically what the best possible selector is for that element that you want to find.

[00:02:06]
This way you don't have to guess and know, you can kind of pull this open and take a look. And a lot of times this is useful when you're developing too, because if you don't have a great one, a lot of times it will also give you a recommendation too on what it should be.

[00:02:21]
So we look at the accident counter. This one happens to be in React. So that's fun. The code itself is a React component. You can know React, you cannot know React, it doesn't matter. You don't technically need to know anything that's going on in here, where we care is our fun little test in this case.

[00:02:42]
So I will go ahead and do one. In this case, I brought in Testing Library/React, that is different from DOM because we're using React. Like that way you don't have to get the document body render root, it's gonna do do that all for you. The only new thing that it does is you get this render method which will take a JSX component, right?

[00:03:10]
For those of you who don't use React, I will show you the same idea in Svelte, where there's no JSX, but it's just taking the class name. But you can see the Svelte one also just has a render method, and instead of taking JSX, it takes the class name and then the props you wanna pass it.

[00:03:29]
Guess what the view one does? Same basic thing. The important part of testing is it should not be framework specific, so we've got a counter renders with an initial count of 0. The only reason you might wanna go into this file is if you wanna see any of the markup.

[00:03:46]
The only thing that we can add is this data dash test ID is meaningful. It's a other way that you can query stuff that maybe doesn't have a very obvious role or anything like that. The argument here is that classes mean things, right? A lot of times we're select by the given class.

[00:04:06]
People, designers change things. Classes get applied to stuff, those you don't want your test tied to your style, right? Could you look for it by class? You absolutely could. Should you know? Because all you need to do is end up changing some style. Style, same with the regular IDs, but a test ID shouldn't change based on the needs of your design, right?

[00:04:27]
So in this case, we can go ahead. It renders with an initial count of 0. So what we can do here is say,
>> Steve Kinney: Count is screen because, like we're looking at this from the perspective of the entire DOM screen. Get by Test ID. And this point, what was it like?

[00:04:57]
I could go back to the other tool I had to, counter count. That's a good name.
>> Steve Kinney: Counter count, and then we could do something like,
>> Steve Kinney: And you'll notice that that one thing I have in the setup files, all it does is add a bunch of additional matchers to expect, right?

[00:05:28]
And so stuff like to have attribute is literally looking for an HTML attribute, right? There are things that you could do on your own to have class which is both a way of conducting yourself, as well as the classes on an HTML element. To have focus, to have form value, as well as all the other ones, to have text content should be by default 0, right?

[00:05:56]
We'll make this one to do for a second.
>> Steve Kinney: So, now what I can do,
>> Steve Kinney: Test, all right, everything passes. Well, that's still skipped. It's passing because it's skipped. Cool, all right, so now our counter renders an initial count of zero. Same thing we can do with this first one, disables the decrement and reset buttons when the count is 0.

[00:06:38]
>> Steve Kinney: So in this point, again, we can do counter.
>> Steve Kinney: In this case, we want the increment button, the decrement button, right? Or decrement and reset. Decrement button is screen.getByRoll. Now, if you don't remember the syntax, So what do you do?
>> Student: Extension.
>> Steve Kinney: You use the extension, yeah.

[00:07:04]
There's also a library where you can paste in HTML and do it, if you just have the HTML and you don't wanna load it all up. I'll share in a second, there's a link where you can just paste in some HTML and do the same, it's the same tool.

[00:07:16]
GetByRole button and name, in this case is going to be,
>> Steve Kinney: Decrement, a pattern that you will see a lot is to use a case insensitive regex.
>> Steve Kinney: That way, if like the casing changes on the button, like your tests don't break. Or if the button where it says decrement, but can say decrement, 0 or 1, or something like that, you're finding one that matches this.

[00:07:52]
You will see that pattern as well, Reset button.
>> Steve Kinney: Screen.getByRole.
>> Steve Kinney: Cool, and then we can expect,
>> Steve Kinney: Check this out. Look at that helpful matcher.
>> Steve Kinney: Cool, all right? What would we be angry about? Yeah, that's not a real thing.
>> Steve Kinney: Let's talk about what's happening.
>> Steve Kinney: In counter.tsx, we got a counter component.

[00:08:57]
Great, awesome. This could be anything. It could be one component in your entire application. It could be just like yeah one little thing. It could be the entire application component. I would argue you should probably be something smaller because when we get to the browser-based testing, that'll make sense to do that.

[00:09:11]
But this is just a React component. There's nothing special about it, we can ignore that. All that's happening on our test is we are right now, we're pulling in this render and screen, screen is a way to just kind of like, give ourselves some helpers for finding stuff with the accessibility stuff.

[00:09:28]
Could you do document.query selector? You could, you have all of the DOM APIs available to you, right? I will argue that the free stuff that you get from going by accessibility queries It helps you in a different area of your life. But if you're like, I hate this, this stresses me out, I just wanna use QuerySelector, I'm not writing tests, go use document.queryselector.

[00:09:50]
Do whatever you want, I don't care. But effectively, before each, we render the counter, right? Just that component. And then we go find it on the page to validate that it rendered with the selectors that we expect that it should. And then we've got these helpers of, okay, this counter, which yeah, I did annotate with the counter count test ID, has the text content of 0, right?

[00:10:14]
Not very much different than those add and subtract functions that we saw earlier, right? With the extra ceremony of mounting something on a page. Okay, go ahead and get a button with the name decrement. Go ahead and get a reset button, which is a button on the page with the word reset, right?

[00:10:32]
And then we can use these expected out of the box, they are in fact disabled, right? And like I said before, not fundamentally different than those add and subtract functions, right? The test itself, other than some new methods that we brought in, are roughly the same.