1
00:00:01,350 --> 00:00:02,490
-: In the last section we spoke

2
00:00:02,490 --> 00:00:04,470
about how we need to look inside that div,

3
00:00:04,470 --> 00:00:07,800
and check to see if it contains the comment box.

4
00:00:07,800 --> 00:00:09,540
Before we take care of that, I wanna point

5
00:00:09,540 --> 00:00:12,450
out one quick typo that I made in the last section.

6
00:00:12,450 --> 00:00:13,710
So, in the last section,

7
00:00:13,710 --> 00:00:16,290
I wrote out document dot create right here.

8
00:00:16,290 --> 00:00:18,180
There's actually no create function.

9
00:00:18,180 --> 00:00:21,600
This should have been create element like so.

10
00:00:21,600 --> 00:00:23,490
So again, typo on my behalf.

11
00:00:23,490 --> 00:00:26,340
Make sure you make that little change right there.

12
00:00:26,340 --> 00:00:28,590
Okay, so now back down to the comment right here.

13
00:00:28,590 --> 00:00:30,360
We need to look inside that div,

14
00:00:30,360 --> 00:00:32,130
so it's an actual div element,

15
00:00:32,130 --> 00:00:35,553
and we need to see if it contains our comment box.

16
00:00:36,810 --> 00:00:39,270
Now we're not gonna just kind of b-line the solution here.

17
00:00:39,270 --> 00:00:40,680
Instead, I wanna show you some

18
00:00:40,680 --> 00:00:43,140
behind the scene steps along the way.

19
00:00:43,140 --> 00:00:46,290
So I'm gonna first start by writing out console dot log,

20
00:00:46,290 --> 00:00:50,070
and we're gonna look at the HTML that this div contains.

21
00:00:50,070 --> 00:00:52,200
That's gonna be our starting point.

22
00:00:52,200 --> 00:00:55,890
So I'll say div dot inner HTML.

23
00:00:55,890 --> 00:00:56,850
Now do make sure

24
00:00:56,850 --> 00:01:00,723
that you have capital HTML on here as well, not lowercase.

25
00:01:01,950 --> 00:01:03,270
I'll then save this file,

26
00:01:03,270 --> 00:01:06,120
and then we're gonna go run this test file.

27
00:01:06,120 --> 00:01:09,210
So remember how we run a test inside of our project?

28
00:01:09,210 --> 00:01:13,020
All we have to do is write out npm run test at the terminal.

29
00:01:13,020 --> 00:01:15,020
So I'm gonna change back to my terminal.

30
00:01:15,960 --> 00:01:18,840
I'll make sure that I'm inside my testing directory,

31
00:01:18,840 --> 00:01:22,740
and I'm going to run the command npm run test.

32
00:01:22,740 --> 00:01:24,870
Now when I run this command, it takes me a little bit

33
00:01:24,870 --> 00:01:26,910
of time to actually start up the test suite.

34
00:01:26,910 --> 00:01:28,800
So I already started up the test suite

35
00:01:28,800 --> 00:01:31,020
in the separate terminal window over here.

36
00:01:31,020 --> 00:01:32,910
So when you run npm run test,

37
00:01:32,910 --> 00:01:34,170
you'll very quickly see something

38
00:01:34,170 --> 00:01:36,093
like this that appears on the screen.

39
00:01:37,080 --> 00:01:39,270
At the top we see the same testing output

40
00:01:39,270 --> 00:01:40,380
that we saw before when

41
00:01:40,380 --> 00:01:44,400
we ran the built-in tests at the start of this course.

42
00:01:44,400 --> 00:01:47,130
And then underneath that we'll see the actual console log

43
00:01:47,130 --> 00:01:50,820
that we just issued from our app dot test file.

44
00:01:50,820 --> 00:01:54,270
So here is the contents of that div element.

45
00:01:54,270 --> 00:01:57,510
We've got a parent div, we've got another div

46
00:01:57,510 --> 00:01:59,370
with a text comment box,

47
00:01:59,370 --> 00:02:02,160
and then we've got div comment list after that.

48
00:02:02,160 --> 00:02:05,790
So clearly the text right here of comment box is coming

49
00:02:05,790 --> 00:02:08,130
from our comment box component.

50
00:02:08,130 --> 00:02:10,949
So without a doubt, yes, this thing is visible.

51
00:02:10,949 --> 00:02:13,923
The comment box component exists in here.

52
00:02:15,210 --> 00:02:17,370
So we're now gonna go back over to our test file,

53
00:02:17,370 --> 00:02:19,920
and we're gonna write out a little bit of code that just

54
00:02:19,920 --> 00:02:23,370
makes the claim, or really checks to make sure,

55
00:02:23,370 --> 00:02:26,250
that the comment box does exist inside there.

56
00:02:26,250 --> 00:02:29,040
It's not enough for you and I to just visually look at this.

57
00:02:29,040 --> 00:02:31,440
We have to actually write out code that verifies,

58
00:02:31,440 --> 00:02:33,273
yes, the comment box exists.

59
00:02:34,200 --> 00:02:38,430
So to do so, I'm going to remove my console dot log here,

60
00:02:38,430 --> 00:02:40,836
and I'm gonna first just write out the code that's going to

61
00:02:40,836 --> 00:02:44,220
make sure that that comment box exists.

62
00:02:44,220 --> 00:02:47,340
We'll then talk about exactly what that code is doing.

63
00:02:47,340 --> 00:02:49,600
So I'm gonna say, expect

64
00:02:50,700 --> 00:02:52,050
div dot

65
00:02:52,050 --> 00:02:53,553
inner HTML,

66
00:02:55,710 --> 00:02:58,500
and then outside of the parenthesis I'll do,

67
00:02:58,500 --> 00:02:59,560
to contain

68
00:03:01,920 --> 00:03:03,360
comment box.

69
00:03:03,360 --> 00:03:06,420
And I'm gonna make sure that I have comment box right here

70
00:03:06,420 --> 00:03:10,680
with the identical spacing, capitalization, everything

71
00:03:10,680 --> 00:03:13,290
as our actual comment box component over here.

72
00:03:13,290 --> 00:03:15,360
So you'll notice that I have comment box

73
00:03:15,360 --> 00:03:17,640
with capital C and capital B, so I'm gonna make

74
00:03:17,640 --> 00:03:20,733
sure I get the exact same thing over here as well.

75
00:03:22,800 --> 00:03:25,110
Then I'll save the file, and I will go back over

76
00:03:25,110 --> 00:03:27,933
to my terminal, and see if the test is passing still.

77
00:03:30,030 --> 00:03:31,020
It's now back over here.

78
00:03:31,020 --> 00:03:32,739
It looks like the test is still passing.

79
00:03:32,739 --> 00:03:34,170
So, that's pretty much it.

80
00:03:34,170 --> 00:03:36,000
We wrote out our first test here.

81
00:03:36,000 --> 00:03:38,940
Now of course this test is basically identical

82
00:03:38,940 --> 00:03:41,910
to the one that we already did a little bit ago.

83
00:03:41,910 --> 00:03:44,400
So I'm not gonna take, I'm not gonna say

84
00:03:44,400 --> 00:03:46,440
that we should be too excited just yet.

85
00:03:46,440 --> 00:03:48,930
And in fact, if anything, I'm gonna actually claim

86
00:03:48,930 --> 00:03:51,240
that maybe we should not be excited

87
00:03:51,240 --> 00:03:53,430
about this line of code at all.

88
00:03:53,430 --> 00:03:55,260
So let's take a quick pause right here.

89
00:03:55,260 --> 00:03:56,760
When we come back to the next section,

90
00:03:56,760 --> 00:04:00,090
we're gonna talk about exactly what this line of code does,

91
00:04:00,090 --> 00:04:01,410
and then we'll also start to talk

92
00:04:01,410 --> 00:04:04,590
about why maybe this test, that we just wrote

93
00:04:04,590 --> 00:04:08,580
out right here, is not the best approach to testing at all.

94
00:04:08,580 --> 00:04:10,020
So quick break, we'll start talking

95
00:04:10,020 --> 00:04:11,470
about that in the next video.