1
00:00:01,050 --> 00:00:01,883
Instructor: In the last section,

2
00:00:01,883 --> 00:00:03,690
we broke down this expectation right here

3
00:00:03,690 --> 00:00:06,600
and spoke about every individual part of it.

4
00:00:06,600 --> 00:00:08,760
In this section, we're going to get down to that part

5
00:00:08,760 --> 00:00:10,560
that you're probably wondering why

6
00:00:10,560 --> 00:00:12,270
I mentioned two sections ago.

7
00:00:12,270 --> 00:00:14,280
I mentioned that this line of code is maybe not

8
00:00:14,280 --> 00:00:17,010
the best approach to testing inside of our application.

9
00:00:17,010 --> 00:00:19,361
So in this section, I'm gonna tell you why.

10
00:00:19,361 --> 00:00:20,576
I can tell you exactly,

11
00:00:20,576 --> 00:00:21,720
I'm gonna be as crystal clear as I can,

12
00:00:21,720 --> 00:00:23,970
why this is not the best approach.

13
00:00:23,970 --> 00:00:26,670
So one thing I wanna point out here is that at present

14
00:00:26,670 --> 00:00:29,310
we are looking at this inner HTML property

15
00:00:29,310 --> 00:00:33,240
and we're expecting to see the string comment box.

16
00:00:33,240 --> 00:00:34,980
Now there's two things I want to point out.

17
00:00:34,980 --> 00:00:37,020
Okay, two very important things.

18
00:00:37,020 --> 00:00:40,110
I want to mention that we are inside of a test

19
00:00:40,110 --> 00:00:42,660
for our app component.

20
00:00:42,660 --> 00:00:44,720
That's the test file we're in right now.

21
00:00:44,720 --> 00:00:47,120
We're looking at the test for our app component.

22
00:00:48,150 --> 00:00:51,360
But if you open up our comment box file right here,

23
00:00:51,360 --> 00:00:55,440
it's the comment box component that actually defines

24
00:00:55,440 --> 00:00:58,560
that original string of comment box.

25
00:00:58,560 --> 00:01:01,620
In other words, our app.test file

26
00:01:01,620 --> 00:01:03,870
is trying to make an assertion

27
00:01:03,870 --> 00:01:08,070
about the behavior of our comment box component.

28
00:01:08,070 --> 00:01:11,100
We have a test file that is meant to look at one component

29
00:01:11,100 --> 00:01:14,790
but it has some intricate knowledge or detailed knowledge

30
00:01:14,790 --> 00:01:18,840
of how some completely unrelated file behaves.

31
00:01:18,840 --> 00:01:20,190
So let's take a look at a diagram

32
00:01:20,190 --> 00:01:23,053
and get a better sense of what's going on.

33
00:01:23,053 --> 00:01:24,843
All right, here we go.

34
00:01:26,640 --> 00:01:29,790
So this is a diagram of our app component right here.

35
00:01:29,790 --> 00:01:32,880
Here's the app.test file, and you can see on here,

36
00:01:32,880 --> 00:01:35,670
as well as our comment list, the comment box

37
00:01:35,670 --> 00:01:38,460
and their respective test files as well.

38
00:01:38,460 --> 00:01:42,090
So at present, our app test file right here

39
00:01:42,090 --> 00:01:44,700
is essentially trying to make a proof

40
00:01:44,700 --> 00:01:46,500
or trying to understand,

41
00:01:46,500 --> 00:01:51,120
the secret internal workings of the comment box.

42
00:01:51,120 --> 00:01:55,140
Our app.test file has special, privileged knowledge

43
00:01:55,140 --> 00:01:58,380
of how the comment box component is working.

44
00:01:58,380 --> 00:02:00,450
Now, that might not seem like the worst thing in the world

45
00:02:00,450 --> 00:02:02,073
but let me show you something.

46
00:02:03,103 --> 00:02:06,090
Let's say that I go over to my comment box file right now

47
00:02:06,090 --> 00:02:09,630
and I change the text right here.

48
00:02:09,630 --> 00:02:12,390
Maybe instead of comment box, we say,

49
00:02:12,390 --> 00:02:17,130
box for comment, instead, and then I save this file,

50
00:02:17,130 --> 00:02:19,710
and then I go back over to my terminal.

51
00:02:19,710 --> 00:02:20,640
So when I go back over,

52
00:02:20,640 --> 00:02:22,863
I'm gonna see that test is now failing.

53
00:02:23,880 --> 00:02:27,240
So I made a change to the comment box component

54
00:02:27,240 --> 00:02:32,040
and it caused a completely unrelated test file to break.

55
00:02:32,040 --> 00:02:34,140
That might not seem like a big deal right now.

56
00:02:34,140 --> 00:02:35,591
It might not seem

57
00:02:35,591 --> 00:02:37,290
like it's the worst thing in the world to fix.

58
00:02:37,290 --> 00:02:39,600
Of course you and I can very easily figure out

59
00:02:39,600 --> 00:02:43,200
to go into our app.test file and update the text right here

60
00:02:43,200 --> 00:02:44,970
to instead say, what was it?

61
00:02:44,970 --> 00:02:47,523
Box for comment.

62
00:02:48,450 --> 00:02:51,840
Save that and then if we go back over to the terminal,

63
00:02:51,840 --> 00:02:53,070
we are working again.

64
00:02:53,070 --> 00:02:55,320
So I know that right now it does not seem

65
00:02:55,320 --> 00:02:57,390
like a complicated thing to fix,

66
00:02:57,390 --> 00:03:01,050
but trust me, as soon as you working on larger projects,

67
00:03:01,050 --> 00:03:04,560
you're signing yourself up for a real nightmare.

68
00:03:04,560 --> 00:03:06,840
Because if you start working on some component,

69
00:03:06,840 --> 00:03:09,450
like let's say, the comment box over here

70
00:03:09,450 --> 00:03:12,630
and you start changing this thing's internal workings,

71
00:03:12,630 --> 00:03:15,960
you start changing the text or you start changing callbacks

72
00:03:15,960 --> 00:03:19,920
or class names or whatever else,

73
00:03:19,920 --> 00:03:22,650
you're gonna start to see that maybe some other test

74
00:03:22,650 --> 00:03:25,020
inside of your application starts to break.

75
00:03:25,020 --> 00:03:26,940
And that starts to turn into a nightmare

76
00:03:26,940 --> 00:03:29,310
because that means that you then have to open up

77
00:03:29,310 --> 00:03:32,940
that other test file, you have to find the breaking test

78
00:03:32,940 --> 00:03:34,500
and you have to understand

79
00:03:34,500 --> 00:03:37,293
exactly what that test is trying to accomplish.

80
00:03:38,400 --> 00:03:39,870
So rather than just working

81
00:03:39,870 --> 00:03:43,380
on that nice little comment box file, rather than just

82
00:03:43,380 --> 00:03:46,200
working on that solo component all by itself,

83
00:03:46,200 --> 00:03:49,590
you now have to go to this completely unrelated component,

84
00:03:49,590 --> 00:03:51,210
understand the tests around it

85
00:03:51,210 --> 00:03:54,510
and somehow fix it up to behave the way you expect.

86
00:03:54,510 --> 00:03:56,460
Now, again, in our example right here,

87
00:03:56,460 --> 00:03:58,380
yeah, that test was really straightforward

88
00:03:58,380 --> 00:04:00,600
but in a real, professional application,

89
00:04:00,600 --> 00:04:02,760
the test logic inside this thing

90
00:04:02,760 --> 00:04:04,890
might be far more complicated

91
00:04:04,890 --> 00:04:07,230
and it will take you a non-zero amount of time

92
00:04:07,230 --> 00:04:08,520
to read over that test

93
00:04:08,520 --> 00:04:10,860
and try to understand what's going on.

94
00:04:10,860 --> 00:04:13,740
So in general, when you and I start to write tests,

95
00:04:13,740 --> 00:04:18,720
we try from one component not to access the inner workings

96
00:04:18,720 --> 00:04:20,790
or the actual implementation details

97
00:04:20,790 --> 00:04:23,790
of any other component, if possible.

98
00:04:23,790 --> 00:04:25,350
There's certainly violations of this rule.

99
00:04:25,350 --> 00:04:27,150
There's times where we really do need

100
00:04:27,150 --> 00:04:29,070
to reach into that other component.

101
00:04:29,070 --> 00:04:31,560
But this is a great example of where you and I

102
00:04:31,560 --> 00:04:33,090
really don't want to know

103
00:04:33,090 --> 00:04:35,790
about the actual implementation of the comment box.

104
00:04:35,790 --> 00:04:36,623
We don't want to know

105
00:04:36,623 --> 00:04:38,490
about the contents of its render method.

106
00:04:38,490 --> 00:04:39,323
We don't want to know

107
00:04:39,323 --> 00:04:41,910
about the text that's contained inside of it.

108
00:04:41,910 --> 00:04:44,850
Instead, we want to try to write tests

109
00:04:44,850 --> 00:04:49,560
that only have knowledge of the other component in general.

110
00:04:49,560 --> 00:04:51,810
So it's not okay to have the app.test

111
00:04:51,810 --> 00:04:55,050
be aware of the comment box's secret inner workings

112
00:04:55,050 --> 00:04:58,920
but it is okay for the app.test to know that say,

113
00:04:58,920 --> 00:05:02,233
the comment box component just exists,

114
00:05:02,233 --> 00:05:05,535
or something like the comment list component just exists.

115
00:05:05,535 --> 00:05:07,830
It's totally fine to say, hey, here's the app component.

116
00:05:07,830 --> 00:05:10,230
It knows that this other component

117
00:05:10,230 --> 00:05:12,631
in our application exists.

118
00:05:12,631 --> 00:05:15,390
That's totally fine, no issue with that whatsoever.

119
00:05:15,390 --> 00:05:18,960
So ideally, we would somehow fix our current test

120
00:05:18,960 --> 00:05:22,470
by making sure that our app.test file does not know

121
00:05:22,470 --> 00:05:26,370
that the comment box renders out the string comment box.

122
00:05:26,370 --> 00:05:30,150
Instead, we would ideally just say that the app.test file

123
00:05:30,150 --> 00:05:35,150
has knowledge that the overall comment box component exists.

124
00:05:35,250 --> 00:05:37,470
That would be much more ideal

125
00:05:37,470 --> 00:05:40,020
because then if we start to change the comment box,

126
00:05:40,020 --> 00:05:42,000
if we start to change its internal workings,

127
00:05:42,000 --> 00:05:44,450
no issue with that whatsoever.

128
00:05:44,450 --> 00:05:47,130
Okay, so that's a quick example

129
00:05:47,130 --> 00:05:49,830
of why we try to avoid writing tests like this right here,

130
00:05:49,830 --> 00:05:52,530
where we are giving one component test file

131
00:05:52,530 --> 00:05:54,360
intimate knowledge of the inner workings

132
00:05:54,360 --> 00:05:56,370
of another component.

133
00:05:56,370 --> 00:05:57,750
So let's take a quick pause right here.

134
00:05:57,750 --> 00:05:59,160
We're gonna come back to the next section

135
00:05:59,160 --> 00:06:01,500
and we're gonna start to examine this line of code

136
00:06:01,500 --> 00:06:04,410
and figure out how we can fix it or how we can change it

137
00:06:04,410 --> 00:06:08,190
to make sure that our app.test file no longer really has

138
00:06:08,190 --> 00:06:10,770
a good idea of what's going on inside the comment box.

139
00:06:10,770 --> 00:06:13,263
So quick break and I'll see you in just a minute.