1
00:00:01,110 --> 00:00:03,180
Instructor: In the last section, we refactor our code

2
00:00:03,180 --> 00:00:04,470
to use a beforeEach

3
00:00:04,470 --> 00:00:06,360
to render our component ahead of time

4
00:00:06,360 --> 00:00:08,700
before any of the it's run.

5
00:00:08,700 --> 00:00:10,290
Doing that just allowed us to do a little bit

6
00:00:10,290 --> 00:00:11,850
of cleanup inside this file

7
00:00:11,850 --> 00:00:13,380
and now each of our it statements

8
00:00:13,380 --> 00:00:15,870
is much more clear and legible.

9
00:00:15,870 --> 00:00:17,040
We're now at a really good spot

10
00:00:17,040 --> 00:00:18,900
where we could start implementing

11
00:00:18,900 --> 00:00:21,570
either our text area inside of our comment box.

12
00:00:21,570 --> 00:00:24,750
So right now, you know, a user can enter text in here

13
00:00:24,750 --> 00:00:27,600
but when we click the button, nothing really happens.

14
00:00:27,600 --> 00:00:28,890
The other thing that we haven't done yet,

15
00:00:28,890 --> 00:00:30,690
is we haven't displayed this component

16
00:00:30,690 --> 00:00:32,970
inside of our app component just yet.

17
00:00:32,970 --> 00:00:34,440
So if we refresh our page

18
00:00:34,440 --> 00:00:36,900
and we look at our app on the screen,

19
00:00:36,900 --> 00:00:40,110
we wouldn't be seeing the comment box just yet.

20
00:00:40,110 --> 00:00:43,530
Let's go ahead and first write a spec for app

21
00:00:43,530 --> 00:00:46,200
and just assert that the app is going to show

22
00:00:46,200 --> 00:00:48,723
an instance of our comment box.

23
00:00:49,680 --> 00:00:51,397
So right now, it's just showing the

24
00:00:51,397 --> 00:00:53,970
<div>React simple starter,

25
00:00:53,970 --> 00:00:56,550
and we just have a test for app

26
00:00:56,550 --> 00:00:58,890
inside of app_test here that says

27
00:00:58,890 --> 00:01:01,620
it "shows the correct text."

28
00:01:01,620 --> 00:01:03,720
So, we're going to definitely be removing

29
00:01:03,720 --> 00:01:05,160
this text out of here.

30
00:01:05,160 --> 00:01:06,810
And so I'm going to go ahead

31
00:01:06,810 --> 00:01:09,273
and delete this entire block right here.

32
00:01:11,610 --> 00:01:13,260
We're now going to write another test.

33
00:01:13,260 --> 00:01:15,787
And again, when we write tests and we're thinking,

34
00:01:15,787 --> 00:01:17,730
"Hey, what are we trying to test here?"

35
00:01:17,730 --> 00:01:19,890
It really very profitable,

36
00:01:19,890 --> 00:01:21,510
very effective to just ask yourself

37
00:01:21,510 --> 00:01:24,540
the very simple question, "What do I expect to happen?"

38
00:01:24,540 --> 00:01:26,130
You know, what am I trying to achieve here?

39
00:01:26,130 --> 00:01:28,260
What is the code that I want to write?

40
00:01:28,260 --> 00:01:30,450
We want to write some code that makes sure

41
00:01:30,450 --> 00:01:33,510
that "comment box" is displayed inside of the app.

42
00:01:33,510 --> 00:01:34,710
That's it.

43
00:01:34,710 --> 00:01:37,230
So we're gonna make an it block that says

44
00:01:37,230 --> 00:01:41,427
it "shows a comment box."

45
00:01:43,920 --> 00:01:45,390
So I find tests like this,

46
00:01:45,390 --> 00:01:47,160
tests where we're, kind of, asserting

47
00:01:47,160 --> 00:01:49,950
that a parent is showing a very particular child,

48
00:01:49,950 --> 00:01:50,790
very useful

49
00:01:50,790 --> 00:01:52,470
because it kind of forms a linkage

50
00:01:52,470 --> 00:01:54,870
between our two components.

51
00:01:54,870 --> 00:01:57,990
I expect my app to always show a comment box

52
00:01:57,990 --> 00:02:00,480
and so it really makes sense to have a spec that says yes,

53
00:02:00,480 --> 00:02:04,290
I expect my component, my app to always show an instance

54
00:02:04,290 --> 00:02:06,873
of its child comment box.

55
00:02:08,699 --> 00:02:10,110
So the next thing we need to figure out here

56
00:02:10,110 --> 00:02:12,390
is how we're gonna write an assertion.

57
00:02:12,390 --> 00:02:15,060
So again, I'm not really a big fan of asserting that

58
00:02:15,060 --> 00:02:18,600
you know, we're gonna find a instance of a React component

59
00:02:18,600 --> 00:02:21,090
called comment box inside of app.

60
00:02:21,090 --> 00:02:22,950
I would much rather kinda make an assertion

61
00:02:22,950 --> 00:02:25,113
about the HTML that is produced.

62
00:02:26,070 --> 00:02:28,620
If we look back at comment box,

63
00:02:28,620 --> 00:02:30,840
we added on this class name here

64
00:02:30,840 --> 00:02:32,850
and this class name should be unique

65
00:02:32,850 --> 00:02:34,740
for any other component that we create.

66
00:02:34,740 --> 00:02:37,080
Only one component should ever have the class name

67
00:02:37,080 --> 00:02:38,700
comment box.

68
00:02:38,700 --> 00:02:42,030
So what we can do inside of our app test to make sure

69
00:02:42,030 --> 00:02:45,636
that it shows a comment box as we can just expect

70
00:02:45,636 --> 00:02:50,636
to find a HTML element with class comment/box.

71
00:02:52,170 --> 00:02:54,750
Let's go ahead and give that a shot.

72
00:02:54,750 --> 00:02:58,620
We'll say we expect component

73
00:02:58,620 --> 00:03:01,020
and then we're gonna try to find an element

74
00:03:01,020 --> 00:03:04,890
with the class comment box

75
00:03:04,890 --> 00:03:07,893
and I'm gonna expect that to exist.

76
00:03:08,760 --> 00:03:09,593
Notice how

77
00:03:09,593 --> 00:03:12,630
remember this is a J query wrapped component right here.

78
00:03:12,630 --> 00:03:17,580
So find is a J query method that accepts a CSS selector.

79
00:03:17,580 --> 00:03:20,370
So I put .comment-box

80
00:03:20,370 --> 00:03:22,653
and we're just going to expect that to exist.

81
00:03:23,910 --> 00:03:26,790
We need to first initialize component ahead of time.

82
00:03:26,790 --> 00:03:29,490
So let's go ahead and do that really quick.

83
00:03:29,490 --> 00:03:32,130
Remember, as I just said in the last section

84
00:03:32,130 --> 00:03:34,890
when we were looking at the initialization

85
00:03:34,890 --> 00:03:36,660
we don't really have to understand what's going on

86
00:03:36,660 --> 00:03:39,720
we just have to kind of repeat what's already been done.

87
00:03:39,720 --> 00:03:41,700
And I know that's a bad sentiment to have

88
00:03:41,700 --> 00:03:42,870
but I only mean to say that

89
00:03:42,870 --> 00:03:44,670
in case this is confusing right now.

90
00:03:45,630 --> 00:03:49,443
So we'll say let component just to initialize it.

91
00:03:50,370 --> 00:03:55,370
And then before each it inside of this test structure

92
00:03:55,560 --> 00:04:00,560
we'll assign component to be equal to render component app.

93
00:04:03,330 --> 00:04:06,360
So right now our app does not show the comment box

94
00:04:06,360 --> 00:04:08,460
so we're gonna expect this to fail.

95
00:04:08,460 --> 00:04:10,230
Let's save it.

96
00:04:10,230 --> 00:04:11,550
And sure enough,

97
00:04:11,550 --> 00:04:15,300
we expected comment box to exist, but it doesn't.

98
00:04:15,300 --> 00:04:17,130
So let's go ahead and head over

99
00:04:17,130 --> 00:04:20,012
to our app component and fix up this assertion.

100
00:04:21,839 --> 00:04:22,830
Over an app,

101
00:04:22,830 --> 00:04:27,030
at the top we will import comment box

102
00:04:27,030 --> 00:04:30,823
from same directory comment_box,

103
00:04:32,700 --> 00:04:35,520
and then I'm going to leave the div in here

104
00:04:35,520 --> 00:04:37,470
but I'm gonna delete the text

105
00:04:37,470 --> 00:04:41,673
and instead we're just gonna say comment box.

106
00:04:42,900 --> 00:04:46,620
All right, so we'll save this and awesome.

107
00:04:46,620 --> 00:04:49,443
App shows a comment box, just what we wanted.

108
00:04:50,340 --> 00:04:53,640
We can also verify this over in our browser.

109
00:04:53,640 --> 00:04:57,817
I'm going to go to localhost:8080

110
00:04:59,790 --> 00:05:03,875
and I can see I've got a text area with a button on here

111
00:05:03,875 --> 00:05:04,710
and it looks pretty ugly right now,

112
00:05:04,710 --> 00:05:05,543
but don't worry,

113
00:05:05,543 --> 00:05:07,833
we'll fix up the styling in just a little bit.

114
00:05:08,940 --> 00:05:10,170
Okay, so this looks great.

115
00:05:10,170 --> 00:05:12,633
Let's go ahead and continue in the next section.