Instructor: In the last section, we refactor our code
to use a beforeEach
to render our component ahead of time
before any of the it's run.
Doing that just allowed us to do a little bit
of cleanup inside this file
and now each of our it statements
is much more clear and legible.
We're now at a really good spot
where we could start implementing
either our text area inside of our comment box.
So right now, you know, a user can enter text in here
but when we click the button, nothing really happens.
The other thing that we haven't done yet,
is we haven't displayed this component
inside of our app component just yet.
So if we refresh our page
and we look at our app on the screen,
we wouldn't be seeing the comment box just yet.
Let's go ahead and first write a spec for app
and just assert that the app is going to show
an instance of our comment box.
So right now, it's just showing the
React simple starter,
and we just have a test for app
inside of app_test here that says
it "shows the correct text."
So, we're going to definitely be removing
this text out of here.
And so I'm going to go ahead
and delete this entire block right here.
We're now going to write another test.
And again, when we write tests and we're thinking,
"Hey, what are we trying to test here?"
It really very profitable,
very effective to just ask yourself
the very simple question, "What do I expect to happen?"
You know, what am I trying to achieve here?
What is the code that I want to write?
We want to write some code that makes sure
that "comment box" is displayed inside of the app.
That's it.
So we're gonna make an it block that says
it "shows a comment box."
So I find tests like this,
tests where we're, kind of, asserting
that a parent is showing a very particular child,
very useful
because it kind of forms a linkage
between our two components.
I expect my app to always show a comment box
and so it really makes sense to have a spec that says yes,
I expect my component, my app to always show an instance
of its child comment box.
So the next thing we need to figure out here
is how we're gonna write an assertion.
So again, I'm not really a big fan of asserting that
you know, we're gonna find a instance of a React component
called comment box inside of app.
I would much rather kinda make an assertion
about the HTML that is produced.
If we look back at comment box,
we added on this class name here
and this class name should be unique
for any other component that we create.
Only one component should ever have the class name
comment box.
So what we can do inside of our app test to make sure
that it shows a comment box as we can just expect
to find a HTML element with class comment/box.
Let's go ahead and give that a shot.
We'll say we expect component
and then we're gonna try to find an element
with the class comment box
and I'm gonna expect that to exist.
Notice how
remember this is a J query wrapped component right here.
So find is a J query method that accepts a CSS selector.
So I put .comment-box
and we're just going to expect that to exist.
We need to first initialize component ahead of time.
So let's go ahead and do that really quick.
Remember, as I just said in the last section
when we were looking at the initialization
we don't really have to understand what's going on
we just have to kind of repeat what's already been done.
And I know that's a bad sentiment to have
but I only mean to say that
in case this is confusing right now.
So we'll say let component just to initialize it.
And then before each it inside of this test structure
we'll assign component to be equal to render component app.
So right now our app does not show the comment box
so we're gonna expect this to fail.
Let's save it.
And sure enough,
we expected comment box to exist, but it doesn't.
So let's go ahead and head over
to our app component and fix up this assertion.
Over an app,
at the top we will import comment box
from same directory comment_box,
and then I'm going to leave the div in here
but I'm gonna delete the text
and instead we're just gonna say comment box.
All right, so we'll save this and awesome.
App shows a comment box, just what we wanted.
We can also verify this over in our browser.
I'm going to go to localhost:8080
and I can see I've got a text area with a button on here
and it looks pretty ugly right now,
but don't worry,
we'll fix up the styling in just a little bit.
Okay, so this looks great.
Let's go ahead and continue in the next section.