1
00:00:00,988 --> 00:00:02,790
-: In the last section, we spoke about how we're gonna test

2
00:00:02,790 --> 00:00:06,030
out our comment fetching functionality

3
00:00:06,030 --> 00:00:10,080
by using an integration test rather than a unit test.

4
00:00:10,080 --> 00:00:12,480
Whenever we start making integration tests

5
00:00:12,480 --> 00:00:13,313
they're not really tied

6
00:00:13,313 --> 00:00:16,800
to any particular one part of our application.

7
00:00:16,800 --> 00:00:18,870
So we're going to create a new directory

8
00:00:18,870 --> 00:00:22,170
right inside of our SRC folder that's gonna house all

9
00:00:22,170 --> 00:00:24,840
the different integration tests we put together.

10
00:00:24,840 --> 00:00:27,150
So inside of SRC I'll make

11
00:00:27,150 --> 00:00:29,500
tests, underscore, underscore again

12
00:00:30,540 --> 00:00:32,670
and then inside there I'm gonna make a new test

13
00:00:32,670 --> 00:00:36,860
file called integrations dot test dot js.

14
00:00:36,860 --> 00:00:38,070
So the idea here is

15
00:00:38,070 --> 00:00:41,640
that this file is gonna hold all of our integration tests.

16
00:00:41,640 --> 00:00:44,040
As your application starts to grow in size

17
00:00:44,040 --> 00:00:45,540
it might not make sense to put all

18
00:00:45,540 --> 00:00:47,940
of your integration tests inside of one file.

19
00:00:47,940 --> 00:00:49,911
So you might eventually call it something like

20
00:00:49,911 --> 00:00:54,911
comments integrations or something like that

21
00:00:55,320 --> 00:00:57,000
and then put all the integration tests

22
00:00:57,000 --> 00:01:00,120
around comment functionality inside that one file.

23
00:01:00,120 --> 00:01:02,190
But for right now, we've got a small application

24
00:01:02,190 --> 00:01:05,553
so I'm happy with just integrations dot test dot js.

25
00:01:06,810 --> 00:01:09,210
Now, inside of here, we'll get started

26
00:01:09,210 --> 00:01:10,290
by importing a couple different pieces

27
00:01:10,290 --> 00:01:12,210
of code that we're probably gonna need to

28
00:01:12,210 --> 00:01:15,330
test the entire application in one go.

29
00:01:15,330 --> 00:01:16,440
We'll definitely need react

30
00:01:16,440 --> 00:01:19,740
because we'll probably put some JSX inside this file.

31
00:01:19,740 --> 00:01:22,830
We'll almost definitely need the mount function from Enzyme

32
00:01:22,830 --> 00:01:23,730
because we'll want to do

33
00:01:23,730 --> 00:01:26,370
full DOM rendering and then interact with the application

34
00:01:26,370 --> 00:01:27,520
after it gets rendered.

35
00:01:28,500 --> 00:01:30,450
We'll probably want our Root component

36
00:01:30,450 --> 00:01:33,300
because we definitely want to involve Redux in this test.

37
00:01:34,470 --> 00:01:36,210
And then I think finally the last thing that we

38
00:01:36,210 --> 00:01:39,960
probably need is our App component

39
00:01:39,960 --> 00:01:41,700
because the App component really serves

40
00:01:41,700 --> 00:01:43,260
as the root component of sorts

41
00:01:43,260 --> 00:01:46,530
of our application that renders all the other components.

42
00:01:46,530 --> 00:01:51,530
So I'm going to get our App from components...App.

43
00:01:53,010 --> 00:01:55,290
Then underneath that we'll write out the test itself.

44
00:01:55,290 --> 00:01:59,760
So I'll say it...can fetch a list of comments

45
00:01:59,760 --> 00:02:01,203
and display them.

46
00:02:03,540 --> 00:02:05,670
Okay, so I'll first get started by writing

47
00:02:05,670 --> 00:02:07,830
out a couple of comments to guide ourselves

48
00:02:07,830 --> 00:02:09,870
in how this test is going to work.

49
00:02:09,870 --> 00:02:14,870
So essentially we want to attempt to render the entire app.

50
00:02:16,710 --> 00:02:21,710
We then want to find the fetch comments button and click it.

51
00:02:24,180 --> 00:02:27,000
And then ideally we should just be able to say, hey

52
00:02:27,000 --> 00:02:32,000
expect to find a list of comments like 500 L.I.'s

53
00:02:32,670 --> 00:02:36,330
because remember that API returns 500 comments to us.

54
00:02:36,330 --> 00:02:39,330
Maybe we won't go for necessarily 500 L.I.'s.

55
00:02:39,330 --> 00:02:41,400
We'll just say, let's try to find a list of comments

56
00:02:41,400 --> 00:02:42,550
and be happy with that.

57
00:02:43,740 --> 00:02:47,190
So this is the general approach that we're going to use.

58
00:02:47,190 --> 00:02:48,090
I'll be honest with you

59
00:02:48,090 --> 00:02:49,800
the final code that we're gonna write is gonna be

60
00:02:49,800 --> 00:02:52,050
a little bit more complicated than what you see right here

61
00:02:52,050 --> 00:02:54,480
but we're going to run into a couple stumbling blocks

62
00:02:54,480 --> 00:02:57,000
and figure out what's going on along the way.

63
00:02:57,000 --> 00:02:58,590
So let's take a quick pause right here.

64
00:02:58,590 --> 00:03:00,810
We'll connect the next section and start putting together

65
00:03:00,810 --> 00:03:02,973
the actual implementation of this test.