-: So step number two, in setting up our test helper.
In step one we've set up jsdom,
which faked out our dom inside of the terminal
for when we run moca.
Step two now, is to finish up this
or at least this, you know, kind of faking
out the dom step here,
and that's gonna be to make sure
that jquery knows how to get access
to this window variable right here.
So by default, like I said,
jquerys gonna try to reach out and find some part
of the dom,
and it's not really going to do a good job.
We kind of have to give it a little bit of instruction
or a little bit of guidance.
We have to tell it, Hey jquery, when you boot up
we want you to make use of this window variable right here.
So in practice, the next step is easy,
but it looks weird, it looks kind of confusing.
So at the top of our file
we're going to first import jquery.
And I'm going to import underscore dollar sign
instead of just dollar sign.
And I'll tell you why in just a second.
So this underscore dollar sign right here,
is a reference to jquery, but it's kind of a,
for lack of a better term
junky version of jquery.
By default, this dollar sign right here,
you know, if we just did like so,
is going to try to reach out to
you know, some global, not,
not this global right here
but it's going to try to reach out into the browser,
which is not available,
and it's gonna try to get access to the dom.
And it's gonna fail.
So the instant that we try using jquery,
we're gonna start seeing some errors.
What we have to do is tell jquery explicitly,
Hey, make use of this window right here.
Don't try to set yourself up.
So what we're going to do is we're going to
define our own instance a jquery
by doing const dollar sign,
and then we'll say
this should be underscore dollar sign window.
Okay? And you know what, let's be really clear here.
We're gonna do global dot window, okay
so this is probably looking kinda strange right here.
So what we just did is we imported a kind of...
well we imported jquery, total normal version of it.
Let's change this variable name
so that the underscore dollar sign, you know, the
the underscore dollar sign is not significant at all.
So I'm just gonna change it to say
let's just call it jquery like so.
So we'll just import jquery from jquery
and then we pass global dot window to jquery.
And so this step right here, what this does is it says
Hey jquery don't, don't try to reach out and find the dom.
You know, don't try to do your own thing.
What we want you to do is we want you to be just responsible
for this fake piece of DOM that we just created.
That's all you need to do.
Don't go out to the dom,
just be responsible for this global dot window
which is being provided by jsdom.
When we do that setup,
this call right here is gonna return an instance of jquery
which is what we assigned to the dollar sign.
That is only going to ever look at or try to be responsible
for or get access to this fake instance
of the DOM that we created with jsdom.
So that's all that's happening in this step right here,
we're just saying, hey don't try to do your own thing.
We're gonna tell you exactly what to do.
So just do this instead.
So from here on out,
everywhere else where we need to use jquery
and this testing setup,
and it's only one or two places
we're going to use this variable right here
this dollar sign,
this kind of wrapped or modified version of jquery
as opposed to this jquery variable right here.
Do keep in mind that this dollar sign
this jquery variable right here is
the entire jquery library.
It's just a version
of it that says that we're telling specifically,
Hey only worry about global dot window.
So it still has access to all of your favorite methods.
You can do, you can use it as a selector
you can use it to make an Ajax request.
Whatever you might wanna do,
you can use this dollar sign this,
this variable right here to do it.
Okay, so that kind of wraps up,
wraps up step one.
We set up our testing environment to run
like a browser but in the command line.
So in summary,
we used jsdom to kind of create a fake dom,
or fake browser environment using the jsdom library.
And then we hooked jquery
into that fake version of the dom that we created.
And again, all of this
all this effort that we're doing is to just ensure
that we can run our specs
from the command line where the browser
and all the goodies that it comes
along with are not natively available.
We have to handle all this set up by ourselves.
Okay, so this is pretty good for step one.
Let's save this.
So we immediately get some error messages here,
jsdom is not defined.
It looks like I made a typo jsom up here.
I'm sure if you guys have been watching this video
you've probably been screaming at me.
How did you make such a silly typo?
I apologize.
Let's do jsdom,
and we're back to just normal error messages.
Much better, right?
Okay, so step one is basically
taken care of at this point.
Let's continue onto step number two, which is to
build our render component helper in the next section.
This is really the juicy bit right here.
So you know, do
do keep your eyes peeled for the next section.
I'll see you over there.