Instructor: In the last two sections,
we put our comment box component together.
Let's now take a look
at some of the different tests that we want
to write around this component.
So back over here, we want to make sure
that we have a test that confirms
that there is a visible text area
and a button that the user can interact with.
We wanna make sure that the user can enter some text
into that text area and submit it.
And then finally, we want to make sure
that any time that the input gets submitted
or the form gets submitted for that matter,
the text area itself should be emptied.
So no more text inside there.
So with that in mind,
one of the first things that we need to decide
and we'll get around to making our test file here
in just a moment, but before we do that
we need to decide which
of these three enzyme handlers
right here we're going to use to actually test out
this application.
So remember, these three methods right here
or these three renderers of sorts
are the three different ways that we have
of testing a component
when we're making use of enzyme.
We can render out that entire component as static html.
We can render out just that component
by itself and no children underneath it.
And we can also do the full DOM
which will attempt to render that component
on all of its children as well.
Now, this is another time where, well, you know what?
We don't really have any other components
underneath this comment box.
The comment box has no children whatsoever
so I think we could definitely get away
with using the shallow render here.
However, just to get some variety
of experience, we're going to arbitrarily
decide to use that full DOM render here instead.
Now, the only reason we're doing this is just to show you
as you're taking this course and learning
about testing how the full DOM render works.
But if I was doing this testing of this application
by myself as a personal or professional project,
I might use the shallow render because I only care
about testing this current component
and no children underneath it.
But again, I want to make sure that you get a good idea
of how this thing works.
So we're gonna take this alternate approach
this time around.
So with that in mind, we're gonna flip back over
to our code editor and we'll get started
by creating a new test file.
So inside of my underscore, underscore test directory,
I'm gonna make a new file
called CommentBox.test.js.
So inside of here, we're gonna have all the code related
to testing our comment box component.
To get started, we'll import react at the very top
and I'll import the comment box component as well.
And oops, I'm using a relative path right here.
Remember, we have enabled absolute paths, so I can write
out components/CommentBox like so.
All right, so that looks good.
Now, our first test, as we were just talking about it.
Where is it?
Right here.
We want to write a test that makes sure that
we get a text area and a button inside of our component.
So for my very first it statement that I'm gonna write out,
I'll say, it and then I'll pass in my string description
and I'll say it has a text area
and a button.
That's it.
That's all I care
about telling anyone who's reading this test.
'Cause that's all we're trying to test inside of here.
So let's take a quick pause right here.
When we come back, the next section,
we'll start filling out the implementation of this test.