1
00:00:06,510 --> 00:00:07,343
- In this section

2
00:00:07,343 --> 00:00:10,380
we're going to see how to test
the properties on an object.

3
00:00:10,380 --> 00:00:13,200
We'll see how to test a
length property on a string

4
00:00:13,200 --> 00:00:14,310
or an array.

5
00:00:14,310 --> 00:00:17,520
We'll see how to test if
an object has a property.

6
00:00:17,520 --> 00:00:18,750
And then we'll see how to test

7
00:00:18,750 --> 00:00:21,690
if an object has a property
with a particular value.

8
00:00:21,690 --> 00:00:23,550
So the examples for this section

9
00:00:23,550 --> 00:00:27,180
are in the usual place in the
standard Jest matchers folder.

10
00:00:27,180 --> 00:00:30,330
There's a test file example, test.JS.

11
00:00:30,330 --> 00:00:32,160
It defines a suite

12
00:00:32,160 --> 00:00:36,780
with a bunch of tests to
illustrate the techniques.

13
00:00:36,780 --> 00:00:39,870
So if you want to follow
along in your own machine,

14
00:00:39,870 --> 00:00:42,990
go into JsTdd, lesson02.

15
00:00:42,990 --> 00:00:45,160
Open the standard Jest matchers folder

16
00:00:46,110 --> 00:00:47,400
in the code editor.

17
00:00:47,400 --> 00:00:49,020
And it looks something like this.

18
00:00:49,020 --> 00:00:52,560
There's the suite with our test functions.

19
00:00:52,560 --> 00:00:54,300
So in the suite

20
00:00:54,300 --> 00:00:55,770
there are five different functions

21
00:00:55,770 --> 00:00:59,880
or five different tests to
test all the different aspects.

22
00:00:59,880 --> 00:01:02,790
So if you want to run those
tests first to see if it works

23
00:01:02,790 --> 00:01:07,260
do this npm run test or yawn test.

24
00:01:07,260 --> 00:01:10,410
So let's do that first just
to see if it's going to work.

25
00:01:10,410 --> 00:01:13,590
So open up a command window
in the correct folder,

26
00:01:13,590 --> 00:01:18,240
and go into standard test matchers.

27
00:01:18,240 --> 00:01:22,390
And in here, npm run test

28
00:01:23,430 --> 00:01:26,460
dash dash minus T properties.

29
00:01:26,460 --> 00:01:30,090
Okay, that'll pluck out our test suite

30
00:01:30,090 --> 00:01:32,970
and it'll run five tests in that suite.

31
00:01:32,970 --> 00:01:34,740
So let's just wait for the results.

32
00:01:34,740 --> 00:01:36,000
Then what we'll do is we'll take a look

33
00:01:36,000 --> 00:01:37,980
through the examples.

34
00:01:37,980 --> 00:01:40,860
So we're just waiting for it to get going.

35
00:01:40,860 --> 00:01:41,693
There we go.

36
00:01:41,693 --> 00:01:43,500
Okay, so it's detected that suite

37
00:01:43,500 --> 00:01:46,230
and it's run the five test
functions in that suite.

38
00:01:46,230 --> 00:01:47,063
So that's good.

39
00:01:47,063 --> 00:01:49,290
Let's look at the examples in more detail.

40
00:01:49,290 --> 00:01:53,880
So first of all, there's a
two half length matcher where

41
00:01:53,880 --> 00:01:56,520
if you have an array
or string or any object

42
00:01:56,520 --> 00:01:57,873
actually that has a length property

43
00:01:57,873 --> 00:02:00,666
you can check the value
of that length property.

44
00:02:00,666 --> 00:02:04,917
So here we go, here's an
array with three items.

45
00:02:04,917 --> 00:02:07,980
I'm expecting that array
to have length three.

46
00:02:07,980 --> 00:02:10,980
You're testing the length
property to have the value three.

47
00:02:10,980 --> 00:02:13,260
Here's a string I'm expecting that string

48
00:02:13,260 --> 00:02:15,510
to have a length of four characters.

49
00:02:15,510 --> 00:02:18,607
Okay, so basically any object
that has a length property

50
00:02:18,607 --> 00:02:22,803
you can apply this matcher to
see the value of the length.

51
00:02:23,700 --> 00:02:26,580
Okay, more generally
you might want to test

52
00:02:26,580 --> 00:02:29,010
if an object has a property.

53
00:02:29,010 --> 00:02:30,750
Maybe you don't care what the value is.

54
00:02:30,750 --> 00:02:34,230
You just want to know, does
it have the property or not?

55
00:02:34,230 --> 00:02:37,170
So there are several different
ways where you can access

56
00:02:37,170 --> 00:02:40,010
or specify which property
you're interested in.

57
00:02:40,010 --> 00:02:42,150
First of all, you can use the dot syntax.

58
00:02:42,150 --> 00:02:43,721
Have a look at this example here.

59
00:02:43,721 --> 00:02:47,190
I've got an object and
the object has a name.

60
00:02:47,190 --> 00:02:50,250
That would be me and oh,
I have some benefits.

61
00:02:50,250 --> 00:02:52,440
The benefits is a nested object.

62
00:02:52,440 --> 00:02:54,120
Oh, I have a car.

63
00:02:54,120 --> 00:02:55,860
That's a, quite a nice benefit.

64
00:02:55,860 --> 00:02:56,987
It's a Mazda6.

65
00:02:57,856 --> 00:02:59,850
Okay, so that is actually
the car that I own.

66
00:02:59,850 --> 00:03:01,200
Funnily enough.

67
00:03:01,200 --> 00:03:04,530
Oh, I also have pay, that's a benefit.

68
00:03:04,530 --> 00:03:08,790
My pay is a salary of
$10,000 and a bonus of $500.

69
00:03:08,790 --> 00:03:12,330
So we have an object here
with a nested object.

70
00:03:12,330 --> 00:03:15,664
You can use the dot syntax
to drill into nested objects.

71
00:03:15,664 --> 00:03:20,040
So test the employee to
see if it has a property

72
00:03:20,040 --> 00:03:22,440
and benefits.car.make.

73
00:03:22,440 --> 00:03:26,190
The dot syntax allows you to
drill into nested objects.

74
00:03:26,190 --> 00:03:28,320
So I started with the employee.

75
00:03:28,320 --> 00:03:30,052
It has a property called benefits

76
00:03:30,052 --> 00:03:34,140
and that takes me to an object
which has a car property

77
00:03:34,140 --> 00:03:35,490
which has a make property.

78
00:03:35,490 --> 00:03:37,574
Okay, so the dot syntax
allows you to tunnel

79
00:03:37,574 --> 00:03:40,473
into the nested objects properties.

80
00:03:41,460 --> 00:03:45,150
Also this employee has a property
called benefits car make,

81
00:03:45,150 --> 00:03:50,150
model, so benefits car model,
so that property exists.

82
00:03:50,340 --> 00:03:54,900
But unfortunately I
still don't have a jet.

83
00:03:54,900 --> 00:03:58,050
Okay, so the benefits
object doesn't have a jet

84
00:03:58,050 --> 00:04:00,543
property here, but I live in hope.

85
00:04:01,410 --> 00:04:04,020
So you can test if a property exists

86
00:04:04,020 --> 00:04:09,020
using the dot syntax object
dot sub dot sub object.

87
00:04:09,120 --> 00:04:11,520
Alternatively instead
of using the dot syntax

88
00:04:11,520 --> 00:04:14,070
you can use the array
syntax if you prefer.

89
00:04:14,070 --> 00:04:15,870
So here's the similar example

90
00:04:15,870 --> 00:04:19,500
but using array syntax, so same employee

91
00:04:19,500 --> 00:04:22,020
and I'm checking if that
employee has a property.

92
00:04:22,020 --> 00:04:26,880
Now here, I've specified an
array of sub property names.

93
00:04:26,880 --> 00:04:29,563
If you like, so first of all,
start them with the employee.

94
00:04:29,563 --> 00:04:31,784
Does it have a property called benefits?

95
00:04:31,784 --> 00:04:32,823
Yes.

96
00:04:33,720 --> 00:04:35,465
Inside that object,

97
00:04:35,465 --> 00:04:38,490
does it have a child property called car?

98
00:04:38,490 --> 00:04:39,630
Yes.

99
00:04:39,630 --> 00:04:41,310
Inside this child object

100
00:04:41,310 --> 00:04:43,110
does it have a sub property called make?

101
00:04:43,110 --> 00:04:44,550
Yes, there it is.

102
00:04:44,550 --> 00:04:45,567
Okay, so you can either use

103
00:04:45,567 --> 00:04:47,970
you can either say
benefits dot car dot make

104
00:04:47,970 --> 00:04:52,860
or you can use square
brackets to, specify the,

105
00:04:52,860 --> 00:04:53,880
you know how you want to go.

106
00:04:53,880 --> 00:04:56,490
And the advantage of
using the array syntax is

107
00:04:56,490 --> 00:04:58,740
that potentially you
could programmatically

108
00:04:58,740 --> 00:05:02,433
generate this array to be more generic.

109
00:05:03,990 --> 00:05:04,823
But anyway, there we go.

110
00:05:04,823 --> 00:05:08,697
So my employee does have a
benefits dot car dot make

111
00:05:08,697 --> 00:05:12,540
and a benefits dot car dot
model, but using array syntax.

112
00:05:12,540 --> 00:05:13,920
Again, in this example

113
00:05:13,920 --> 00:05:16,830
I don't really care what
the property value is.

114
00:05:16,830 --> 00:05:18,753
I just want to check that it exists.

115
00:05:19,920 --> 00:05:24,920
Now then, look at this, you
can test array elements.

116
00:05:26,310 --> 00:05:29,250
So here have slightly
different employee now.

117
00:05:29,250 --> 00:05:32,070
And it's Andy.

118
00:05:32,070 --> 00:05:37,070
Good name and the benefits
company car and a pay package.

119
00:05:37,320 --> 00:05:39,630
Oh, and the employee has skills.

120
00:05:39,630 --> 00:05:42,557
JavaScript, TypeScript, and C Sharp.

121
00:05:42,557 --> 00:05:45,570
So you can use in the array syntax

122
00:05:45,570 --> 00:05:49,920
you can actually check
that you have an element

123
00:05:49,920 --> 00:05:51,090
in an array.

124
00:05:51,090 --> 00:05:53,730
Check this employee, but it has a property

125
00:05:53,730 --> 00:05:56,168
not just the array syntax
here, square brackets.

126
00:05:56,168 --> 00:05:58,986
check that the employee
has a skills property.

127
00:05:58,986 --> 00:06:00,450
Yes.

128
00:06:00,450 --> 00:06:03,060
And then, which is an array by the way.

129
00:06:03,060 --> 00:06:06,240
Test if that array has an element zero.

130
00:06:06,240 --> 00:06:07,500
Yes, it does.

131
00:06:07,500 --> 00:06:08,790
I haven't checked the value of it

132
00:06:08,790 --> 00:06:11,100
but it does have an element zero.

133
00:06:11,100 --> 00:06:12,390
And likewise,

134
00:06:12,390 --> 00:06:15,330
does my employee have a
property called skills?

135
00:06:15,330 --> 00:06:16,530
Yes.

136
00:06:16,530 --> 00:06:19,050
And if you drill into that object or that

137
00:06:19,050 --> 00:06:22,348
that property, is there
an element index one?

138
00:06:22,348 --> 00:06:23,432
Yes, there is.

139
00:06:23,432 --> 00:06:25,140
There's that one there.

140
00:06:25,140 --> 00:06:27,690
Okay, so you can use numeric fields here

141
00:06:27,690 --> 00:06:31,563
to specify indexed elements
that you want in an array.

142
00:06:32,850 --> 00:06:33,840
Right.

143
00:06:33,840 --> 00:06:36,090
If you take it a step further
you can actually check

144
00:06:36,090 --> 00:06:39,060
not only for the presence of our property,

145
00:06:39,060 --> 00:06:40,830
but for the value as well.

146
00:06:40,830 --> 00:06:44,520
So what you do is you
pass a second parameter

147
00:06:44,520 --> 00:06:48,063
specifying the value that
you are hoping is there.

148
00:06:49,770 --> 00:06:51,390
So here's my employee

149
00:06:51,390 --> 00:06:55,890
and the certain benefits
and certain skills.

150
00:06:55,890 --> 00:07:00,030
Notice now, when I call
the two half property

151
00:07:00,030 --> 00:07:03,690
I'm passing two parameters,
the first parameter is the

152
00:07:03,690 --> 00:07:06,210
the name of the property
that I'm checking for.

153
00:07:06,210 --> 00:07:07,800
And the second value,

154
00:07:07,800 --> 00:07:10,320
the second parameter is the
value that I'm looking for.

155
00:07:10,320 --> 00:07:11,250
Okay, so I'm checking

156
00:07:11,250 --> 00:07:15,360
that the employee has a property
benefits car make, okay.

157
00:07:15,360 --> 00:07:19,200
So benefits, car, make
it's that property there

158
00:07:19,200 --> 00:07:21,810
but I'm also checking not
only that the property exists

159
00:07:21,810 --> 00:07:23,280
but it has this value.

160
00:07:23,280 --> 00:07:25,470
Okay, so yes, it does.

161
00:07:25,470 --> 00:07:30,470
The benefits car make property is a Mazda.

162
00:07:30,600 --> 00:07:32,400
So in this first example

163
00:07:32,400 --> 00:07:36,600
I use the Dot syntax to
drill into the sub property.

164
00:07:36,600 --> 00:07:39,120
You could still use the
array syntax if you prefer.

165
00:07:39,120 --> 00:07:44,120
So this bit of syntax is
effectively equivalent to that

166
00:07:44,160 --> 00:07:46,230
but using array syntax

167
00:07:46,230 --> 00:07:49,260
and using Dot syntax whichever
you find more natural.

168
00:07:49,260 --> 00:07:54,260
So does my employee have a
benefits car model property?

169
00:07:54,780 --> 00:07:57,570
Yes, benefits, car, model.

170
00:07:57,570 --> 00:07:58,530
Yes, that's right.

171
00:07:58,530 --> 00:08:02,760
And also is the value of that
property a six, a Mazda6?

172
00:08:02,760 --> 00:08:06,720
That's actually the name of
a model in the Mazda series.

173
00:08:06,720 --> 00:08:08,270
That's like a family sized car.

174
00:08:09,270 --> 00:08:11,250
Oh, and also have a look at this one.

175
00:08:11,250 --> 00:08:15,090
I'm checking the value of
element zero in the skills array.

176
00:08:15,090 --> 00:08:17,040
So take that employee.

177
00:08:17,040 --> 00:08:19,260
Does it have a property called skills?

178
00:08:19,260 --> 00:08:20,820
Yes.

179
00:08:20,820 --> 00:08:24,090
Does that array have an element zero?

180
00:08:24,090 --> 00:08:25,020
Yes.

181
00:08:25,020 --> 00:08:27,210
What is the value of that element?

182
00:08:27,210 --> 00:08:29,070
Is it JS?

183
00:08:29,070 --> 00:08:30,450
Yes, it is.

184
00:08:30,450 --> 00:08:34,050
Okay, so using this approach,
you can check, you can drill

185
00:08:34,050 --> 00:08:37,919
into an object, use an a dot
syntax or an array syntax

186
00:08:37,919 --> 00:08:40,410
and then you can specify
the second parameter

187
00:08:40,410 --> 00:08:43,323
the value that you want to
check for that property.