-: In the last section, we started putting together
some tests for our comment box component.
And where we left off, we had our two it blocks
and we were kind of thinking to ourselves,
huh what matchers are we gonna put in here?
What are we going to expect exactly?
What code are we gonna write?
When we were working on the app component, we had a matcher
that we used to contain, which really made the assertion
that our component contained some exact text
that was gonna render onto the screen.
In this case, we don't want to make an assertion
about the text that this component contains just yet.
We want to say that it has an actual HTML element
of text area specifically.
So, we need to find a matcher that's going
to solve this problem for us.
A lot of times, you know, we don't want to be thinking
that we need to write any matchers from scratch.
Chances are there's already a library that we can make use
of that's gonna have this behavior for us.
And as a matter of fact, as you may imagine
there certainly is in this case.
We're gonna pull in
or we've already got a library hooked up to this boiler
plate that's gonna help us write this match right here.
So, let's look at the documentation for it and figure
out what the matcher is gonna be.
At this point in time,
I wanna show you some of the documentation for this library.
So, in my web browser, I'm going to do a Google search
for chai jquery,
and then the first result that pops up should be something
like jquery assertions for chai.
And so, you might be saying to yourself,
Steven, yeah,
we're not writing any jquery here.
This is all React, right?
Well, yes and no.
So, on the actual application side,
the components that we're writing are all React components.
So, you know this, our app is a React component.
Our comment box is eventually gonna be React component.
But as a kind of a means
of testing only on the test side of our application,
we're going to make use of jquery here
in a very indirect way.
We'll talk more about exactly how everything is wired up.
Because this is a really a part of the test helper file.
So, we'll talk about exactly why we're making use
of jquery here in just a little bit.
But trust me, I think you're gonna
like how these specs start to come together.
So the jquery chai library or chai jquery gives us a bunch
of different assertions or matchers that we can make use of.
And you can see documentation all throughout here.
And so you can read through the documentation yourself,
but while we're together,
let's just read one or two of them.
So, let's look at this class matcher right here.
We can say something like,
expect this J element to have class "foo".
So, it'll expect this J element right here
to have the CSS class of foo.
If it does not, the test is gonna fail.
If it does, it's gonna pass.
So, very straightforward, very direct.
We can also make an assertion
about say the text inside of an element.
So, we could expect some element to have text Chai Tea.
We could also assert that a input has a value.
And so this matcher right here is probably gonna be
very relevant for us when we start wanting
to test the how the text area behaves.
We can also see
if something is hidden, selected, checked, enabled,
all these different very handy matchers
that we might want to use.
And here's one that we used in app already.
We used the contain matcher.
So, in our case, we just wanna say, I want to make sure
that this very particular component that we have
shows a HTML element that is a text area.
And so for that, we're going to use
this matcher called exists.
By the way, I wanna take a quick aside here for a second
and say as you're scrolling through these documentation,
this documentation and you're seeing all these matchers,
I really encourage you to not be overwhelmed
or anything like that.
There are a tremendous number of matchers.
You don't have to memorize every single one of them.
When you're first starting off with testing,
it's a little bit more of kind of a hunt and pick, right?
We say, well here's what we want to test.
Let's go find a matcher that's gonna take care
of this for us.
And so over time, you're gonna get a lot more familiar
with all these matchers, but to start,
totally fine to scroll through the documentation a bunch
and find one that works for you.
Okay, so again, we're gonna end
up using this exist matcher to make sure
that our component has a text area.
So, it's gonna read something like expect jquery element
not to exist, or in our case, we do want it to exist.
So, we want a text area to exist.
So, let's go write that matcher really quick.
I'm gonna do expect component to exist.
Now, two things I immediately want
to point out to you here.
Number one, we haven't defined component yet.
So, we need to do that.
Let's do that really quick.
We'll say const component is render component
and we're gonna render are the comment box.
So, that's number one.
Now, the second thing I wanna point out here is
you'll see here at the end says two exist
and it looks like it's just a reference right here, right?
We do not have any parens,
so we don't have any parens there.
And this is really a very interesting oddity of how Chai,
the library that we're using here was put together.
So, the way that Chai is set up with a lot of the matchers
that we're gonna use, you do not actually have
to use the parens.
In fact, if you use parens, an error is gonna be thrown.
So, whenever the matchers shows
calling something like expect component to exist
without a set of parens at the end, you just leave them off.
Chai is gonna work behind the scenes
and make sure that everything is gonna run just okay.
And we'll talk more later
about exactly how this is working at the end here.
Okay. So, we're expecting our component to exist,
but you'll notice that we haven't really said anything
about the text area just yet, right?
We're saying the component should exist,
but we're not saying that the text area should exist.
So, to specifically look for a text area, we're going to add
onto our component object here dot find text area.
So, this is where the kind
of jquery stuff starts to come into play
and this is where the testing, I think, you know
as we start doing a couple more examples
I really think you're gonna like how this comes together.
So, the helpers that I've set
up inside of the test helper file,
when we call render component right here,
it actually is returning a jquery object
that contains our React component.
So, we can use all the jquery methods that we want all day
we could use jquery methods and it's all gonna work.
So, the result of this is that we get to use
this vast, huge, tremendous ecosystem
of existing jquery testing plugins
with all of our existing React components.
And we're specifically using jquery
because it allows us to just make assertions
about our HTML that our components produce.
Remember, all I care about with my tests are
that I am producing the correct HTML to show on the page.
I don't really care
about how the component is internally working.
I just wanna make sure that whatever the component spits
out is what I expect it to be.
All right. So, enough talking about all this stuff.
Let's go ahead save this file and see if our spec passes.
Okay, so it looks like we got a big fat error message here.
If we scroll up, we see element type is invalid.
It expected to string or class function, but got object.
Okay. So, to be honest, not entirely unexpected,
we haven't yet defined our comment box component.
So, this is the point at time at which we would say,
okay, we've got a spec that's red,
we need to write some implementation to make it go green.
Let's start working
on our comment box component inside of the next section.