1
00:00:06,651 --> 00:00:09,090
- In this section, we are
gonna take a closer look

2
00:00:09,090 --> 00:00:13,470
at the query API provided
in Testing Library.

3
00:00:13,470 --> 00:00:15,840
So, if you wanna follow along,

4
00:00:15,840 --> 00:00:19,083
there's the folder,
TestingLibrary_QueryAPi.

5
00:00:20,970 --> 00:00:22,500
So here it is

6
00:00:22,500 --> 00:00:24,150
in the file explorer.

7
00:00:24,150 --> 00:00:26,688
And if you open that
up in the code editor.

8
00:00:26,688 --> 00:00:29,250
So, I've actually just got all the tests

9
00:00:29,250 --> 00:00:31,170
in one file for this section.

10
00:00:31,170 --> 00:00:32,850
I've got about half a dozen tests

11
00:00:32,850 --> 00:00:34,950
that we'll have a look at in there,

12
00:00:34,950 --> 00:00:38,190
looking at various different
types of check we can do.

13
00:00:38,190 --> 00:00:40,770
The configuration files
are the same as before,

14
00:00:40,770 --> 00:00:42,660
So quickly remind you.

15
00:00:42,660 --> 00:00:45,480
Telling Babel to transpile our JavaScript

16
00:00:45,480 --> 00:00:47,410
into ECMAScript 2015

17
00:00:48,450 --> 00:00:51,930
and configuring Jest.

18
00:00:51,930 --> 00:00:53,880
So it runs in JS do mode.

19
00:00:53,880 --> 00:00:57,300
So we have a document object
that we can use in our tests.

20
00:00:57,300 --> 00:01:00,870
And then importing the testing library

21
00:01:00,870 --> 00:01:02,970
plus the Babel libraries as well.

22
00:01:02,970 --> 00:01:05,220
So remember again, if
you wanna run these tests

23
00:01:05,220 --> 00:01:07,800
open up a command window
or terminal window

24
00:01:07,800 --> 00:01:09,750
and run an npm install

25
00:01:09,750 --> 00:01:11,280
just to download these libraries

26
00:01:11,280 --> 00:01:13,290
before you can run the tests

27
00:01:13,290 --> 00:01:15,840
all the tests are actually in this file.

28
00:01:15,840 --> 00:01:19,710
So let me start explaining
what we're going to do.

29
00:01:19,710 --> 00:01:23,550
So, as I've said the Testing Library

30
00:01:23,550 --> 00:01:25,920
favors a user centric approach

31
00:01:25,920 --> 00:01:27,330
to locating content.

32
00:01:27,330 --> 00:01:31,440
So as a programmer, we think
about elements having Ids

33
00:01:31,440 --> 00:01:32,505
and CSS classes

34
00:01:32,505 --> 00:01:33,900
and element names,

35
00:01:33,900 --> 00:01:36,540
but the user just sees the webpage

36
00:01:36,540 --> 00:01:38,520
and testing library focuses on

37
00:01:38,520 --> 00:01:40,140
how can we find an element

38
00:01:40,140 --> 00:01:43,560
based on what the user
sees in the webpage?

39
00:01:43,560 --> 00:01:44,970
So there are various different ways

40
00:01:44,970 --> 00:01:48,900
of locating content based
on their visual appearance.

41
00:01:48,900 --> 00:01:50,400
So you can locate the button

42
00:01:50,400 --> 00:01:53,850
or any element by the
text that it displays.

43
00:01:53,850 --> 00:01:58,140
You can locate a text box
by its adjacent label.

44
00:01:58,140 --> 00:02:00,870
You can locate an element by the tooltip

45
00:02:00,870 --> 00:02:02,610
that appears when you hover over it.

46
00:02:02,610 --> 00:02:05,700
These are all things
that the user experiences

47
00:02:05,700 --> 00:02:09,360
that you can use to locate
that content in your webpage.

48
00:02:09,360 --> 00:02:11,940
Find the button that looks like this

49
00:02:11,940 --> 00:02:13,170
so that we can click it.

50
00:02:13,170 --> 00:02:15,750
That's the philosophy for testing library.

51
00:02:15,750 --> 00:02:17,901
So at the moment, we've
only been looking at text

52
00:02:17,901 --> 00:02:19,833
we've been using like getByText

53
00:02:20,672 --> 00:02:22,384
and queryByText

54
00:02:22,384 --> 00:02:23,430
and findByText.

55
00:02:23,430 --> 00:02:25,650
But there's a whole suite

56
00:02:25,650 --> 00:02:29,070
of different kinds of
way to locate content.

57
00:02:29,070 --> 00:02:31,800
So we have a bunch of functions

58
00:02:31,800 --> 00:02:34,020
that allow us to locate content.

59
00:02:34,020 --> 00:02:37,860
ByRole, Role is an ARIA technique

60
00:02:37,860 --> 00:02:40,200
ARIAs of assistive technology.

61
00:02:40,200 --> 00:02:42,757
For if people with visual impairment

62
00:02:42,757 --> 00:02:45,091
they can have screen readers

63
00:02:45,091 --> 00:02:48,750
which kind of announce
the meaning of elements.

64
00:02:48,750 --> 00:02:52,320
When the user tabs into a
button, for example, or text box,

65
00:02:52,320 --> 00:02:54,990
the screen reader can read out loud

66
00:02:54,990 --> 00:02:57,360
the some kind of descriptive information.

67
00:02:57,360 --> 00:03:01,920
So each element on the
webpage can have an ARIA role

68
00:03:01,920 --> 00:03:03,240
that you can also locate

69
00:03:03,240 --> 00:03:07,471
find the element whose ARIA
role is button, for example.

70
00:03:07,471 --> 00:03:10,341
Find ByLabelText.

71
00:03:10,341 --> 00:03:12,810
I'm gonna show an example
of each of these functions

72
00:03:12,810 --> 00:03:13,646
over the next five minutes or so.

73
00:03:13,646 --> 00:03:17,670
get a text box

74
00:03:17,670 --> 00:03:20,703
or get an element based on the
label that sits next to it.

75
00:03:21,540 --> 00:03:24,720
Input fields, text boxes
can have placeholder text.

76
00:03:24,720 --> 00:03:25,770
You know the idea?

77
00:03:25,770 --> 00:03:29,400
A text box appears inside the text box

78
00:03:29,400 --> 00:03:31,530
is like a grade out placeholder text.

79
00:03:31,530 --> 00:03:33,392
Please empty your name here.

80
00:03:33,392 --> 00:03:35,910
Once you tap into the text box

81
00:03:35,910 --> 00:03:38,250
the placeholder text disappears,

82
00:03:38,250 --> 00:03:40,350
but it's like a hint; what
you're meant to enter.

83
00:03:40,350 --> 00:03:43,620
You can search for elements
with placeholder text.

84
00:03:43,620 --> 00:03:45,450
You can find elements

85
00:03:45,450 --> 00:03:47,520
but the actual text that they display

86
00:03:47,520 --> 00:03:49,053
like the label on a button,

87
00:03:49,980 --> 00:03:51,090
the display value.

88
00:03:51,090 --> 00:03:52,770
Okay. We'll have a look at that.

89
00:03:52,770 --> 00:03:55,440
Alternative text when you have an image.

90
00:03:55,440 --> 00:03:57,600
Images are meant to
have an alternative text

91
00:03:57,600 --> 00:04:00,030
in case the browser can't load the image.

92
00:04:00,030 --> 00:04:02,520
It can display the
alternative text Instead.

93
00:04:02,520 --> 00:04:04,320
That's something that you can locate.

94
00:04:04,320 --> 00:04:08,493
Find the image whose
alternative text is something.

95
00:04:09,570 --> 00:04:11,610
A title means pop up.

96
00:04:11,610 --> 00:04:13,650
So when you hover over an element

97
00:04:13,650 --> 00:04:16,638
it has a pop up title tooltip.

98
00:04:16,638 --> 00:04:20,520
So you can search on
that and by its Test Id.

99
00:04:20,520 --> 00:04:24,330
This is kind of like an ultimate fallback.

100
00:04:24,330 --> 00:04:27,180
If there isn't any other
way of locating an element

101
00:04:27,180 --> 00:04:29,640
then you can basically
give it like a dummy Id

102
00:04:29,640 --> 00:04:32,190
that it can search for in your tests.

103
00:04:32,190 --> 00:04:36,690
So you can use all of these
functions in the getByFamily

104
00:04:36,690 --> 00:04:38,642
or the findByFamily

105
00:04:38,642 --> 00:04:41,670
and the all suffix.

106
00:04:41,670 --> 00:04:43,781
So you can say getByRole,

107
00:04:43,781 --> 00:04:46,290
or you can say findByRole

108
00:04:46,290 --> 00:04:48,552
or you could say queryByRole.

109
00:04:48,552 --> 00:04:51,112
You could say, getAllByRole

110
00:04:51,112 --> 00:04:53,340
queryAllByRole

111
00:04:53,340 --> 00:04:55,380
and findAllByRole.

112
00:04:55,380 --> 00:04:57,181
I'm just gonna look at the get family.

113
00:04:57,181 --> 00:05:00,810
It would be exactly the
same code if you call query

114
00:05:00,810 --> 00:05:02,130
or find

115
00:05:02,130 --> 00:05:03,347
or getAll,

116
00:05:05,239 --> 00:05:06,210
queryAll

117
00:05:06,210 --> 00:05:07,590
or findAll, okay.

118
00:05:07,590 --> 00:05:09,240
So it's the same basic idea.

119
00:05:09,240 --> 00:05:11,070
So we are just focus on the get functions

120
00:05:11,070 --> 00:05:13,503
because they're the most straightforward.

121
00:05:14,940 --> 00:05:16,650
Right. So getByRole.

122
00:05:16,650 --> 00:05:17,880
That's the first one we're gonna look at.

123
00:05:17,880 --> 00:05:19,770
We're gonna look at all of
those in the next few minutes.

124
00:05:19,770 --> 00:05:23,040
getByRole is probably the trickiest one.

125
00:05:23,040 --> 00:05:26,040
It gets a node that matches an ARIA role.

126
00:05:26,040 --> 00:05:30,360
ARIA is the Accessible
Rich Internet Application

127
00:05:30,360 --> 00:05:31,950
framework, if you like.

128
00:05:31,950 --> 00:05:35,790
It's a set of adjectives
that describe the purpose

129
00:05:35,790 --> 00:05:40,020
of a div in terms of
assistive technologies, okay.

130
00:05:40,020 --> 00:05:43,140
So there are a wide
range of different roles

131
00:05:43,140 --> 00:05:47,100
or types of element specified
by the ARIA standard.

132
00:05:47,100 --> 00:05:51,630
If you click on the link,
this is what it looks like.

133
00:05:51,630 --> 00:05:54,190
The accessibility tree basically elements

134
00:05:55,050 --> 00:05:57,310
in ARIA can have a role

135
00:05:58,500 --> 00:06:00,240
and the roles can be things like buttons

136
00:06:00,240 --> 00:06:01,470
or nav bar

137
00:06:01,470 --> 00:06:02,760
or list, Okay.

138
00:06:02,760 --> 00:06:07,046
So if you go here you find
all the information you need

139
00:06:07,046 --> 00:06:11,100
about all the different types
of role available in ARIA.

140
00:06:11,100 --> 00:06:12,270
It's quite a rich area.

141
00:06:12,270 --> 00:06:14,820
If you've done work with ARIA before,

142
00:06:14,820 --> 00:06:16,920
you know, there's quite a lot of detail.

143
00:06:16,920 --> 00:06:18,450
If you haven't worked with it before

144
00:06:18,450 --> 00:06:20,670
then it'll be quite odd initially

145
00:06:20,670 --> 00:06:23,370
but hopefully it'll become a bit clearer

146
00:06:23,370 --> 00:06:25,050
in the next few minutes.

147
00:06:25,050 --> 00:06:26,070
Some of the roles.

148
00:06:26,070 --> 00:06:28,530
So you can basically
have a div, for example

149
00:06:28,530 --> 00:06:30,744
and you can give it the role heading.

150
00:06:30,744 --> 00:06:32,640
You can have text boxes,

151
00:06:32,640 --> 00:06:33,960
they are input fields

152
00:06:33,960 --> 00:06:37,410
but you can also give them
the ARIA role of input.

153
00:06:37,410 --> 00:06:38,430
Okay.

154
00:06:38,430 --> 00:06:40,260
Which can be detected more easily

155
00:06:40,260 --> 00:06:43,710
by assistive technologies
like screen readers.

156
00:06:43,710 --> 00:06:45,780
So it's an like an extra description.

157
00:06:45,780 --> 00:06:48,870
The purpose of this element
is it's an input field

158
00:06:48,870 --> 00:06:49,703
or button

159
00:06:49,703 --> 00:06:50,610
or check box

160
00:06:50,610 --> 00:06:51,443
or table

161
00:06:51,443 --> 00:06:52,740
or row in a table

162
00:06:52,740 --> 00:06:54,900
or a cell in a table.

163
00:06:54,900 --> 00:06:55,770
So there were lots of these,

164
00:06:55,770 --> 00:06:57,000
there's like a couple of dozen

165
00:06:57,000 --> 00:06:59,160
of different roles defined by ARIA.

166
00:06:59,160 --> 00:07:01,020
So have a look at this example

167
00:07:01,020 --> 00:07:03,062
I've got a simple, all of these tests,

168
00:07:03,062 --> 00:07:05,912
by the way, are an example test JS.

169
00:07:05,912 --> 00:07:08,640
So the first test getByRole.

170
00:07:08,640 --> 00:07:09,952
This is my first example.

171
00:07:09,952 --> 00:07:12,411
I've got some simple
content that I've loaded

172
00:07:12,411 --> 00:07:16,380
a button with this text here.

173
00:07:16,380 --> 00:07:21,330
You can say, document
body is screen, getByRole.

174
00:07:21,330 --> 00:07:24,210
You specify the role
that you're looking for

175
00:07:24,210 --> 00:07:26,730
but that's the role,
button is like a role.

176
00:07:26,730 --> 00:07:28,410
That's the purpose of an element.

177
00:07:28,410 --> 00:07:29,760
That's the role name.

178
00:07:29,760 --> 00:07:31,980
And then here, you can give it a criteria

179
00:07:31,980 --> 00:07:34,800
to say, actually I'm looking for a button

180
00:07:34,800 --> 00:07:36,930
you specify the name property

181
00:07:36,930 --> 00:07:39,270
and then you give it effectively the text

182
00:07:39,270 --> 00:07:42,750
that you're looking for
inside the button, Okay.

183
00:07:42,750 --> 00:07:43,800
So it looks a bit odd.

184
00:07:43,800 --> 00:07:45,660
You probably wanna have a play with this.

185
00:07:45,660 --> 00:07:47,160
What role are we looking for?

186
00:07:47,160 --> 00:07:49,290
That's an ARIA role.

187
00:07:49,290 --> 00:07:52,800
Buttons, implicitly have the button role.

188
00:07:52,800 --> 00:07:55,131
So it's basically say find a button.

189
00:07:55,131 --> 00:07:59,580
The name property here is
effectively the label, Okay.

190
00:07:59,580 --> 00:08:04,580
So find the button whose label
contains submit in lowercase

191
00:08:05,340 --> 00:08:07,710
that should find this button element

192
00:08:07,710 --> 00:08:10,050
that should give me back
appointed to that button.

193
00:08:10,050 --> 00:08:11,450
So that should be truthfully

194
00:08:12,390 --> 00:08:15,510
and the N HTML should be, submit form.

195
00:08:15,510 --> 00:08:16,950
It should have found that element

196
00:08:16,950 --> 00:08:18,300
and it should have matched.

197
00:08:19,800 --> 00:08:21,401
Okay. Here's the next example

198
00:08:21,401 --> 00:08:24,091
getByRole, slightly more interesting.

199
00:08:24,091 --> 00:08:27,270
My document content to have a table.

200
00:08:27,270 --> 00:08:28,500
Tables can have a caption,

201
00:08:28,500 --> 00:08:30,510
like an internal heading,

202
00:08:30,510 --> 00:08:31,798
products table.

203
00:08:31,798 --> 00:08:33,840
Each row here is a separate product

204
00:08:33,840 --> 00:08:37,050
with a description and a price, two rows.

205
00:08:37,050 --> 00:08:40,830
I can say, getByRole table.

206
00:08:40,830 --> 00:08:43,140
That will find a table whose name

207
00:08:43,140 --> 00:08:45,180
now, in this case, when you have a table

208
00:08:45,180 --> 00:08:48,360
the name property is the caption.

209
00:08:48,360 --> 00:08:49,710
So to paraphrase,

210
00:08:49,710 --> 00:08:54,300
look for a table whose caption
contains that text, okay?

211
00:08:54,300 --> 00:08:56,340
The user will see products table

212
00:08:56,340 --> 00:08:58,140
displayed on the screen.

213
00:08:58,140 --> 00:09:00,450
Find back, find me a table.

214
00:09:00,450 --> 00:09:02,910
Find me an element whose role is table

215
00:09:02,910 --> 00:09:05,190
and which contains this caption

216
00:09:05,190 --> 00:09:07,410
or partially contains that caption.

217
00:09:07,410 --> 00:09:08,730
That should give me back appointed

218
00:09:08,730 --> 00:09:11,760
this element here should be that table

219
00:09:11,760 --> 00:09:14,779
inside that table,
inside that table element

220
00:09:14,779 --> 00:09:18,690
search for element called tr, okay.

221
00:09:18,690 --> 00:09:20,610
There should be two table rows.

222
00:09:20,610 --> 00:09:23,643
The length of that node
list should be two.

223
00:09:24,480 --> 00:09:25,611
So getByRole.

224
00:09:25,611 --> 00:09:27,750
I think the key point here is knowing

225
00:09:27,750 --> 00:09:29,610
what roles are available.

226
00:09:29,610 --> 00:09:30,810
It's a very flexible way

227
00:09:30,810 --> 00:09:33,120
of finding particular kinds of content.

228
00:09:33,120 --> 00:09:35,340
The table element in DOM

229
00:09:35,340 --> 00:09:39,150
implicitly has the table role in ARIA.

230
00:09:39,150 --> 00:09:40,860
And the caption is what
we're looking for here.

231
00:09:40,860 --> 00:09:42,570
That'll tell you the table.

232
00:09:42,570 --> 00:09:45,180
And then in here you can
do any checks you want to

233
00:09:45,180 --> 00:09:46,953
on the content of that table.

234
00:09:49,050 --> 00:09:50,970
Okay. getByLabel text.

235
00:09:50,970 --> 00:09:52,761
This is much more straightforward.

236
00:09:52,761 --> 00:09:55,350
I've got some separate content here.

237
00:09:55,350 --> 00:09:57,000
I've got a label.

238
00:09:57,000 --> 00:10:00,182
When you have a label
that relates to a text box

239
00:10:00,182 --> 00:10:03,990
we have a full property
which programmatically

240
00:10:03,990 --> 00:10:08,990
would link this label to a
text box, whose idea is price.

241
00:10:09,060 --> 00:10:14,060
So this label is for the
element whose Id is price.

242
00:10:14,610 --> 00:10:15,636
Okay.

243
00:10:15,636 --> 00:10:19,740
But when you're using Testing Library

244
00:10:19,740 --> 00:10:21,810
it looks at what the user sees

245
00:10:21,810 --> 00:10:24,750
not what's in the
programmatic underlyings.

246
00:10:24,750 --> 00:10:27,870
So when we say getByLabel text,

247
00:10:27,870 --> 00:10:30,420
we're looking at the
actual text of the label

248
00:10:30,420 --> 00:10:32,460
not what happens to be any Id

249
00:10:32,460 --> 00:10:35,550
because Ids can come
and go programmatically

250
00:10:35,550 --> 00:10:38,190
but the appearance here should be stable.

251
00:10:38,190 --> 00:10:41,583
So find an element,

252
00:10:42,960 --> 00:10:47,960
find based on the label price.

253
00:10:49,170 --> 00:10:50,427
This will basically give you back

254
00:10:50,427 --> 00:10:53,520
the corresponding element, Okay.

255
00:10:53,520 --> 00:10:55,950
It'll find that text.

256
00:10:55,950 --> 00:10:58,680
It'll know that this label
is for that input field

257
00:10:58,680 --> 00:11:01,160
and it'll give you back
the value of that, Okay.

258
00:11:01,160 --> 00:11:04,060
So this will actually give
you back the input field

259
00:11:05,730 --> 00:11:07,860
for which that label relates

260
00:11:07,860 --> 00:11:09,600
find the label, and then give me

261
00:11:09,600 --> 00:11:12,030
the input field to which it relates

262
00:11:12,030 --> 00:11:16,097
and give me the value of
that input field 300, right.

263
00:11:18,210 --> 00:11:19,200
Have a look at this example

264
00:11:19,200 --> 00:11:21,600
I'm using getByPlaceholder text.

265
00:11:21,600 --> 00:11:23,280
Here's my label.

266
00:11:23,280 --> 00:11:24,670
Here's an input field

267
00:11:25,740 --> 00:11:28,200
with some placeholder
text that will appear

268
00:11:28,200 --> 00:11:33,200
inside the text box when it
first appears in enterprise.

269
00:11:33,870 --> 00:11:35,303
So, right.

270
00:11:35,303 --> 00:11:37,590
getByPlaceholder text,

271
00:11:37,590 --> 00:11:41,310
this year is the placeholder
text of the text box.

272
00:11:41,310 --> 00:11:43,350
So it'll find that text box

273
00:11:43,350 --> 00:11:45,990
because it has that placeholder text.

274
00:11:45,990 --> 00:11:48,393
It'll give me back a
pointer to that text box.

275
00:11:49,560 --> 00:11:52,290
What's the value of that text box?

276
00:11:52,290 --> 00:11:54,300
It should be 25.

277
00:11:54,300 --> 00:11:55,133
And it is 25.

278
00:11:55,133 --> 00:11:57,150
Obviously in reality you'd
have written some code

279
00:11:57,150 --> 00:11:58,590
to change the value.

280
00:11:58,590 --> 00:12:00,780
This allows you to get the text box

281
00:12:00,780 --> 00:12:02,730
based on its placeholder,

282
00:12:02,730 --> 00:12:03,570
get the text box.

283
00:12:03,570 --> 00:12:05,643
Oh, and get the value of that text box.

284
00:12:07,470 --> 00:12:11,190
Okay. What about this one?

285
00:12:11,190 --> 00:12:12,303
A true statement.

286
00:12:13,260 --> 00:12:14,700
I have a div.

287
00:12:14,700 --> 00:12:17,820
It says whales are going to
win the world cup in 2022.

288
00:12:17,820 --> 00:12:19,410
Funny enough, I was just
chatting about that.

289
00:12:19,410 --> 00:12:21,570
About 10 minutes ago with my wife.

290
00:12:21,570 --> 00:12:24,272
In Qatar in November, 2022.

291
00:12:24,272 --> 00:12:28,830
If you are watching this
video after November, 2022

292
00:12:28,830 --> 00:12:30,060
then you will realize that Whales

293
00:12:30,060 --> 00:12:32,793
did win the world cup in 2022.

294
00:12:34,260 --> 00:12:36,930
That's a div and it's got some text

295
00:12:36,930 --> 00:12:38,460
getByText.

296
00:12:38,460 --> 00:12:42,270
Find a div that contains
this text somewhere.

297
00:12:42,270 --> 00:12:44,850
Remember when you have
a regular expression

298
00:12:44,850 --> 00:12:48,090
as long as the text
contains that somewhere

299
00:12:48,090 --> 00:12:50,940
then it's a match case insensitive.

300
00:12:50,940 --> 00:12:53,430
And remember it's gonna be a single match

301
00:12:53,430 --> 00:12:55,140
when you call a get function.

302
00:12:55,140 --> 00:12:57,480
That will hopefully give me back the div.

303
00:12:57,480 --> 00:12:59,910
And then I can say in that div,

304
00:12:59,910 --> 00:13:03,630
does it somewhere inside that
div contain the word whales

305
00:13:03,630 --> 00:13:05,130
in a case insensitive manner?

306
00:13:05,130 --> 00:13:06,150
Well, yes.

307
00:13:06,150 --> 00:13:09,520
This text will have located the element

308
00:13:10,470 --> 00:13:14,100
and the inner HTML
contains whales somewhere

309
00:13:14,100 --> 00:13:16,443
in a case insensitive kind of way.

310
00:13:17,670 --> 00:13:19,440
The display value, right.

311
00:13:19,440 --> 00:13:20,970
Well, here's an input field.

312
00:13:20,970 --> 00:13:23,880
Here's the value that's actually
currently being displayed.

313
00:13:23,880 --> 00:13:25,290
So you can check for that.

314
00:13:25,290 --> 00:13:29,460
Find the element that
contains this display value

315
00:13:29,460 --> 00:13:31,350
the actual text box, the value of it

316
00:13:31,350 --> 00:13:32,880
that's being displayed to the user,

317
00:13:32,880 --> 00:13:36,243
actually inside the
text box whales in 2022.

318
00:13:37,170 --> 00:13:38,550
It'll search for a text box

319
00:13:38,550 --> 00:13:41,910
or search for any element
that displays 2022.

320
00:13:41,910 --> 00:13:44,580
Hopefully that'll just be a single match.

321
00:13:44,580 --> 00:13:46,590
It gives you back appointed to it.

322
00:13:46,590 --> 00:13:48,870
And it says, okay, so this
is appointed to that element.

323
00:13:48,870 --> 00:13:51,270
The whole point is to try
to find an element based

324
00:13:51,270 --> 00:13:52,830
on different criteria.

325
00:13:52,830 --> 00:13:54,180
Find the element.

326
00:13:54,180 --> 00:13:58,110
Does the value match this
partial regular expression?

327
00:13:58,110 --> 00:13:59,550
Does it contain whales?

328
00:13:59,550 --> 00:14:02,460
This is part of my
brainwashing experiment.

329
00:14:02,460 --> 00:14:03,330
So yes it does.

330
00:14:03,330 --> 00:14:04,800
It contains whales.

331
00:14:04,800 --> 00:14:06,870
You get the message by now.

332
00:14:06,870 --> 00:14:08,700
Alternative text,

333
00:14:08,700 --> 00:14:11,517
an image according to the rules of HTML

334
00:14:11,517 --> 00:14:13,080
can have a source attribute

335
00:14:13,080 --> 00:14:15,300
but it's also meant to
have alternative text

336
00:14:15,300 --> 00:14:17,280
in case the image can't be loaded

337
00:14:17,280 --> 00:14:19,980
and the browser will
display the text instead.

338
00:14:19,980 --> 00:14:23,070
Find the element whose alternative text

339
00:14:23,070 --> 00:14:25,170
is image one, two, three.

340
00:14:25,170 --> 00:14:27,480
So it'll find the image tag

341
00:14:27,480 --> 00:14:28,313
and I can say

342
00:14:28,313 --> 00:14:31,050
what is the source
property of that image tag?

343
00:14:31,050 --> 00:14:34,680
It should be image one, two, three .JPEG.

344
00:14:34,680 --> 00:14:36,090
What I'm testing here

345
00:14:36,090 --> 00:14:38,023
is that this alternative image corresponds

346
00:14:38,023 --> 00:14:41,250
to the correct source URL

347
00:14:41,250 --> 00:14:43,320
for the image to be displayed, okay.

348
00:14:43,320 --> 00:14:45,660
Searching for alternative text.

349
00:14:45,660 --> 00:14:48,630
That's the best way to find
an image when using document

350
00:14:48,630 --> 00:14:49,893
like testing library.

351
00:14:50,733 --> 00:14:54,120
Title remember is the pop up text.

352
00:14:54,120 --> 00:14:54,994
So here's a div,

353
00:14:54,994 --> 00:14:57,630
I'm sure you're getting
the message by now.

354
00:14:57,630 --> 00:15:01,303
That's the popup title and
that's the displayed text.

355
00:15:01,303 --> 00:15:06,303
Find an element whose
popup title contains 2022.

356
00:15:06,983 --> 00:15:09,300
It'll find me this div

357
00:15:09,300 --> 00:15:10,320
and I can say,

358
00:15:10,320 --> 00:15:13,320
and who are the world cup winners in 2022?

359
00:15:13,320 --> 00:15:14,270
What is the inner HTML command?

360
00:15:14,270 --> 00:15:15,903
It should be Whales.

361
00:15:19,170 --> 00:15:20,490
Right.

362
00:15:20,490 --> 00:15:22,494
Okay. And then Test Id.

363
00:15:22,494 --> 00:15:27,301
Test Id is kind of like
an emergency escape route.

364
00:15:27,301 --> 00:15:29,340
Sometimes there are elements

365
00:15:29,340 --> 00:15:32,973
that you just can't get to using
these techniques, you know,

366
00:15:33,840 --> 00:15:37,080
it isn't specific, you know,

367
00:15:37,080 --> 00:15:40,380
there isn't any easy way to
highlight the single element.

368
00:15:40,380 --> 00:15:41,790
So what you can do

369
00:15:41,790 --> 00:15:44,820
is you can parachute into the element

370
00:15:44,820 --> 00:15:48,900
like a dummy Id, just
for testing purposes.

371
00:15:48,900 --> 00:15:53,520
In HTML5, it introduced the
concept of data attributes.

372
00:15:53,520 --> 00:15:56,820
This is what a data attribute
looks like on an element.

373
00:15:56,820 --> 00:16:00,900
You can have an attribute
called data-something

374
00:16:00,900 --> 00:16:04,260
and it's kind of like an extension hook.

375
00:16:04,260 --> 00:16:07,263
You can have any data attributes
you like on any element.

376
00:16:07,263 --> 00:16:09,660
It's like extensibility mechanism.

377
00:16:09,660 --> 00:16:12,240
So here, this is what you do.

378
00:16:12,240 --> 00:16:14,040
This is what test in library looks for.

379
00:16:14,040 --> 00:16:15,560
You basically have an element,

380
00:16:15,560 --> 00:16:19,080
an element that you
want to locate Test-wise

381
00:16:19,080 --> 00:16:21,300
you give it an artificial Id attribute

382
00:16:21,300 --> 00:16:22,720
called data-TestId

383
00:16:24,420 --> 00:16:25,980
and then you give it some kind of string.

384
00:16:25,980 --> 00:16:27,360
That's again artificial Id

385
00:16:27,360 --> 00:16:30,090
that only makes sense
to the test framework.

386
00:16:30,090 --> 00:16:33,930
It won't affect the actual
rendered content in any way.

387
00:16:33,930 --> 00:16:37,590
So an artificial Id that
I can locate to Test-wise.

388
00:16:37,590 --> 00:16:39,960
So in my code here, I can screen

389
00:16:39,960 --> 00:16:42,210
I can do a check for Test Id.

390
00:16:42,210 --> 00:16:46,190
I'm basically looking for
when you say getByTestId,

391
00:16:46,190 --> 00:16:49,053
it is looking for an
attribute called data-TestId.

392
00:16:49,980 --> 00:16:51,169
Exactly that.

393
00:16:51,169 --> 00:16:55,080
Based on this check,
it's gonna contain 2022.

394
00:16:55,080 --> 00:16:59,299
And who are the winners
of the 2022 world cup?

395
00:16:59,299 --> 00:17:01,653
Well, I don't know, could be Whales.

396
00:17:03,540 --> 00:17:05,370
Right. So there we are

397
00:17:05,370 --> 00:17:07,890
lots of different ways of running tests

398
00:17:07,890 --> 00:17:10,881
different lots of different
ways of locating content.

399
00:17:10,881 --> 00:17:15,881
So when I run the test, we
can get elements by role,

400
00:17:16,050 --> 00:17:17,820
by the ARIA role.

401
00:17:17,820 --> 00:17:19,530
We can get by the label text

402
00:17:19,530 --> 00:17:21,870
that sits next to a text box.

403
00:17:21,870 --> 00:17:24,240
We can get by a placeholder text

404
00:17:24,240 --> 00:17:26,520
that sits inside the text box

405
00:17:26,520 --> 00:17:28,260
and before you start typing

406
00:17:28,260 --> 00:17:30,900
the text that's actually
on a button label,

407
00:17:30,900 --> 00:17:32,520
the display value,

408
00:17:32,520 --> 00:17:34,590
the value that's actually
currently displayed

409
00:17:34,590 --> 00:17:36,240
inside the text box,

410
00:17:36,240 --> 00:17:38,460
the alternative text for an image

411
00:17:38,460 --> 00:17:42,780
the popup title for any element.

412
00:17:42,780 --> 00:17:45,330
And then finally, if you
can't get the element

413
00:17:45,330 --> 00:17:48,990
by any other means, give
it an artificial test Id

414
00:17:48,990 --> 00:17:52,500
and that should be your
last possible attempt.

415
00:17:52,500 --> 00:17:55,770
I can't find the element
uniquely any other way,

416
00:17:55,770 --> 00:17:57,900
give it an artificial test Id

417
00:17:57,900 --> 00:17:59,130
and that will allow you to do it.

418
00:17:59,130 --> 00:18:02,790
Okay. So very flexible way
of checking for elements,

419
00:18:02,790 --> 00:18:05,793
located elements, using a
wide range of techniques.