-: In the last section,
we finished up our test to make sure
that the comment box showed both a text area and a button.
We're now gonna move forward to our next test
around the comment box.
The goal of which is to make sure
that a user can enter some input into that text area.
So this might sound
like kind of a silly test,
like of course a user
should be able to enter some text inside there.
But I want to remind you
about something that occurred when we were wiring up
that text area just two or three sections ago.
While we were putting this thing together,
we first wired up the value property to that text area
Before we had hooked up that on change event handler.
We were in sort of a broken state,
and we were able to select the text area, type inside of it,
and we saw that no text actually appeared.
So that's the goal of this test right here.
The goal of this test is to make sure that we've wired up
the value property correctly,
the set state call and the callback,
and to make sure we also wired up
the callback property on the text area as well.
That's the goal of this test.
Now, one thing that's kind of interesting
about this test right here is that it's going to involve you
and I kind of programmatically interacting
with a component in some fashion.
In other words, we want to kind of trick that text area
into thinking that we are typing some text into it.
Every other test that we've done so far has involved you
and I kind of passively rendering the component,
and then just making sure
that it contains some element, or some component instance.
So, this test is gonna be pretty significantly different
than the ones we had worked on previously.
Now, before I tell you how we're gonna write the the test.
I wanna give you a quick review
of how that component is wired up.
So back inside my code editor,
I'll find the comment box file.
Here it is.
And then down
inside the render method we have our text area.
So the text area is really the core
of everything we're trying to test right now.
The text area has a on change property and a value property.
Anytime a user changes the text area through a change event,
we will have our handled change method right
here be called.
Handled change calls set state,
that causes our component to automatically re-render.
And when that occurs, we put that new value
from this state dot comment into the text area.
Okay, so that's just basic react,
just want you to keep that in mind.
So now that you recall how that text area works,
let's take a look at how we're going to actually test it.
All right, so here's our flow.
So, in the test that you and I are going to write,
we're gonna go through every single one
of these steps right here.
We're gonna first get started by writing out a little bit
of logic to render our component, and then attempt to
find that text area element inside of it.
Now finding the text area right here, is going to be very
similar to the test that you, and I just wrote a moment ago.
So back inside of comment box
you'll recall,
we said wrapped dot find text area right here.
So that returns the text-area
within that component,
And that's exactly what we're going to do to
sort of find the text area.
We're just gonna call find
on the component instance that we create.
Once we get that text area
we're then going to sort of simulate a change event.
So when you, and I are in this kind of test environment,
we don't have the ability to actually type
on our keyboard, of course.
So instead we're going to simulate
a change event on that text area.
When we simulate that change event,
it's going to automatically call
our callback function of the handle change callback.
Now, when that handle change method gets called,
we need to make sure that it gets called
with some event object where you, and I know
the exact value that we're going to use inside
of that set state call.
So remember back inside of comment box,
right here with handle Change,
we receive this event object right here,
and then the new value of our comment state
comes from event, .target, .dot value.
So, you and I need to manually set this value right here.
Anytime we simulate a change event
there is a default object that gets used to kind
of trick our component into thinking
that the event just occurred.
But, if we want to customize
the way that our component handles that
actual event object inside this test environment
you and I have to provide a fake event object.
So that's what's going to allow us to kind of
customize the event object, and kind of trick our component,
or that callback into thinking
that it just got called with a certain value
for this new text area that the user just typed in.
Now, after that we're gonna do
kind of an interesting little step,
and we're not gonna talk about this just yet.
We'll come back to this, and talk
about why we're doing it in just a moment.
But essentially,
we're going to force our component to re render itself.
We'll talk about why we have to do that,
and then at the very end
of the test we're going to write an expectation that says
that the text area's value has actually changed.
So, this is the overall goal.
This is how we're going to accomplish this,
and this same set of operations right here,
is how we're going to eventually interact
with all different types of elements,
or components that we're trying to
test inside of our application.
So, let's take a quick break.
We'll come back the next section,
and start writing out this test.