1
00:00:00,984 --> 00:00:01,817
Narrator: In the last section,

2
00:00:01,817 --> 00:00:03,540
we spoke about why our test is currently failing

3
00:00:03,540 --> 00:00:06,120
and we spoke about how we're going to fix it up.

4
00:00:06,120 --> 00:00:08,640
So we're going to be making use of that moxios library

5
00:00:08,640 --> 00:00:10,860
that we installed just a little bit ago.

6
00:00:10,860 --> 00:00:11,820
If you're curious at all,

7
00:00:11,820 --> 00:00:13,830
you can check out the moxios documentation

8
00:00:13,830 --> 00:00:17,970
at github.com/axios/moxios.

9
00:00:17,970 --> 00:00:19,830
So this package is officially maintained

10
00:00:19,830 --> 00:00:23,850
by the Axios people just to make testing Axios more easy

11
00:00:23,850 --> 00:00:25,320
and more straightforward.

12
00:00:25,320 --> 00:00:26,153
If you want to,

13
00:00:26,153 --> 00:00:27,990
you can read some of the documentation on here.

14
00:00:27,990 --> 00:00:29,880
But otherwise, we're going to essentially cover

15
00:00:29,880 --> 00:00:32,280
everything you need to know about it.

16
00:00:32,280 --> 00:00:34,050
So back inside of our test file,

17
00:00:34,050 --> 00:00:36,870
we're going to add a beforeEach statement.

18
00:00:36,870 --> 00:00:38,070
And inside that beforeEach,

19
00:00:38,070 --> 00:00:41,160
we're going to set up that moxios Library.

20
00:00:41,160 --> 00:00:43,017
So I'm gonna add in a beforeEach

21
00:00:46,110 --> 00:00:49,140
and I'm also gonna add in an afterEach.

22
00:00:49,140 --> 00:00:51,420
Remember we use this afterEach to do some cleanup

23
00:00:51,420 --> 00:00:53,940
on our tests after they've been executed.

24
00:00:53,940 --> 00:00:55,380
So we'll talk about why we're adding in the afterEach

25
00:00:55,380 --> 00:00:57,570
in just a second, but for right now,

26
00:00:57,570 --> 00:00:59,730
let's focus on the beforeEach.

27
00:00:59,730 --> 00:01:00,840
Now at the top of the file,

28
00:01:00,840 --> 00:01:03,660
I'm gonna make sure that I import that moxios library.

29
00:01:03,660 --> 00:01:08,660
So I'm going to add a import for moxios from moxios like so.

30
00:01:11,850 --> 00:01:13,740
Then down inside the beforeEach,

31
00:01:13,740 --> 00:01:17,250
I'm gonna call moxios.install.

32
00:01:17,250 --> 00:01:18,750
So this function call right here

33
00:01:18,750 --> 00:01:20,700
is what's going to set up moxios

34
00:01:20,700 --> 00:01:22,710
and tell it to attempt to intercept

35
00:01:22,710 --> 00:01:25,800
any request that Axios tries to issue.

36
00:01:25,800 --> 00:01:28,320
So essentially, we are saying inside the beforeEach

37
00:01:28,320 --> 00:01:29,820
right before this test runs

38
00:01:29,820 --> 00:01:32,790
and right before we try to simulate that button click,

39
00:01:32,790 --> 00:01:35,550
turn off any requests that are being issued by Axios.

40
00:01:35,550 --> 00:01:37,653
Just stop them, nip them in the bud.

41
00:01:39,000 --> 00:01:42,030
Then after that, we're gonna add an additional line of code

42
00:01:42,030 --> 00:01:45,330
to tell moxios if it sees a request

43
00:01:45,330 --> 00:01:48,750
going over to that JSON API to get that list of comments,

44
00:01:48,750 --> 00:01:49,830
then it should attempt

45
00:01:49,830 --> 00:01:52,560
to automatically respond to it for us.

46
00:01:52,560 --> 00:01:56,070
So intercept that call and respond to it with some data

47
00:01:56,070 --> 00:02:00,300
and trick Axios into thinking that it just got a response.

48
00:02:00,300 --> 00:02:05,087
So to do so, we'll write out moxios.stubRequest

49
00:02:05,087 --> 00:02:08,520
and the first argument to this is going to be the URL

50
00:02:08,520 --> 00:02:10,592
that we want to intercept request to.

51
00:02:11,430 --> 00:02:13,560
So the URL that we want to intercept request to

52
00:02:13,560 --> 00:02:16,860
is listed inside of our actions index.js file

53
00:02:16,860 --> 00:02:19,980
inside of our fetchComments action creator.

54
00:02:19,980 --> 00:02:22,230
So you and I are trying to make a request

55
00:02:22,230 --> 00:02:24,660
over to this URL right here.

56
00:02:24,660 --> 00:02:27,870
So we want to watch for any request going to this URL.

57
00:02:27,870 --> 00:02:30,810
And if we see it, we want to intercept this request,

58
00:02:30,810 --> 00:02:33,180
exactly this one right here.

59
00:02:33,180 --> 00:02:36,010
So I'm going to copy that URL

60
00:02:37,410 --> 00:02:40,920
and then I'll pull it back over to this stubRequest function

61
00:02:40,920 --> 00:02:42,693
and paste it in like so.

62
00:02:44,640 --> 00:02:45,960
Then as a second argument,

63
00:02:45,960 --> 00:02:50,250
we're gonna customize how moxios responds to that request.

64
00:02:50,250 --> 00:02:53,580
So moxios is going to try to respond to this URL

65
00:02:53,580 --> 00:02:57,030
or anytime Axios tries to make a request to this URL.

66
00:02:57,030 --> 00:02:59,430
And as the second argument, we're gonna provide an object

67
00:02:59,430 --> 00:03:01,411
that's gonna be returned back to Axios

68
00:03:01,411 --> 00:03:03,750
and Axios is gonna be fooled into thinking

69
00:03:03,750 --> 00:03:06,120
this is the response that it just got back

70
00:03:06,120 --> 00:03:08,193
from this real API.

71
00:03:09,300 --> 00:03:12,420
So we're gonna first respond with the status of 200

72
00:03:12,420 --> 00:03:13,980
so that Axios thinks that the request

73
00:03:13,980 --> 00:03:15,750
was successfully issued.

74
00:03:15,750 --> 00:03:18,750
And then we'll also add on a response property as well.

75
00:03:18,750 --> 00:03:21,750
So this response thing is gonna be the actual data

76
00:03:21,750 --> 00:03:23,910
that gets served back to Axios.

77
00:03:23,910 --> 00:03:26,190
So this is gonna be our list of comments

78
00:03:26,190 --> 00:03:28,863
that eventually gets handed back to our application.

79
00:03:29,790 --> 00:03:31,440
So you and I are gonna fake out

80
00:03:31,440 --> 00:03:33,270
a list of comments right here.

81
00:03:33,270 --> 00:03:36,090
Remember that our list of comments coming back from this API

82
00:03:36,090 --> 00:03:37,860
is an array of objects,

83
00:03:37,860 --> 00:03:41,040
and every one of those objects has that name property

84
00:03:41,040 --> 00:03:43,380
and that was the only property we cared about.

85
00:03:43,380 --> 00:03:46,650
Remember we said out of this big list of objects right here,

86
00:03:46,650 --> 00:03:48,570
we were just going to assume that the name property

87
00:03:48,570 --> 00:03:51,183
was the comment text that we really cared about.

88
00:03:52,500 --> 00:03:54,150
So inside of this response thing,

89
00:03:54,150 --> 00:03:58,890
I'll add in an object with a name property of Fetched #1

90
00:03:58,890 --> 00:04:02,010
and that kinda indicates like fetched comment number one.

91
00:04:02,010 --> 00:04:04,080
And I'll put in just one more.

92
00:04:04,080 --> 00:04:06,723
I'll say name of Fetched #2.

93
00:04:08,370 --> 00:04:09,720
And that's it.

94
00:04:09,720 --> 00:04:12,690
So now anytime Axios tries to make a request to this API,

95
00:04:12,690 --> 00:04:15,450
we're going to instantly respond to it right here,

96
00:04:15,450 --> 00:04:18,360
instantly respond, and we're going to try to say,

97
00:04:18,360 --> 00:04:19,260
hey, you know what, Axios,

98
00:04:19,260 --> 00:04:20,970
here's the data that just came back.

99
00:04:20,970 --> 00:04:22,620
Don't worry, we took care of the request.

100
00:04:22,620 --> 00:04:25,170
This is the data that actually came back from the API,

101
00:04:25,170 --> 00:04:27,480
even though you and I just fabricated that data

102
00:04:27,480 --> 00:04:28,563
out of thin air.

103
00:04:29,520 --> 00:04:31,110
So now we can save this file

104
00:04:31,110 --> 00:04:32,760
and we'll check our terminal in just a second,

105
00:04:32,760 --> 00:04:35,550
but before we do, one last quick thing I wanna handle.

106
00:04:35,550 --> 00:04:37,560
So the afterEach statement right here,

107
00:04:37,560 --> 00:04:40,320
remember up here we installed that moxios mock,

108
00:04:40,320 --> 00:04:43,980
after our test runs, we're going to uninstall the mock.

109
00:04:43,980 --> 00:04:45,690
So uninstalling it makes sure that we're not

110
00:04:45,690 --> 00:04:48,330
going to accidentally stub out any other requests

111
00:04:48,330 --> 00:04:49,650
inside of our application

112
00:04:49,650 --> 00:04:52,080
with this same response right here.

113
00:04:52,080 --> 00:04:55,350
Now it's entirely probable that we will want to mock out

114
00:04:55,350 --> 00:04:57,060
other requests that are being issued,

115
00:04:57,060 --> 00:05:00,330
but we might not want to use the same stubbed request

116
00:05:00,330 --> 00:05:04,770
or respond with like the same Fetched #1 and Fetched #2.

117
00:05:04,770 --> 00:05:08,280
So inside the afterEach, we'll say moxios.uninstall.

118
00:05:08,280 --> 00:05:09,210
And that's just gonna make sure

119
00:05:09,210 --> 00:05:11,730
that we don't attempt to reuse this request

120
00:05:11,730 --> 00:05:12,900
or this stubbed request

121
00:05:12,900 --> 00:05:15,303
in some other location inside of our test suite.

122
00:05:16,530 --> 00:05:18,510
Okay, so that's pretty much it.

123
00:05:18,510 --> 00:05:20,580
Now we're going to flip back over to our terminal

124
00:05:20,580 --> 00:05:22,620
and see if our tests are working now.

125
00:05:22,620 --> 00:05:25,350
I still expect this thing to fail, right,

126
00:05:25,350 --> 00:05:28,380
because we do not have 500 comments coming back.

127
00:05:28,380 --> 00:05:30,990
We're only going to expect to see two.

128
00:05:30,990 --> 00:05:33,330
So I will update that right now.

129
00:05:33,330 --> 00:05:35,670
I'm gonna say expect finding li's,

130
00:05:35,670 --> 00:05:37,410
I expect to only see two now

131
00:05:37,410 --> 00:05:40,020
and they should have the text of like Fetched #1

132
00:05:40,020 --> 00:05:41,283
and Fetched #2.

133
00:05:42,260 --> 00:05:45,150
Okay, so I'll flip back over and check out my test suite.

134
00:05:45,150 --> 00:05:46,800
I gotta start it up really quickly.

135
00:05:46,800 --> 00:05:48,150
Let's take a pause right here

136
00:05:48,150 --> 00:05:49,680
and we'll continue in the next section

137
00:05:49,680 --> 00:05:51,450
and we'll see how our test suite does.

138
00:05:51,450 --> 00:05:53,220
Now, if your test do not pass still,

139
00:05:53,220 --> 00:05:55,740
that's totally fine and totally to be expected.

140
00:05:55,740 --> 00:05:56,940
So let's come back to the next section

141
00:05:56,940 --> 00:05:58,390
and just see how we're doing.