1
00:00:01,020 --> 00:00:04,620
-: So step number two, in setting up our test helper.

2
00:00:04,620 --> 00:00:06,540
In step one we've set up jsdom,

3
00:00:06,540 --> 00:00:08,880
which faked out our dom inside of the terminal

4
00:00:08,880 --> 00:00:10,830
for when we run moca.

5
00:00:10,830 --> 00:00:13,620
Step two now, is to finish up this

6
00:00:13,620 --> 00:00:15,120
or at least this, you know, kind of faking

7
00:00:15,120 --> 00:00:16,379
out the dom step here,

8
00:00:16,379 --> 00:00:17,320
and that's gonna be to make sure

9
00:00:17,320 --> 00:00:20,280
that jquery knows how to get access

10
00:00:20,280 --> 00:00:22,590
to this window variable right here.

11
00:00:22,590 --> 00:00:24,420
So by default, like I said,

12
00:00:24,420 --> 00:00:27,270
jquerys gonna try to reach out and find some part

13
00:00:27,270 --> 00:00:28,230
of the dom,

14
00:00:28,230 --> 00:00:29,970
and it's not really going to do a good job.

15
00:00:29,970 --> 00:00:31,710
We kind of have to give it a little bit of instruction

16
00:00:31,710 --> 00:00:32,700
or a little bit of guidance.

17
00:00:32,700 --> 00:00:35,550
We have to tell it, Hey jquery, when you boot up

18
00:00:35,550 --> 00:00:39,510
we want you to make use of this window variable right here.

19
00:00:39,510 --> 00:00:42,420
So in practice, the next step is easy,

20
00:00:42,420 --> 00:00:45,423
but it looks weird, it looks kind of confusing.

21
00:00:46,470 --> 00:00:47,580
So at the top of our file

22
00:00:47,580 --> 00:00:50,550
we're going to first import jquery.

23
00:00:50,550 --> 00:00:53,460
And I'm going to import underscore dollar sign

24
00:00:53,460 --> 00:00:54,960
instead of just dollar sign.

25
00:00:54,960 --> 00:00:56,910
And I'll tell you why in just a second.

26
00:00:57,900 --> 00:01:00,540
So this underscore dollar sign right here,

27
00:01:00,540 --> 00:01:04,530
is a reference to jquery, but it's kind of a,

28
00:01:04,530 --> 00:01:05,760
for lack of a better term

29
00:01:05,760 --> 00:01:07,740
junky version of jquery.

30
00:01:07,740 --> 00:01:10,020
By default, this dollar sign right here,

31
00:01:10,020 --> 00:01:11,490
you know, if we just did like so,

32
00:01:11,490 --> 00:01:13,530
is going to try to reach out to

33
00:01:13,530 --> 00:01:15,759
you know, some global, not,

34
00:01:15,759 --> 00:01:17,580
not this global right here

35
00:01:17,580 --> 00:01:20,100
but it's going to try to reach out into the browser,

36
00:01:20,100 --> 00:01:21,690
which is not available,

37
00:01:21,690 --> 00:01:23,460
and it's gonna try to get access to the dom.

38
00:01:23,460 --> 00:01:24,690
And it's gonna fail.

39
00:01:24,690 --> 00:01:27,720
So the instant that we try using jquery,

40
00:01:27,720 --> 00:01:29,730
we're gonna start seeing some errors.

41
00:01:29,730 --> 00:01:32,790
What we have to do is tell jquery explicitly,

42
00:01:32,790 --> 00:01:35,550
Hey, make use of this window right here.

43
00:01:35,550 --> 00:01:37,650
Don't try to set yourself up.

44
00:01:37,650 --> 00:01:39,690
So what we're going to do is we're going to

45
00:01:39,690 --> 00:01:43,500
define our own instance a jquery

46
00:01:43,500 --> 00:01:46,110
by doing const dollar sign,

47
00:01:46,110 --> 00:01:47,610
and then we'll say

48
00:01:47,610 --> 00:01:51,963
this should be underscore dollar sign window.

49
00:01:53,220 --> 00:01:55,230
Okay? And you know what, let's be really clear here.

50
00:01:55,230 --> 00:01:57,750
We're gonna do global dot window, okay

51
00:01:57,750 --> 00:02:00,810
so this is probably looking kinda strange right here.

52
00:02:00,810 --> 00:02:04,950
So what we just did is we imported a kind of...

53
00:02:04,950 --> 00:02:08,190
well we imported jquery, total normal version of it.

54
00:02:08,190 --> 00:02:10,020
Let's change this variable name

55
00:02:10,020 --> 00:02:13,249
so that the underscore dollar sign, you know, the

56
00:02:13,249 --> 00:02:14,700
the underscore dollar sign is not significant at all.

57
00:02:14,700 --> 00:02:16,480
So I'm just gonna change it to say

58
00:02:18,480 --> 00:02:20,283
let's just call it jquery like so.

59
00:02:23,250 --> 00:02:26,070
So we'll just import jquery from jquery

60
00:02:26,070 --> 00:02:29,940
and then we pass global dot window to jquery.

61
00:02:29,940 --> 00:02:32,310
And so this step right here, what this does is it says

62
00:02:32,310 --> 00:02:35,490
Hey jquery don't, don't try to reach out and find the dom.

63
00:02:35,490 --> 00:02:37,320
You know, don't try to do your own thing.

64
00:02:37,320 --> 00:02:40,860
What we want you to do is we want you to be just responsible

65
00:02:40,860 --> 00:02:43,500
for this fake piece of DOM that we just created.

66
00:02:43,500 --> 00:02:44,880
That's all you need to do.

67
00:02:44,880 --> 00:02:46,200
Don't go out to the dom,

68
00:02:46,200 --> 00:02:48,990
just be responsible for this global dot window

69
00:02:48,990 --> 00:02:51,513
which is being provided by jsdom.

70
00:02:52,410 --> 00:02:54,300
When we do that setup,

71
00:02:54,300 --> 00:02:57,900
this call right here is gonna return an instance of jquery

72
00:02:57,900 --> 00:03:00,210
which is what we assigned to the dollar sign.

73
00:03:00,210 --> 00:03:03,570
That is only going to ever look at or try to be responsible

74
00:03:03,570 --> 00:03:07,530
for or get access to this fake instance

75
00:03:07,530 --> 00:03:10,890
of the DOM that we created with jsdom.

76
00:03:10,890 --> 00:03:12,480
So that's all that's happening in this step right here,

77
00:03:12,480 --> 00:03:15,240
we're just saying, hey don't try to do your own thing.

78
00:03:15,240 --> 00:03:17,040
We're gonna tell you exactly what to do.

79
00:03:17,040 --> 00:03:18,960
So just do this instead.

80
00:03:18,960 --> 00:03:21,030
So from here on out,

81
00:03:21,030 --> 00:03:22,860
everywhere else where we need to use jquery

82
00:03:22,860 --> 00:03:23,880
and this testing setup,

83
00:03:23,880 --> 00:03:25,830
and it's only one or two places

84
00:03:25,830 --> 00:03:28,410
we're going to use this variable right here

85
00:03:28,410 --> 00:03:29,243
this dollar sign,

86
00:03:29,243 --> 00:03:32,310
this kind of wrapped or modified version of jquery

87
00:03:32,310 --> 00:03:35,193
as opposed to this jquery variable right here.

88
00:03:36,180 --> 00:03:38,550
Do keep in mind that this dollar sign

89
00:03:38,550 --> 00:03:40,140
this jquery variable right here is

90
00:03:40,140 --> 00:03:41,940
the entire jquery library.

91
00:03:41,940 --> 00:03:42,810
It's just a version

92
00:03:42,810 --> 00:03:44,850
of it that says that we're telling specifically,

93
00:03:44,850 --> 00:03:47,550
Hey only worry about global dot window.

94
00:03:47,550 --> 00:03:50,100
So it still has access to all of your favorite methods.

95
00:03:50,100 --> 00:03:52,890
You can do, you can use it as a selector

96
00:03:52,890 --> 00:03:54,810
you can use it to make an Ajax request.

97
00:03:54,810 --> 00:03:56,460
Whatever you might wanna do,

98
00:03:56,460 --> 00:03:58,620
you can use this dollar sign this,

99
00:03:58,620 --> 00:04:00,363
this variable right here to do it.

100
00:04:01,350 --> 00:04:02,640
Okay, so that kind of wraps up,

101
00:04:02,640 --> 00:04:04,140
wraps up step one.

102
00:04:04,140 --> 00:04:06,450
We set up our testing environment to run

103
00:04:06,450 --> 00:04:09,360
like a browser but in the command line.

104
00:04:09,360 --> 00:04:10,680
So in summary,

105
00:04:10,680 --> 00:04:13,890
we used jsdom to kind of create a fake dom,

106
00:04:13,890 --> 00:04:18,332
or fake browser environment using the jsdom library.

107
00:04:18,332 --> 00:04:20,100
And then we hooked jquery

108
00:04:20,100 --> 00:04:24,480
into that fake version of the dom that we created.

109
00:04:24,480 --> 00:04:25,800
And again, all of this

110
00:04:25,800 --> 00:04:28,350
all this effort that we're doing is to just ensure

111
00:04:28,350 --> 00:04:29,610
that we can run our specs

112
00:04:29,610 --> 00:04:32,040
from the command line where the browser

113
00:04:32,040 --> 00:04:33,660
and all the goodies that it comes

114
00:04:33,660 --> 00:04:35,760
along with are not natively available.

115
00:04:35,760 --> 00:04:39,600
We have to handle all this set up by ourselves.

116
00:04:39,600 --> 00:04:41,430
Okay, so this is pretty good for step one.

117
00:04:41,430 --> 00:04:43,320
Let's save this.

118
00:04:43,320 --> 00:04:45,690
So we immediately get some error messages here,

119
00:04:45,690 --> 00:04:47,610
jsdom is not defined.

120
00:04:47,610 --> 00:04:50,100
It looks like I made a typo jsom up here.

121
00:04:50,100 --> 00:04:52,020
I'm sure if you guys have been watching this video

122
00:04:52,020 --> 00:04:54,330
you've probably been screaming at me.

123
00:04:54,330 --> 00:04:56,010
How did you make such a silly typo?

124
00:04:56,010 --> 00:04:57,600
I apologize.

125
00:04:57,600 --> 00:04:58,833
Let's do jsdom,

126
00:04:59,850 --> 00:05:02,853
and we're back to just normal error messages.

127
00:05:06,660 --> 00:05:07,893
Much better, right?

128
00:05:09,540 --> 00:05:12,600
Okay, so step one is basically

129
00:05:12,600 --> 00:05:13,860
taken care of at this point.

130
00:05:13,860 --> 00:05:17,070
Let's continue onto step number two, which is to

131
00:05:17,070 --> 00:05:20,400
build our render component helper in the next section.

132
00:05:20,400 --> 00:05:22,290
This is really the juicy bit right here.

133
00:05:22,290 --> 00:05:23,910
So you know, do

134
00:05:23,910 --> 00:05:26,850
do keep your eyes peeled for the next section.

135
00:05:26,850 --> 00:05:28,050
I'll see you over there.