1
00:00:00,540 --> 00:00:02,190
Instructor: So we've deleted everything out of

2
00:00:02,190 --> 00:00:05,370
our test helper file, and our step one here is gonna be

3
00:00:05,370 --> 00:00:08,010
to set up our testing environment to run

4
00:00:08,010 --> 00:00:11,010
like a browser in the command line.

5
00:00:11,010 --> 00:00:12,660
So what exactly does that mean?

6
00:00:12,660 --> 00:00:15,000
Let's talk a little bit about that to start.

7
00:00:15,000 --> 00:00:16,740
This first section right here is probably gonna be one

8
00:00:16,740 --> 00:00:18,180
of the hardest that we're going through inside

9
00:00:18,180 --> 00:00:19,020
of this spec helper.

10
00:00:19,020 --> 00:00:22,080
So, let's tackle the hardest one first.

11
00:00:22,080 --> 00:00:25,350
I'm gonna pull a diagram up on the screen to help illustrate

12
00:00:25,350 --> 00:00:27,650
the challenge of what we're trying to do here.

13
00:00:28,650 --> 00:00:31,680
So we're working on some code that eventually gets turned

14
00:00:31,680 --> 00:00:34,950
into a file called bundle.js.

15
00:00:34,950 --> 00:00:38,490
Bundle.js represents our entire application.

16
00:00:38,490 --> 00:00:41,070
All of the code that we wrote plus the React Library

17
00:00:41,070 --> 00:00:43,500
plus any other libraries that we pulled in.

18
00:00:43,500 --> 00:00:45,900
It doesn't include anything like say mocha

19
00:00:45,900 --> 00:00:49,290
or Chai or jQuery or anything like that.

20
00:00:49,290 --> 00:00:52,410
Mocha or bundle.js solely represents our kind of

21
00:00:52,410 --> 00:00:55,890
production application that we might one day push out

22
00:00:55,890 --> 00:00:58,170
to the world online on a server

23
00:00:58,170 --> 00:01:00,320
and let users actually poke around with it.

24
00:01:01,620 --> 00:01:03,960
So when we make our bundle.js,

25
00:01:03,960 --> 00:01:07,350
we usually are executing it inside of a browser, right?

26
00:01:07,350 --> 00:01:10,440
Like we load it up inside of Chrome, it renders something

27
00:01:10,440 --> 00:01:13,923
to the document, and it appears on the screen to us.

28
00:01:14,850 --> 00:01:18,390
But when we write our specs and run them,

29
00:01:18,390 --> 00:01:20,700
we're not tapping over to the browser

30
00:01:20,700 --> 00:01:22,350
to run the specs.

31
00:01:22,350 --> 00:01:25,050
We've always been going over to our terminal

32
00:01:25,050 --> 00:01:26,640
and we rely upon the terminal

33
00:01:26,640 --> 00:01:28,980
to run all of our specs instead.

34
00:01:28,980 --> 00:01:31,440
So the first thing I wanna make really clear here is that

35
00:01:31,440 --> 00:01:33,900
we've got two different environments

36
00:01:33,900 --> 00:01:35,520
that we're running this application on.

37
00:01:35,520 --> 00:01:37,500
On the one hand we've got the browser

38
00:01:37,500 --> 00:01:40,800
which has all the things you would expect from a browser.

39
00:01:40,800 --> 00:01:44,160
So it's got a window object that represents

40
00:01:44,160 --> 00:01:45,810
kind of the browser of sorts.

41
00:01:45,810 --> 00:01:48,810
We've got the DOM, we've got HTML elements,

42
00:01:48,810 --> 00:01:51,510
we got all this great stuff available to us

43
00:01:51,510 --> 00:01:54,210
when we're running inside of the browser.

44
00:01:54,210 --> 00:01:57,270
But when we execute our specs from the terminal,

45
00:01:57,270 --> 00:01:59,190
we don't have the benefit of any of that.

46
00:01:59,190 --> 00:02:02,160
There is no browser inside of our terminal window.

47
00:02:02,160 --> 00:02:06,990
There's nothing like window or document or event handlers

48
00:02:06,990 --> 00:02:09,000
or even the DOM inside of the terminal.

49
00:02:09,000 --> 00:02:11,280
The terminal is just the terminal.

50
00:02:11,280 --> 00:02:13,140
That's all that's going on there.

51
00:02:13,140 --> 00:02:15,240
And so this first little piece of setup

52
00:02:15,240 --> 00:02:16,360
that we're going to do

53
00:02:17,220 --> 00:02:19,440
is, we're gonna do a little bit of setup that's going

54
00:02:19,440 --> 00:02:22,770
to help us out with setting up jQuery,

55
00:02:22,770 --> 00:02:24,540
specifically jQuery,

56
00:02:24,540 --> 00:02:27,660
to work appropriately at the command line

57
00:02:27,660 --> 00:02:30,060
where it does not have access to the DOM

58
00:02:30,060 --> 00:02:33,513
or any of these objects that it might expect to have.

59
00:02:36,390 --> 00:02:40,680
So to help with this kind of implementation of the DOM

60
00:02:40,680 --> 00:02:43,380
or the browser at the command line, we're gonna make use

61
00:02:43,380 --> 00:02:45,960
of a library called jsdom.

62
00:02:45,960 --> 00:02:48,150
And I'm only going to kind of in passing,

63
00:02:48,150 --> 00:02:49,590
pull up some of the documentation

64
00:02:49,590 --> 00:02:51,960
for some of these libraries that we're gonna use.

65
00:02:51,960 --> 00:02:54,510
I do encourage you to maybe do a little bit of research

66
00:02:54,510 --> 00:02:56,400
in each of them so you know what's going on

67
00:02:56,400 --> 00:02:57,600
behind the scenes,

68
00:02:57,600 --> 00:02:59,880
beyond just what we're gonna talk about.

69
00:02:59,880 --> 00:03:01,710
So this jsdom library

70
00:03:01,710 --> 00:03:04,890
really best summed up by this tagline right here.

71
00:03:04,890 --> 00:03:07,890
It's a JavaScript implementation of the DOM

72
00:03:07,890 --> 00:03:12,330
and HTML standards for use with node.js.

73
00:03:12,330 --> 00:03:14,850
And node.js is really what we are executing

74
00:03:14,850 --> 00:03:17,130
at the command line when we run our specs.

75
00:03:17,130 --> 00:03:21,720
So in short, jsdom is a kind of emulation

76
00:03:21,720 --> 00:03:26,720
or it fakes the DOM and HTML at the command line.

77
00:03:28,590 --> 00:03:32,070
And so that's how we get away with simulating

78
00:03:32,070 --> 00:03:35,520
or making our bundle.js and all of its dependencies think

79
00:03:35,520 --> 00:03:37,410
that it's actually running inside of a browser

80
00:03:37,410 --> 00:03:40,620
when in fact it's all running from the terminal.

81
00:03:40,620 --> 00:03:42,690
So let's do a little bit of the setup related

82
00:03:42,690 --> 00:03:44,253
to this first library.

83
00:03:45,390 --> 00:03:47,280
The first thing that we're gonna do is import

84
00:03:47,280 --> 00:03:48,690
the jsdom library.

85
00:03:48,690 --> 00:03:51,543
So we'll import jsdom from jsdom.

86
00:03:52,530 --> 00:03:56,730
Now we need to essentially create a fake HTML document.

87
00:03:56,730 --> 00:03:59,700
That's the entire purpose of jsdom.

88
00:03:59,700 --> 00:04:03,270
And then we're going to assign that to a global variable.

89
00:04:03,270 --> 00:04:06,990
Keep in mind that in Chrome or any browser we're used to,

90
00:04:06,990 --> 00:04:08,460
when we write JavaScript,

91
00:04:08,460 --> 00:04:11,460
kind of the window scope is the global scope

92
00:04:11,460 --> 00:04:14,283
and we refer to it with the window keyword.

93
00:04:15,360 --> 00:04:19,440
When we're working with a node or a node environment

94
00:04:19,440 --> 00:04:20,910
which we are with the terminal,

95
00:04:20,910 --> 00:04:25,910
instead of using window, we use global instead.

96
00:04:26,460 --> 00:04:30,780
So we're going to assign global.document.

97
00:04:30,780 --> 00:04:35,100
And this is exactly equivalent to in the browser

98
00:04:35,100 --> 00:04:38,070
assigning something to window.document.

99
00:04:38,070 --> 00:04:40,860
And you may be familiar with window.document

100
00:04:40,860 --> 00:04:45,840
and a html or JavaScript land.

101
00:04:45,840 --> 00:04:48,750
So now we're going to create our fake DOM

102
00:04:48,750 --> 00:04:51,540
and assign it to document.

103
00:04:51,540 --> 00:04:55,170
So we'll say jsdom.jsdom.

104
00:04:55,170 --> 00:04:59,010
So this is what's gonna create a HTML snippet for us.

105
00:04:59,010 --> 00:05:03,000
And then we're going to put in here our fake tiny itsy bitsy

106
00:05:03,000 --> 00:05:05,160
little HTML document.

107
00:05:05,160 --> 00:05:09,813
So we'll write, doctype html html body

108
00:05:13,200 --> 00:05:17,100
and then we'll close the body tag and close the HTML tag.

109
00:05:17,100 --> 00:05:20,400
So this little bit of code right here is what initializes

110
00:05:20,400 --> 00:05:23,670
and sets up our fake browser

111
00:05:23,670 --> 00:05:27,003
for our use at the command line inside of our terminal.

112
00:05:29,700 --> 00:05:31,050
We do that initial setup

113
00:05:31,050 --> 00:05:34,080
and then we assign it to the global variable document.

114
00:05:34,080 --> 00:05:37,350
So any library that we load up, so like say jquery

115
00:05:37,350 --> 00:05:39,210
is a fantastic example,

116
00:05:39,210 --> 00:05:41,790
is going to whenever it reaches out to say document

117
00:05:41,790 --> 00:05:44,820
or window, and jquery is really gonna take for granted

118
00:05:44,820 --> 00:05:46,290
that those variables are available

119
00:05:46,290 --> 00:05:49,110
'cause it assumes that it's always running in a browser.

120
00:05:49,110 --> 00:05:52,170
We're going to fake those variables out right here.

121
00:05:52,170 --> 00:05:53,820
So when jquery boots up

122
00:05:53,820 --> 00:05:57,450
it's going to get fake references to document.

123
00:05:57,450 --> 00:06:00,750
We're going to also assign another fake property here

124
00:06:00,750 --> 00:06:02,700
very similar to document.

125
00:06:02,700 --> 00:06:05,310
This one's gonna be window.

126
00:06:05,310 --> 00:06:08,730
And we'll get window from global.document,

127
00:06:08,730 --> 00:06:11,400
which is basically this variable right here

128
00:06:11,400 --> 00:06:14,523
that we just assigned .defaultView.

129
00:06:16,800 --> 00:06:20,040
And so if these variable names are mystery here

130
00:06:20,040 --> 00:06:21,390
or you're thinking to yourself,

131
00:06:21,390 --> 00:06:24,180
where in the world did he get these variable names from?

132
00:06:24,180 --> 00:06:26,580
I gotta tell you, I'm no master.

133
00:06:26,580 --> 00:06:28,320
This is coming straight from the documentation.

134
00:06:28,320 --> 00:06:30,480
So if you wanna figure out what exactly

135
00:06:30,480 --> 00:06:32,700
document.defaultView is,

136
00:06:32,700 --> 00:06:35,913
I recommend you check out the jsdom documentation.

137
00:06:37,530 --> 00:06:38,760
So these two lines right here

138
00:06:38,760 --> 00:06:40,920
are what does that kind of initial setup for us.

139
00:06:40,920 --> 00:06:42,510
It does the initial setup of saying,

140
00:06:42,510 --> 00:06:45,840
Hey we know that we're running at the command line.

141
00:06:45,840 --> 00:06:47,850
We know that we're not really in a browser,

142
00:06:47,850 --> 00:06:49,590
but we're gonna fake one out anyways.

143
00:06:49,590 --> 00:06:52,800
So any library that depends upon the DOM existing

144
00:06:52,800 --> 00:06:55,290
is gonna have something to hook onto.

145
00:06:55,290 --> 00:06:56,490
So this is the,

146
00:06:56,490 --> 00:06:58,770
a lot of discussion over two lines of code right here

147
00:06:58,770 --> 00:07:01,380
and heck, we're not even done with it just yet.

148
00:07:01,380 --> 00:07:03,420
But I do wanna spend a good amount of time on this

149
00:07:03,420 --> 00:07:05,130
all the topics inside of this file,

150
00:07:05,130 --> 00:07:07,230
and make sure that it's really clear what's going on

151
00:07:07,230 --> 00:07:09,000
inside this test helper.

152
00:07:09,000 --> 00:07:10,560
So with these two lines done,

153
00:07:10,560 --> 00:07:13,683
let's go ahead and continue inside of the next section.