Narrator: In the last section,
we started wiring up a second nested describe here,
that specifically was talking about what happens
when a user enters some text.
We set up a nested before each,
so by the time that MOCA got to this before each right here,
we've already defined our component up top.
And so we've got a fresh instance
of our component to work with right here.
We then added this kind of weird looking
line of code right here.
So let's talk about this line of code in great detail.
First, we have our fresh component, right here,
and we kind of rooted through that component.
We kind of dug through all the HTML that it contained,
and we found a very specific HTML element, the text area.
So at this point in time, right here,
this block of code, right here,
is essentially just fetching that very particular text area.
Now, let's think about what we really want
the behavior that we really wanted to test here.
We wanted to test the case
in which a user clicks in the text area and starts typing.
Whenever a user types in a text area,
they're triggering a change event,
and that change event is called
with whatever the new text is.
And so that's what this simulate call is doing right here.
Simulate is saying," I'm going to simulate an event."
The event that we're simulating is a change event,
and here's what the new value is
coming from that change event.
That's all that's happening in this line of code right here.
This is just a tool to simulate fake events
inside of our components html.
So now if we are kind of like, you know,
walking through this life cycle,
this component that we're testing
we've now rendered the component, we've found the text area,
and we simulated a change to the text area
with some new text.
So I now expect that text area to contain the text
that was just kind of fake entered right here.
So at this point in time, I think that we can probably
get away with writing expectation.
It's probably gonna fail to start off
because we haven't really added any
implementation to comment box just yet,
but we can at least write our spec.
So we'll write, "expect(component.find('textarea))".
And then remember, we need to think about what matcher
we want to use here and what we're trying to test.
We're trying to test that the text,
the text area has the text that was just entered.
So if we go back over to our docs for jquerychi,
and we kinda root through all the different matchers
or different assertions that we have,
there is one that we found that was very helpful for this:
the value assertion.
So we expect an input to have value
whatever we want right here.
So let's try giving this matcher a shot.
We expect the component with the text area
to have value, and we know what the value is supposed to be.
We simulated what that value,
what that value is gonna be right here
with the text, "new comment".
Now this right here, this new comment,
it could have been any text we want.
It's just some dummy testing text.
So it could have been "new comment 1, 2, 3", if we wanted.
Anything we want, all we have to do is make sure
that the value is consistent
with what we expect it to be down here.
So I expect my text area to have value "new comment".
Let's save this and just watch it fail,
and it should be failing.
Oh, um, it's passing right now.
Kind of a side effect
because we haven't wired up the comment box.
I'll show you exactly why, but we'll get there in a second.
Just bear with me for a second.
The next test we wanna write is just to make sure
that when the comment box is submitted.
the input gets cleared.
Let's first wire up the implementation
for this spec right here
and then we'll implement the second one right here.
So I'm gonna flip back over the comment box
right now we've got a div with our text area.
Let's go ahead and add in an on change event handler here.
And whenever a user types in some input,
we'll call, "this.onHandleChange",
and we're gonna bind the context to this.
So what we're doing here in practice
is we're gonna set up a controlled component
with a text area.
Hopefully. you're familiar with controlled components.
If you're not, no problem.
We're gonna go through it step by step.
So step one is to make sure
that we've set up an event handler for it.
Let's define that event handler now.
"onHandle"... Oh, you know what, actually,
this method name here is a little bit goofy.
Let's change it to just "handleChange" instead.
That's a little bit more reasonable.
And so "handleChange" is gonna be called with event.
Now, whatever this event is right here,
we wanna reflect it inside of our component's local state.
So we need to initialize our state at the top,
which we'll do inside of our constructor.
So we'll call super with props,
and we'll say that our initial state is
"comment is empty string".
So now, when a user type something into the text area,
we'll say that we need to update our state
with the new text that comes back from the event right here.
So we'll say, "this.setState((comment: ))",
and the value of the new comment
is gonna be "event.target.value".
And then the last thing we need to do,
is we need to make sure that the text area gets its value
from "this.state.comment".
So we'll say "value=this.state.comment".
So remember this is a controlled input.
We are getting the value of the text area,
whenever a user types something in there,
we're setting our state with that new value
that causes our component to re-render,
and when it re-renders, we tell the text area,
"Hey you have a new value,
and the new value is this.state.comment."
So taking this approach right here is
going to make our job later on
where we need to empty out the comment box
after a user submits it much, much easier.
So let's save this and see if our specs are still passing,
and it looks like we're still good to go.
Let's introduce a change here where the specs should fail.
So I'm going to comment out "this.setState" line right here.
So we're never going to
update the value of "this.state.comment",
which means the text area's value
is always gonna be equal to empty string.
So we'll flip back over now, and you can see, sure enough,
we expected the text area to have new comment,
but the value was empty string.
So it looks like our spec is effective.
We'll save this and we're back to green.
Very good.
Alright, this looks great. We've now got a working spec.
Let's go ahead and wrap up our specs
for the comment box in the next section.