1 00:00:01,170 --> 00:00:03,150 -: In the last section, we started putting together 2 00:00:03,150 --> 00:00:05,550 some tests for our comment box component. 3 00:00:05,550 --> 00:00:08,910 And where we left off, we had our two it blocks 4 00:00:08,910 --> 00:00:10,380 and we were kind of thinking to ourselves, 5 00:00:10,380 --> 00:00:13,500 huh what matchers are we gonna put in here? 6 00:00:13,500 --> 00:00:15,540 What are we going to expect exactly? 7 00:00:15,540 --> 00:00:17,610 What code are we gonna write? 8 00:00:17,610 --> 00:00:21,300 When we were working on the app component, we had a matcher 9 00:00:21,300 --> 00:00:25,260 that we used to contain, which really made the assertion 10 00:00:25,260 --> 00:00:29,280 that our component contained some exact text 11 00:00:29,280 --> 00:00:31,950 that was gonna render onto the screen. 12 00:00:31,950 --> 00:00:34,230 In this case, we don't want to make an assertion 13 00:00:34,230 --> 00:00:36,990 about the text that this component contains just yet. 14 00:00:36,990 --> 00:00:40,200 We want to say that it has an actual HTML element 15 00:00:40,200 --> 00:00:43,053 of text area specifically. 16 00:00:44,550 --> 00:00:46,830 So, we need to find a matcher that's going 17 00:00:46,830 --> 00:00:48,930 to solve this problem for us. 18 00:00:48,930 --> 00:00:50,550 A lot of times, you know, we don't want to be thinking 19 00:00:50,550 --> 00:00:53,340 that we need to write any matchers from scratch. 20 00:00:53,340 --> 00:00:55,920 Chances are there's already a library that we can make use 21 00:00:55,920 --> 00:00:58,650 of that's gonna have this behavior for us. 22 00:00:58,650 --> 00:01:01,474 And as a matter of fact, as you may imagine 23 00:01:01,474 --> 00:01:04,217 there certainly is in this case. 24 00:01:04,217 --> 00:01:05,519 We're gonna pull in 25 00:01:05,519 --> 00:01:08,190 or we've already got a library hooked up to this boiler 26 00:01:08,190 --> 00:01:10,950 plate that's gonna help us write this match right here. 27 00:01:10,950 --> 00:01:13,414 So, let's look at the documentation for it and figure 28 00:01:13,414 --> 00:01:15,123 out what the matcher is gonna be. 29 00:01:16,953 --> 00:01:17,786 At this point in time, 30 00:01:17,786 --> 00:01:21,150 I wanna show you some of the documentation for this library. 31 00:01:21,150 --> 00:01:24,000 So, in my web browser, I'm going to do a Google search 32 00:01:24,000 --> 00:01:27,183 for chai jquery, 33 00:01:28,980 --> 00:01:32,040 and then the first result that pops up should be something 34 00:01:32,040 --> 00:01:35,280 like jquery assertions for chai. 35 00:01:35,280 --> 00:01:36,990 And so, you might be saying to yourself, 36 00:01:36,990 --> 00:01:38,490 Steven, yeah, 37 00:01:38,490 --> 00:01:40,440 we're not writing any jquery here. 38 00:01:40,440 --> 00:01:42,540 This is all React, right? 39 00:01:42,540 --> 00:01:44,580 Well, yes and no. 40 00:01:44,580 --> 00:01:48,570 So, on the actual application side, 41 00:01:48,570 --> 00:01:51,840 the components that we're writing are all React components. 42 00:01:51,840 --> 00:01:54,720 So, you know this, our app is a React component. 43 00:01:54,720 --> 00:01:58,050 Our comment box is eventually gonna be React component. 44 00:01:58,050 --> 00:01:59,970 But as a kind of a means 45 00:01:59,970 --> 00:02:03,540 of testing only on the test side of our application, 46 00:02:03,540 --> 00:02:05,520 we're going to make use of jquery here 47 00:02:05,520 --> 00:02:07,710 in a very indirect way. 48 00:02:07,710 --> 00:02:10,350 We'll talk more about exactly how everything is wired up. 49 00:02:10,350 --> 00:02:13,320 Because this is a really a part of the test helper file. 50 00:02:13,320 --> 00:02:15,500 So, we'll talk about exactly why we're making use 51 00:02:15,500 --> 00:02:17,400 of jquery here in just a little bit. 52 00:02:17,400 --> 00:02:19,170 But trust me, I think you're gonna 53 00:02:19,170 --> 00:02:21,370 like how these specs start to come together. 54 00:02:22,740 --> 00:02:26,593 So the jquery chai library or chai jquery gives us a bunch 55 00:02:26,593 --> 00:02:30,570 of different assertions or matchers that we can make use of. 56 00:02:30,570 --> 00:02:32,880 And you can see documentation all throughout here. 57 00:02:32,880 --> 00:02:35,814 And so you can read through the documentation yourself, 58 00:02:35,814 --> 00:02:36,647 but while we're together, 59 00:02:36,647 --> 00:02:38,820 let's just read one or two of them. 60 00:02:38,820 --> 00:02:42,090 So, let's look at this class matcher right here. 61 00:02:42,090 --> 00:02:43,380 We can say something like, 62 00:02:43,380 --> 00:02:48,380 expect this J element to have class "foo". 63 00:02:49,710 --> 00:02:52,800 So, it'll expect this J element right here 64 00:02:52,800 --> 00:02:55,800 to have the CSS class of foo. 65 00:02:55,800 --> 00:02:58,110 If it does not, the test is gonna fail. 66 00:02:58,110 --> 00:02:59,610 If it does, it's gonna pass. 67 00:02:59,610 --> 00:03:01,683 So, very straightforward, very direct. 68 00:03:02,790 --> 00:03:04,170 We can also make an assertion 69 00:03:04,170 --> 00:03:07,650 about say the text inside of an element. 70 00:03:07,650 --> 00:03:12,650 So, we could expect some element to have text Chai Tea. 71 00:03:12,870 --> 00:03:17,700 We could also assert that a input has a value. 72 00:03:17,700 --> 00:03:19,530 And so this matcher right here is probably gonna be 73 00:03:19,530 --> 00:03:21,240 very relevant for us when we start wanting 74 00:03:21,240 --> 00:03:24,720 to test the how the text area behaves. 75 00:03:24,720 --> 00:03:25,560 We can also see 76 00:03:25,560 --> 00:03:29,250 if something is hidden, selected, checked, enabled, 77 00:03:29,250 --> 00:03:31,690 all these different very handy matchers 78 00:03:32,940 --> 00:03:33,960 that we might want to use. 79 00:03:33,960 --> 00:03:36,210 And here's one that we used in app already. 80 00:03:36,210 --> 00:03:40,503 We used the contain matcher. 81 00:03:41,670 --> 00:03:44,524 So, in our case, we just wanna say, I want to make sure 82 00:03:44,524 --> 00:03:47,520 that this very particular component that we have 83 00:03:47,520 --> 00:03:52,080 shows a HTML element that is a text area. 84 00:03:52,080 --> 00:03:53,520 And so for that, we're going to use 85 00:03:53,520 --> 00:03:55,503 this matcher called exists. 86 00:03:57,450 --> 00:03:59,730 By the way, I wanna take a quick aside here for a second 87 00:03:59,730 --> 00:04:02,280 and say as you're scrolling through these documentation, 88 00:04:02,280 --> 00:04:04,890 this documentation and you're seeing all these matchers, 89 00:04:04,890 --> 00:04:07,350 I really encourage you to not be overwhelmed 90 00:04:07,350 --> 00:04:08,610 or anything like that. 91 00:04:08,610 --> 00:04:10,890 There are a tremendous number of matchers. 92 00:04:10,890 --> 00:04:13,920 You don't have to memorize every single one of them. 93 00:04:13,920 --> 00:04:15,600 When you're first starting off with testing, 94 00:04:15,600 --> 00:04:17,970 it's a little bit more of kind of a hunt and pick, right? 95 00:04:17,970 --> 00:04:19,649 We say, well here's what we want to test. 96 00:04:19,649 --> 00:04:21,600 Let's go find a matcher that's gonna take care 97 00:04:21,600 --> 00:04:22,433 of this for us. 98 00:04:22,433 --> 00:04:24,960 And so over time, you're gonna get a lot more familiar 99 00:04:24,960 --> 00:04:27,030 with all these matchers, but to start, 100 00:04:27,030 --> 00:04:29,370 totally fine to scroll through the documentation a bunch 101 00:04:29,370 --> 00:04:31,353 and find one that works for you. 102 00:04:32,760 --> 00:04:34,560 Okay, so again, we're gonna end 103 00:04:34,560 --> 00:04:37,650 up using this exist matcher to make sure 104 00:04:37,650 --> 00:04:40,980 that our component has a text area. 105 00:04:40,980 --> 00:04:45,900 So, it's gonna read something like expect jquery element 106 00:04:45,900 --> 00:04:49,170 not to exist, or in our case, we do want it to exist. 107 00:04:49,170 --> 00:04:53,070 So, we want a text area to exist. 108 00:04:53,070 --> 00:04:55,320 So, let's go write that matcher really quick. 109 00:04:56,550 --> 00:05:01,203 I'm gonna do expect component to exist. 110 00:05:05,580 --> 00:05:07,260 Now, two things I immediately want 111 00:05:07,260 --> 00:05:08,250 to point out to you here. 112 00:05:08,250 --> 00:05:10,620 Number one, we haven't defined component yet. 113 00:05:10,620 --> 00:05:12,630 So, we need to do that. 114 00:05:12,630 --> 00:05:13,770 Let's do that really quick. 115 00:05:13,770 --> 00:05:18,770 We'll say const component is render component 116 00:05:20,010 --> 00:05:23,553 and we're gonna render are the comment box. 117 00:05:24,390 --> 00:05:25,223 So, that's number one. 118 00:05:25,223 --> 00:05:28,290 Now, the second thing I wanna point out here is 119 00:05:28,290 --> 00:05:31,530 you'll see here at the end says two exist 120 00:05:31,530 --> 00:05:34,230 and it looks like it's just a reference right here, right? 121 00:05:34,230 --> 00:05:35,903 We do not have any parens, 122 00:05:35,903 --> 00:05:38,640 so we don't have any parens there. 123 00:05:38,640 --> 00:05:42,201 And this is really a very interesting oddity of how Chai, 124 00:05:42,201 --> 00:05:45,660 the library that we're using here was put together. 125 00:05:45,660 --> 00:05:48,540 So, the way that Chai is set up with a lot of the matchers 126 00:05:48,540 --> 00:05:50,460 that we're gonna use, you do not actually have 127 00:05:50,460 --> 00:05:51,510 to use the parens. 128 00:05:51,510 --> 00:05:55,380 In fact, if you use parens, an error is gonna be thrown. 129 00:05:55,380 --> 00:05:56,940 So, whenever the matchers shows 130 00:05:56,940 --> 00:06:00,390 calling something like expect component to exist 131 00:06:00,390 --> 00:06:04,110 without a set of parens at the end, you just leave them off. 132 00:06:04,110 --> 00:06:05,730 Chai is gonna work behind the scenes 133 00:06:05,730 --> 00:06:08,790 and make sure that everything is gonna run just okay. 134 00:06:08,790 --> 00:06:09,870 And we'll talk more later 135 00:06:09,870 --> 00:06:12,453 about exactly how this is working at the end here. 136 00:06:13,950 --> 00:06:16,740 Okay. So, we're expecting our component to exist, 137 00:06:16,740 --> 00:06:19,260 but you'll notice that we haven't really said anything 138 00:06:19,260 --> 00:06:21,390 about the text area just yet, right? 139 00:06:21,390 --> 00:06:23,760 We're saying the component should exist, 140 00:06:23,760 --> 00:06:27,030 but we're not saying that the text area should exist. 141 00:06:27,030 --> 00:06:31,080 So, to specifically look for a text area, we're going to add 142 00:06:31,080 --> 00:06:36,080 onto our component object here dot find text area. 143 00:06:37,230 --> 00:06:38,280 So, this is where the kind 144 00:06:38,280 --> 00:06:40,350 of jquery stuff starts to come into play 145 00:06:40,350 --> 00:06:42,780 and this is where the testing, I think, you know 146 00:06:42,780 --> 00:06:44,190 as we start doing a couple more examples 147 00:06:44,190 --> 00:06:46,800 I really think you're gonna like how this comes together. 148 00:06:46,800 --> 00:06:48,210 So, the helpers that I've set 149 00:06:48,210 --> 00:06:50,490 up inside of the test helper file, 150 00:06:50,490 --> 00:06:52,260 when we call render component right here, 151 00:06:52,260 --> 00:06:55,620 it actually is returning a jquery object 152 00:06:55,620 --> 00:06:58,680 that contains our React component. 153 00:06:58,680 --> 00:07:02,250 So, we can use all the jquery methods that we want all day 154 00:07:02,250 --> 00:07:05,580 we could use jquery methods and it's all gonna work. 155 00:07:05,580 --> 00:07:08,190 So, the result of this is that we get to use 156 00:07:08,190 --> 00:07:11,370 this vast, huge, tremendous ecosystem 157 00:07:11,370 --> 00:07:14,370 of existing jquery testing plugins 158 00:07:14,370 --> 00:07:17,580 with all of our existing React components. 159 00:07:17,580 --> 00:07:19,410 And we're specifically using jquery 160 00:07:19,410 --> 00:07:21,570 because it allows us to just make assertions 161 00:07:21,570 --> 00:07:24,870 about our HTML that our components produce. 162 00:07:24,870 --> 00:07:27,630 Remember, all I care about with my tests are 163 00:07:27,630 --> 00:07:32,370 that I am producing the correct HTML to show on the page. 164 00:07:32,370 --> 00:07:33,203 I don't really care 165 00:07:33,203 --> 00:07:36,180 about how the component is internally working. 166 00:07:36,180 --> 00:07:38,550 I just wanna make sure that whatever the component spits 167 00:07:38,550 --> 00:07:40,833 out is what I expect it to be. 168 00:07:41,880 --> 00:07:44,100 All right. So, enough talking about all this stuff. 169 00:07:44,100 --> 00:07:48,900 Let's go ahead save this file and see if our spec passes. 170 00:07:48,900 --> 00:07:52,203 Okay, so it looks like we got a big fat error message here. 171 00:07:53,190 --> 00:07:55,830 If we scroll up, we see element type is invalid. 172 00:07:55,830 --> 00:07:59,640 It expected to string or class function, but got object. 173 00:07:59,640 --> 00:08:03,003 Okay. So, to be honest, not entirely unexpected, 174 00:08:03,840 --> 00:08:07,170 we haven't yet defined our comment box component. 175 00:08:07,170 --> 00:08:09,090 So, this is the point at time at which we would say, 176 00:08:09,090 --> 00:08:11,610 okay, we've got a spec that's red, 177 00:08:11,610 --> 00:08:15,210 we need to write some implementation to make it go green. 178 00:08:15,210 --> 00:08:16,050 Let's start working 179 00:08:16,050 --> 00:08:18,933 on our comment box component inside of the next section.