Alert Spy Exercise

[00:00:00]
>> Steve Kinney: We'll start with this one. This is it's technically react, but it doesn't matter, umm. Which is we want to just spy on our good friend alert, right? And so this one, I'll kind of get us started with it, and then we'll take it for a spin from there, umm, should render an alert.

[00:00:21]
Button should trigger an alert. The only thing that you will need, umm, be honest is just, the ability to type into a field, right? And so if we look at this function, we've got a input labeled message, right? And so just to review, we're going to say.
>> Steve Kinney: Const input equals, umm, we got to render this component too.

[00:01:03]
>> Steve Kinney: So we're gonna render the alert button. The input, I will start you out with. I'm going to do everything but the mocking for you at this point. The input is, a, screen get by label.
>> Steve Kinney: Get my message.
>> Steve Kinney: Let's do that act in this. This'll probably work.

[00:01:33]
Let's be good people.
>> Steve Kinney: Act.
>> Steve Kinney: All right, so this is also a sync.
>> Steve Kinney: And here we'll take the input.
>> Steve Kinney: And so now we can type in that field and then we also need that button that we saw earlier. So let's go take a look at what that is.

[00:02:20]
It is called trigger alert.
>> Steve Kinney: [INAUDIBLE] button with the name.
>> Steve Kinney: And I'm gonna put a dot only on this one real quick.
>> Steve Kinney: It's the only one we care about right now. And make sure I'm in there.
>> Steve Kinney: User vata, type into the input field. Okay, so at this point, it's not doing, it's not triggering the button.

[00:03:13]
What we wanna do is we got some of the Dom testing stuff in place, which is, we're getting the input field, we are typing into it. And we know that works, cuz if it couldn't find the field, or it couldn't find the button, the test would have blown up, right?

[00:03:27]
And we know that it's typing into the input field, right? I mean, after that, we also wanna click on the button, but we wanna do a spy on alert, and did it get called with the thing we were expecting, right? And that's gonna be our kind of, so we need to, if we think about what we did with like spying on log, right, we need to spy on log, or in this point, alert.

[00:03:50]
And we just wanna verify that when we click the button, alert got called, right? So, things that I will once again show you to prime your brain correctly, umm, which is, if we went back to that scratch pad, actually I'll just put it up here.
>> Steve Kinney: This is what we wrote earlier.

[00:04:10]
All right, if you wanna mock out the implementation, you can do mock implementation as well.
>> Steve Kinney: With whatever you want it to do. I don't know if we really care, but that's effectively for spying on a built in. Cuz again, we couldn't really test whether not alert was called anyway, we'll spy on it.

[00:04:28]
And we wanna do is be able to one figure out how to click that button, which we know how to do, and then we wanna assert that alert was actually called with the message that it should have been called with, right?
>> Steve Kinney: Click on the button and look and see if alert was called with the message.

[00:04:49]
Cool.
>> Steve Kinney: Okay, so let's, let's play around with this one. Then we'll look at a few more kind of ideas and a few other kind of fun things along the way. All right, so we wanted to make sure that alert was in fact called in this case. So we do know that we will need to go ahead and hit the button.

[00:05:23]
>> Steve Kinney: Right, but we haven't actually spied on and subbed out what alert does in this case either. To be clear in JSDOM, I don't know if calling alert does anything like, because there's no.
>> Steve Kinney: I mean, not like not in a fake DOM though. I don't really don't know what happens.

[00:05:49]
Let me tell you how often I use alert on a day-to-day basis, but we logged on console log and I was like, what's the only other thing? Cool. So in this case, what we'll do is we'll say, like, alert spy, and we'll say.
>> Steve Kinney: VI spy on the only like, that point alerts on window.

[00:06:17]
And I don't know if it needs a mock implementation. Let's find out if it blows up on us. Cool.
>> Steve Kinney: And.
>> Steve Kinney: So now what we should be able to. Do is expect alerts by.
>> Steve Kinney: To have been called.
>> Steve Kinney: And you could argue that this could be one one expectation.

[00:06:49]
But just to make a point, alerts by--.
>> Steve Kinney: It's just alert, spy, it's just a large spy.
>> Steve Kinney: That's interesting. Like I called with alert, exclamation point. Hello.
>> Steve Kinney: Because it starts out with a message in there, super interesting. Nice to know. I like this because we're going to play around with this for a few reasons.

[00:07:31]
So I could like, you know what I can do? Here's a bonus. User event, fun thing.
>> Steve Kinney: Take that input and clear it out. Like you can interact with the DOM any way a user would, right? We'll go ahead and clear it out. And now we got called, correctly, which again was my test technically helping me by showing me that there was an inflammation to think that I, you know, it's like we joke about how future you forgets what current you is doing.

[00:08:11]
See also right now, so like, show of hands, like who feels good about this? Like who feels. I love this lifestyle for myself.
>> Student 1: [LAUGH] This one specifically, or just testing in general?
>> Steve Kinney: Testing, no, this, like, the idea that we're, trying to take third party stuff and control it and hope for the best.

[00:08:32]
Probably not, right? And this is where that those injection pieces can kind of become interesting. Because here I'm like, hoping that I can grab on window alert. Then like calling and all those kinds of things. And it's just like, with all of that, again, the more of the outside world we try to simulate, the harder it gets.

[00:08:53]
I would rather pass in functionality that I need. And you can have a default to stuff very easily. So like, maybe it is like one of those like, umm, this is really a form so we'll do on submit, right? Wouldn't it be nicer if we could pass in on submit that maybe defaults to alerting, but we could pass in some functionality.

[00:09:17]
And we could say like, message.
>> Steve Kinney: Right, instead of that default alert in there, right? And take all the stuff that you can't really control. If you pass that stuff in, and this works for React components, as well as it works for object-oriented programming, as well as it works for anything.

[00:09:33]
We could just pass in a function to generate a random number to that character that maybe if you pass in nothing, it is maybe. It's math.random, but you could pass in something else as well. And then giving that control to the person using it instead of like, hey, we do all this stuff that you can't really get at.

[00:09:50]
And if you can do all these weird tricks, and then maybe one day you can use it. So we can say like const handle submit.
>> Steve Kinney: And we'll pass that in.
>> Steve Kinney: So now we've got a function where we're gonna pass in all of that kind of other stuff.

[00:10:14]
Maybe we'll make this.
>> Steve Kinney: Default, message. Cool, cool, cool. Now this will fail cuz we don't even have an alert spy anymore. So the other one, like we talked about, test driven development, right? Where you write the test and then make it pass, that also works for refactorings too, right?

[00:10:39]
Or bug-like cases where cool, there is a bug, write a test about the way you wish the world worked and then manifest it, right? So in this case, we can say that, that handle submit to have been called and then--.
>> Steve Kinney: Handle submit to have been called with Hello, right?

[00:11:03]
This will fail because, like, right now, this component has no idea about taking props, right, which, you know, it never got called, so on and so forth. It is trying to call alert. It's pretty angry about that as well. So in this place, we can just go ahead and just say--.

[00:11:47]
>> Steve Kinney: And now we're gonna actually say handle--.
>> Steve Kinney: It's unsubmit, right.
>> Steve Kinney: And my test pass again cuz now instead of trying to grab built-in objects, I'm just passing in the functions that I should call, right? So a lot of times you find yourself doing the things of like mocking and something that stress you out and make you confused, you know what the right answer is?

[00:12:18]
Don't do it [LAUGH]. Right, because if it's like not simple, you know who's gonna be confused? You a few months after you write it,right? If you want to be able to like, hey, call the function, make it something you can pass in. If it's supposed to use a random number, have that be a function.

[00:12:33]
It can default to alert. It can default to console log, it can default to math.random, but if you pass in values and you have more control.