Running Tests & Firing Events

[00:00:00]
>> Marcy Sutton: Let's go test that and just make sure I've got this logic correctly. Pretty sure that's it. So I've got in this, here's the Linton output, by the way. I need to go report some issues to that repo. So I'm going to kill my development server on my Gatsby site just because I'm gonna run tests and I'd rather use this terminal NVS code.

[00:00:22]
So to run the test, I'm just gonna say npm test. And I'll show you briefly where that script live. So in package.json, I've got this script section and npm run test or npm test just run the jest test. So that's what we want. So I'm gonna open. Let's back up.

[00:00:43]
So jest it's gonna fire up. It's going to import that component. Okay, cool. So that has been focused. And maybe I could like because I didn't do this with TDD or test driven development, maybe I just changed it to a div. I just want to see, is it gonna fail the test?

[00:01:00]
It did, awesome. Okay, so thank you. They have wrote a really awesome API for jest and that's why it's awesome. That's why it's great because it is actually, this is a good accessibility test because if that focus of all element, get swapped out for something else. Ta-da, they broke the tests, so it's pretty cool.

[00:01:22]
Okay, let's go back to a button. So now I'm gonna go back here. I've got that focus. So that's the condition number one and maybe I could separate these into different tests but I'm just gonna keep going. So now I want to activate the dropdown. So I'm gonna say, activator.click just to fire that event, I believe.

[00:01:41]
Or is it a fireEvent? Let's go look at that. This is a lot of what you actually have to do with testing and go look at the hip hop's. So fireEvent takes the element that you want to fire the event on and then the event that you want to happen.

[00:01:59]
So fireEvent.click, pass in the element, and then the event objects. So this is where if we were doing key up or a key up test or something where we would pass in the key code, or the key, that's what we'll end up using. But I'm just doing a click here so it would just be fireEvent.click and then I pass activator.

[00:02:25]
And I believe that's it cuz I don't care really about the event object. That how you could pass something else in. Let's go see. I'm gonna run npm test. Let's see, no, it did not like that. It made it very angry. Let's go see. It cannot read property focus of null.

[00:02:50]
So interestingly enough, we're getting in here for the use effect rand. So right now I'm looking at the test result is inside of the is open, the part of the use effect. So that means that it's actually like running that code. So that's interesting. But why is dropdownListRef undefined?

[00:03:11]
It's kind of peculiar. Let's go see. So fireEvent.click the activator. Gosh, okay, so dropdownListRef. I mean, in my logic, I could address this just by saying, if (dropdownListRef), if that exist, maybe that would work. Let's try it. So thinking that through, maybe the use effect hook what that's supposed to do is wait until it's rendered.

[00:03:50]
It waits until that state variable is change and then it does things like focus. I don't think it was actually failing on the focus part. No, it is. Cannot read property 'focus' of null. So the ref itself is coming up null, which could happen sometimes like if you had a CSS animation that wasn't ready yet and before the use effect took.

[00:04:14]
I saw this a lot where I'd have to do really gross hacks like a set time out or something and wait until it's fully open and then I could send focus. But that's not really what's supposed to be happening here. So this might pass the test, we'll see, no, it shouldn't.

[00:04:33]
>> Speaker 2: Are you passing an?
>> Marcy Sutton: Yes, nice. I think that exactly, the same thing trip me up before, too. [LAUGH] Nice teamwork. Okay, yeah, I'm pretty sure that's it. So the API for this dropdown activator, it's missing the items. Yeah, good call. So maybe my dropdown component should be more graceful.

[00:04:59]
And I think I ended up adding, I didn't add it here, but if items is null, add something. Like items.length is empty or something, not items.length, I could just return an empty element or something. Yeah, I think what I'd rather do is just to go back to my test and implement the API correctly.

[00:05:28]
[LAUGH] So I'm gonna go in here and just say items. I'm gonna give it a little test object. An item number one, I think it takes text: 'item 1', and it takes the url, I'm just gonna pass in a hash symbol cuz I don't really care where it goes right now.

[00:05:47]
For item number two, I'm literally gonna call it item 2, we'll say url, pass it hash again. So that should if I pass it, items we'll pass items here. So that should work. So yeah, let's go see.
>> Marcy Sutton: Hopefully it's something simple like that. Woohoo, so good call and yeah, it's funny how I repeated the exact same issue twice in a row.