-: In the last section we spoke
about how we need to look inside that div,
and check to see if it contains the comment box.
Before we take care of that, I wanna point
out one quick typo that I made in the last section.
So, in the last section,
I wrote out document dot create right here.
There's actually no create function.
This should have been create element like so.
So again, typo on my behalf.
Make sure you make that little change right there.
Okay, so now back down to the comment right here.
We need to look inside that div,
so it's an actual div element,
and we need to see if it contains our comment box.
Now we're not gonna just kind of b-line the solution here.
Instead, I wanna show you some
behind the scene steps along the way.
So I'm gonna first start by writing out console dot log,
and we're gonna look at the HTML that this div contains.
That's gonna be our starting point.
So I'll say div dot inner HTML.
Now do make sure
that you have capital HTML on here as well, not lowercase.
I'll then save this file,
and then we're gonna go run this test file.
So remember how we run a test inside of our project?
All we have to do is write out npm run test at the terminal.
So I'm gonna change back to my terminal.
I'll make sure that I'm inside my testing directory,
and I'm going to run the command npm run test.
Now when I run this command, it takes me a little bit
of time to actually start up the test suite.
So I already started up the test suite
in the separate terminal window over here.
So when you run npm run test,
you'll very quickly see something
like this that appears on the screen.
At the top we see the same testing output
that we saw before when
we ran the built-in tests at the start of this course.
And then underneath that we'll see the actual console log
that we just issued from our app dot test file.
So here is the contents of that div element.
We've got a parent div, we've got another div
with a text comment box,
and then we've got div comment list after that.
So clearly the text right here of comment box is coming
from our comment box component.
So without a doubt, yes, this thing is visible.
The comment box component exists in here.
So we're now gonna go back over to our test file,
and we're gonna write out a little bit of code that just
makes the claim, or really checks to make sure,
that the comment box does exist inside there.
It's not enough for you and I to just visually look at this.
We have to actually write out code that verifies,
yes, the comment box exists.
So to do so, I'm going to remove my console dot log here,
and I'm gonna first just write out the code that's going to
make sure that that comment box exists.
We'll then talk about exactly what that code is doing.
So I'm gonna say, expect
div dot
inner HTML,
and then outside of the parenthesis I'll do,
to contain
comment box.
And I'm gonna make sure that I have comment box right here
with the identical spacing, capitalization, everything
as our actual comment box component over here.
So you'll notice that I have comment box
with capital C and capital B, so I'm gonna make
sure I get the exact same thing over here as well.
Then I'll save the file, and I will go back over
to my terminal, and see if the test is passing still.
It's now back over here.
It looks like the test is still passing.
So, that's pretty much it.
We wrote out our first test here.
Now of course this test is basically identical
to the one that we already did a little bit ago.
So I'm not gonna take, I'm not gonna say
that we should be too excited just yet.
And in fact, if anything, I'm gonna actually claim
that maybe we should not be excited
about this line of code at all.
So let's take a quick pause right here.
When we come back to the next section,
we're gonna talk about exactly what this line of code does,
and then we'll also start to talk
about why maybe this test, that we just wrote
out right here, is not the best approach to testing at all.
So quick break, we'll start talking
about that in the next video.