narrator: In the last section
we put together our first assertion
for our comment box where we expected
the text area to exist.
We also spoke a little bit about
the JQuery chi library and how the component
that we're rendering here is actually
a jQuery wrapped version of our component.
Again, we're not using jQuery in our production environment
or for anything inside of our app
we're just using it as a helper for testing.
And we're definitely gonna talk a lot more
about how JQuery exactly is being used when
we rewrite this method here
the render component function.
So, our next step here we saw the last thing
we did there, let me do a quick add on
is just to say we wrote
our first spec and it failed.
So, I wanna write one more spec.
The spec for it has a button
and then we're gonna start doing
the implementation for our comment box.
So we're gonna do the same exact thing
as we did in the spec above this
but instead of finding a text area
we're gonna find a button.
So, we'll say constant component, render component
and we're gonna render the comment box.
And then we're just going to say
we expect the component we're gonna find
the button and we're gonna expect that to exist.
So, expectcomponent.findbutton to exist.
We'll save this, our specs are gonna run again
and we're definitely gonna expect them both to fail.
So, in this case we see fail number 2
and above that failure number 1.
So now , the great spot where we can start
doing our implementation of our comment box component.
Let's flip over to the implementation file
for our comment box and we're
just gonna put together some boiler plate here
just to make the test work.
So, this is where we start getting
into the kinda the react side of things
being that this is a little bit more
of an advanced course we're going
to kind of speed through the react side
of things and focus a lot more on the test side.
So,if you need to pause the video
as we're writing the code here, don't sweat it
just go for it but in general,
I'm only gonna do a kind of a light explanation
about the code we're writing.
Okay, so with that kinda disclaimer out of the way
let's make our comment box and our goal right now
is just to get our test to pass.
So, all we wanna do is make sure that
we have a text area on the screen
and we've got a button as well.
So, at the top we're going to import react from react
and we're gonna make this a class based component.
So, we'll import the component property as well.
We'll export default class comment box
and it's going to extend component and inside of here
we'll put a render method that's just
gonna return a div that contains a text area and a button.
And we're just going to put
in the correct text for the button right now
it's gonna say submit comment like so.
Okay, so we added that in and then we refreshed
I saved the file, our specs instantly reran
and we saw our specs go green.
So our account box is now successfully rendering
with the text area and it successfully found
the button that we placed as well.
And so let's say that I come back through here
and I am refactoring you let's say
this is sometime months into the future
even years and for some crazy reason
I accidentally delete my text area.
I would then expect my text area to fail
so it just goes red.
I can then undo that deletion, save the file
and we're back to green.
Best part of this is that man, these specs
just run lightning fast.
So as you're writing your code
you're going to get this instant feedback along the way.
So this is looking great.
There's usually one more spec
that I just kind of like to do
just kind of as a warmup thing
for all of my components.
I usually like to add a class name
to my top level HTML element in every component
and the class name matches up with the name
of the component itself.
So, this is a total personal preference,
it's up to you if you don't wanna follow this no problem.
But it's something that I find really useful for
when I'm debugging in the Chrome console
or when I am writing SAS or CSS or what have you.
I really like to have my top level component
share a class with a class name.
So I'm gonna put in class name of comment box
and then let's go ahead and write a spec for this as well.
So, I'll say at the top I'm gonna add another it block
and I'll say it has the correct class.
I could also say it has the class comment box,
it's totally up to you how you want
to name your expectations.
And so I'm going to render my component again
and then I'll expect my component
and this is where we need to do
a little bit reference back to our docs again
so I'm going to pull my browser down again.
There we go.
I'll search for chai jquery
I go to the first link and I've got
all my documentation for all my matches
and so I'm not really dealing with an attr here
I'm not dealing with a prop
I'm not dealing with CSS, I'm dealing with a class.
So, we can use the class expect component
to have class comment box
and hopefully we should see that pass.
So, let's flip back over and we'll do
to have class comment box, let's save it
and sure enough we now have four passing specs,
it has the correct class.
Now we did kind of go out of order
there a little bit.
We wrote the implementation first
and then we wrote the spec afterwards.
As a rule of thumb, whenever we write the code first
and then we write the spec, it's always a very good idea
to purposefully break the spec and watch it fail.
And the reason that we do that is that
it ensures that we didn't write a spec
that is testing say nothing or testing something
that is always the true you know, always true
maybe we wrote a spec that is just not
behaving the way that we expect it to behave
and so if we do our implementation first
and then we write our spec
it's always a good idea just to test the test
so to speak, by just purposefully making the spec fail.
So, delete the dash box, I'll save it
and sure enough I see the spec go red.
We expected it to have the class comment dash box.
So, I'll add back on comment box
it goes back to green and we're good to go.
All right, so this is great.
We've now got our three tests in here.
There's just one little problem
you'll notice that every single one
of our specs repeats this line right here.
They all say constant component, render component
and this is really tiresome.
You know, surely if we're gonna repeat
this line of code all over the place
there must be some way that we can reduce
the number of times we have to write it.
So, let's look into that in the next section.