This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Testing ShowCard Count" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Brian Holt: Another thing that we might want to test say that on our initial render it wasn't showing all the movies one of the times. Right, like that and that was a problem for us we want to make sure that. We’re gonna showing as many show cars as we definitely have data for.
[00:00:17] There's actually a pretty easy way to test for that. So, let's pull and show cards now because you don't test for the existence of show cards, okay. And we're also in a poll in data
>> Brian Holt: Actually what we're gonna do here is, shows-
>> Brian Holt: ../public/data, okay?
>> Brian Holt: We're gonna write another test.
[00:01:03]
>> Brian Holt: Should render as many shows as there are data for.
>> Brian Holt: Yep, I like to dangle my prepositions. Deal with it.
>> Brian Holt: You definitely don't want to take an English workshop from me. Okay, so we have to get another wrapper here wrapper here, so we have to say const wrapper equals shallow search.
[00:01:43] Okay and I wanna say expect wrapper.find ( ShowCard). So, the cool thing here is we can actually just give it the the ShowCard. Component from react intellectually you can actually search based on that which I think is pretty cool. So, length-
>> Brian Holt: To.equal(shows.length). So, let's talk about the cycle.
[00:02:19] So, we're doing another shallow render here of Search, and then we're doing a find, we're finding every ShowCard here in here. This is going to return to us an array of all the show cards it found. And I'm asking, did you find the same amount of show cards that I have shows to display, right.
[00:02:37] So, it's basically testing it, do all these get shown on the very first render? That makes sense?
>> Brian Holt: So, let's go see if that works.
>> Brian Holt: Okay, to passing let's go make it fail. So, here's a fairly insidious way to make it fail. It does it this filter.
[00:03:09] Based on the title in the description. And it does that from the search term. So, if we set the initial state to be something other than blank, it's not gonna show all of the shows the first time, right. So for example, if I change this to be house and I come in here and run my tests again
[00:03:33]
>> Brian Holt: Now, it's gonna only render two which are gonna be House of Cards and Fuller House, right? But it's actually expecting 21 shows to be there. So now, this would fail and this would fail usefully for us, right? So this is checking several things for us, which is kind of interesting.
[00:03:54] So, let's unfail our test and look at app spec again. Any questions about that test.
>> Speaker 2: I do have a couple questions here. Not as on this specific test, but they're asking if you move the data.filter.map code into a function and search jsx. How would you call that function?
[00:04:16] And then, can you call the test as a rap. Call it in a test as like wrapper of some function.
>> Brian Holt: Ask me the first question again, let's see one at a time.
>> Speaker 2: Moving the data.filter.map code into a function in search through JS. Basically, I want to be able to access then call in here to test that.
[00:04:35]
>> Brian Holt: Sure, if you want to basic test your static methods?
>> Speaker 2: Yeah, can you tell us whether or not the search is filtering But at least what kind what you're getting it sounds like.
>> Brian Holt: Okay, you definitely can. There's a couple ways you could do it. One of the you can just separate into a separate module and then just require that in and run it through the module.
[00:04:53] That's probably the easiest way in my opinion because then you'll have to mess with reacted all you can just test it on the side. That's something you're interested in testing. I don't really use statics that much. But there is a concept of statics in react which I had not intended on talking about today.
[00:05:12] Again, I don't really use them that much. But this is an object full of things that are static methods, that you can basically say like my filter or something like that which is a function, right? And basically you can call at this point I could require into my test.
[00:05:31]
>> Brian Holt: And I could say something like Search.myFilter, right? And then I could test it that way. So, there's basically exposes these static functions to be called statically, right? That if the terms calling a function statically doesn't make a ton of sense to you. That's okay, it's kinda computers science.
[00:05:52] But the basic idea is that, this is a method for all of search and so search has exactly one instance of this method. Whereas, something here like handleSearchTermEvent, every single time I create a new component, a new search component, it has its own version of handleSearchTermEvent. Whereas, all of search, every component, every element everywhere has exactly one instance of my filter and it's here on the statics, right?
[00:06:20] Basically gets put on the prototype if that helps you think of it that sense. It's kind of like not typically useful but then that's the place where this would be useful if you wanted to test it. But then again, I would say most things that could be put on status could just be.
[00:06:38] Put into another module totally and then you can test the module. It's a little less complicated, up to you. The syntax here might be slightly different, I might be a little bit off but that's the basic gist of what's going on here. So that's officially confusing for everyone [LAUGH].
[00:06:55] It is a little confusing I know. But I was not intending on talking about it but you can do something like that. Other questions.
>> Speaker 2: Give me a minute there is a couple here. You might have covered this. Did you cover, he said I missed that, what is statics?
[00:07:14] But I think you just explained that.
>> Brian Holt: Yeah. Tried to. [LAUGH]
>> Speaker 2: Is.
>> Speaker 2: Can the value of a search input be manipulated inside the test?
>> Brian Holt: Yes, that's actually our next test. So, good question. So, give a question I thought of myself. [LAUGH] Just kidding that's a great question.
[00:07:40] Yeah, our next text we’ll talk exactly about that. Other question before I move on?
>> Brian Holt: Okay. So, Zachary has a question here. Why does .find(ShowCard) rather than putting this square brackets around or not the square brackets.
>> Brian Holt: Angle brackets. Thank you. This probably would work.
>> Brian Holt: I actually don't think it will because it could be looking for specifically a ShowCard that has no properties, right?
[00:08:28] Because all these, if we go back here and look at my terminal and I scroll all the way up here. Look at all these properties these are getting in, right? It has the trailer. It has all that other stuff. And so, it's gonna look for a ShowCard that has no properties on it.
[00:08:41] When this particular case I was like I'm looking for ShowCards. I don't actually care what the properties are. I just wanna make sure there's 21 of them. I think that's the difference here.
>> Speaker 3: So, would that be true vice versa to it. Search on line 17.
>> Brian Holt: It's not because you actually you want to render an instance of of search for a does that make some sense.
[00:09:07] Yeah, you wanna actually create like a specific instance of search to be able to call the wrapper.
>> Brian Holt: That didn't make any sense. You wanna be able to create a specific instance of search, right? That then you have this wrapper around the call methods on. Now, this actually might work.
[00:09:30] Again, the dangers of live coding. Someone asked you previously if you could do this. You might be able to do (React.DOM.h1). I don't know if this is going to work so, hold on your seats.
>> Speaker 4: You need one more closing parentheses.
>> Brian Holt: Thank you. It wasn't gonna work until she fixed it.
[00:09:51] Thank you.
>> Brian Holt: I guess it didn't work. Factory type is deprecated. I don't know. There might be something to be done there. I don't actually know how to do it. So