Instructor: In the last section, we added on
our last two specs, the spec to make sure
that our component had a button
and we also add in a little bonus one
just to make sure that we had the correct class.
So, we've got three specs now
and we've got a little bit of a problem.
Our code is really not dry, so to speak.
We've got the same line repeated
in each one of our tests here.
So, it'd be really great if we could kind of
extract this setup for each spec into something
that some little bit of work that gets ahead of time.
So, luckily MOCA does have us covered.
We've got another construct, along with describe it
and expect that's called a before each.
So, we're gonna write the code out really quick here
and then we'll talk exactly about what it's doing.
So, I'm going to add in a before each
and I'm gonna pass it a fat arrow function.
So, we call before each.
It is a function and we pass it a function.
Now, here's where it gets interesting.
I'm going to move our line of code, our initialization,
into the before each and then I'm gonna delete
all the other instances of that line.
So, now I've got three it statements
and each of them just has a single expectation,
and I've got a before each,
where I do some setup for my component.
So, you might be able to guess
exactly what before each is doing.
Before each is a function that's going to run
before any of our it statements
and it's gonna run before each of them runs.
So, in total, before each is gonna get called three times.
Once for it number one, once for it number two
and once for it number three.
And so, you can really have the expectation that we're using
or you can kind of guess here that we're gonna use
before each all over the place to kind of do
some setup for our specs.
It's gonna do some setup ahead of time
that we don't have to repeat inside of each it statement.
So, I'm gonna go ahead, my specs are passing right now,
as you can see.
I'm gonna go ahead and save my file now,
and I'm gonna just see what happens.
So, we're gonna save it
and now all of a sudden our specs are failing.
Component is not defined, huh?
So, that's kind of interesting.
Well, little bit of JavaScript 101 here.
We are declaring a variable inside of this function
right here, which means that nothing outside
of that function's scope is gonna have any idea
that the component variable exists.
So, what we're going to do to fix this problem
is we're going to initialize the component variable
ahead of time, and then when component, or excuse me,
when before each runs, we'll reassign the component,
and that will mean that all of our different specs
are referring to the same component variable.
So, let's just go ahead and you know,
it's kind of a tough one to explain.
A lot easier to see what's happening in practice.
So, ahead of time, before I run the before each,
but inside of the describe, I'm going to say let component
and that means I'm going to declare a variable
that I expect to change over time.
Then inside of the before each,
we're just gonna reassign the variable.
Let's save this and see if it runs.
And yep, everything went back to being green.
So, let's talk about, kind of do a flow
or a walkthrough here of exactly what's happening.
If you think back a little bit, I told you earlier
that when MOCA runs and it executes this file right here,
all of these functions that we're declaring
inside of the describes and the its
are kind of getting loaded or queued up to be executed
at some future point in time.
So, let's think about kinda the order
of operations here of what's happening.
So, when MOCA first runs, it's going to see this file
and execute all this code.
At that point in time, it's then going to execute
the function that we passed to describe.
Component's gonna get initialized
and it's gonna start off as undefined.
Then MOCA's gonna say, okay,
I've done all this initialization.
It's time to run my three its.
I have three its queued up.
I'm gonna run each of them, but before I run each of them,
I'm gonna run the before each.
So, right now, component is undefined.
We run the before each and component is assigned
to the result of render component.
So, the outside variable here is now equal
to essentially comment box.
Then the first it runs
and an expectation is made where a component
is equal to comment box.
The expectation is made.
It passes or fails and then everything is thrown away.
Comment, or next it block is queued up to be ran.
We initialized component.
We run the before each.
It's assigned to a new instance of comment box.
And so, that's very key.
It's a completely new, fresh instance of comment box.
And then, we run our expectation
with that fresh new instance.
And then, the entire process is repeated again
for the third time as well.
In general, if all this sounds really confusing
or JavaScript Scope is something that you just
don't quite have mastery of just yet,
I got really good news for you.
As long as you follow this pattern, you'll be good to go.
As long as you initialize your variable ahead of time,
you declare it inside the before each,
and then you write expectations around of it
a hundred percent of the time it's always gonna work.
Complete understanding is not required.
So, again, if it's a little bit unclear, don't sweat it.
You can always refer back to this example right here
and you'll be good to go.
And I know if you're watching this video,
chances are you're a smart cookie,
and so I know that the concept is gonna sink in
over time a little bit.
Okay, so we've done a refactor here to move everything
into a before each.
Each of our it statements look really clean.
We have a partially functioning comment box.
I think we're about ready to wire it up
into our app component
and maybe write another test around that.
So, let's take care of that inside of the next section.