Test-Driven Development on a Component

[00:00:00]
>> Brian Holt: Let's try another test here in pizza.test.jsx, test to have default image if none is provided.
>> Brian Holt: Some of you might be looking this is like, but Brian, it doesn't have a default image. Yeah, we've discovered a bug in our code. Async, we're gonna say something quite similar, const_screen.

[00:00:32]
You could probably even just copy and past this if you wanted to.
>> Brian Holt: And just dump source here, right? You don't want that and we want name to be something else. And I'm just going to put something else because I'm not feeling clever at the moment. So notice that this has no image despite the fact that it expects one.

[00:00:59]
So I'm going to say, const_image equals screen, again, you can do this.
>> Brian Holt: And we're going to say, we expect image-source not to be blank.
>> Brian Holt: Now, if we look at our thing, obviously, it is, right? There we go.
>> Brian Holt: It gives you a bunch of just helper stuff to figure out what it needs here.

[00:01:37]
But it tells you this is not working. Notice, it's also saying something about this, right? Does my favorite pizza pick some, this doesn't make any sense, right? This was from the former test, right? Why is that? It's because screen is stateful and we didn't reset it.
>> Brian Holt: And that's why I'm putting this in here, because I constantly forget to reset it, and I know you all are gonna constantly forget to reset it as well.

[00:02:03]
So I want you to share in my pain, mostly, this has been just a long con to make people suffer. So we're gonna clean up after ourselves. Inside of V-test here, we're gonna grab our sentiment in V-test, but rather a testing library, react, the cleanup function, and then from V-test, we also need after each
>> Brian Holt: And then, you just got to do one little tiny, very easy thing after each clean up.

[00:02:38]
>> Brian Holt: And now, if we go back, this is gonna be a much cleaner error, right? It doesn't have all that other stuff. This is just basically telling, hey, after each one of these tests, run the testing library react to clean up itself. You might be looking at this like, why do I have to plumb this?

[00:02:57]
This doesn't make a ton of sense to me, it's because testing library react doesn't know when each test starts or finishes. It's not the same thing as V-test, right? It's a separate library, and it's usable across mocha and all the other testing harnesses. So you just have to give it like, hey, I'm done, you also could have done, I'm pretty sure something like this.

[00:03:25]
>> Brian Holt: And just called it right there. And I think this would have also worked. Yeah, right, so you can manually call it as well. This is just nice with V-tests to say, like, hey, after every single thing, please reset testing library back to where it was. Okay, so that works, but our test is still failing obviously.

[00:03:48]
So let's go modify pizza then to say if there is an image, use it.
>> Brian Holt: Otherwise use our little picsum.photo/200.
>> Brian Holt: This 200 just means it's a 200 by 200 square. You guess it if you want a 3 by 300 square, I think if you want a 3 by 200 it's like this, it's useful, I use it from time to time for prototyping.

[00:04:24]
>> Brian Holt: So now, source will have something here if you didn't pass in an image, and in theory, our testing suite should be passing now, it is. So there we go.
>> Student: Why are our tests in here having the asynchronous functions if our pizza does not have any asynchronous calls to it?

[00:04:48]
>> Brian Holt: It's good question. Let's look at the, so the very first answer to your question is, I just always make it async, because later I might add asynchronous things. I don't remember, we don't have anything in here that we have to wait for. So no, this one, we don't have to you really could take these out.

[00:05:09]
I'm not mistaken, right? It actually doesn't depend on those being async. But so frequently, I end up adding async things when later I'm why is this not working? It's yeah, I got to add the async, as soon as you put a weight here or something like that, it's gonna say it failed, and I'll be like, why did it fail?

[00:05:28]
Well, at least it gives you a nice error message, right? So in this particular case, the answer to your question is force of habit. There's no downside here because V-test handles both.