1 00:00:00,930 --> 00:00:02,460 Instructor: In the last section, we solved an issue 2 00:00:02,460 --> 00:00:05,910 with our test file by introducing a root component. 3 00:00:05,910 --> 00:00:08,010 This root component is entirely responsible 4 00:00:08,010 --> 00:00:09,660 for booting up our Redux store, 5 00:00:09,660 --> 00:00:11,400 and place in the provider tag, 6 00:00:11,400 --> 00:00:14,350 and then simply rendering any children that it is provided. 7 00:00:15,270 --> 00:00:16,650 Now we've got that all fixed up, 8 00:00:16,650 --> 00:00:17,490 we're gonna get back over 9 00:00:17,490 --> 00:00:20,070 to the testing side of our application. 10 00:00:20,070 --> 00:00:21,780 Now present, our comment box tests 11 00:00:21,780 --> 00:00:23,129 are pretty well wrapped up, 12 00:00:23,129 --> 00:00:25,590 so we're going to move over to the Redux side 13 00:00:25,590 --> 00:00:29,670 of our testing, starting with our comments reducer. 14 00:00:29,670 --> 00:00:30,660 So we had previously said 15 00:00:30,660 --> 00:00:32,729 that there's gonna be probably two big tests 16 00:00:32,729 --> 00:00:34,470 around our comments reducer. 17 00:00:34,470 --> 00:00:36,310 We want to make sure that any time 18 00:00:37,320 --> 00:00:38,430 we provide the reducer 19 00:00:38,430 --> 00:00:41,040 with an action that has type SAVE_COMMENT, 20 00:00:41,040 --> 00:00:44,940 it will save that comment appropriately inside of its state. 21 00:00:44,940 --> 00:00:46,020 Then we're also gonna make sure 22 00:00:46,020 --> 00:00:48,180 that if we pass the comments reducer 23 00:00:48,180 --> 00:00:50,280 in action with some unknown type 24 00:00:50,280 --> 00:00:52,830 or some random type it won't throw an error 25 00:00:52,830 --> 00:00:55,110 or cause any issue for us. 26 00:00:55,110 --> 00:00:56,580 So let's get to it. 27 00:00:56,580 --> 00:00:58,650 I'll first get started by flipping up back over 28 00:00:58,650 --> 00:01:01,830 to my code editor and inside my reducer's directory 29 00:01:01,830 --> 00:01:04,440 I'm gonna make a new testing folder. 30 00:01:04,440 --> 00:01:07,023 So I'm gonna make a new folder called __test__. 31 00:01:10,680 --> 00:01:12,843 Again, remember two underscores in here. 32 00:01:13,830 --> 00:01:16,650 And then inside that folder I'll make a new file 33 00:01:16,650 --> 00:01:20,710 called comments.test.js 34 00:01:23,280 --> 00:01:25,170 All right, so inside of here 35 00:01:25,170 --> 00:01:27,930 we're going to import the comments reducer 36 00:01:27,930 --> 00:01:32,930 with import comments from reducers/comments. 37 00:01:34,470 --> 00:01:35,880 Now one thing we might wanna do here, 38 00:01:35,880 --> 00:01:37,230 is give a little bit better 39 00:01:37,230 --> 00:01:38,700 to the name of the reducer, 40 00:01:38,700 --> 00:01:40,080 'cause comments right here, 41 00:01:40,080 --> 00:01:42,000 well, it could be like the comments reducer 42 00:01:42,000 --> 00:01:44,340 or it could be an actual array of comments. 43 00:01:44,340 --> 00:01:46,920 It's just not super clear what's going on. 44 00:01:46,920 --> 00:01:49,620 So I'm going to make kind of an arbitrary decision 45 00:01:49,620 --> 00:01:52,350 to call this thing, how about comments reducer? 46 00:01:52,350 --> 00:01:55,860 I think that makes it a lot more clear as to what it is. 47 00:01:55,860 --> 00:01:57,060 And the only other thing that we're going 48 00:01:57,060 --> 00:01:58,920 to import into this file 49 00:01:58,920 --> 00:02:01,440 is our action type of SAVE_COMMENT 50 00:02:01,440 --> 00:02:04,800 that we had created inside the types.js file. 51 00:02:04,800 --> 00:02:07,140 So back inside of comments.test.js, 52 00:02:07,140 --> 00:02:12,140 I will import SAVE_COMMENT from actions/types. 53 00:02:13,920 --> 00:02:15,540 So now inside of here we'll write out 54 00:02:15,540 --> 00:02:17,250 the two tests that we care about. 55 00:02:17,250 --> 00:02:19,950 First off, we wanna make sure that the reducer 56 00:02:19,950 --> 00:02:23,520 properly handles actions with a type of SAVE_COMMENT. 57 00:02:23,520 --> 00:02:25,980 So I'll write out in it statement to handle that. 58 00:02:25,980 --> 00:02:30,547 So it handles actions of type SAVE_COMMENT. 59 00:02:34,050 --> 00:02:36,660 Testing a reducer is pretty darn straightforward. 60 00:02:36,660 --> 00:02:39,060 All we have to do is call the reducer, 61 00:02:39,060 --> 00:02:42,630 pass in some fake action and then make an assertion 62 00:02:42,630 --> 00:02:47,070 or an expectation around the value that the reducer returns. 63 00:02:47,070 --> 00:02:49,170 So if we go back over to the comments reducer 64 00:02:49,170 --> 00:02:51,720 it really is a very simple function. 65 00:02:51,720 --> 00:02:55,410 All we're gonna do is pass in an action object right here 66 00:02:55,410 --> 00:02:56,880 and we're going to try to make sure 67 00:02:56,880 --> 00:02:58,800 that any payload that we attach 68 00:02:58,800 --> 00:03:02,310 that fake action that you and I are going to gonna fake out 69 00:03:02,310 --> 00:03:04,020 or put together ourselves manually 70 00:03:04,020 --> 00:03:06,210 is going to be returned inside of an array 71 00:03:06,210 --> 00:03:07,623 from the overall function. 72 00:03:08,580 --> 00:03:09,990 So in total, our it statement 73 00:03:09,990 --> 00:03:11,910 might look a little bit something like this. 74 00:03:11,910 --> 00:03:14,490 We'll first create our action object. 75 00:03:14,490 --> 00:03:16,500 So we don't have to call an action creator right here, 76 00:03:16,500 --> 00:03:18,840 we can just make a fake action. 77 00:03:18,840 --> 00:03:21,160 I'll give it a type of SAVE_COMMENT 78 00:03:22,440 --> 00:03:25,803 and a payload of New Comment. 79 00:03:27,900 --> 00:03:30,540 So now I can create a new variable 80 00:03:30,540 --> 00:03:32,883 that I will call about newState. 81 00:03:34,230 --> 00:03:36,557 I'll call my commentsReducer. 82 00:03:37,680 --> 00:03:40,620 I'll pass in an empty state. 83 00:03:40,620 --> 00:03:42,000 So this first argument right here 84 00:03:42,000 --> 00:03:44,100 is going to be the initial state of my reducer. 85 00:03:44,100 --> 00:03:46,560 Remember that's always the first argument to a reducer. 86 00:03:46,560 --> 00:03:48,610 So that's kinda my starting state object. 87 00:03:49,470 --> 00:03:50,940 And then as a second argument, 88 00:03:50,940 --> 00:03:53,823 I'll pass in the action that I just fabricated. 89 00:03:56,430 --> 00:04:00,210 So now whatever gets returned in theory should be an array 90 00:04:00,210 --> 00:04:02,130 with a single comment inside of it, 91 00:04:02,130 --> 00:04:04,890 in this case the string New Comment. 92 00:04:04,890 --> 00:04:07,770 So I can just make a very easy assertion or expectation 93 00:04:07,770 --> 00:04:10,230 about the value of newState right here. 94 00:04:10,230 --> 00:04:12,633 So in this case, I can say expect newState, 95 00:04:13,651 --> 00:04:16,200 and I'll again use the two equal matcher 96 00:04:16,200 --> 00:04:20,040 and I expect newState to be an array 97 00:04:20,040 --> 00:04:22,473 with a string of New Comment. 98 00:04:23,670 --> 00:04:25,110 One thing to double check here is to make sure 99 00:04:25,110 --> 00:04:29,220 that your spelling and capitalization of New Comment up here 100 00:04:29,220 --> 00:04:32,550 and New Comment down here are absolutely identical 101 00:04:32,550 --> 00:04:34,170 as the reducer is gonna return 102 00:04:34,170 --> 00:04:35,880 exactly this string right here. 103 00:04:35,880 --> 00:04:36,713 So you need to make sure 104 00:04:36,713 --> 00:04:39,843 that you have the exactly same string down here as well. 105 00:04:40,890 --> 00:04:42,720 Okay, so we can now save this file 106 00:04:42,720 --> 00:04:44,820 and then we should be able to flip back over to our terminal 107 00:04:44,820 --> 00:04:46,203 and see this test passing. 108 00:04:48,240 --> 00:04:50,700 And you'll notice that just is automatically picked up 109 00:04:50,700 --> 00:04:53,100 that comments reducer test file right here. 110 00:04:53,100 --> 00:04:54,810 So we should see the test running around it 111 00:04:54,810 --> 00:04:56,040 in just a second. 112 00:04:56,040 --> 00:04:59,430 Again, I apologize that my test run a little bit more slowly 113 00:04:59,430 --> 00:05:01,833 when I'm running this recording software. 114 00:05:03,810 --> 00:05:04,860 And there we go. 115 00:05:04,860 --> 00:05:06,267 So we've got one test 116 00:05:06,267 --> 00:05:09,660 inside the comments reducer running just fine. 117 00:05:09,660 --> 00:05:11,550 Now as usual, I'm gonna make a quick change 118 00:05:11,550 --> 00:05:13,800 to this thing just to make the test fail. 119 00:05:13,800 --> 00:05:15,150 So I'll do a quick save here. 120 00:05:15,150 --> 00:05:16,440 I'm not gonna make you watch this 121 00:05:16,440 --> 00:05:17,820 so we'll take a quick pause right here, 122 00:05:17,820 --> 00:05:18,960 we'll come back to the next section 123 00:05:18,960 --> 00:05:21,183 and just verify that the test did fail.