Instructor: In the last section,
we started talking about the React
and Redux design of our application.
Again, at the end of that section,
you're probably thinking,
"Stephen, when are we getting to the testing stuff?"
But I'm gonna make the claim
that we've kind of already been tackling
some of the testing stuff already.
You see, let me tell you
a very quick anecdote about testing,
particularly for people who are getting started with it.
I find personally
that as soon as people start getting started with testing,
they always say, "Hey, I don't know what to test.
I don't know what I'm supposed to test.
How am I supposed to write these tests?
I don't even know where to get started."
So I'm gonna give you a reproducible framework
that you're gonna use inside this application
to get a better idea of what tests you should write.
All right, so here's what we're gonna do.
Here's our flow.
So anytime you start writing tests
on your own personal project,
and even on this one right here,
this project that we're gonna get started on,
I want you to follow these three steps.
I want you to look
at every individual part of your application,
so every component, every reducer, every action creator,
and I want you to imagine that you sit down next to a friend
and you tell that friend the purpose
of each of those parts of your application.
So I want you to turn to your friend, turn to your buddy,
you know, maybe there's someone next to you, I don't know,
and I want you to imagine that you start telling them,
"Hey, here's the purpose of the App Component.
Here's the purpose of the CommentBox.
Here's the purpose of the CommentList.
Here's what it's supposed to do."
And whatever you say to your buddy,
whatever you say to your friend in that moment,
that's what we're going to write a test for.
So in the last section, when I started telling you
about the different parts of this application
and what each part of it was going to do,
that was my description to you of me telling a friend,
"Here's what this part of the application does."
So we're now going to go build out that application,
and we're going to write a test
that's going to essentially test or verify the functionality
of everything I just told you in the last video.
So quick example, I just told you two seconds ago
that our CommentList component is supposed to take
a list of comments and render each one out on the screen.
And so you know what?
That's exactly what we're going to write
a test of it to verify.
We're gonna write a test
that looks at this CommentList component,
and we're gonna verify that for every comment
that's been created inside of our application,
we create exactly one element on the screen.
We'll also write a test around the CommentBox.
Remember in the last section I said,
"Oh yeah, the CommentBox is gonna have a text area
and it's gonna have a button.
Anytime the user enters some text in here
and then clicks on the button, we will want to clear out
that input from the text area."
And so boom, there's two tests right there.
We're gonna write one test to verify that the CommentBox
produces a text area and a button,
and we're gonna write a second test to verify
that any time the user clicks on that button,
the contents of the input or the text area get cleared out.
So again, we're gonna use this framework again and again
to get a better idea
of what tests we write in our application.
And so in total,
I think that these are the different responsibilities
or different things inside of our application
that I would describe to you
if I wanted to give you a walkthrough
of every part of our app.
So we've got some functionality tied to the App Component,
some functionality tied to the CommentBox, CommentList,
Comments Reducer, and SaveComment Action creator.
Another good example would be the App Component right here.
Just in the last section I said to you,
"Oh yeah, the App Component doesn't do a whole lot.
It doesn't have a lot of responsibility
or functionality tied to it.
The sides showing the Comment Box
and showing the Comment List components."
And so that's another perfect example
of two tests that you and I are going to write.
We'll write one test to verify
that the App Component does show a CommentBox
and one test to verify that it shows a CommentList.
All right, so I think you get the idea here.
I think you get the idea of the approach
that we're going to use to figure out what we want to test
inside of our application.
So again, every white box you see on this diagram right here
represents a test you and I are going to put together.
So let's take a pause right here.
We're gonna come back to the next section
and we're going to get started
on the React and Redux side of our application.
And then after we get a little bit
of functionality put together, we'll start implementing
all these different tests inside of it.
So let's get to it.
Quick break, and I'll see you in just a minute.