1
00:00:06,540 --> 00:00:07,380
- In this section,

2
00:00:07,380 --> 00:00:10,080
we're going to look at
two companion libraries

3
00:00:10,080 --> 00:00:13,860
which accompany and
extend testing library.

4
00:00:13,860 --> 00:00:16,350
So remember, testing library has functions

5
00:00:16,350 --> 00:00:21,350
get by, query by, and find by
which help you locate content.

6
00:00:22,470 --> 00:00:24,240
We're gonna look at two
additional libraries

7
00:00:24,240 --> 00:00:25,740
that build on top of that

8
00:00:25,740 --> 00:00:30,120
to provide some additional
useful capabilities for testing.

9
00:00:30,120 --> 00:00:32,730
So, first of all, there's
an additional library

10
00:00:32,730 --> 00:00:34,470
on top of testing library,

11
00:00:34,470 --> 00:00:36,470
an additional library called user-event.

12
00:00:37,635 --> 00:00:40,980
A simple API to simulate browser events.

13
00:00:40,980 --> 00:00:43,740
So, you can use the user-event library

14
00:00:43,740 --> 00:00:48,740
to mimic a button click, for
example, a text box entry.

15
00:00:48,870 --> 00:00:53,870
And also the second library
jest-dom a nice way of writing,

16
00:00:54,660 --> 00:00:56,380
of writing tests to say

17
00:00:58,200 --> 00:01:01,950
having found the element
using the testing library.

18
00:01:01,950 --> 00:01:04,470
Now, I want to check some
content on the element.

19
00:01:04,470 --> 00:01:06,000
Is it empty?

20
00:01:06,000 --> 00:01:08,160
Does it have a CSS class?

21
00:01:08,160 --> 00:01:10,290
Does it have the input focus?

22
00:01:10,290 --> 00:01:13,470
So, user-event helps
you to simulate events

23
00:01:13,470 --> 00:01:16,590
as if the user was
interacting with your webpage.

24
00:01:16,590 --> 00:01:20,190
And jest-dom allows you to
check, having found the elements

25
00:01:20,190 --> 00:01:22,920
what do those elements contain afterwards?

26
00:01:22,920 --> 00:01:23,790
It makes it easier for you

27
00:01:23,790 --> 00:01:25,950
to check the contents of those elements

28
00:01:25,950 --> 00:01:28,050
after the event has happened.

29
00:01:28,050 --> 00:01:29,250
So, you would typically use

30
00:01:29,250 --> 00:01:31,230
all of these three libraries together.

31
00:01:31,230 --> 00:01:34,920
Testing library to find an element,

32
00:01:34,920 --> 00:01:38,100
user-event to fire an event on the element

33
00:01:38,100 --> 00:01:42,420
and jest-dom to check the content
of the element afterwards.

34
00:01:42,420 --> 00:01:44,160
So, we're gonna have a look at an example,

35
00:01:44,160 --> 00:01:45,930
quite a nice example I think.

36
00:01:45,930 --> 00:01:48,327
TestingLibrary_CompanionLibraries.

37
00:01:48,327 --> 00:01:51,376
So, here it is in file Explorer

38
00:01:51,376 --> 00:01:54,090
TestingLibrary_CompanionLibraries.

39
00:01:54,090 --> 00:01:56,583
If you open that up in your code editor,

40
00:01:58,500 --> 00:01:59,790
it looks like this.

41
00:01:59,790 --> 00:02:02,760
So, some configuration files
that I'm gonna go through

42
00:02:02,760 --> 00:02:07,760
and one script file and one test file.

43
00:02:07,860 --> 00:02:08,888
Okay?

44
00:02:08,888 --> 00:02:10,980
Quite a realistic example, actually

45
00:02:10,980 --> 00:02:13,200
to round off this lesson.

46
00:02:13,200 --> 00:02:14,400
So first of all,

47
00:02:14,400 --> 00:02:18,120
in terms of libraries that we
need to install on our machine

48
00:02:18,120 --> 00:02:23,120
in package.json, we have the
babel libraries as before

49
00:02:23,430 --> 00:02:27,930
in order to support ECMAScript modules.

50
00:02:27,930 --> 00:02:30,390
So, we can import an export symbols.

51
00:02:30,390 --> 00:02:32,050
Obviously the testing library

52
00:02:33,030 --> 00:02:35,820
which gives us the ability
to call the get by function

53
00:02:35,820 --> 00:02:37,630
find by, query by

54
00:02:38,550 --> 00:02:42,870
plus the testing library
also has user-event

55
00:02:42,870 --> 00:02:45,990
for emulating user interactions

56
00:02:45,990 --> 00:02:50,310
and jest-dom to check the
content developments afterwards.

57
00:02:50,310 --> 00:02:53,760
So, as you can see user-event and jest-dom

58
00:02:53,760 --> 00:02:56,190
are layers on top of the
basic testing library

59
00:02:56,190 --> 00:02:58,050
that we've seen already.

60
00:02:58,050 --> 00:03:00,693
So, those are the dependencies you need.

61
00:03:01,530 --> 00:03:04,620
In my package.json file here,

62
00:03:04,620 --> 00:03:07,470
you can see I've specified
those dependencies.

63
00:03:07,470 --> 00:03:09,720
You would need to install
these dependencies

64
00:03:09,720 --> 00:03:11,220
on your machine.

65
00:03:11,220 --> 00:03:13,710
So, npm install or yarn install.

66
00:03:13,710 --> 00:03:15,960
I've already done that on my demo folder.

67
00:03:15,960 --> 00:03:17,490
So, you would need to do that as well

68
00:03:17,490 --> 00:03:20,400
just to download those
libraries into node models,

69
00:03:20,400 --> 00:03:22,740
so, we can actually run the tests.

70
00:03:22,740 --> 00:03:25,380
The other configuration is the
same as we've been looking at

71
00:03:25,380 --> 00:03:27,240
for the last few sections.

72
00:03:27,240 --> 00:03:31,950
So, we also have jest config
which says, yes we run in,

73
00:03:31,950 --> 00:03:35,760
you know, client side mode as
opposed to server side mode.

74
00:03:35,760 --> 00:03:39,690
Plus the babel configuration
that will convert our code

75
00:03:39,690 --> 00:03:41,640
into ECMAScript 2015,

76
00:03:41,640 --> 00:03:44,913
the lowest common
denominator for JavaScript.

77
00:03:45,900 --> 00:03:48,930
Right, so, now we're gonna
have a look at the code

78
00:03:48,930 --> 00:03:53,610
that's under test, under test
that will actually execute it.

79
00:03:53,610 --> 00:03:57,240
So, this is the basic idea,

80
00:03:57,240 --> 00:04:01,860
the user-event library, you
import the user-event function

81
00:04:01,860 --> 00:04:04,050
from the user-event library.

82
00:04:04,050 --> 00:04:06,930
And then you can say user-event click

83
00:04:06,930 --> 00:04:10,680
or user-event change or
user-event double click.

84
00:04:10,680 --> 00:04:14,940
So, the user-event has
various different functions

85
00:04:14,940 --> 00:04:16,320
to, you know, basically indicate

86
00:04:16,320 --> 00:04:20,310
what event you wanna emulate
and upon which element.

87
00:04:20,310 --> 00:04:21,391
Okay?

88
00:04:21,391 --> 00:04:23,280
So, this will call in the user-event click

89
00:04:23,280 --> 00:04:27,813
will simulate the click event
occurring on this button.

90
00:04:28,740 --> 00:04:30,893
So, there were whole set
of different functions

91
00:04:30,893 --> 00:04:34,083
you can call here, dot
click, double click,

92
00:04:35,310 --> 00:04:37,890
change, select whatever.

93
00:04:37,890 --> 00:04:40,050
Those, the function names
basically correspond

94
00:04:40,050 --> 00:04:41,910
to JavaScript event names.

95
00:04:41,910 --> 00:04:42,930
And then you just say

96
00:04:42,930 --> 00:04:46,323
upon which element do we
simulate that event occurring on?

97
00:04:48,090 --> 00:04:51,840
Right, so we can then use jest-dom

98
00:04:51,840 --> 00:04:55,410
to check the content
of like, of an element.

99
00:04:55,410 --> 00:04:57,480
So, we found an element,

100
00:04:57,480 --> 00:05:00,390
we simulated some user
interaction on the element

101
00:05:00,390 --> 00:05:01,800
like a click or whatever.

102
00:05:01,800 --> 00:05:05,040
Now, after that, we can
say right upon this element

103
00:05:05,040 --> 00:05:10,020
we can use these are the,
jest-dom matches basically

104
00:05:10,020 --> 00:05:14,580
which are kind of related
to HTML dom related tasks.

105
00:05:14,580 --> 00:05:18,120
Is my text box enabled or disabled?

106
00:05:18,120 --> 00:05:21,240
That's clearly some kind
of graphical user interface

107
00:05:21,240 --> 00:05:22,620
feature.

108
00:05:22,620 --> 00:05:26,460
So this, these functions
here are provided by

109
00:05:26,460 --> 00:05:29,790
by jest-dom to check
the content of elements

110
00:05:29,790 --> 00:05:34,140
in an HTML kind of way, is my
element enabled or disabled?

111
00:05:34,140 --> 00:05:36,660
Is the text box valid or invalid?

112
00:05:36,660 --> 00:05:38,490
You know, a text boxes
can have like properties

113
00:05:38,490 --> 00:05:40,770
like minimum value, maximum value.

114
00:05:40,770 --> 00:05:42,450
You can use these functions

115
00:05:42,450 --> 00:05:45,420
to check whether the content is valid

116
00:05:45,420 --> 00:05:47,430
according to its constraints.

117
00:05:47,430 --> 00:05:50,220
You can check whether some parent element

118
00:05:50,220 --> 00:05:52,440
contains a child element

119
00:05:52,440 --> 00:05:55,860
or whether an element contains some HTML.

120
00:05:55,860 --> 00:05:59,430
You know, it doesn't contain
this text value, for example.

121
00:05:59,430 --> 00:06:00,840
So, it enables you to

122
00:06:00,840 --> 00:06:03,600
against an element to
write higher level tests

123
00:06:03,600 --> 00:06:05,823
based on HTML semantics.

124
00:06:07,200 --> 00:06:08,033
Right.

125
00:06:08,033 --> 00:06:08,970
Have a look here

126
00:06:08,970 --> 00:06:12,210
for the full range of
functions available, okay?

127
00:06:12,210 --> 00:06:13,830
I'm not gonna attempt to be comprehensive

128
00:06:13,830 --> 00:06:15,270
because there are lots of different types

129
00:06:15,270 --> 00:06:17,310
of check you can make, as you can imagine.

130
00:06:17,310 --> 00:06:18,600
So, if you look here,

131
00:06:18,600 --> 00:06:20,370
it'll tell you about all
these different functions

132
00:06:20,370 --> 00:06:23,020
that you can call to make
your tests more expressive.

133
00:06:24,360 --> 00:06:27,210
So, an example then we are
gonna have a look at the

134
00:06:27,210 --> 00:06:32,210
myscript.js the code and
example.test.js to test it.

135
00:06:34,170 --> 00:06:37,770
So, first of all then
let's look at my.script.js,

136
00:06:37,770 --> 00:06:40,170
the idea, what I'll
probably do first of all

137
00:06:40,170 --> 00:06:42,660
is I'll show you the test code.

138
00:06:42,660 --> 00:06:45,570
So, you can kind of imagine
where this is going.

139
00:06:45,570 --> 00:06:47,400
So, let me just explain a few things.

140
00:06:47,400 --> 00:06:51,120
First of all, we are gonna
be calling those functions

141
00:06:51,120 --> 00:06:54,930
and using those objects
from the testing library.

142
00:06:54,930 --> 00:06:55,991
Okay?

143
00:06:55,991 --> 00:06:58,120
And I've imported the user-event

144
00:06:59,353 --> 00:07:00,186
there.

145
00:07:00,186 --> 00:07:01,800
And basically the user-event

146
00:07:01,800 --> 00:07:06,003
and I've imported all the
functions from the from jest-dom.

147
00:07:07,770 --> 00:07:08,603
Okay.

148
00:07:08,603 --> 00:07:10,706
I've got a function called addProduct

149
00:07:10,706 --> 00:07:13,110
which I'm gonna show you in a moment.

150
00:07:13,110 --> 00:07:15,090
But before we do that I
just wanted to show you

151
00:07:15,090 --> 00:07:19,050
this is the HTML content that
my code will run against.

152
00:07:19,050 --> 00:07:21,630
We've seen something
similar to this before.

153
00:07:21,630 --> 00:07:25,650
So, my addProduct function
which I'm gonna be testing

154
00:07:25,650 --> 00:07:28,590
is gonna be interacting with this content.

155
00:07:28,590 --> 00:07:31,560
This is the HTML content
that I've provided.

156
00:07:31,560 --> 00:07:34,983
So, it's a simple product webpage,

157
00:07:35,910 --> 00:07:38,580
the user, there's a text box

158
00:07:38,580 --> 00:07:41,313
where the user can enter a
description of a product.

159
00:07:42,360 --> 00:07:45,360
So, the important point to
notice that this text box

160
00:07:45,360 --> 00:07:48,480
has a label associated with it.

161
00:07:48,480 --> 00:07:50,613
And that label says description;

162
00:07:51,813 --> 00:07:52,646
Okay.

163
00:07:52,646 --> 00:07:55,620
So, I'm gonna use in my code,
I'm going to use this label

164
00:07:55,620 --> 00:07:57,310
to find that text box

165
00:07:58,680 --> 00:08:02,100
and, you know, to get simulate user input

166
00:08:02,100 --> 00:08:03,570
into that text box.

167
00:08:03,570 --> 00:08:08,070
And likewise, I've got
another label here, price;

168
00:08:08,070 --> 00:08:11,340
which will give me access to this text box

169
00:08:11,340 --> 00:08:14,010
and a button that I'm gonna
simulate a button click on

170
00:08:14,010 --> 00:08:15,963
using the user-event.

171
00:08:17,250 --> 00:08:19,380
And I've got a table here.

172
00:08:19,380 --> 00:08:21,270
The table is gonna display all products.

173
00:08:21,270 --> 00:08:23,280
The idea is while you can imagine

174
00:08:23,280 --> 00:08:25,380
when the user clicks add product

175
00:08:25,380 --> 00:08:29,400
what the code will do is get
the value of the description,

176
00:08:29,400 --> 00:08:30,540
skis,

177
00:08:30,540 --> 00:08:33,870
get the value of the price, 800

178
00:08:33,870 --> 00:08:36,870
and add another row into this table.

179
00:08:36,870 --> 00:08:40,240
The caption will enable
me to locate that table

180
00:08:41,100 --> 00:08:44,220
using my testing library.

181
00:08:44,220 --> 00:08:45,663
So, that's the HTML.

182
00:08:47,040 --> 00:08:51,300
Here, I'm getting a handle
onto the button, okay.

183
00:08:51,300 --> 00:08:53,490
So, this is using testing library

184
00:08:53,490 --> 00:08:55,530
effectively in my document body.

185
00:08:55,530 --> 00:08:58,920
Find the element that has
the role of button, okay.

186
00:08:58,920 --> 00:09:00,693
So, that would be a button then.

187
00:09:01,590 --> 00:09:06,120
Oh, specifically a button that
has this text add product.

188
00:09:06,120 --> 00:09:10,560
So this, this here will
give me back a reference

189
00:09:10,560 --> 00:09:13,650
to this button object in the dom tree.

190
00:09:13,650 --> 00:09:17,760
And I wanna basically hook up an event.

191
00:09:17,760 --> 00:09:20,640
You hook up the events
as before on that button,

192
00:09:20,640 --> 00:09:24,393
if it's clicked then call
the add product function.

193
00:09:25,320 --> 00:09:26,153
All right.

194
00:09:26,153 --> 00:09:28,110
The add product function is
what we're trying to test

195
00:09:28,110 --> 00:09:29,730
from our script.

196
00:09:29,730 --> 00:09:31,200
So, we need to look at that next.

197
00:09:31,200 --> 00:09:32,880
Let's have look at the, in myscript,

198
00:09:32,880 --> 00:09:34,800
let's have a look at the
add product function.

199
00:09:34,800 --> 00:09:38,160
This is gonna be called when
the user clicks the button

200
00:09:38,160 --> 00:09:40,200
and I've got some
comments here that explain

201
00:09:40,200 --> 00:09:41,250
what's going on.

202
00:09:41,250 --> 00:09:43,380
Let me just quickly run through,

203
00:09:43,380 --> 00:09:47,820
first of all I'm trying to
add a new row into the table.

204
00:09:47,820 --> 00:09:49,980
So, it'll have two columns.

205
00:09:49,980 --> 00:09:52,740
This first paragraph
of code is gonna create

206
00:09:52,740 --> 00:09:56,103
a table data cell with a CSS class.

207
00:09:56,940 --> 00:10:00,243
The description entered by
the user in the text box.

208
00:10:01,440 --> 00:10:06,440
Okay, so create a new
element, add a CSS class

209
00:10:07,140 --> 00:10:10,320
this is how you can add CSS
classes to an element, okay.

210
00:10:10,320 --> 00:10:13,593
So, it knows that it's
the description data cell.

211
00:10:14,460 --> 00:10:18,000
Oh, get the value from the text box.

212
00:10:18,000 --> 00:10:19,230
This is my real code now,

213
00:10:19,230 --> 00:10:24,230
you don't use the,
jest-dom API in your code,

214
00:10:24,300 --> 00:10:25,380
you just use it in your test.

215
00:10:25,380 --> 00:10:27,780
This is my regular JavaScript code

216
00:10:27,780 --> 00:10:31,233
whereby I get the text
box called description,

217
00:10:32,460 --> 00:10:33,760
get the value from it

218
00:10:34,830 --> 00:10:37,500
And that becomes the value of my TD, okay?

219
00:10:37,500 --> 00:10:41,430
So effectively, it'll, it'll
create an element called the TD

220
00:10:41,430 --> 00:10:43,870
with the CSS class of description

221
00:10:45,270 --> 00:10:47,910
and the inner HTML of that element

222
00:10:47,910 --> 00:10:49,740
will be whatever the user typed in

223
00:10:49,740 --> 00:10:51,813
to the description text box.

224
00:10:52,920 --> 00:10:56,520
I do then the same for
the second table cell.

225
00:10:56,520 --> 00:10:58,830
I create another table cell.

226
00:10:58,830 --> 00:11:01,020
It'll have a different CSS class.

227
00:11:01,020 --> 00:11:02,523
It'll have a class of price.

228
00:11:03,390 --> 00:11:07,030
We'll get the value of the
price text box from the webpage

229
00:11:08,310 --> 00:11:10,320
whatever value the users entered in there

230
00:11:10,320 --> 00:11:12,423
assign that into my new TD.

231
00:11:13,260 --> 00:11:17,050
So, my new TD will have
a CSS class of price

232
00:11:18,120 --> 00:11:19,980
and it will have the value

233
00:11:19,980 --> 00:11:22,113
whatever the user typed into the text box.

234
00:11:24,150 --> 00:11:28,830
Okay then, so I'll have
created a TD with a description

235
00:11:28,830 --> 00:11:31,620
and I'll have, I'll have
created a TD with a price.

236
00:11:31,620 --> 00:11:34,440
I don't need to, need to
add those into a table row.

237
00:11:34,440 --> 00:11:36,150
Let's create a table row

238
00:11:36,150 --> 00:11:38,673
and let's append both
of those table cells.

239
00:11:39,660 --> 00:11:43,260
And then finally take that table row

240
00:11:43,260 --> 00:11:45,780
and add it into my products table.

241
00:11:45,780 --> 00:11:49,830
My products table had an ID of products

242
00:11:49,830 --> 00:11:52,710
grab that table and at
the bottom of that table

243
00:11:52,710 --> 00:11:55,590
as its final child add that table row,

244
00:11:55,590 --> 00:11:57,600
the table should now have another row,

245
00:11:57,600 --> 00:11:58,620
if this has worked correctly

246
00:11:58,620 --> 00:12:00,930
I'm gonna test this in a minute.

247
00:12:00,930 --> 00:12:03,480
Oh, and then after we've done that

248
00:12:03,480 --> 00:12:06,480
empty the two text boxes

249
00:12:06,480 --> 00:12:09,870
and put the input focus back
into the description text box,

250
00:12:09,870 --> 00:12:13,650
ready for the user to
type in another product.

251
00:12:13,650 --> 00:12:16,200
So, that should actually be
quite a nice user interface.

252
00:12:16,200 --> 00:12:19,530
Let's test the code here.

253
00:12:19,530 --> 00:12:23,160
So, in my test, from the top,

254
00:12:23,160 --> 00:12:27,930
use the screen and get by
role from testing library

255
00:12:27,930 --> 00:12:29,910
to find elements,

256
00:12:29,910 --> 00:12:33,750
use user-event to
simulate the button click

257
00:12:33,750 --> 00:12:38,010
and use the jest-dom to check
the content developments

258
00:12:38,010 --> 00:12:39,663
after the click.

259
00:12:40,830 --> 00:12:42,843
Import the function we just looked at.

260
00:12:44,580 --> 00:12:48,540
Right then, let's set up the HTML.

261
00:12:48,540 --> 00:12:50,490
We could have loaded
this from an actual file

262
00:12:50,490 --> 00:12:53,133
but that's just a hard
coded for simplicity.

263
00:12:54,390 --> 00:12:57,570
Remember screen, remember screen?

264
00:12:57,570 --> 00:12:59,970
Screen basically is document body.

265
00:12:59,970 --> 00:13:02,280
So, somewhere in this document body

266
00:13:02,280 --> 00:13:06,063
find by role a button called add product.

267
00:13:07,110 --> 00:13:09,210
And when you found that button

268
00:13:09,210 --> 00:13:12,000
if it's clicked call the
add product function,

269
00:13:12,000 --> 00:13:13,550
the one that we just looked at.

270
00:13:14,640 --> 00:13:16,560
Right let's test that function.

271
00:13:16,560 --> 00:13:18,513
Let's test the add product function.

272
00:13:19,740 --> 00:13:22,260
So, I'm gonna mimic user input.

273
00:13:22,260 --> 00:13:24,030
So, let's have a look
at this, first of all.

274
00:13:24,030 --> 00:13:26,613
I'm gonna mimic the
user entering two texts.

275
00:13:27,720 --> 00:13:31,080
So, get by label text.

276
00:13:31,080 --> 00:13:35,190
Remember, and that's
using the testing library.

277
00:13:35,190 --> 00:13:37,860
Remember the first text box,

278
00:13:37,860 --> 00:13:42,003
the first text box was accompanied
by a label description.

279
00:13:42,840 --> 00:13:47,490
So, basically find the text
box accompanied by that label.

280
00:13:47,490 --> 00:13:50,460
This will gimme back a
pointer to the text box

281
00:13:50,460 --> 00:13:53,403
not the label, but the
text box that it's for.

282
00:13:54,780 --> 00:13:59,310
Okay, right from that
description text box.

283
00:13:59,310 --> 00:14:03,180
Oh, also by the way, get the text box

284
00:14:03,180 --> 00:14:04,740
whose label is price

285
00:14:04,740 --> 00:14:06,390
that'll gimme this text box here.

286
00:14:08,120 --> 00:14:09,570
And then in the first text box,

287
00:14:09,570 --> 00:14:11,610
imagine the user entered skis.

288
00:14:11,610 --> 00:14:14,700
And in the second text
box set the value to 800.

289
00:14:14,700 --> 00:14:18,510
So, that's simulating
or mimicking user input.

290
00:14:18,510 --> 00:14:20,880
And then to mimic a button click,

291
00:14:20,880 --> 00:14:24,090
find the button called add product

292
00:14:24,090 --> 00:14:26,790
and then using the user-event,

293
00:14:26,790 --> 00:14:31,020
simulate a click event
on that button, like so.

294
00:14:31,020 --> 00:14:32,790
So, you'll say user-event,

295
00:14:32,790 --> 00:14:34,680
the name of the event you wanna generate

296
00:14:34,680 --> 00:14:36,600
and then the target element

297
00:14:36,600 --> 00:14:39,330
upon as if the user had
clicked that button.

298
00:14:39,330 --> 00:14:41,490
Well, when the user click that button

299
00:14:41,490 --> 00:14:43,800
it should call add product.

300
00:14:43,800 --> 00:14:45,750
So, immediately we can now check.

301
00:14:45,750 --> 00:14:47,550
What's the content of my webpage

302
00:14:47,550 --> 00:14:50,640
after that function's been called, right?

303
00:14:50,640 --> 00:14:52,530
Well, let's get the products table

304
00:14:52,530 --> 00:14:54,423
get the table whose name is product.

305
00:14:55,260 --> 00:14:59,520
Remember get by role
that will find the table

306
00:14:59,520 --> 00:15:02,103
with a caption of products.

307
00:15:05,070 --> 00:15:08,103
Okay, so get the table
whose caption is products.

308
00:15:09,480 --> 00:15:10,680
Okay.

309
00:15:10,680 --> 00:15:13,650
Inside that table, if you want
to find rows in the table,

310
00:15:13,650 --> 00:15:16,080
you can say, get by row, okay?

311
00:15:16,080 --> 00:15:17,490
Get all rows.

312
00:15:17,490 --> 00:15:20,220
You don't say TR, you just say row.

313
00:15:20,220 --> 00:15:24,990
Each TR element has an area role of row.

314
00:15:24,990 --> 00:15:26,610
So, this would give me back a node list

315
00:15:26,610 --> 00:15:29,130
that contains all the rows in the table

316
00:15:29,130 --> 00:15:31,230
and there should just be one row.

317
00:15:31,230 --> 00:15:36,230
Initially my table had no rows
after clicking the button.

318
00:15:36,840 --> 00:15:39,480
My table should now have one row.

319
00:15:39,480 --> 00:15:41,280
Does it have one row?

320
00:15:41,280 --> 00:15:42,453
Hopefully, yes.

321
00:15:43,380 --> 00:15:47,940
Okay, so in that row,
there should be two cells.

322
00:15:47,940 --> 00:15:52,680
Again, you can say, get by
row in the row that we have

323
00:15:52,680 --> 00:15:56,130
get all elements that have the cell role.

324
00:15:56,130 --> 00:15:58,323
A TD element has a cell role.

325
00:15:59,190 --> 00:16:04,190
So, this would be back the two
table columns inside my row.

326
00:16:04,950 --> 00:16:08,730
There should be two columns in my row.

327
00:16:08,730 --> 00:16:11,313
Let's check the content
of the first column.

328
00:16:12,510 --> 00:16:15,540
It says in TD zero,

329
00:16:15,540 --> 00:16:19,200
this is using jest-dom.

330
00:16:19,200 --> 00:16:20,610
I'm checking that the element

331
00:16:20,610 --> 00:16:23,460
has a CSS class of description.

332
00:16:23,460 --> 00:16:26,910
And I'm checking that it
has text content of skis.

333
00:16:26,910 --> 00:16:29,190
So, this is the jest-dom API.

334
00:16:29,190 --> 00:16:33,813
It enables us to check elements
in an HTML sensitive way.

335
00:16:34,770 --> 00:16:37,530
What about the second
column in my table row?

336
00:16:37,530 --> 00:16:40,980
The second column should
have a CSS class of price

337
00:16:40,980 --> 00:16:43,560
and it should have text content of 800.

338
00:16:43,560 --> 00:16:47,700
So, we can use the user
library to simulate events.

339
00:16:47,700 --> 00:16:51,330
We can use the, jest-dom
library to check the content

340
00:16:51,330 --> 00:16:55,130
in a dom kind of way afterwards, like so,

341
00:16:55,130 --> 00:16:58,050
or we can go further as
well, just to finish off.

342
00:16:58,050 --> 00:17:01,800
We can say the input description

343
00:17:01,800 --> 00:17:05,130
that's the text box
should no have the value.

344
00:17:05,130 --> 00:17:06,060
It should be empty.

345
00:17:06,060 --> 00:17:08,700
Remember at the end of my add product

346
00:17:08,700 --> 00:17:11,340
it set the text boxes to be clear.

347
00:17:11,340 --> 00:17:14,790
Let's check that my input
description is empty

348
00:17:14,790 --> 00:17:17,100
and so is my price.

349
00:17:17,100 --> 00:17:20,100
And also let's check that
the text box for description

350
00:17:20,100 --> 00:17:21,270
has the input focus.

351
00:17:21,270 --> 00:17:24,540
We put the input focus back
into the first text box.

352
00:17:24,540 --> 00:17:26,640
Let's make sure that it worked.

353
00:17:26,640 --> 00:17:29,820
So, these functions are semantically rich.

354
00:17:29,820 --> 00:17:32,100
They enable to you to
write tests that are,

355
00:17:32,100 --> 00:17:35,490
you know, quite expressive
and quite concise

356
00:17:35,490 --> 00:17:38,670
in a way that would be
difficult to do otherwise.

357
00:17:38,670 --> 00:17:40,780
So, I guess all we need to do now

358
00:17:41,940 --> 00:17:43,260
is to actually run the test.

359
00:17:43,260 --> 00:17:45,774
I've opened up a command
prompt window here,

360
00:17:45,774 --> 00:17:47,640
testinglibrary_companionlibraries.

361
00:17:47,640 --> 00:17:50,880
I've already done an npm install.

362
00:17:50,880 --> 00:17:51,969
Okay.

363
00:17:51,969 --> 00:17:52,802
So, you would need to do that first

364
00:17:52,802 --> 00:17:55,050
and then we can just run the tests.

365
00:17:55,050 --> 00:17:57,900
So, it'll load that content,

366
00:17:57,900 --> 00:18:00,180
simulate the user clicking the button.

367
00:18:00,180 --> 00:18:02,550
It'll run my code to add a product,

368
00:18:02,550 --> 00:18:05,040
afterwards I can check
that my product has a new,

369
00:18:05,040 --> 00:18:07,170
my product table has a new row

370
00:18:07,170 --> 00:18:09,630
with two columns description and price

371
00:18:09,630 --> 00:18:12,090
and that the text boxes were emptied

372
00:18:12,090 --> 00:18:14,520
and the focus we set afterwards

373
00:18:14,520 --> 00:18:15,900
and it's all worked beautifully.

374
00:18:15,900 --> 00:18:17,670
So, I would hardly recommend

375
00:18:17,670 --> 00:18:21,420
using these libraries
for testing web pages,

376
00:18:21,420 --> 00:18:24,240
testing library to locate content,

377
00:18:24,240 --> 00:18:27,750
user-event to simulate
events on those elements

378
00:18:27,750 --> 00:18:29,820
and then jest-dom to make it easier

379
00:18:29,820 --> 00:18:32,583
to check the contents of
those elements afterwards.