1
00:00:01,080 --> 00:00:02,370
-: In this section we're gonna move on

2
00:00:02,370 --> 00:00:05,460
to some tests around our save comment action creator.

3
00:00:05,460 --> 00:00:07,170
So our major goals here is to make sure

4
00:00:07,170 --> 00:00:10,050
that the action creator returns an action

5
00:00:10,050 --> 00:00:12,150
with the correct type and to also make sure

6
00:00:12,150 --> 00:00:14,970
that the type that or excuse the action that gets returned

7
00:00:14,970 --> 00:00:16,710
also has the comment that we provide

8
00:00:16,710 --> 00:00:19,080
to it on the payload property.

9
00:00:19,080 --> 00:00:20,670
So both these tests right here should be pretty

10
00:00:20,670 --> 00:00:22,110
darn straightforward.

11
00:00:22,110 --> 00:00:22,943
Let's flip back over

12
00:00:22,943 --> 00:00:25,250
to our code editor and we'll get started on them.

13
00:00:26,430 --> 00:00:27,960
So back inside my code editor,

14
00:00:27,960 --> 00:00:30,180
I'm gonna first find my actions directory

15
00:00:30,180 --> 00:00:33,090
and create a new test file inside of there.

16
00:00:33,090 --> 00:00:36,930
So inside of actions I'll make underscore underscore tests

17
00:00:36,930 --> 00:00:38,283
underscore underscore.

18
00:00:39,540 --> 00:00:42,120
And then inside there I'll make a new file.

19
00:00:42,120 --> 00:00:45,210
Now remember, usually we call this thing whatever the name

20
00:00:45,210 --> 00:00:47,580
of the file is, dot test dot js.

21
00:00:47,580 --> 00:00:51,480
In my opinion index dot test dot js, little bit strange.

22
00:00:51,480 --> 00:00:54,480
If you want to instead call this something like actions test

23
00:00:54,480 --> 00:00:57,240
dot js or action creators test dot js,

24
00:00:57,240 --> 00:00:58,740
that's totally fine as well.

25
00:00:58,740 --> 00:00:59,573
But I'm gonna stick

26
00:00:59,573 --> 00:01:02,580
with my convention that I said was the convention

27
00:01:02,580 --> 00:01:05,283
and call it index dot test dot js.

28
00:01:07,530 --> 00:01:08,760
Now inside of here,

29
00:01:08,760 --> 00:01:11,880
we'll first get started by importing our action creator

30
00:01:11,880 --> 00:01:15,000
from that index dot js file and the type

31
00:01:15,000 --> 00:01:17,553
of save comment from our types file as well.

32
00:01:18,420 --> 00:01:23,420
So I'll get save comment from actions and save comment

33
00:01:26,010 --> 00:01:30,120
the type right here from actions types.

34
00:01:34,800 --> 00:01:37,920
And inside of here, I'm going to group these two tests

35
00:01:37,920 --> 00:01:38,910
that I'm gonna put together

36
00:01:38,910 --> 00:01:41,790
together with a describe statement.

37
00:01:41,790 --> 00:01:44,370
So this is one case where I will use a describe statement

38
00:01:44,370 --> 00:01:46,620
even though I don't have any before eaches

39
00:01:46,620 --> 00:01:49,530
or anything like that, that I need to apply to these tests.

40
00:01:49,530 --> 00:01:53,100
Eventually we might have a bunch of different type tests

41
00:01:53,100 --> 00:01:55,170
around action creators inside this file.

42
00:01:55,170 --> 00:01:58,260
And so I think it would be kind of nice to group each set

43
00:01:58,260 --> 00:02:00,930
of tests for each action creator together

44
00:02:00,930 --> 00:02:02,670
with a described statement.

45
00:02:02,670 --> 00:02:07,560
So I'll give this a describe of save comment like so.

46
00:02:07,560 --> 00:02:10,259
And now inside the describe, we can freely say something

47
00:02:10,259 --> 00:02:14,000
like it has the correct type...

48
00:02:16,530 --> 00:02:21,530
and we can also do it as the correct payload as well.

49
00:02:22,830 --> 00:02:26,370
These are very easy tests to read from left to right.

50
00:02:26,370 --> 00:02:27,203
In this block,

51
00:02:27,203 --> 00:02:29,700
we are describing the save comment action creator.

52
00:02:29,700 --> 00:02:32,820
It has the correct type and it has the correct payload.

53
00:02:32,820 --> 00:02:34,473
And then if we eventually had other action creators

54
00:02:34,473 --> 00:02:36,450
that we wanted to write tests around,

55
00:02:36,450 --> 00:02:39,390
we can duplicate this describe block right here

56
00:02:39,390 --> 00:02:42,780
and have it maybe described something of like, I don't know,

57
00:02:42,780 --> 00:02:45,060
fetch comment or something like that.

58
00:02:45,060 --> 00:02:46,890
And then we could write out the same two tests

59
00:02:46,890 --> 00:02:48,490
for that action creator as well.

60
00:02:51,150 --> 00:02:52,500
All right, so let's first get started

61
00:02:52,500 --> 00:02:54,693
with our correct type test right here.

62
00:02:55,740 --> 00:02:57,030
So these tests that we're gonna write

63
00:02:57,030 --> 00:02:58,770
for both these pretty straightforward,

64
00:02:58,770 --> 00:03:00,660
we're just gonna call the action creator,

65
00:03:00,660 --> 00:03:01,890
get the action back,

66
00:03:01,890 --> 00:03:05,190
and then write an expectation about the action.

67
00:03:05,190 --> 00:03:08,850
So I'll say constant action is save comment.

68
00:03:08,850 --> 00:03:12,360
So we're just gonna directly call the action creator

69
00:03:12,360 --> 00:03:14,910
and then save it inside of a variable.

70
00:03:14,910 --> 00:03:19,713
And now we can write an expectation about action dot type.

71
00:03:20,550 --> 00:03:24,060
In this case, we wanna make sure action dot type is equal

72
00:03:24,060 --> 00:03:25,323
to the type save comment

73
00:03:25,323 --> 00:03:27,603
that we just imported up here at the top.

74
00:03:29,520 --> 00:03:34,053
So we'll say to equal, save comment. Not bad.

75
00:03:35,880 --> 00:03:37,380
And then we'll take care of the second one right now

76
00:03:37,380 --> 00:03:39,210
cause I think it should be pretty quick.

77
00:03:39,210 --> 00:03:41,020
So we'll again make an action

78
00:03:41,880 --> 00:03:43,560
but this time we want to make sure

79
00:03:43,560 --> 00:03:46,320
that we pass in a payload of some sort

80
00:03:46,320 --> 00:03:48,810
or we pass in a comment that should be assigned

81
00:03:48,810 --> 00:03:50,250
to the payload.

82
00:03:50,250 --> 00:03:52,080
So I will call save comment

83
00:03:52,080 --> 00:03:56,043
and I'll pass in a string of new comment.

84
00:03:59,700 --> 00:04:02,500
So then I will expect action dot payload

85
00:04:03,510 --> 00:04:06,840
to equal the exact same string that we put right there.

86
00:04:06,840 --> 00:04:09,870
So new comment and as usual,

87
00:04:09,870 --> 00:04:11,490
do make sure you have the same spelling

88
00:04:11,490 --> 00:04:13,500
and the same capitalization

89
00:04:13,500 --> 00:04:15,750
cause you're gonna get a comparison between exactly

90
00:04:15,750 --> 00:04:18,149
the string right here and the string right here.

91
00:04:19,200 --> 00:04:20,670
So now we can save this file

92
00:04:20,670 --> 00:04:24,360
and I think that's about all we have to do inside of here.

93
00:04:24,360 --> 00:04:25,650
So we are checking to make sure

94
00:04:25,650 --> 00:04:27,450
that the action has the correct type

95
00:04:27,450 --> 00:04:29,040
and the correct payload.

96
00:04:29,040 --> 00:04:31,350
Of course, this is a rather straightforward test

97
00:04:31,350 --> 00:04:32,250
that we're putting together

98
00:04:32,250 --> 00:04:34,620
or we're seeing a very straightforward action creator.

99
00:04:34,620 --> 00:04:36,030
So we could definitely end up

100
00:04:36,030 --> 00:04:38,340
with some more complicated action creators

101
00:04:38,340 --> 00:04:39,450
than what we're seeing right now.

102
00:04:39,450 --> 00:04:41,250
And we actually will be adding

103
00:04:41,250 --> 00:04:43,650
in another action creator in a little bit just

104
00:04:43,650 --> 00:04:45,600
to see a little bit more complicated test.

105
00:04:45,600 --> 00:04:46,433
So don't worry,

106
00:04:46,433 --> 00:04:47,640
we'll do something a little bit more complicated

107
00:04:47,640 --> 00:04:49,743
than this to give you a good example.

108
00:04:50,790 --> 00:04:51,840
So let's flip back over

109
00:04:51,840 --> 00:04:54,240
to our terminal and see how our tests are doing.

110
00:04:55,230 --> 00:04:58,170
So it looks like I've got my actions index dot

111
00:04:58,170 --> 00:05:01,860
test dot js file right here and everything is passing.

112
00:05:01,860 --> 00:05:02,693
Now as usual,

113
00:05:02,693 --> 00:05:06,000
I would encourage you to try to make these tests break.

114
00:05:06,000 --> 00:05:08,460
I'm not going to try because it just takes me a while

115
00:05:08,460 --> 00:05:10,440
to actually run these tests,

116
00:05:10,440 --> 00:05:12,420
but of course feel free to pause the video

117
00:05:12,420 --> 00:05:14,970
and try to make each of them break just to say, yep,

118
00:05:14,970 --> 00:05:18,600
I feel confident that this test is working the way I expect.

119
00:05:18,600 --> 00:05:20,220
So this is looking pretty good.

120
00:05:20,220 --> 00:05:21,780
Let's continue in the next section.

121
00:05:21,780 --> 00:05:24,360
And I think the last thing we have to do is put together

122
00:05:24,360 --> 00:05:27,780
our comment list component and write some tests around it.

123
00:05:27,780 --> 00:05:29,070
So quick break and we'll take care

124
00:05:29,070 --> 00:05:30,470
of that in the next section.