1
00:00:02,100 --> 00:00:06,510
So in the last lecture we wrote our first test, that's of course nice,

2
00:00:06,540 --> 00:00:10,360
let's now write another test for the same component for now.

3
00:00:10,530 --> 00:00:16,560
So I'll copy this it function and inside the described function, I'll just paste it in there,

4
00:00:16,560 --> 00:00:18,460
now what else could we test?

5
00:00:18,750 --> 00:00:21,750
Well of course we could obviously test the opposite,

6
00:00:21,780 --> 00:00:29,980
we want to have three navigation items if we are authenticated, so for this we simply need to pass the

7
00:00:30,000 --> 00:00:38,280
isAuthenticated prop and adjust our test. So we should render three navigation elements if authenticated

8
00:00:38,640 --> 00:00:42,110
not if not, but if authenticated.

9
00:00:42,240 --> 00:00:45,930
Now for that, we need to change the component we render,

10
00:00:45,930 --> 00:00:53,340
it's no longer navigation items but navigation items with a property isAuthenticated and passing it

11
00:00:53,340 --> 00:01:00,420
like this will automatically pass it as true, then we expect to find navigation items but we expect to

12
00:01:00,420 --> 00:01:02,350
find three of them

13
00:01:02,610 --> 00:01:05,660
and that's all. With npm tests still running,

14
00:01:05,670 --> 00:01:09,850
all you have to do is save this and now you should see that

15
00:01:09,910 --> 00:01:12,100
two tests passed.

16
00:01:12,330 --> 00:01:15,450
Now of course we can write multiple tests like this

17
00:01:15,450 --> 00:01:21,510
but if we constantly do the same at the beginning of the test namely we rendered a wrapper even though

18
00:01:21,510 --> 00:01:24,300
the props changed but we can do this differently too,

19
00:01:24,540 --> 00:01:31,910
so if we constantly do the same, there is a helper method we can use inside the described function here.

20
00:01:31,950 --> 00:01:39,360
It's the beforeEach function, as the name suggests, this is a function which will automatically be executed

21
00:01:39,380 --> 00:01:44,470
but for each of your tests, you also have an afterEach function for cleanup

22
00:01:44,520 --> 00:01:50,640
after all your tests if you need do. So here it's beforeEach and then beforeEach, we can do some general

23
00:01:50,670 --> 00:01:54,220
set up of course, beforeEach takes a function as an argument

24
00:01:54,240 --> 00:01:57,780
and this is the function which will get executed before each test.

25
00:01:57,780 --> 00:02:03,030
So with that what I'll do is I'll create a variable wrapper with the let keyword

26
00:02:03,270 --> 00:02:10,670
and then in the beforeEach, I want to render this component with the shallow function and store it in this

27
00:02:10,680 --> 00:02:12,950
wrapper variable.

28
00:02:12,990 --> 00:02:20,370
Now since all it functions are executed in this outer describe function, the wrapper variable is available

29
00:02:20,440 --> 00:02:21,460
in all of them

30
00:02:21,660 --> 00:02:25,220
so all we have to do is get rid of the const keyword, like this

31
00:02:25,410 --> 00:02:27,720
and we now have access to the wrapper.

32
00:02:27,720 --> 00:02:30,740
Now with that if we save this, it should re-execute everything

33
00:02:31,050 --> 00:02:34,490
and now, we of course have a failed test.

34
00:02:34,620 --> 00:02:40,510
We can now look at it, the test which should render three navigation item elements if autheticated fails

35
00:02:40,740 --> 00:02:48,150
and it makes sense that it does because we never are authenticated, we only render the wrapper

36
00:02:48,180 --> 00:02:52,530
once here and we don't pass isAuthenticated to it

37
00:02:52,560 --> 00:02:54,110
so we are unauthenticated,

38
00:02:54,330 --> 00:02:58,570
this test of course uses the same wrapper and hence fails.

39
00:02:58,590 --> 00:03:01,970
Now what we can do here is two things,

40
00:03:01,980 --> 00:03:09,420
the first is that we can of course use the wrapper and set it equal to shallow with navigation items

41
00:03:09,420 --> 00:03:17,080
here and pass isAuthenticated as we did before, if we save this, both tests succeed.

42
00:03:17,520 --> 00:03:24,000
That is one option but we can also use another helpful method of the enzyme package, we can access the

43
00:03:24,000 --> 00:03:24,810
wrapper

44
00:03:25,050 --> 00:03:29,500
and then there is a set props method we can execute on that wrapper,

45
00:03:29,580 --> 00:03:37,500
so on anything which stores a shallowy or other rendered react element. And to set props, we simply

46
00:03:37,500 --> 00:03:43,770
pass a javascript object with key value pairs where the keys are the prop names and the values,

47
00:03:43,830 --> 00:03:45,740
well the values of the props

48
00:03:45,990 --> 00:03:50,320
so here we could set isAuthenticated to true now.

49
00:03:50,580 --> 00:03:54,310
And now if we save, the second test also still passes

50
00:03:54,450 --> 00:04:00,420
now with the more elegant set props helper method from the enzyme package. This is how you can write

51
00:04:00,420 --> 00:04:03,610
multiple tests and have them to work together nicely.