1 00:00:00,930 --> 00:00:03,240 -: In the last section we did a walkthrough of the feature 2 00:00:03,240 --> 00:00:04,980 that we're gonna build in this application. 3 00:00:04,980 --> 00:00:08,039 It's gonna be a very simple comment box. 4 00:00:08,039 --> 00:00:09,990 So we walked to the two different components 5 00:00:09,990 --> 00:00:13,050 that's gonna form our application, the comment box on top 6 00:00:13,050 --> 00:00:15,090 and the comment list down below. 7 00:00:15,090 --> 00:00:17,340 So it's really time for us to start writing some code now. 8 00:00:17,340 --> 00:00:20,850 So let's start by scaffolding out both our component 9 00:00:20,850 --> 00:00:24,330 and the test file for our very particular component. 10 00:00:24,330 --> 00:00:26,820 So we'll start with our comment box 11 00:00:26,820 --> 00:00:28,680 which is going to be responsible for holding 12 00:00:28,680 --> 00:00:31,650 the text area where a user enters some text in 13 00:00:31,650 --> 00:00:34,143 and a button to submit the comment as well. 14 00:00:35,130 --> 00:00:37,080 We'll make the react component first 15 00:00:37,080 --> 00:00:39,090 by going into the source directory 16 00:00:39,090 --> 00:00:41,280 and then in the components directory. 17 00:00:41,280 --> 00:00:44,473 And we'll make make a new file called comment_box. 18 00:00:47,790 --> 00:00:49,860 Now, as a rule of thumb, we always want to have 19 00:00:49,860 --> 00:00:53,130 one react component with one test file. 20 00:00:53,130 --> 00:00:56,460 So the instant that I make a comment_box file right here 21 00:00:56,460 --> 00:01:00,563 I'm going to expect to make a comment_box_test.js file 22 00:01:04,560 --> 00:01:08,163 inside of my test components directory. 23 00:01:10,530 --> 00:01:12,330 One thing that I'm gonna tell you right now 24 00:01:12,330 --> 00:01:14,310 because this is gonna come up all the time is that 25 00:01:14,310 --> 00:01:18,600 whenever we create a new file with for testing 26 00:01:18,600 --> 00:01:19,950 like a new test file 27 00:01:19,950 --> 00:01:21,950 inside of our components directory here, 28 00:01:22,980 --> 00:01:25,470 mocha is not going to immediately recognize 29 00:01:25,470 --> 00:01:26,850 that a new file was created. 30 00:01:26,850 --> 00:01:28,380 And so they kinda live reload 31 00:01:28,380 --> 00:01:31,830 that we saw that we had with app is not gonna kick in. 32 00:01:31,830 --> 00:01:33,990 So whenever we create a new test file 33 00:01:33,990 --> 00:01:37,690 we need to stop the process by hitting control c 34 00:01:38,850 --> 00:01:40,830 and then we can restart it by running 35 00:01:40,830 --> 00:01:45,213 npm run test:watch. 36 00:01:46,800 --> 00:01:49,550 And this will start the process back up all over again. 37 00:01:51,870 --> 00:01:53,820 In this case, we've only got one test file 38 00:01:53,820 --> 00:01:55,470 still or it's gonna be one test still. 39 00:01:55,470 --> 00:01:57,390 So we're still only gonna see app 40 00:01:57,390 --> 00:02:00,810 but as soon as we add some test into comment_box_test 41 00:02:00,810 --> 00:02:04,443 we're gonna see the tests are gonna show up here as well. 42 00:02:06,090 --> 00:02:09,690 Okay, so let's do a little bit of scaffolding here. 43 00:02:09,690 --> 00:02:11,400 The first thing I wanna do is 44 00:02:11,400 --> 00:02:13,170 inside of my comment_box_test file 45 00:02:13,170 --> 00:02:16,080 I want to import some helpers from the test library. 46 00:02:16,080 --> 00:02:18,990 This is gonna, in practice look very similar 47 00:02:18,990 --> 00:02:22,530 to the app_test file that we were working on earlier. 48 00:02:22,530 --> 00:02:24,630 So we're gonna import two helpers 49 00:02:24,630 --> 00:02:27,570 from the test helper library or test helper file. 50 00:02:27,570 --> 00:02:30,240 And then we're gonna import the file that we're testing 51 00:02:30,240 --> 00:02:32,160 the component that we're testing 52 00:02:32,160 --> 00:02:34,620 and then we'll describe or declare some describe 53 00:02:34,620 --> 00:02:38,253 and it blocks that test our very particular component. 54 00:02:39,180 --> 00:02:41,760 So in general, I really recommend you 55 00:02:41,760 --> 00:02:44,400 not copy paste between spec files, 56 00:02:44,400 --> 00:02:45,930 but just as you're getting started 57 00:02:45,930 --> 00:02:48,480 if it helps you out, go for it. 58 00:02:48,480 --> 00:02:50,760 In my case, I like to write out everything by hand 59 00:02:50,760 --> 00:02:53,610 just to make sure I don't make any mistakes. 60 00:02:53,610 --> 00:02:56,463 So at the very top I'm gonna import those two helpers. 61 00:02:57,330 --> 00:03:02,330 We'll import renderComponent and expect 62 00:03:04,170 --> 00:03:09,091 from up one directory, the test_helper file. 63 00:03:09,091 --> 00:03:11,970 (keys clanging) 64 00:03:11,970 --> 00:03:15,030 And then we're also going to import our comment_box file 65 00:03:15,030 --> 00:03:19,110 that we created inside of our source components directory. 66 00:03:19,110 --> 00:03:21,390 Now, comment_box doesn't contain any code yet 67 00:03:21,390 --> 00:03:24,120 so we might see a funny error or two on the console, 68 00:03:24,120 --> 00:03:25,440 but that's okay. 69 00:03:25,440 --> 00:03:27,690 It'll go away once we start defining 70 00:03:27,690 --> 00:03:29,193 the comment_box component. 71 00:03:30,150 --> 00:03:34,920 So we're going to import CommentBox from, 72 00:03:34,920 --> 00:03:36,720 and then this statement here 73 00:03:36,720 --> 00:03:38,430 is gonna be a little bit confusing. 74 00:03:38,430 --> 00:03:41,100 We're going to go up to test, 75 00:03:41,100 --> 00:03:44,940 up to root into source, into components. 76 00:03:44,940 --> 00:03:49,940 So we'll go up, up into source, into components 77 00:03:53,640 --> 00:03:55,263 and then comment_box. 78 00:03:56,310 --> 00:03:58,860 Make sure you get the spelling on comment_box correct 79 00:03:58,860 --> 00:04:00,930 because I make typo. 80 00:04:00,930 --> 00:04:02,970 I always put comments box for some reason. 81 00:04:02,970 --> 00:04:04,830 I have no idea why. 82 00:04:04,830 --> 00:04:07,650 Anyways, let's keep going. 83 00:04:07,650 --> 00:04:09,030 Remember, all of our test files 84 00:04:09,030 --> 00:04:10,560 are gonna look nearly identical. 85 00:04:10,560 --> 00:04:14,100 So after we do our imports of kind of these helper things 86 00:04:14,100 --> 00:04:16,140 and the thing that we want to test at the top 87 00:04:16,140 --> 00:04:20,012 we're always gonna end up writing a top level describe. 88 00:04:22,770 --> 00:04:24,450 So we'll write the describe. 89 00:04:24,450 --> 00:04:27,870 The first argument is a string to tell us, you know, 90 00:04:27,870 --> 00:04:29,550 hey, what are we testing here? 91 00:04:29,550 --> 00:04:32,340 And then the second argument is our function. 92 00:04:32,340 --> 00:04:33,210 Inside of this function 93 00:04:33,210 --> 00:04:36,030 is where all of our it blocks are gonna go. 94 00:04:36,030 --> 00:04:38,580 So the first argument here, the string, 95 00:04:38,580 --> 00:04:40,920 I'm almost always gonna put the name of the component 96 00:04:40,920 --> 00:04:44,370 that we're testing which in this case is commentBox. 97 00:04:44,370 --> 00:04:45,930 So we'll just put in comment box. 98 00:04:45,930 --> 00:04:48,510 Remember again, if I wanted to, I can do CommentBox 99 00:04:48,510 --> 00:04:53,250 or I could do Test CommentBox or CommentBox Tests. 100 00:04:53,250 --> 00:04:55,470 It doesn't matter, it's just affecting the output 101 00:04:55,470 --> 00:04:57,153 that we see in our test report. 102 00:04:58,560 --> 00:05:00,510 So we've got our top level describe 103 00:05:00,510 --> 00:05:03,390 and now we just need to put in some it statements 104 00:05:03,390 --> 00:05:04,920 to kind of talk about, you know, hey 105 00:05:04,920 --> 00:05:07,830 here's what we're gonna test inside this component. 106 00:05:07,830 --> 00:05:09,570 Before I do that, I'm gonna pull the diagram 107 00:05:09,570 --> 00:05:12,090 that we were just looking at back up onto the screen 108 00:05:12,090 --> 00:05:16,170 just as a reminder of what we want to test here. 109 00:05:16,170 --> 00:05:19,410 So for our comment box at the top, we want to make sure 110 00:05:19,410 --> 00:05:23,430 that it has a text area and that it has a button. 111 00:05:23,430 --> 00:05:25,260 We'll get to the last one in a second. 112 00:05:25,260 --> 00:05:27,360 This one is a little bit more challenging. 113 00:05:28,920 --> 00:05:33,210 So we'll write two it blocks, inside of this describe. 114 00:05:33,210 --> 00:05:38,210 We'll first say it has a test, text area, excuse me, 115 00:05:41,220 --> 00:05:46,220 and it has a button. (keys clanging) 116 00:05:47,280 --> 00:05:48,180 Now, as a convention, 117 00:05:48,180 --> 00:05:50,850 you might be a little bit tempted to do something like this. 118 00:05:50,850 --> 00:05:54,210 You might say it, it has a button, right? 119 00:05:54,210 --> 00:05:55,437 Because hey, this is the, 120 00:05:55,437 --> 00:05:58,350 the string that's gonna show up on the the report, right? 121 00:05:58,350 --> 00:06:01,950 Well, by convention we never kind of double up on the its 122 00:06:01,950 --> 00:06:03,000 here, so we never put it 123 00:06:03,000 --> 00:06:07,290 it has a button or something like it should have a button. 124 00:06:07,290 --> 00:06:11,130 We always just leave it as it has a button. 125 00:06:11,130 --> 00:06:12,990 Something that we can read from left to right 126 00:06:12,990 --> 00:06:15,393 like a normal sentence of sorts. 127 00:06:16,470 --> 00:06:19,290 Okay, so this looks like some good testing structure. 128 00:06:19,290 --> 00:06:21,120 All we have to do now is figure out 129 00:06:21,120 --> 00:06:25,200 what matchers we want to use inside of both these tests. 130 00:06:25,200 --> 00:06:27,600 So if you remember in the last section 131 00:06:27,600 --> 00:06:30,450 when we were writing a test for the app component 132 00:06:30,450 --> 00:06:33,360 we used a matcher "to contain" 133 00:06:33,360 --> 00:06:36,840 and :to contain", specifically looked at the text 134 00:06:36,840 --> 00:06:38,820 that the component contained. 135 00:06:38,820 --> 00:06:40,110 So in this case 136 00:06:40,110 --> 00:06:42,810 we don't really want to check in the text in here. 137 00:06:42,810 --> 00:06:44,160 We want to say 138 00:06:44,160 --> 00:06:47,730 that our component is rendering an actual HTML element 139 00:06:47,730 --> 00:06:51,600 specifically a text area and a button. 140 00:06:51,600 --> 00:06:52,433 So let's go ahead 141 00:06:52,433 --> 00:06:55,083 and tackle that challenge inside of the next section.