1
00:00:00,120 --> 00:00:02,680
In this lecture, let's talk about karma.

2
00:00:02,700 --> 00:00:06,540
For most of this section, we are going to focus on unit testing.

3
00:00:06,540 --> 00:00:10,200
It is the most popular type of testing in the angular community.

4
00:00:10,200 --> 00:00:13,050
There are different tools for performing tests.

5
00:00:13,050 --> 00:00:18,450
If you come from a React background, you may have used Gest for Angular developers.

6
00:00:18,450 --> 00:00:21,180
The community uses karma and Jasmine.

7
00:00:21,180 --> 00:00:23,700
For starters, let's talk about karma.

8
00:00:23,700 --> 00:00:26,910
There are two core components to testing an application.

9
00:00:26,910 --> 00:00:29,880
There's the application code and test code.

10
00:00:29,880 --> 00:00:32,520
Both components must be loaded in the browser.

11
00:00:32,549 --> 00:00:34,440
That's where things become tricky.

12
00:00:34,440 --> 00:00:39,090
We must create an environment where our applications and tests can live together.

13
00:00:39,120 --> 00:00:41,520
Otherwise, testing would not work.

14
00:00:41,670 --> 00:00:43,410
Karma is a test runner.

15
00:00:43,410 --> 00:00:46,620
That's a nice description, but it doesn't really tell us much.

16
00:00:46,620 --> 00:00:50,790
To put it simply, karma creates a server on this server.

17
00:00:50,790 --> 00:00:53,610
Karma will load your application and tests.

18
00:00:53,610 --> 00:00:56,580
It'll run your tests against your application.

19
00:00:56,580 --> 00:01:00,030
Best of all, it will watch your test files for updates.

20
00:01:00,030 --> 00:01:02,970
If you modify a file the test will rerun.

21
00:01:03,000 --> 00:01:06,480
You do not need to manually refresh or rerun tests.

22
00:01:06,480 --> 00:01:09,930
This process is completely automated by itself.

23
00:01:09,930 --> 00:01:13,290
Karma does not provide a list of functions for performing tests.

24
00:01:13,290 --> 00:01:15,120
It simply creates a server.

25
00:01:15,120 --> 00:01:19,500
Typically, you will install an additional package to help you write tests.

26
00:01:19,500 --> 00:01:24,600
There are dozens of packages for creating tests for angular developers.

27
00:01:24,600 --> 00:01:28,040
Jazmin is the primary choice for writing tests.

28
00:01:28,050 --> 00:01:34,560
Jasmine is a package with dozens of functions for helping you organize, test and execute your tests.

29
00:01:34,560 --> 00:01:39,060
Karma and Jasmine play a crucial role in testing an angular app.

30
00:01:40,280 --> 00:01:46,130
Before we get into writing tests, let's quickly review the configuration for these tools straight from

31
00:01:46,130 --> 00:01:46,830
the beginning.

32
00:01:46,850 --> 00:01:50,270
Angular will configure these tools for your project.

33
00:01:50,270 --> 00:01:53,420
It's not necessary to perform additional actions.

34
00:01:53,420 --> 00:02:01,070
You can find the configuration settings for karma in a file called Karma dot configuration dot js.

35
00:02:03,230 --> 00:02:08,460
Inside this file, a function is being exported with common JS syntax.

36
00:02:08,479 --> 00:02:13,410
If you're not familiar with the module export property, that's perfectly fine.

37
00:02:13,430 --> 00:02:15,630
It's a node for exporting features.

38
00:02:15,650 --> 00:02:19,610
It's similar to exporting data with S six syntax.

39
00:02:19,640 --> 00:02:23,990
The function exported by the file will accept an object called config.

40
00:02:24,020 --> 00:02:29,030
This object contains a function for changing the default configuration of karma.

41
00:02:29,060 --> 00:02:32,190
It's called set, which is invoked immediately.

42
00:02:32,210 --> 00:02:36,440
This function accepts an object of configuration details.

43
00:02:36,440 --> 00:02:41,900
In the resource section of this lecture, I provide a link to a complete list of options.

44
00:02:44,030 --> 00:02:46,580
You're more than welcome to explore these options.

45
00:02:46,580 --> 00:02:50,740
After finishing this lecture, we will not be able to cover every option.

46
00:02:50,750 --> 00:02:54,730
This lecture is meant to provide a brief overview of the configuration.

47
00:02:54,740 --> 00:02:56,930
Let's head back to our editors.

48
00:02:56,960 --> 00:03:00,380
The first option we will talk about is called plug ins.

49
00:03:00,380 --> 00:03:02,960
Karma is an extremely powerful tool.

50
00:03:02,960 --> 00:03:06,080
It has a plug in system for extending its behavior.

51
00:03:06,080 --> 00:03:09,470
We even have the option of developing custom plug ins.

52
00:03:09,470 --> 00:03:12,500
The Angular team recommends five plug ins.

53
00:03:12,530 --> 00:03:15,590
The first plug in is called Karma Jasmine.

54
00:03:15,590 --> 00:03:19,460
Karma and Jasmine are two completely independent tools.

55
00:03:19,460 --> 00:03:21,650
They do not need to be paired together.

56
00:03:21,650 --> 00:03:25,220
In our case, we're interested in using both tools.

57
00:03:25,220 --> 00:03:29,840
This plug in will ensure a seamless integration between both tools.

58
00:03:29,990 --> 00:03:33,470
The next plugin is called Karma Chrome Launcher.

59
00:03:33,500 --> 00:03:36,380
Karma can be launched with various browsers.

60
00:03:36,380 --> 00:03:39,080
We must install a plug in for each browser.

61
00:03:39,080 --> 00:03:45,380
In this example, the test runner will launch Chrome in the resource section of this lecture.

62
00:03:45,380 --> 00:03:48,680
I provide a link to an official list of browsers.

63
00:03:50,950 --> 00:03:57,340
If you plan on testing your application on various browsers, you must install the package for the respective

64
00:03:57,340 --> 00:03:58,180
browser.

65
00:03:58,210 --> 00:04:01,450
This page contains links to each package.

66
00:04:01,480 --> 00:04:04,860
For our purposes, Chrome will be more than sufficient.

67
00:04:04,870 --> 00:04:07,680
We will not be running our tests on other browsers.

68
00:04:07,690 --> 00:04:09,530
Let's head back to the editor.

69
00:04:09,550 --> 00:04:14,330
The third plugin is called Kama Jasmine html reporter.

70
00:04:14,350 --> 00:04:16,899
Jasmine does not need to run in a browser.

71
00:04:16,899 --> 00:04:19,649
It's more than capable of running from the command line.

72
00:04:19,660 --> 00:04:24,050
However, the command line does not output the cleanest interface.

73
00:04:24,070 --> 00:04:28,560
This plugin will generate a clean, easy to read page on the browser.

74
00:04:28,570 --> 00:04:32,830
It will display a list of tests that have been executed by the test runner.

75
00:04:32,830 --> 00:04:39,670
While this plugin is optional, it will be easier to understand our tests with this plugin afterward.

76
00:04:39,670 --> 00:04:42,550
We have a plugin called Karma Coverage.

77
00:04:42,580 --> 00:04:48,370
Ideally, you should be able to test every corner of your application, but how can you know for sure

78
00:04:48,370 --> 00:04:49,910
that you've tested everything?

79
00:04:49,930 --> 00:04:54,000
This plugin will help you with verifying the coverage of your tests.

80
00:04:54,010 --> 00:04:58,150
It'll tell you how many lines of code are covered by your tests.

81
00:04:58,300 --> 00:05:02,350
The last plugin is called Angular Dev Kit Karma.

82
00:05:02,440 --> 00:05:05,440
This is an official plugin by the Angular team.

83
00:05:05,440 --> 00:05:09,610
It will make sure that karma plays nicely with Angular applications.

84
00:05:09,610 --> 00:05:11,710
We're finished covering plugins.

85
00:05:11,710 --> 00:05:14,050
Let's move on to the next option.

86
00:05:14,350 --> 00:05:18,270
After the list of plugins, we have an option called Clients.

87
00:05:18,280 --> 00:05:23,260
This option gives us the opportunity to configure the client, which is the browser.

88
00:05:23,260 --> 00:05:27,400
In this object we have a configuration object for Jasmine.

89
00:05:27,430 --> 00:05:30,940
Jasmine can be directly configured from this object.

90
00:05:30,940 --> 00:05:35,260
For this reason, you will not find a dedicated file for this tool.

91
00:05:35,500 --> 00:05:40,960
If you're interested in a complete list of configuration settings, check out the comment.

92
00:05:40,960 --> 00:05:43,870
There's a link for a complete list of options.

93
00:05:43,870 --> 00:05:47,470
In our case, we do not need to configure Jasmine.

94
00:05:47,500 --> 00:05:50,890
The default configuration will work for our project.

95
00:05:50,920 --> 00:05:53,650
Let's scroll to the bottom of the configuration.

96
00:05:53,650 --> 00:05:56,380
There are three options worth discussing.

97
00:05:56,380 --> 00:05:59,080
The first option is called Auto Watch.

98
00:05:59,080 --> 00:06:03,190
By default, karma will scan your project for a test files.

99
00:06:03,190 --> 00:06:10,150
If these files are updated, karma will rerun the tests by setting this option to true this behavior

100
00:06:10,150 --> 00:06:11,140
is enabled.

101
00:06:11,170 --> 00:06:15,880
The second option is called browsers, which is an array of browsers to launch.

102
00:06:15,880 --> 00:06:19,420
Like I said before, we are going to run our tests on Chrome.

103
00:06:19,420 --> 00:06:25,390
However, let's say you want to run tests with Firefox, you can include it in the array like so.

104
00:06:27,640 --> 00:06:30,630
Karma can run tests on multiple browsers.

105
00:06:30,640 --> 00:06:32,830
You're not limited to a single browser.

106
00:06:32,860 --> 00:06:37,000
Keep in mind you must install the respective package for a browser.

107
00:06:37,030 --> 00:06:41,110
Otherwise, adding the browser to this array may produce an error.

108
00:06:41,140 --> 00:06:46,140
Let's move on to the final property called Restart on file change.

109
00:06:46,150 --> 00:06:51,190
As I said before, Karma has been configured to watch your tests for changes.

110
00:06:51,220 --> 00:06:53,160
Tests can take a while to run.

111
00:06:53,170 --> 00:06:57,460
The more tests you have, the longer it will take for your tests to run.

112
00:06:57,730 --> 00:07:01,510
What if you update your tests while the tests are being executed?

113
00:07:01,510 --> 00:07:06,700
By setting this option to true karma will stop running the current set of tests.

114
00:07:06,730 --> 00:07:10,520
It will automatically refresh the page to run the tests again.

115
00:07:10,540 --> 00:07:13,240
I always recommend enabling this behavior.

116
00:07:13,270 --> 00:07:18,670
There isn't a point in waiting for the current set of tests to finish running if the test files have

117
00:07:18,670 --> 00:07:19,600
been updated.

118
00:07:19,810 --> 00:07:25,440
There isn't anything else worth mentioning in the configuration file before ending this lecture.

119
00:07:25,450 --> 00:07:27,840
Let's try launching Karma.

120
00:07:27,850 --> 00:07:29,950
Switch over to the command line.

121
00:07:29,950 --> 00:07:33,400
In the command line, you may need to stop the server.

122
00:07:33,430 --> 00:07:36,490
Angular has a separate command for running tests.

123
00:07:36,490 --> 00:07:40,480
Run the following command and PM run test.

124
00:07:44,450 --> 00:07:49,790
The command line will begin building your application for testing after a few moments.

125
00:07:49,820 --> 00:07:52,490
A browser should be launched by the command.

126
00:07:52,520 --> 00:07:58,790
A custom page will be generated by Karma and Jasmine to display a list of results from your tests.

127
00:07:58,820 --> 00:08:00,620
You may encounter errors.

128
00:08:00,620 --> 00:08:02,120
That's perfectly normal.

129
00:08:02,120 --> 00:08:07,160
As long as the browser is launching, we can consider our tests a success.

130
00:08:07,190 --> 00:08:12,710
In the next lecture, let's begin fixing these errors and understand why they appear.