1 00:00:06,480 --> 00:00:07,320 - In this section 2 00:00:07,320 --> 00:00:10,560 we are going to see how to use equality matchers 3 00:00:10,560 --> 00:00:14,584 in Jest to check if two values are equal. 4 00:00:14,584 --> 00:00:18,930 As it turns out there are several different ways to do this. 5 00:00:18,930 --> 00:00:20,640 Several different matchers you can use. 6 00:00:20,640 --> 00:00:23,520 The most obvious one being, toBe, obviously. 7 00:00:23,520 --> 00:00:26,490 So we're gonna look at examples of each of these matchers. 8 00:00:26,490 --> 00:00:28,680 We'll see how to use the, toBe matcher. 9 00:00:28,680 --> 00:00:30,480 We'll see how to use toEqual 10 00:00:30,480 --> 00:00:32,280 and we'll discuss the difference. 11 00:00:32,280 --> 00:00:34,720 What is the difference between toBe and toEqual? 12 00:00:36,000 --> 00:00:38,370 And also we'll have look at toMatch, 13 00:00:38,370 --> 00:00:43,020 which is to test if a string matches a regular expression. 14 00:00:43,020 --> 00:00:46,230 And then we'll look at toMatchObject where you can check 15 00:00:46,230 --> 00:00:50,160 if two objects are compatible with each other 16 00:00:50,160 --> 00:00:54,633 and explain what that actually means during this session. 17 00:00:55,710 --> 00:00:58,290 You can also use the "not" keyword 18 00:00:58,290 --> 00:01:03,290 or the "not" operator to invert the sense of any assertion. 19 00:01:03,330 --> 00:01:05,370 I'll show you examples of that as well. 20 00:01:05,370 --> 00:01:06,750 So the examples we're going to look 21 00:01:06,750 --> 00:01:11,220 at are in the standard Jest matchers demo folder. 22 00:01:11,220 --> 00:01:14,820 So in lesson two, standard Jest matchers 23 00:01:14,820 --> 00:01:15,653 we're going to be looking, 24 00:01:15,653 --> 00:01:18,780 all the tests are going to be in this file. 25 00:01:18,780 --> 00:01:21,960 And let me just remind you what that looks like. 26 00:01:21,960 --> 00:01:24,273 So example test.js. 27 00:01:25,920 --> 00:01:27,780 As I mentioned earlier, 28 00:01:27,780 --> 00:01:31,620 we have a variety of different suites here. 29 00:01:31,620 --> 00:01:34,170 Basically, I'm going to look at a different suite 30 00:01:34,170 --> 00:01:37,140 in each section in this lesson. 31 00:01:37,140 --> 00:01:38,730 So for this particular session 32 00:01:38,730 --> 00:01:41,790 we are going to be looking at the matchers for equality. 33 00:01:41,790 --> 00:01:44,910 And I have four different tests 34 00:01:44,910 --> 00:01:48,390 in here that I'm gonna go through in this section. 35 00:01:48,390 --> 00:01:49,530 Oh, in fact, I've got five. 36 00:01:49,530 --> 00:01:51,120 There we go, off by one error. 37 00:01:51,120 --> 00:01:54,387 I'm going to show the toBe test. 38 00:01:54,387 --> 00:01:58,020 And I'm gonna basically emphasize that toBe looks 39 00:01:58,020 --> 00:02:00,030 at object identity. 40 00:02:00,030 --> 00:02:02,670 Then we'll have a look at the toEqual matcher. 41 00:02:02,670 --> 00:02:05,130 Then we'll have a look at the toMatch matcher, 42 00:02:05,130 --> 00:02:07,920 which tests a string against a regular expression. 43 00:02:07,920 --> 00:02:10,233 And then we'll see the toMatchObject matcher, 44 00:02:11,190 --> 00:02:15,000 which matches properties on one object against properties 45 00:02:15,000 --> 00:02:17,358 on another object to see if they're compatible 46 00:02:17,358 --> 00:02:19,110 with each other. 47 00:02:19,110 --> 00:02:21,240 Okay, so we have five tests 48 00:02:21,240 --> 00:02:24,270 we're gonna look at in this section. 49 00:02:24,270 --> 00:02:27,750 Okay, so there's our test suite matchers for equality, 50 00:02:27,750 --> 00:02:30,000 and we have the five tests in here. 51 00:02:30,000 --> 00:02:31,980 I guess the first thing we should do is to actually 52 00:02:31,980 --> 00:02:35,370 run this suite to make sure that tests actually 53 00:02:35,370 --> 00:02:36,450 work properly. 54 00:02:36,450 --> 00:02:40,050 So let's go to command window and just run the tests 55 00:02:40,050 --> 00:02:43,020 in the equality suite to make sure that those five 56 00:02:43,020 --> 00:02:45,720 tests actually do work before we go any further. 57 00:02:45,720 --> 00:02:48,530 Okay, so I've opened up a command window in lesson two, 58 00:02:48,530 --> 00:02:53,530 standard Jest matchers, so NPM, run test 59 00:02:53,760 --> 00:02:57,330 and then parameters we're gonna pass into the test command. 60 00:02:57,330 --> 00:02:59,610 The tests I'm looking to run are the tests 61 00:02:59,610 --> 00:03:01,523 in the equality suite. 62 00:03:02,797 --> 00:03:04,206 Ignore the other suites 63 00:03:04,206 --> 00:03:07,260 and just run the tests in the equality suite. 64 00:03:07,260 --> 00:03:11,340 So there are five tests altogether in that suite. 65 00:03:11,340 --> 00:03:13,323 And I think they're all gonna pass. 66 00:03:14,400 --> 00:03:16,260 And which way- 67 00:03:16,260 --> 00:03:17,093 Yes, there we go. 68 00:03:17,093 --> 00:03:21,390 So the five tests all passed and like I was saying earlier 69 00:03:21,390 --> 00:03:24,720 the other tests in the other suites are skipped 70 00:03:24,720 --> 00:03:26,520 because we don't want to run those. 71 00:03:26,520 --> 00:03:28,110 We just want to run the equality tests. 72 00:03:28,110 --> 00:03:31,170 So all the tests I'm about to show you pass. 73 00:03:31,170 --> 00:03:35,400 Okay, so bear that in mind as we go through the examples. 74 00:03:35,400 --> 00:03:38,520 Okay, so first of all, let's have a look at toBe. 75 00:03:38,520 --> 00:03:43,520 The toBe matcher compares two values using the triple equals 76 00:03:43,680 --> 00:03:44,513 operator. 77 00:03:44,513 --> 00:03:46,775 Okay., so basically it's the identity comparison 78 00:03:46,775 --> 00:03:48,810 in JavaScript. 79 00:03:48,810 --> 00:03:53,103 So have a look at this simple example, a test here, it shows 80 00:03:54,240 --> 00:03:57,720 that toBe compares using the triple equals operator. 81 00:03:57,720 --> 00:04:01,320 So I have two variables here, a and b, 42, 82 00:04:01,320 --> 00:04:05,370 and oh, I could have had semicolons at the end of each line. 83 00:04:05,370 --> 00:04:08,010 Semicolons are optional in JavaScript these days. 84 00:04:08,010 --> 00:04:09,390 So there's no great trauma there. 85 00:04:09,390 --> 00:04:12,870 I'm expecting a, to be identically equal to B. 86 00:04:12,870 --> 00:04:14,790 Okay, so a and B are both 42. 87 00:04:14,790 --> 00:04:16,200 Yes, they're equal. 88 00:04:16,200 --> 00:04:20,940 I'm expecting a, 42, not to be equal to 21. 89 00:04:20,940 --> 00:04:25,710 Okay, so yes, 42 is not the same as 21. 90 00:04:25,710 --> 00:04:29,550 Okay, so note the use of the "not" operator 91 00:04:29,550 --> 00:04:32,970 in the second assertion to invert the sense of the test. 92 00:04:32,970 --> 00:04:35,130 I'm looking for a false outcome here. 93 00:04:35,130 --> 00:04:37,830 So that that is not equal to that. 94 00:04:37,830 --> 00:04:39,150 Fairly straightforward. 95 00:04:39,150 --> 00:04:42,060 Just to ground this example, 96 00:04:42,060 --> 00:04:47,060 all the tests here are in the demo package. 97 00:04:47,220 --> 00:04:50,460 Okay, so this is the code that we just looked at. 98 00:04:50,460 --> 00:04:53,280 toBe compares using the triple equals operator. 99 00:04:53,280 --> 00:04:55,140 That's the code that I just showed you. 100 00:04:55,140 --> 00:04:58,230 So all the code that I'm gonna show in the next few minutes 101 00:04:58,230 --> 00:05:03,003 you can find in here if you want to dig around afterwards. 102 00:05:03,900 --> 00:05:06,450 Okay, so the next test, 103 00:05:06,450 --> 00:05:08,010 it's important here to understand 104 00:05:08,010 --> 00:05:11,190 that toBe, if you're dealing with objects, 105 00:05:11,190 --> 00:05:15,060 it compares object identity, not the values. 106 00:05:15,060 --> 00:05:16,710 So have a look at this code here. 107 00:05:17,940 --> 00:05:21,420 It shows that the toBe matcher compares object identity. 108 00:05:21,420 --> 00:05:25,050 Basically it's looking at the object reference 109 00:05:25,050 --> 00:05:27,930 not the value inside the object. 110 00:05:27,930 --> 00:05:29,790 So I've got a variable here. 111 00:05:29,790 --> 00:05:33,060 I've got an object reference that points to an object, 112 00:05:33,060 --> 00:05:35,190 and this object has a property. 113 00:05:35,190 --> 00:05:37,230 It's my home country. 114 00:05:37,230 --> 00:05:40,500 And the population of Wales is about 3 million. 115 00:05:40,500 --> 00:05:45,240 So we go for quality, not quantity in Wales. 116 00:05:45,240 --> 00:05:47,130 So we have about 3 million people in Wales. 117 00:05:47,130 --> 00:05:50,820 Now that's one object reference that points to this object. 118 00:05:50,820 --> 00:05:52,710 This is a different object reference. 119 00:05:52,710 --> 00:05:54,930 This is a different object. 120 00:05:54,930 --> 00:05:57,600 So country two is a different. 121 00:05:57,600 --> 00:05:59,520 Happens to have the same property values, 122 00:05:59,520 --> 00:06:01,830 but it's a different object. 123 00:06:01,830 --> 00:06:05,880 So if you say, is country one equal to, you know, 124 00:06:05,880 --> 00:06:07,350 is it the same as country one? 125 00:06:07,350 --> 00:06:09,690 Does this reference refer 126 00:06:09,690 --> 00:06:11,820 to the same object as that reference? 127 00:06:11,820 --> 00:06:15,543 Well, yes, that reference refers to this object. 128 00:06:16,560 --> 00:06:19,740 This reference also refers to the same object. 129 00:06:19,740 --> 00:06:23,250 So it says, yes, they are actually the same object 130 00:06:23,250 --> 00:06:25,230 the actual same object. 131 00:06:25,230 --> 00:06:29,040 However, country one and country two are not equal. 132 00:06:29,040 --> 00:06:32,550 Okay, so I'm saying, I'm expecting country one 133 00:06:32,550 --> 00:06:34,740 not to be equal to country two. 134 00:06:34,740 --> 00:06:36,930 It compares object references. 135 00:06:36,930 --> 00:06:41,310 Country one is not the same object as country two. 136 00:06:41,310 --> 00:06:43,830 Okay, it looks at object addresses 137 00:06:43,830 --> 00:06:47,430 basically, country one is one object address, 138 00:06:47,430 --> 00:06:50,070 country two is not the same. 139 00:06:50,070 --> 00:06:50,940 So that's important. 140 00:06:50,940 --> 00:06:52,140 It doesn't look at the value. 141 00:06:52,140 --> 00:06:54,660 It just looks at where the point is appointed to. 142 00:06:54,660 --> 00:06:56,250 This points to one object. 143 00:06:56,250 --> 00:06:57,420 This points to a different object. 144 00:06:57,420 --> 00:06:58,650 They're different objects. 145 00:06:58,650 --> 00:06:59,850 They're not equal. 146 00:06:59,850 --> 00:07:02,790 If you wanna check for the value of an object instead 147 00:07:02,790 --> 00:07:05,610 of the, you know, the address of the object, then instead 148 00:07:05,610 --> 00:07:08,523 of using toBe, you can use toEqual. 149 00:07:09,388 --> 00:07:11,550 toEqual looks deeper 150 00:07:11,550 --> 00:07:14,520 inside the object to compare the values rather 151 00:07:14,520 --> 00:07:16,860 than you know, the addresses. 152 00:07:16,860 --> 00:07:20,070 So similar example here, country one points 153 00:07:20,070 --> 00:07:22,920 to one object that has some properties, 154 00:07:22,920 --> 00:07:25,530 country two points to a different object 155 00:07:25,530 --> 00:07:28,200 that happens to have the same property values. 156 00:07:28,200 --> 00:07:31,290 If I say toEqual now, it'll be true. 157 00:07:31,290 --> 00:07:34,410 Country one is this object and it has properties 158 00:07:34,410 --> 00:07:36,300 name and population with these values. 159 00:07:36,300 --> 00:07:37,680 Country two is a different object, 160 00:07:37,680 --> 00:07:39,509 but with the same values. 161 00:07:39,509 --> 00:07:42,240 toEqual looks at the values inside the objects. 162 00:07:42,240 --> 00:07:43,500 They're different objects 163 00:07:43,500 --> 00:07:45,300 but they contain the same values. 164 00:07:45,300 --> 00:07:47,640 So toEqual says, yes, they are equal. 165 00:07:47,640 --> 00:07:50,070 They contain the same values. 166 00:07:50,070 --> 00:07:52,530 Okay, so it's like a deep comparison here. 167 00:07:52,530 --> 00:07:54,000 Not a not shallow comparison. 168 00:07:54,000 --> 00:07:56,700 It looks deeply inside these objects and says, yes 169 00:07:56,700 --> 00:07:58,500 they have the same property names 170 00:07:58,500 --> 00:07:59,700 and the same property values. 171 00:07:59,700 --> 00:08:02,013 So they are equal in value. 172 00:08:03,240 --> 00:08:04,410 Okay. 173 00:08:04,410 --> 00:08:09,000 Next example toMatch, that's to do with regular expressions. 174 00:08:09,000 --> 00:08:12,090 You can check if a string matches a regular expression. 175 00:08:12,090 --> 00:08:13,833 So got some examples here. 176 00:08:15,330 --> 00:08:17,040 So I've got a string, Oslo. 177 00:08:17,040 --> 00:08:19,560 I do a lot of work in Norway and I like Oslo very much. 178 00:08:19,560 --> 00:08:20,670 It's a very beautiful city. 179 00:08:20,670 --> 00:08:22,170 I'd recommend it. 180 00:08:22,170 --> 00:08:23,550 So that's my string. 181 00:08:23,550 --> 00:08:26,520 Imagine that this string came back from a function call. 182 00:08:26,520 --> 00:08:28,770 I can give it a simple string like this. 183 00:08:28,770 --> 00:08:29,700 When you're doing, 184 00:08:29,700 --> 00:08:31,590 here's an important point, actually, when you're doing path 185 00:08:31,590 --> 00:08:34,890 imagine in JavaScript, it doesn't check 186 00:08:34,890 --> 00:08:37,920 if that string is identical to that string, 187 00:08:37,920 --> 00:08:39,180 it just checks to see 188 00:08:39,180 --> 00:08:43,560 if this pattern appears somewhere in the message. 189 00:08:43,560 --> 00:08:47,340 Does my message contain this text somewhere? 190 00:08:47,340 --> 00:08:49,590 Okay, by default it's case sensitive. 191 00:08:49,590 --> 00:08:53,550 So somewhere in message, does it contain this text? 192 00:08:53,550 --> 00:08:54,813 And yes, it does. 193 00:08:56,430 --> 00:08:59,820 You can use the slash here to formulate 194 00:08:59,820 --> 00:09:01,860 a regular expression. 195 00:09:01,860 --> 00:09:04,800 Regular expressions are very powerful. 196 00:09:04,800 --> 00:09:07,050 If you have a dot in a regular expression 197 00:09:07,050 --> 00:09:09,270 it matches any single character. 198 00:09:09,270 --> 00:09:10,710 Okay, and the slash the "I" 199 00:09:10,710 --> 00:09:13,980 at the end means case insensitive. 200 00:09:13,980 --> 00:09:15,630 So it says, does my message, 201 00:09:15,630 --> 00:09:17,820 Oslo is in Norway, 202 00:09:17,820 --> 00:09:22,820 does that message match N O R W something, 203 00:09:22,860 --> 00:09:24,900 something case insensitive? 204 00:09:24,900 --> 00:09:28,050 Does this text appear somewhere in the message? 205 00:09:28,050 --> 00:09:29,160 Yes, it does. 206 00:09:29,160 --> 00:09:31,500 As long as we're bein case insensitive 207 00:09:31,500 --> 00:09:34,950 then this text, N O R W something, 208 00:09:34,950 --> 00:09:37,830 something is located in the string. 209 00:09:37,830 --> 00:09:39,693 So that gives me, that does match. 210 00:09:41,100 --> 00:09:43,140 If you look at this example, 211 00:09:43,140 --> 00:09:47,220 the second example had a case insensitive comparison. 212 00:09:47,220 --> 00:09:50,010 The third example, isn't case insensitive 213 00:09:50,010 --> 00:09:52,740 in other words, it's case sensitive. 214 00:09:52,740 --> 00:09:57,740 Okay, so in this case, this text does not match the message. 215 00:09:58,710 --> 00:10:02,430 Okay, because the N is lowercase and it's case sensitive. 216 00:10:02,430 --> 00:10:05,280 So if I check that message against that, 217 00:10:05,280 --> 00:10:07,530 I would expect it not to match. 218 00:10:07,530 --> 00:10:11,310 Okay, because the case sensitivity blows it apart 219 00:10:11,310 --> 00:10:12,143 basically. 220 00:10:13,572 --> 00:10:15,150 Okay,so regular expressions they're useful 221 00:10:15,150 --> 00:10:16,263 when you have strings. 222 00:10:17,640 --> 00:10:19,830 Last example for this section is, 223 00:10:19,830 --> 00:10:22,290 if you want to match objects to see 224 00:10:22,290 --> 00:10:24,900 if they contain compatible properties. 225 00:10:24,900 --> 00:10:26,400 So I'll explain what that means. 226 00:10:26,400 --> 00:10:28,320 Have a look at this example. 227 00:10:28,320 --> 00:10:31,860 Imagine that there's a car on sale. 228 00:10:31,860 --> 00:10:36,860 Okay, and the car on sale in the garage is a Mazda, a CX 30 229 00:10:37,980 --> 00:10:41,100 which is a hybrid it's kind of half electric, 230 00:10:41,100 --> 00:10:43,800 half petrol or gas. 231 00:10:43,800 --> 00:10:45,120 And it's red. 232 00:10:45,120 --> 00:10:46,350 My favorite color is red, 233 00:10:46,350 --> 00:10:48,240 because that's the color of Wales. 234 00:10:48,240 --> 00:10:49,830 So it's important fact to know. 235 00:10:49,830 --> 00:10:53,490 That's the car that's on sale in the garage four court. 236 00:10:53,490 --> 00:10:57,030 Okay, the car that I want is a Mazda 237 00:10:57,030 --> 00:10:58,020 and I want it to be hybrid. 238 00:10:58,020 --> 00:11:01,710 So we were actually looking to buy a hybrid car a couple 239 00:11:01,710 --> 00:11:03,960 of years ago, and we wanted to buy a Mazda. 240 00:11:03,960 --> 00:11:06,450 We very much like Mazdas in our family. 241 00:11:06,450 --> 00:11:09,090 And I didn't really care what the model was. 242 00:11:09,090 --> 00:11:10,230 Don't care, what the color is. 243 00:11:10,230 --> 00:11:13,500 Red would be nice, but it's not mandatory. 244 00:11:13,500 --> 00:11:18,120 All I want is to make sure that it's a Mazda that's hybrid. 245 00:11:18,120 --> 00:11:19,410 So you can do this. 246 00:11:19,410 --> 00:11:23,280 You can say, does this object, car on sale, 247 00:11:23,280 --> 00:11:25,530 match my requirements? 248 00:11:25,530 --> 00:11:26,363 And what it does 249 00:11:26,363 --> 00:11:29,460 it kind of does where the properties are, the same, 250 00:11:29,460 --> 00:11:32,610 it checks to see if they match each other. 251 00:11:32,610 --> 00:11:35,493 It's like a partial match on properties. 252 00:11:36,330 --> 00:11:37,983 This car on sale, 253 00:11:39,240 --> 00:11:41,130 compare it with the car desired. 254 00:11:41,130 --> 00:11:44,160 My desired car is a make Mazda. 255 00:11:44,160 --> 00:11:46,200 Does this car have a make Mazda? 256 00:11:46,200 --> 00:11:48,751 Yes, so far so good. 257 00:11:48,751 --> 00:11:51,720 Is it a hybrid fuel type? 258 00:11:51,720 --> 00:11:52,830 Yes, it is. 259 00:11:52,830 --> 00:11:56,057 So those objects match the properties 260 00:11:56,057 --> 00:11:59,040 that I was looking for are in this object. 261 00:11:59,040 --> 00:12:01,020 I mean, there are other properties as well, 262 00:12:01,020 --> 00:12:02,130 but those have ignored. 263 00:12:02,130 --> 00:12:04,470 It just looks at the properties that you've asked for. 264 00:12:04,470 --> 00:12:08,040 And it says, are these properties defined in the object? 265 00:12:08,040 --> 00:12:09,601 Yes, they are. 266 00:12:09,601 --> 00:12:10,434 Okay, so it matches. 267 00:12:10,434 --> 00:12:11,700 So that's really smart. 268 00:12:11,700 --> 00:12:14,670 Often in JavaScript, you have an object 269 00:12:14,670 --> 00:12:16,800 with a whole bunch of properties and, you know, 270 00:12:16,800 --> 00:12:18,570 who cares what all the properties are, 271 00:12:18,570 --> 00:12:21,450 but I do care that these properties are equal. 272 00:12:21,450 --> 00:12:24,630 So you can just check that these properties match 273 00:12:24,630 --> 00:12:26,280 and the other properties are ignored. 274 00:12:26,280 --> 00:12:28,143 Very useful to do that.