Instructor: In the last section
we spoke about how our last two tests right here
have some common set up at the very top of both them.
So in the past we've solved this issue
of repeated code by extracting
that repeated code into a beforeEach statement.
But this time around things are just a little bit different.
You see if we take this wrap.find statement
with a simulate function and the wrap.update function call
right here as well and move them up
to the beforeEach at the top.
Then we're gonna have a slightly unintended side effect.
If we move that code up here,
all that code that updates the text area value
and calls wrap dot update is also going to run
before our first test right here is executed as well.
Now in this case, changing the value of the text area
and calling wrap.update is not going to break
this first test, but maybe you can easily
imagine a case in which this first test right here
has some logic inside of it that depends upon
the text area being completely empty.
Maybe that's the case.
So we want to figure out a way to not have to duplicate
this setup code right here on our last two tests
but also not have it affect the first test.
So in order to make use of a beforeEach statement
or kind of abstract out this duplicated code
without having an impact on the first test
we're going to use a construct
in just called the describe function.
The describe function is used to group together certain sets
of tests that have some common setup
or tear down for each of them.
And that's the exact situation that we're in right now.
So here's what we're gonna do,
I'm gonna first get started by collapsing each of these
it statements inside my code editor
just so you can see the code
that we're gonna add a little bit more clearly.
So I'm gonna collapse that test, that test, and that test.
So now we've just got our beforeEachs and our afterEach.
Now the two tests that have some common setup
or kind of have a very similar purpose
are the bottom two ones right here.
So right above the second test,
I'm gonna add in a describe function call.
Describe, again, can be used to group together certain sets
of tests inside of a single file.
So in this case, we are trying to describe some common
behavior between these two tests right here
that are both concerned with our text area.
So as a first argument to the describe function,
I'm gonna give a string that describes the purpose
of all the tests that follow.
So the purpose of both these tests have to do
with our text area.
So I'm gonna say the text area like so.
Then as a second argument, I'll place a function
and that function is going to wrap both of the tests
that we wrote down here.
So I'm gonna take this closing curly brace and parenthesis.
I'll cut it and move it down to the bottom,
and then I'll indent both the it statements like so.
So now we've got a single described block
that wraps the second and the third test.
The benefit to a described block
is not just in kind of doing some organization
inside of a single test file
but it can be also used to limit the scope
of beforeEach statements.
So now inside of the describe block
we can place another beforeEach.
This beforeEach is not going to modify
the it statement up here.
Instead, it's only going to run
before our second test and our third test.
So this beforeEach statement right here is a perfect place
to do some setup common to both these tests.
So I will now expand both those it statements.
I'm going to cut our wrap.find simulate
and the wrap.update calls out
and I will move it into the beforeEach
and then I will delete it from the third test as well.
Okay, so that looks pretty good.
So now we've got a set of tests
that describe how the text area works.
And we're saying that text area
has something that users can type in.
And when the form is submitted, the text area gets emptied.
Before we run these two tests right here,
we'll execute the for each statement
and then run the respective test.
Now I'll very quickly flip back over to my terminal
and just make sure that these tests are still working.
So back over here, it looks like we're good to go.
You'll notice that by adding in the describe block
also modified our test report.
So now we see a little section right here.
That means to say that the following tests
underneath it are all a part
of that described block of the text area.
Now, last thing I wanna show you is a quick visualization
to give you a better sense
of the order in which our tests are now being executed.
So this is a diagram of our test file
as it stands right now.
At the very top we've got our beforeEach, the afterEach,
we have test number one.
Then the describe block, the second beforeEach
and then the two following it statements.
So in total, we're going to execute three different tests
and each of those different tests are gonna have some number
of before and afterEachs.
So I put together a diagram of the three separate tests
and what code is gonna run before and after each one.
So first off is beforeEach number one with our first test.
So we have beforeEach number one, and then we check to see
if the component has a text area in a button.
And then we execute the afterEach.
For our test that allows the user to edit the text area
which is the second test we have.
We execute beforeEach number one.
Then number two, then the test, then the afterEach.
And then it's the same thing with the third test as well.
We execute beforeEach, number one, beforeEach number two,
the test and then the afterEach.
So these beforeEach statements
are going to stack up over time.
And as we add more beforeEach statements into a single file,
they all get executed
before any following test actually runs.
Okay, so we now got a better idea
of how we can organize tests inside a single file
and make sure that beforeEach statements
will only modify certain tests inside that file.
So let's take a quick pause right here
and continue on to our next file or next component
in the next section.