1 00:00:01,260 --> 00:00:02,093 Instructor: In the last section 2 00:00:02,093 --> 00:00:04,590 we spoke about how our last two tests right here 3 00:00:04,590 --> 00:00:07,410 have some common set up at the very top of both them. 4 00:00:07,410 --> 00:00:09,330 So in the past we've solved this issue 5 00:00:09,330 --> 00:00:11,160 of repeated code by extracting 6 00:00:11,160 --> 00:00:13,920 that repeated code into a beforeEach statement. 7 00:00:13,920 --> 00:00:16,890 But this time around things are just a little bit different. 8 00:00:16,890 --> 00:00:19,800 You see if we take this wrap.find statement 9 00:00:19,800 --> 00:00:23,040 with a simulate function and the wrap.update function call 10 00:00:23,040 --> 00:00:25,380 right here as well and move them up 11 00:00:25,380 --> 00:00:27,480 to the beforeEach at the top. 12 00:00:27,480 --> 00:00:30,810 Then we're gonna have a slightly unintended side effect. 13 00:00:30,810 --> 00:00:32,640 If we move that code up here, 14 00:00:32,640 --> 00:00:35,130 all that code that updates the text area value 15 00:00:35,130 --> 00:00:38,640 and calls wrap dot update is also going to run 16 00:00:38,640 --> 00:00:43,200 before our first test right here is executed as well. 17 00:00:43,200 --> 00:00:45,900 Now in this case, changing the value of the text area 18 00:00:45,900 --> 00:00:48,960 and calling wrap.update is not going to break 19 00:00:48,960 --> 00:00:51,840 this first test, but maybe you can easily 20 00:00:51,840 --> 00:00:54,990 imagine a case in which this first test right here 21 00:00:54,990 --> 00:00:57,150 has some logic inside of it that depends upon 22 00:00:57,150 --> 00:00:59,460 the text area being completely empty. 23 00:00:59,460 --> 00:01:01,080 Maybe that's the case. 24 00:01:01,080 --> 00:01:04,050 So we want to figure out a way to not have to duplicate 25 00:01:04,050 --> 00:01:07,050 this setup code right here on our last two tests 26 00:01:07,050 --> 00:01:10,503 but also not have it affect the first test. 27 00:01:12,300 --> 00:01:15,120 So in order to make use of a beforeEach statement 28 00:01:15,120 --> 00:01:17,580 or kind of abstract out this duplicated code 29 00:01:17,580 --> 00:01:19,770 without having an impact on the first test 30 00:01:19,770 --> 00:01:21,570 we're going to use a construct 31 00:01:21,570 --> 00:01:24,930 in just called the describe function. 32 00:01:24,930 --> 00:01:28,560 The describe function is used to group together certain sets 33 00:01:28,560 --> 00:01:30,720 of tests that have some common setup 34 00:01:30,720 --> 00:01:32,490 or tear down for each of them. 35 00:01:32,490 --> 00:01:35,400 And that's the exact situation that we're in right now. 36 00:01:35,400 --> 00:01:36,450 So here's what we're gonna do, 37 00:01:36,450 --> 00:01:38,910 I'm gonna first get started by collapsing each of these 38 00:01:38,910 --> 00:01:40,980 it statements inside my code editor 39 00:01:40,980 --> 00:01:42,000 just so you can see the code 40 00:01:42,000 --> 00:01:44,160 that we're gonna add a little bit more clearly. 41 00:01:44,160 --> 00:01:48,600 So I'm gonna collapse that test, that test, and that test. 42 00:01:48,600 --> 00:01:51,777 So now we've just got our beforeEachs and our afterEach. 43 00:01:53,127 --> 00:01:56,010 Now the two tests that have some common setup 44 00:01:56,010 --> 00:01:57,810 or kind of have a very similar purpose 45 00:01:57,810 --> 00:02:00,120 are the bottom two ones right here. 46 00:02:00,120 --> 00:02:02,820 So right above the second test, 47 00:02:02,820 --> 00:02:06,480 I'm gonna add in a describe function call. 48 00:02:06,480 --> 00:02:09,240 Describe, again, can be used to group together certain sets 49 00:02:09,240 --> 00:02:11,850 of tests inside of a single file. 50 00:02:11,850 --> 00:02:14,670 So in this case, we are trying to describe some common 51 00:02:14,670 --> 00:02:17,340 behavior between these two tests right here 52 00:02:17,340 --> 00:02:19,860 that are both concerned with our text area. 53 00:02:19,860 --> 00:02:21,960 So as a first argument to the describe function, 54 00:02:21,960 --> 00:02:24,780 I'm gonna give a string that describes the purpose 55 00:02:24,780 --> 00:02:27,240 of all the tests that follow. 56 00:02:27,240 --> 00:02:29,400 So the purpose of both these tests have to do 57 00:02:29,400 --> 00:02:30,480 with our text area. 58 00:02:30,480 --> 00:02:35,160 So I'm gonna say the text area like so. 59 00:02:35,160 --> 00:02:38,580 Then as a second argument, I'll place a function 60 00:02:38,580 --> 00:02:41,130 and that function is going to wrap both of the tests 61 00:02:41,130 --> 00:02:42,570 that we wrote down here. 62 00:02:42,570 --> 00:02:46,860 So I'm gonna take this closing curly brace and parenthesis. 63 00:02:46,860 --> 00:02:49,010 I'll cut it and move it down to the bottom, 64 00:02:49,920 --> 00:02:52,893 and then I'll indent both the it statements like so. 65 00:02:54,720 --> 00:02:56,940 So now we've got a single described block 66 00:02:56,940 --> 00:02:59,913 that wraps the second and the third test. 67 00:03:01,170 --> 00:03:02,610 The benefit to a described block 68 00:03:02,610 --> 00:03:05,490 is not just in kind of doing some organization 69 00:03:05,490 --> 00:03:06,990 inside of a single test file 70 00:03:06,990 --> 00:03:09,150 but it can be also used to limit the scope 71 00:03:09,150 --> 00:03:11,160 of beforeEach statements. 72 00:03:11,160 --> 00:03:13,890 So now inside of the describe block 73 00:03:13,890 --> 00:03:15,543 we can place another beforeEach. 74 00:03:19,485 --> 00:03:21,960 This beforeEach is not going to modify 75 00:03:21,960 --> 00:03:23,700 the it statement up here. 76 00:03:23,700 --> 00:03:25,440 Instead, it's only going to run 77 00:03:25,440 --> 00:03:28,740 before our second test and our third test. 78 00:03:28,740 --> 00:03:31,350 So this beforeEach statement right here is a perfect place 79 00:03:31,350 --> 00:03:34,113 to do some setup common to both these tests. 80 00:03:34,950 --> 00:03:37,443 So I will now expand both those it statements. 81 00:03:38,490 --> 00:03:42,420 I'm going to cut our wrap.find simulate 82 00:03:42,420 --> 00:03:45,060 and the wrap.update calls out 83 00:03:45,060 --> 00:03:47,217 and I will move it into the beforeEach 84 00:03:48,067 --> 00:03:50,767 and then I will delete it from the third test as well. 85 00:03:55,260 --> 00:03:57,630 Okay, so that looks pretty good. 86 00:03:57,630 --> 00:03:59,550 So now we've got a set of tests 87 00:03:59,550 --> 00:04:02,490 that describe how the text area works. 88 00:04:02,490 --> 00:04:04,200 And we're saying that text area 89 00:04:04,200 --> 00:04:06,720 has something that users can type in. 90 00:04:06,720 --> 00:04:10,320 And when the form is submitted, the text area gets emptied. 91 00:04:10,320 --> 00:04:12,330 Before we run these two tests right here, 92 00:04:12,330 --> 00:04:14,010 we'll execute the for each statement 93 00:04:14,010 --> 00:04:16,470 and then run the respective test. 94 00:04:16,470 --> 00:04:18,779 Now I'll very quickly flip back over to my terminal 95 00:04:18,779 --> 00:04:21,930 and just make sure that these tests are still working. 96 00:04:21,930 --> 00:04:24,900 So back over here, it looks like we're good to go. 97 00:04:24,900 --> 00:04:27,180 You'll notice that by adding in the describe block 98 00:04:27,180 --> 00:04:29,460 also modified our test report. 99 00:04:29,460 --> 00:04:32,670 So now we see a little section right here. 100 00:04:32,670 --> 00:04:34,680 That means to say that the following tests 101 00:04:34,680 --> 00:04:36,510 underneath it are all a part 102 00:04:36,510 --> 00:04:38,823 of that described block of the text area. 103 00:04:40,200 --> 00:04:43,080 Now, last thing I wanna show you is a quick visualization 104 00:04:43,080 --> 00:04:44,100 to give you a better sense 105 00:04:44,100 --> 00:04:47,370 of the order in which our tests are now being executed. 106 00:04:47,370 --> 00:04:49,170 So this is a diagram of our test file 107 00:04:49,170 --> 00:04:50,670 as it stands right now. 108 00:04:50,670 --> 00:04:54,150 At the very top we've got our beforeEach, the afterEach, 109 00:04:54,150 --> 00:04:56,070 we have test number one. 110 00:04:56,070 --> 00:04:59,520 Then the describe block, the second beforeEach 111 00:04:59,520 --> 00:05:02,100 and then the two following it statements. 112 00:05:02,100 --> 00:05:05,500 So in total, we're going to execute three different tests 113 00:05:06,480 --> 00:05:08,580 and each of those different tests are gonna have some number 114 00:05:08,580 --> 00:05:11,310 of before and afterEachs. 115 00:05:11,310 --> 00:05:13,860 So I put together a diagram of the three separate tests 116 00:05:13,860 --> 00:05:16,683 and what code is gonna run before and after each one. 117 00:05:17,940 --> 00:05:21,960 So first off is beforeEach number one with our first test. 118 00:05:21,960 --> 00:05:24,300 So we have beforeEach number one, and then we check to see 119 00:05:24,300 --> 00:05:26,850 if the component has a text area in a button. 120 00:05:26,850 --> 00:05:28,857 And then we execute the afterEach. 121 00:05:30,444 --> 00:05:33,510 For our test that allows the user to edit the text area 122 00:05:33,510 --> 00:05:35,490 which is the second test we have. 123 00:05:35,490 --> 00:05:37,410 We execute beforeEach number one. 124 00:05:37,410 --> 00:05:40,320 Then number two, then the test, then the afterEach. 125 00:05:40,320 --> 00:05:43,290 And then it's the same thing with the third test as well. 126 00:05:43,290 --> 00:05:48,030 We execute beforeEach, number one, beforeEach number two, 127 00:05:48,030 --> 00:05:50,610 the test and then the afterEach. 128 00:05:50,610 --> 00:05:52,470 So these beforeEach statements 129 00:05:52,470 --> 00:05:54,750 are going to stack up over time. 130 00:05:54,750 --> 00:05:57,900 And as we add more beforeEach statements into a single file, 131 00:05:57,900 --> 00:05:59,430 they all get executed 132 00:05:59,430 --> 00:06:02,043 before any following test actually runs. 133 00:06:02,880 --> 00:06:04,410 Okay, so we now got a better idea 134 00:06:04,410 --> 00:06:07,440 of how we can organize tests inside a single file 135 00:06:07,440 --> 00:06:09,000 and make sure that beforeEach statements 136 00:06:09,000 --> 00:06:12,180 will only modify certain tests inside that file. 137 00:06:12,180 --> 00:06:13,710 So let's take a quick pause right here 138 00:06:13,710 --> 00:06:16,800 and continue on to our next file or next component 139 00:06:16,800 --> 00:06:17,853 in the next section.