1
00:00:02,430 --> 00:00:06,480
And there, this first function makes up for a great first unit test.

2
00:00:06,480 --> 00:00:11,820
It has no other dependencies because it does not call any other function, it does not reach out to the

3
00:00:11,820 --> 00:00:13,500
web or anything like that,

4
00:00:13,500 --> 00:00:17,440
it simply takes input, two arguments, and returns an output

5
00:00:17,790 --> 00:00:24,620
and this would be a great example for a simple unit test we can write. Now to write a test for this function,

6
00:00:24,690 --> 00:00:29,940
you create a separate file into which you'll store your tests and you typically name that file like

7
00:00:29,940 --> 00:00:36,990
the file you're testing, util and then .spec or .test.js. The name is up to you, jest will

8
00:00:36,990 --> 00:00:41,880
automatically detect files with .test or .spec in them, it will run them automatically

9
00:00:41,880 --> 00:00:49,140
once you run jest, which we'll do in a second. So I have my utiltest.js file and now I want to test my

10
00:00:49,140 --> 00:00:54,270
generate text function. For that I first of all need to import it here,

11
00:00:54,480 --> 00:01:02,270
I will use destructuring syntax here to require something from util,

12
00:01:02,280 --> 00:01:07,470
so from that util file where the code is sourced and then destructuring syntax simply means I pull

13
00:01:07,470 --> 00:01:13,170
out some items from the object which is in the end exported by the util file and it will pull out the

14
00:01:13,170 --> 00:01:14,490
generate text function.

15
00:01:14,490 --> 00:01:20,720
So essentially I import the generate text function into my utiltest.js file and by the way, this is

16
00:01:20,710 --> 00:01:24,360
the native way of importing in jest tests.

17
00:01:24,360 --> 00:01:31,920
You could think that you can also use like ES6 imports if you had respective exports in your file

18
00:01:31,920 --> 00:01:35,450
of course, something like this but this will not work,

19
00:01:35,520 --> 00:01:39,240
not only because I'm not using ES6 exports here,

20
00:01:39,240 --> 00:01:40,260
that is also a problem,

21
00:01:40,260 --> 00:01:42,000
but even if I would use them,

22
00:01:42,000 --> 00:01:46,800
this is not a syntax natively supported by jest, this Node.js

23
00:01:46,810 --> 00:01:53,640
like import syntax is supported by jest and therefore I also wrote my code to use Node.js exports

24
00:01:53,820 --> 00:01:56,720
because that made it easier to implement jest.

25
00:01:56,880 --> 00:02:02,210
Obviously you can also make it work with ES modules, like you use it in React or Angular apps

26
00:02:02,460 --> 00:02:05,560
but there you need a more complex build workflow,

27
00:02:05,610 --> 00:02:10,700
you need some additional packages and I did not want to spend a lot of times on the setup,

28
00:02:10,710 --> 00:02:12,590
I want to spend time on testing,

29
00:02:12,610 --> 00:02:18,400
therefore I use this syntax. So now I'm using or I'm importing generate text in this file.

30
00:02:18,420 --> 00:02:23,010
Now we can write our first test and for that, we can simply write test here.

31
00:02:23,010 --> 00:02:27,850
This is a function which is now globally available or which will be globally available

32
00:02:27,930 --> 00:02:34,620
when we run our tests with jest, so it's a function provided by jest in the end and this function allows

33
00:02:34,620 --> 00:02:38,580
us to define a single test. Now we can give the test a name,

34
00:02:38,580 --> 00:02:44,850
that's the first argument or not really a name, more of a description you could say, something like should

35
00:02:44,880 --> 00:02:47,960
output name and age.

36
00:02:47,970 --> 00:02:54,060
Typically you kind of define what you want to test in this name or in this description,

37
00:02:54,060 --> 00:02:56,790
so which output are you testing for,

38
00:02:56,790 --> 00:02:59,250
you try to put that into your description.

39
00:02:59,310 --> 00:03:04,550
Ultimately you can put whichever text you want in here but it should be kind of descriptive.

40
00:03:04,590 --> 00:03:10,700
The second function argument is then an anonymous function which you pass in, which is the function jest

41
00:03:10,710 --> 00:03:13,440
will execute to really run your tests,

42
00:03:13,440 --> 00:03:19,170
so in this function you add your testing code, your code that will be executed.

43
00:03:19,350 --> 00:03:25,650
And now here, we can generate some text by calling generate text and storing that in a text constant

44
00:03:26,100 --> 00:03:33,150
and there, we'll pass in Max and 29 let's say. Now that is also what I tested here manually, entering

45
00:03:33,150 --> 00:03:38,040
Max and 29 added a new item with text Max and 29 years old,

46
00:03:38,040 --> 00:03:42,150
now I'm effectively testing that part where this text is generated,

47
00:03:42,150 --> 00:03:48,630
so not where the whole item is generated but only this text. Max 29 years old is what I expect

48
00:03:48,750 --> 00:03:54,570
as an output of generate text because if we have a look at generate text, well then we return a text

49
00:03:54,570 --> 00:04:01,510
here where we have the name and then in brackets, 29 or whatever the age is, 29 years old.

50
00:04:01,800 --> 00:04:07,860
Now if we have that expectation, we should formulate that here in the test and we do this with the expect

51
00:04:07,860 --> 00:04:13,880
function, which is also provided by jest. Now if you would use a different setup with let's say mocha

52
00:04:13,890 --> 00:04:14,720
and chai,

53
00:04:14,880 --> 00:04:20,790
then test would be a function defined by your test runner whereas expect would be a function provided

54
00:04:20,790 --> 00:04:26,910
by your assertion library and most assertion libraries work with the expect function because tests are

55
00:04:26,910 --> 00:04:29,440
pretty descriptive in terms of function names,

56
00:04:29,580 --> 00:04:32,480
we write a test and then we expect something.

57
00:04:32,490 --> 00:04:40,230
Now here, we expect that text, so we pass the thing we want to look into,

58
00:04:40,260 --> 00:04:41,510
we want to compare,

59
00:04:41,610 --> 00:04:49,500
we expect text is equal to a specific text and we do this with a bunch of helper functions that we can

60
00:04:49,500 --> 00:04:57,750
now chain on our expectable object here and there, you see we have a lot of functions where we could

61
00:04:57,750 --> 00:05:04,330
say we expect text to be not a number for example or to be null or just to be

62
00:05:04,530 --> 00:05:10,690
and then here as an argument to the to be function, we pass the value we expect text to be. That

63
00:05:10,830 --> 00:05:18,060
could be a number but that could be also Max twenty nine years old which is exactly the output

64
00:05:18,060 --> 00:05:20,280
we do expect to get because it is the output

65
00:05:20,280 --> 00:05:27,390
we can also see here and now with that, we have our first tests defined. Now to run this test with the

66
00:05:27,390 --> 00:05:28,560
jest package,

67
00:05:28,560 --> 00:05:34,950
I will tweak my package.json file, there we have jest installed and we have a script up here,

68
00:05:34,980 --> 00:05:41,640
the test script which is kind of invalid right now, here I will just run jest and this will automatically

69
00:05:41,640 --> 00:05:48,120
search for files with .test or .spec in the name and execute them or which end with .test.js

70
00:05:48,120 --> 00:05:55,620
or .spec.js I should say.  So now with that added, we can simply run npm test down there

71
00:05:55,830 --> 00:06:01,850
in a normal terminal navigated project folder and jest will automatically execute all our testing

72
00:06:01,850 --> 00:06:02,990
files

73
00:06:03,050 --> 00:06:05,720
and here we get a beautiful green output.

74
00:06:05,720 --> 00:06:11,990
It found one test which passed and there we see the one test which passed successfully, where it should

75
00:06:12,020 --> 00:06:13,310
output name and age

76
00:06:13,400 --> 00:06:15,310
and that succeeded.

77
00:06:15,350 --> 00:06:22,190
Now this is great because now if we ever change something here, let's say we accidentally output the

78
00:06:22,220 --> 00:06:28,240
age here too, we change something in that function and the original function and we break it,

79
00:06:28,400 --> 00:06:35,180
if we save this and then we run our tests again, we now actually get a failed test and that is exactly

80
00:06:35,180 --> 00:06:37,300
where tests can help us a lot.

81
00:06:37,340 --> 00:06:44,600
We get a failed test, we see which test failed, should output name and age and jest even gives us some information

82
00:06:44,600 --> 00:06:46,290
on what failed there.

83
00:06:46,370 --> 00:06:53,870
We see that we expect that Max 29 years old but we got 29 29 years old and

84
00:06:53,870 --> 00:06:57,180
this now helps us debug our code and fix our code.

85
00:06:57,200 --> 00:07:01,370
Of course this is kind of a constructed example here but you could have a typo like this,

86
00:07:01,460 --> 00:07:09,470
you could be misusing some variable or some argument and now if we fix that, we can indeed run this again

87
00:07:09,500 --> 00:07:12,260
and get that test passed. By the way,

88
00:07:12,260 --> 00:07:20,970
you can also watch with jest, you can add --watch here and now you run npm test, jest will actually

89
00:07:20,970 --> 00:07:26,400
keep on watching and you can control the watcher with the shortcuts that are shown there to for example

90
00:07:26,520 --> 00:07:31,260
force a run of all your tests again or whatever you want to do

91
00:07:31,470 --> 00:07:39,440
and it also means that now if I do change my file here and I save, jest automatically reruns my tests.

92
00:07:39,450 --> 00:07:44,820
So this is great, having this run all the time and therefore ensuring that we get errors right as we

93
00:07:44,820 --> 00:07:45,660
change something,

94
00:07:45,720 --> 00:07:51,230
so that is another great option and that is our first unit test here.

95
00:07:51,280 --> 00:07:53,010
Now this is a first simple unit test,

96
00:07:53,010 --> 00:07:58,740
now before we move onto integration tests, just a quick example for a different kind of test that could

97
00:07:58,740 --> 00:08:00,090
also make sense.

98
00:08:00,090 --> 00:08:07,350
We should also make sure that it does not just return the valid response here because we can get this

99
00:08:07,560 --> 00:08:11,800
with the this trick as well, if I copy the output there,

100
00:08:11,880 --> 00:08:23,890
I can also just use return and then this text here and if I do that, then my first test will always succeed,

101
00:08:29,080 --> 00:08:34,480
I quickly comment out that second snippet, so my test will now always succeed but I have an error

102
00:08:34,810 --> 00:08:37,510
in my function and we have a second test

103
00:08:37,520 --> 00:08:41,110
or we can add a second test where we confirm that this is not the case.

104
00:08:41,260 --> 00:08:49,890
So let's say we say should output dataless text or whatever you want to name it

105
00:08:50,100 --> 00:08:59,220
and there I could also generate a text with generate text but I pass an empty string and I pass null

106
00:08:59,520 --> 00:09:05,430
as a number here and then I can expect that text should be,

107
00:09:06,340 --> 00:09:07,820
what should it be like?

108
00:09:07,900 --> 00:09:13,330
It should be basically just a blank and then nothing

109
00:09:13,330 --> 00:09:14,130
years old,

110
00:09:14,140 --> 00:09:15,050
right.

111
00:09:15,220 --> 00:09:17,470
Well let's give this a try. If I save that,

112
00:09:17,770 --> 00:09:25,540
it fails because I always get back Max 29 years old because I broke that function. I had a false positive

113
00:09:25,660 --> 00:09:30,520
for the first test because I returned the value which I expected there but the value didn't take

114
00:09:30,520 --> 00:09:32,110
the inputs into account,

115
00:09:32,110 --> 00:09:37,000
now I can fix this of course and return to the function form I had before

116
00:09:40,650 --> 00:09:47,690
and now the second text will fail because there, I should expect null years old of course,

117
00:09:47,690 --> 00:09:49,180
I passed null not nothing

118
00:09:49,190 --> 00:09:54,430
and now there I passed two and I have confirmation that I don't have a false positive here.

119
00:09:54,480 --> 00:10:00,130
So adding a second test like this might make sense as well to kind of check for the opposite

120
00:10:00,230 --> 00:10:06,800
or check the same thing with different arguments, though you could do the same in one and the same test,

121
00:10:07,160 --> 00:10:10,010
you can have multiple expects here too

122
00:10:10,160 --> 00:10:17,660
so you could generate Anna 28 here as well and then simply add another expectation here, text two

123
00:10:20,570 --> 00:10:26,280
to be Anna 28 years and now this should also pass

124
00:10:26,280 --> 00:10:32,580
but having such double checks that is the main thing, can make a lot of sense to avoid false positives

125
00:10:32,580 --> 00:10:36,320
and here I have a double check as well as testing the opposite.

126
00:10:36,330 --> 00:10:39,350
So what happens if I call that function incorrectly?

127
00:10:39,360 --> 00:10:42,320
What happens if I pass nothing for example?

128
00:10:42,330 --> 00:10:45,030
Well then we would expect undefined

129
00:10:50,800 --> 00:10:52,210
undefined here right

130
00:10:52,320 --> 00:10:55,500
and that would be a test that could also make sense.

131
00:10:55,620 --> 00:10:56,990
So I'll delete that for now,

132
00:10:57,000 --> 00:11:01,530
I'll leave it at the simple unit test but you should be aware of the fact that you can write multiple

133
00:11:01,530 --> 00:11:03,380
unit tests for one and the same thing,

134
00:11:03,450 --> 00:11:08,340
then you can check more than one thing in a unit test and that you might also want to check for false

135
00:11:08,340 --> 00:11:10,520
positives or for opposites

136
00:11:10,560 --> 00:11:12,570
but now, let's move on to integration tests.