Instructor: In the last section,
we spoke about the series of events
that we're going to do to try to trick our text area
into thinking someone just typed in it.
So let's get started.
I'm gonna flip back over to my comment box.test file,
and then at the very bottom of the file,
I'll add on a new it statement to implement this new test.
I'll give this a description of something
like it has a text area that users can type in.
So the goal of this test
is to make sure that if user types in it,
the actual new text appears in the text area.
So now inside of here,
we're gonna go through this series of steps.
The first thing we have to do
is attempt to find that text area element.
So our wrapped component has already been defined
up here inside of our before each.
So to find our text area,
we're gonna do the same thing that we just did
inside the last test.
We can write out wrapped.find text area.
So that right there returns a reference
to our text area element inside of our component.
The next thing we have to do
is to simulate a change event on that element.
Now to simulate a change event,
we're going to use a method
that is a part of the enzyme library.
I'm gonna very quickly,
open up the enzyme documentation again,
and I'm gonna show you a method
that we're going to use to make that text area think
that a change event just occurred to it.
So back over on my documentation on enzyme,
I can find underneath the full dom rendering section,
a method called as you might guess, simulate, right here.
So the simulate method is tied to every element
that we find within a component.
We can simulate a given event.
Notice that the documentation
lists out the types of arguments here.
So the first argument is going to be a string
that represents the name of the event
that we're trying to simulate.
So in this case, we are trying to simulate a change event
like a user changing the value of that input.
So to do so, we'll go back over to our test,
and we'll write out .simulate,
and then add in the name of the event.
So it's going to be simulate change.
Now, one thing I wanna point out right here,
'cause the name of the event
might be a little bit confusing.
When we trigger or simulate an event,
we want to use the real HTML name of that event,
not the react name.
What I'm trying to refer to here
is if you go back over to your comment box component
and then find the text area element inside there,
you'll notice that to bind
a callback function to an event on an element,
we always use the nomenclature of on,
and then the name of the event itself.
So when we simulate an event,
we are not simulating on change.
On change is the name of the callback
that we are passing to the text area.
Instead, we are simulating just the name
of the event by itself, which is simply change
not on change.
Okay, so that's why we are putting
the string of change right here.
Now the second argument to this
is gonna be just a little bit more confusing.
So back here, inside of our checklist of steps,
I had said that you and I need to provide
a fake event object.
So what I meant by this right here
is if you go back over to our component definition
inside the comment box file,
let's do that right now very quickly.
So here's my comment box file right here.
If we look at our event handler, handle change,
you'll recall that it gets called with an event argument.
And inside of this method,
you and I look at that event argument
and we reference the event.target.value property.
So whatever is right here inside this object
is what we use as the new value
of the comment piece of state
inside of our comment or our component.
So if you and I want to somehow trick
our comment box component into using some new value
for the value of comment right here,
we need to essentially,
modify the value of event.target.value.
So to do so, we're going to be making use
of the second argument to that simulate function.
If we go back over to the simulate documentation,
you'll see that the second argument
is what is referred to as a mock object.
So a mock event object is what we're gonna pass in here,
and it's going to be merged
with the real event object
that gets passed to our event handler.
So if you scroll down to the example right here,
you might see a better little example.
Oh no, they don't actually show you
how to use that event thing.
Kind of unfortunate, but I'll show you how to do it.
So if we flip back over
to our commentbox.test file,
I'll find our simulate function
and then as the second argument,
we're gonna pass in an object
that's going to be merged into the real event object
that gets passed to our event handler.
So I'm gonna pass in an object right here
with a property of target
that's gonna have a new object of its own.
That will have a property of value.
And to that, I'm going to assign the string
new comment, like so.
So now, we can imagine that this object right here,
we can kind of imagine that this thing gets copied,
and I'm gonna actually hit
command C on my keyboard right now,
and you can imagine that it essentially goes over
to our handle change event handler right here,
and it replaces or technically merges into
this event object right here.
So we can kind of imagine that the object
that we just put in back inside of our test file,
essentially gets dumped right here.
So I can kind of hit paste,
and that's kind of what's happening behind the scenes.
So now we receive this argument right here as event,
and then we reference the target.value property on it,
and there's the string of new comment.
So that's what's happening here.
That's how we kind of trick this event handler
with this kind of custom or fake or mock event object.
So now when we trigger that simulate change event,
we know that the callback handler
is going to receive a piece of state of new comment.
Okay, so let's take a quick pause right here.
We'll continue in the next section,
and we'll continue working down our list of steps.
So quick break and I'll see you in just a minute.