-: In the last section we did a walkthrough of the feature
that we're gonna build in this application.
It's gonna be a very simple comment box.
So we walked to the two different components
that's gonna form our application, the comment box on top
and the comment list down below.
So it's really time for us to start writing some code now.
So let's start by scaffolding out both our component
and the test file for our very particular component.
So we'll start with our comment box
which is going to be responsible for holding
the text area where a user enters some text in
and a button to submit the comment as well.
We'll make the react component first
by going into the source directory
and then in the components directory.
And we'll make make a new file called comment_box.
Now, as a rule of thumb, we always want to have
one react component with one test file.
So the instant that I make a comment_box file right here
I'm going to expect to make a comment_box_test.js file
inside of my test components directory.
One thing that I'm gonna tell you right now
because this is gonna come up all the time is that
whenever we create a new file with for testing
like a new test file
inside of our components directory here,
mocha is not going to immediately recognize
that a new file was created.
And so they kinda live reload
that we saw that we had with app is not gonna kick in.
So whenever we create a new test file
we need to stop the process by hitting control c
and then we can restart it by running
npm run test:watch.
And this will start the process back up all over again.
In this case, we've only got one test file
still or it's gonna be one test still.
So we're still only gonna see app
but as soon as we add some test into comment_box_test
we're gonna see the tests are gonna show up here as well.
Okay, so let's do a little bit of scaffolding here.
The first thing I wanna do is
inside of my comment_box_test file
I want to import some helpers from the test library.
This is gonna, in practice look very similar
to the app_test file that we were working on earlier.
So we're gonna import two helpers
from the test helper library or test helper file.
And then we're gonna import the file that we're testing
the component that we're testing
and then we'll describe or declare some describe
and it blocks that test our very particular component.
So in general, I really recommend you
not copy paste between spec files,
but just as you're getting started
if it helps you out, go for it.
In my case, I like to write out everything by hand
just to make sure I don't make any mistakes.
So at the very top I'm gonna import those two helpers.
We'll import renderComponent and expect
from up one directory, the test_helper file.
(keys clanging)
And then we're also going to import our comment_box file
that we created inside of our source components directory.
Now, comment_box doesn't contain any code yet
so we might see a funny error or two on the console,
but that's okay.
It'll go away once we start defining
the comment_box component.
So we're going to import CommentBox from,
and then this statement here
is gonna be a little bit confusing.
We're going to go up to test,
up to root into source, into components.
So we'll go up, up into source, into components
and then comment_box.
Make sure you get the spelling on comment_box correct
because I make typo.
I always put comments box for some reason.
I have no idea why.
Anyways, let's keep going.
Remember, all of our test files
are gonna look nearly identical.
So after we do our imports of kind of these helper things
and the thing that we want to test at the top
we're always gonna end up writing a top level describe.
So we'll write the describe.
The first argument is a string to tell us, you know,
hey, what are we testing here?
And then the second argument is our function.
Inside of this function
is where all of our it blocks are gonna go.
So the first argument here, the string,
I'm almost always gonna put the name of the component
that we're testing which in this case is commentBox.
So we'll just put in comment box.
Remember again, if I wanted to, I can do CommentBox
or I could do Test CommentBox or CommentBox Tests.
It doesn't matter, it's just affecting the output
that we see in our test report.
So we've got our top level describe
and now we just need to put in some it statements
to kind of talk about, you know, hey
here's what we're gonna test inside this component.
Before I do that, I'm gonna pull the diagram
that we were just looking at back up onto the screen
just as a reminder of what we want to test here.
So for our comment box at the top, we want to make sure
that it has a text area and that it has a button.
We'll get to the last one in a second.
This one is a little bit more challenging.
So we'll write two it blocks, inside of this describe.
We'll first say it has a test, text area, excuse me,
and it has a button. (keys clanging)
Now, as a convention,
you might be a little bit tempted to do something like this.
You might say it, it has a button, right?
Because hey, this is the,
the string that's gonna show up on the the report, right?
Well, by convention we never kind of double up on the its
here, so we never put it
it has a button or something like it should have a button.
We always just leave it as it has a button.
Something that we can read from left to right
like a normal sentence of sorts.
Okay, so this looks like some good testing structure.
All we have to do now is figure out
what matchers we want to use inside of both these tests.
So if you remember in the last section
when we were writing a test for the app component
we used a matcher "to contain"
and :to contain", specifically looked at the text
that the component contained.
So in this case
we don't really want to check in the text in here.
We want to say
that our component is rendering an actual HTML element
specifically a text area and a button.
So let's go ahead
and tackle that challenge inside of the next section.