1
00:00:02,680 --> 00:00:08,200
So let's now write an integration test and for integration testing, if we have a look at all our code,

2
00:00:08,680 --> 00:00:11,050
which function could we use there?

3
00:00:11,050 --> 00:00:16,360
Well we got, in the app.js file, we got add user which uses a lot of other functions which has a lot of

4
00:00:16,360 --> 00:00:17,110
dependencies.

5
00:00:17,140 --> 00:00:19,840
So testing this function would be an integration test

6
00:00:19,960 --> 00:00:24,430
but this is a function that does neither take an input nor return an output,

7
00:00:24,430 --> 00:00:27,400
instead it's a function that really added something, that DOM,

8
00:00:27,460 --> 00:00:32,620
so this is something which you might want to test in an end-to-end testing scenario or in a user interface

9
00:00:32,620 --> 00:00:40,360
test but an integration test would be kind of hard here, we would have to do a lot of manual DOM interaction

10
00:00:40,450 --> 00:00:44,710
inside of our test which you can do but which you might not want to do.

11
00:00:45,040 --> 00:00:49,900
Instead there is something else I can test and that is basically a part of that function you could say.

12
00:00:50,590 --> 00:00:56,320
In the end what I'm doing in add user is I do select a couple of elements, then I do validate the input

13
00:00:56,620 --> 00:00:59,670
and then I generate a text based on the input.

14
00:00:59,680 --> 00:01:04,660
Now we could outsource this into a separate function and that is a part of writing modular code

15
00:01:04,690 --> 00:01:05,860
that I mentioned earlier,

16
00:01:05,960 --> 00:01:11,110
you are forced to write modular code which also makes your code easier to manage and reuse though.

17
00:01:11,260 --> 00:01:18,640
So in util.js, I can export a new function and let's name it check and generate or whatever you want

18
00:01:18,640 --> 00:01:19,660
to do.

19
00:01:20,140 --> 00:01:27,710
Now check and generate will get a name and an age as an input and then I will go to my app.js file

20
00:01:27,980 --> 00:01:34,350
and I will grab that validation code and move it into check and generate to validate input for

21
00:01:34,380 --> 00:01:39,620
and now that's important, for the name here and then there, for the age

22
00:01:39,620 --> 00:01:41,240
like this

23
00:01:41,240 --> 00:01:47,840
and then if we make it past this if block, I will return a call to generate text where I pass a name and age

24
00:01:47,870 --> 00:01:49,670
because that is what I then return here,

25
00:01:49,670 --> 00:01:52,400
I return the checked text.

26
00:01:52,670 --> 00:02:00,620
So in app.js where I'm using this, output text in the end just the result of my call to check and generate,

27
00:02:00,920 --> 00:02:07,130
I don't need validate input here anymore, I don't generate text anymore, I'll just import check and generate,

28
00:02:07,130 --> 00:02:14,390
this new function, I'll import that in app.js and down there, output text is the result of check and generate and

29
00:02:15,060 --> 00:02:24,230
I can move that up here and here I can now simply check if not output text, so if we did return let's

30
00:02:24,230 --> 00:02:28,730
say false here, we return false if validation fails,

31
00:02:28,730 --> 00:02:34,640
so if this is returned and therefore if this is not true-ish, if it is false for example, then it will

32
00:02:34,640 --> 00:02:38,390
return an add user too and it will not continue creating that element.

33
00:02:38,390 --> 00:02:43,340
So now this is the tweak add user function and this gives us the check and generate function which is

34
00:02:43,340 --> 00:02:45,810
great to use in an integration test.

35
00:02:46,100 --> 00:02:52,340
So let's write the test for it and I want to test if my validity works correctly and I then get the

36
00:02:52,340 --> 00:03:01,460
expected text back, so I should generate a valid text output, something like this and then here in this

37
00:03:01,460 --> 00:03:09,320
function, I will test my check and generate function which I therefore have to import and I can simply

38
00:03:09,320 --> 00:03:17,440
create my text with check and generate and I pass Max and 29 here and I would expect this

39
00:03:17,710 --> 00:03:25,460
text to be equal to Max 29 years old.

40
00:03:25,510 --> 00:03:30,820
So my expectation actually is the same as in this unit test but it's not a simple unit test because the

41
00:03:30,820 --> 00:03:37,600
function we're testing has more to it. We could fail because validation fails or because generate text

42
00:03:37,600 --> 00:03:43,510
fails, however generate text is kind of ruled out because we have a separate unit test for this and this

43
00:03:43,510 --> 00:03:48,640
is also how you want to write your test by the way. You want to ensure that you drill down like to the

44
00:03:48,940 --> 00:03:55,360
smallest possible level and write unit tests for all your units, so write a test for generate text would

45
00:03:55,360 --> 00:04:02,110
also be worth writing one for validate input and then your integration tests really just rely on the

46
00:04:02,110 --> 00:04:07,810
units being tested and ensure that the units also work together well, so this is then the idea behind

47
00:04:07,930 --> 00:04:09,670
an integration test.

48
00:04:09,670 --> 00:04:19,150
So here I have this test and if I now save this, it actually fails. Now I get an error that validate input

49
00:04:19,150 --> 00:04:24,910
is not defined here and that's true because I do export validate input,

50
00:04:24,910 --> 00:04:26,470
I don't need to do that anymore,

51
00:04:26,470 --> 00:04:31,790
I should instead create it or define it as a constant,

52
00:04:31,790 --> 00:04:37,130
the same is true for generate text so that I can use these functions directly in the util.js file

53
00:04:37,670 --> 00:04:44,360
and then at the bottom, I should also export generate text and assign the generate text constant here

54
00:04:44,720 --> 00:04:51,130
and also export validate input maybe and assign that constant, so that I could use it in other files too

55
00:04:51,170 --> 00:04:55,770
and now you see my tests passed, both tests passed.

56
00:04:55,800 --> 00:05:02,270
Now the idea about the integration test is that if I do change something in my check and generate function,

57
00:05:02,750 --> 00:05:12,380
for example here I use my validate input function incorrectly, so the result of that is used incorrectly,

58
00:05:12,420 --> 00:05:13,590
now it fails

59
00:05:13,740 --> 00:05:17,010
and now this is a great example of why I have an integration test.

60
00:05:17,100 --> 00:05:21,840
I could have a separate test in validate input and validate input does work correctly,

61
00:05:21,840 --> 00:05:27,780
I can tell you that but my error is directly here in check and generate, I'm using the result of validate

62
00:05:27,810 --> 00:05:32,700
input incorrectly by not checking for it being false but for it being true

63
00:05:32,700 --> 00:05:39,450
and this means if my name is valid, then I actually return false which is of course the wrong logic in

64
00:05:39,450 --> 00:05:40,770
check and generate.

65
00:05:40,770 --> 00:05:46,860
So even though my units work correctly, the combination of the units fails because I have an error here

66
00:05:47,250 --> 00:05:53,160
and this again shows you the power of tests and why integration tests makes sense too and unit tests alone

67
00:05:53,400 --> 00:05:58,500
could not be enough because all units could be working, if you are combining them incorrectly,

68
00:05:58,500 --> 00:05:59,830
you still have a problem,

69
00:05:59,850 --> 00:06:01,150
so now it's working again though.