1 00:00:01,530 --> 00:00:02,363 Instructor: In the last section, 2 00:00:02,363 --> 00:00:04,019 we created our app test file 3 00:00:04,019 --> 00:00:04,853 and now we're gonna work 4 00:00:04,853 --> 00:00:07,140 on the actual implementation of this test. 5 00:00:07,140 --> 00:00:08,430 So the first thing we need to know what to do 6 00:00:08,430 --> 00:00:11,730 is what to actually write inside the file. 7 00:00:11,730 --> 00:00:13,410 To give you a better idea of what's going on, 8 00:00:13,410 --> 00:00:15,750 let's check out a quick diagram. 9 00:00:15,750 --> 00:00:18,030 Okay, so this right here is a diagram 10 00:00:18,030 --> 00:00:21,000 of the main construct that we're going to use again, 11 00:00:21,000 --> 00:00:24,660 and again, and again, throughout this testing suite. 12 00:00:24,660 --> 00:00:27,360 Inside this diagram, I've labeled out a function 13 00:00:27,360 --> 00:00:29,340 that we're going to be calling over and over, 14 00:00:29,340 --> 00:00:32,280 every single time that we want to write out a new test. 15 00:00:32,280 --> 00:00:35,880 So we refer to this function as the IT function. 16 00:00:35,880 --> 00:00:39,000 I personally sometimes call it an IT block. 17 00:00:39,000 --> 00:00:40,800 Now you're gonna find very few other people 18 00:00:40,800 --> 00:00:42,930 who call this function the IT block. 19 00:00:42,930 --> 00:00:43,950 I call that personally 20 00:00:43,950 --> 00:00:47,670 because back when I was writing Ruby Code and Ruby on Rails, 21 00:00:47,670 --> 00:00:49,830 we referred to kind of that testing setup. 22 00:00:49,830 --> 00:00:51,780 We called it the IT block over there. 23 00:00:51,780 --> 00:00:53,280 So you're not gonna find a lot of other people 24 00:00:53,280 --> 00:00:55,830 in the JavaScript world that refer to this as the IT block 25 00:00:55,830 --> 00:00:59,340 but sometimes out of habit, that's what I'm gonna call it. 26 00:00:59,340 --> 00:01:02,310 The IT function is a global function. 27 00:01:02,310 --> 00:01:05,040 That means that you and I do not have to require it 28 00:01:05,040 --> 00:01:07,260 or import it into our test file. 29 00:01:07,260 --> 00:01:09,510 We can just freely call the IT function 30 00:01:09,510 --> 00:01:10,560 and we're good to go. 31 00:01:11,580 --> 00:01:13,830 The IT function is used to organize 32 00:01:13,830 --> 00:01:14,730 all the different tests 33 00:01:14,730 --> 00:01:16,830 that we write inside of a single file. 34 00:01:16,830 --> 00:01:18,420 So for each test we write, 35 00:01:18,420 --> 00:01:21,333 we will call the IT function exactly one time. 36 00:01:22,470 --> 00:01:23,910 The arguments to the IT function 37 00:01:23,910 --> 00:01:25,620 are always going to be the same. 38 00:01:25,620 --> 00:01:27,810 The first argument is gonna be a string 39 00:01:27,810 --> 00:01:29,580 that is a description of the test 40 00:01:29,580 --> 00:01:31,380 that you and I are going to write. 41 00:01:31,380 --> 00:01:33,480 So this is going to be a string description 42 00:01:33,480 --> 00:01:36,330 solely meant to communicate the purpose of the test 43 00:01:36,330 --> 00:01:37,680 to ourselves in the future 44 00:01:37,680 --> 00:01:40,380 or other developers in the future. 45 00:01:40,380 --> 00:01:43,500 This string right here is not used by the testing suite 46 00:01:43,500 --> 00:01:46,740 for any behind the scenes testing purpose. 47 00:01:46,740 --> 00:01:49,290 All it's there for is for communicating the intent 48 00:01:49,290 --> 00:01:52,263 of the test to yourself and other engineers. 49 00:01:53,910 --> 00:01:55,980 As a second argument to the IT function, 50 00:01:55,980 --> 00:01:59,100 we're gonna pass in a function that you and I create. 51 00:01:59,100 --> 00:02:01,620 And this function is gonna contain the actual body 52 00:02:01,620 --> 00:02:04,830 or the actual test logic that we want to execute. 53 00:02:04,830 --> 00:02:07,380 It's gonna contain the code that actually runs 54 00:02:07,380 --> 00:02:09,270 whatever we say this thing is going to run 55 00:02:09,270 --> 00:02:12,120 or whatever it's actually going to test. 56 00:02:12,120 --> 00:02:14,580 So let's flip back over to our app test file 57 00:02:14,580 --> 00:02:18,780 and write out our first IT block or our first IT function. 58 00:02:18,780 --> 00:02:21,810 So back over here inside my app test file. 59 00:02:21,810 --> 00:02:25,470 I'll write out it, and then as a first argument 60 00:02:25,470 --> 00:02:26,610 I'll provide a string. 61 00:02:26,610 --> 00:02:28,350 So again, this is string right here 62 00:02:28,350 --> 00:02:31,800 is going to be a description of what we're trying to test. 63 00:02:31,800 --> 00:02:34,380 So as a quick reminder, what we're trying to test right now 64 00:02:34,380 --> 00:02:36,930 around our app component, is to just make sure 65 00:02:36,930 --> 00:02:39,000 that it shows our comment box. 66 00:02:39,000 --> 00:02:41,220 That's gonna be the first test we write. 67 00:02:41,220 --> 00:02:43,890 So as a description for this, on the very first test 68 00:02:43,890 --> 00:02:48,180 I'm gonna say, shows a comment box. 69 00:02:48,180 --> 00:02:49,530 Now I want you to take a quick look 70 00:02:49,530 --> 00:02:50,850 at the string right here. 71 00:02:50,850 --> 00:02:53,820 You'll notice that I didn't write out something like 72 00:02:53,820 --> 00:02:56,100 'The App' or anything like that. 73 00:02:56,100 --> 00:02:59,940 I didn't write out, it shows the comment box. 74 00:02:59,940 --> 00:03:01,860 Whenever we write a description in here, 75 00:03:01,860 --> 00:03:03,480 we want to kind of imagine 76 00:03:03,480 --> 00:03:05,940 that the IT function right here kind of blends 77 00:03:05,940 --> 00:03:08,940 into the name or the description that we're providing. 78 00:03:08,940 --> 00:03:10,710 And so I would read this test right here 79 00:03:10,710 --> 00:03:14,550 as it shows a comment box. 80 00:03:14,550 --> 00:03:16,740 When we start thinking about what it is, 81 00:03:16,740 --> 00:03:20,460 well the it is implied to me whatever we named this file. 82 00:03:20,460 --> 00:03:23,640 So in this case we named the file app dot test dot js. 83 00:03:23,640 --> 00:03:26,010 So in total, I would read this statement right here 84 00:03:26,010 --> 00:03:28,680 as saying the app component, 85 00:03:28,680 --> 00:03:30,060 hey, let me tell you about it. 86 00:03:30,060 --> 00:03:32,700 It shows a comment box. 87 00:03:32,700 --> 00:03:34,020 And then as a second argument, 88 00:03:34,020 --> 00:03:36,840 we'll provide a function that shows that is the case 89 00:03:36,840 --> 00:03:38,580 and actually kind of proves that 90 00:03:38,580 --> 00:03:41,400 it shows a comment box with some amount of code. 91 00:03:41,400 --> 00:03:43,533 So let's place that second argument here. 92 00:03:44,580 --> 00:03:46,560 It's gonna be a function like so. 93 00:03:46,560 --> 00:03:47,850 And then inside this function 94 00:03:47,850 --> 00:03:51,300 is where we're going to implement our actual test logic. 95 00:03:51,300 --> 00:03:52,230 So let's take a quick pause, 96 00:03:52,230 --> 00:03:53,310 we'll come back to the next section 97 00:03:53,310 --> 00:03:55,233 and start implementing the test.