In this lecture, let's talk about karma.
For most of this section, we are going to focus on unit testing.
It is the most popular type of testing in the angular community.
There are different tools for performing tests.
If you come from a React background, you may have used Gest for Angular developers.
The community uses karma and Jasmine.
For starters, let's talk about karma.
There are two core components to testing an application.
There's the application code and test code.
Both components must be loaded in the browser.
That's where things become tricky.
We must create an environment where our applications and tests can live together.
Otherwise, testing would not work.
Karma is a test runner.
That's a nice description, but it doesn't really tell us much.
To put it simply, karma creates a server on this server.
Karma will load your application and tests.
It'll run your tests against your application.
Best of all, it will watch your test files for updates.
If you modify a file the test will rerun.
You do not need to manually refresh or rerun tests.
This process is completely automated by itself.
Karma does not provide a list of functions for performing tests.
It simply creates a server.
Typically, you will install an additional package to help you write tests.
There are dozens of packages for creating tests for angular developers.
Jazmin is the primary choice for writing tests.
Jasmine is a package with dozens of functions for helping you organize, test and execute your tests.
Karma and Jasmine play a crucial role in testing an angular app.
Before we get into writing tests, let's quickly review the configuration for these tools straight from
the beginning.
Angular will configure these tools for your project.
It's not necessary to perform additional actions.
You can find the configuration settings for karma in a file called Karma dot configuration dot js.
Inside this file, a function is being exported with common JS syntax.
If you're not familiar with the module export property, that's perfectly fine.
It's a node for exporting features.
It's similar to exporting data with S six syntax.
The function exported by the file will accept an object called config.
This object contains a function for changing the default configuration of karma.
It's called set, which is invoked immediately.
This function accepts an object of configuration details.
In the resource section of this lecture, I provide a link to a complete list of options.
You're more than welcome to explore these options.
After finishing this lecture, we will not be able to cover every option.
This lecture is meant to provide a brief overview of the configuration.
Let's head back to our editors.
The first option we will talk about is called plug ins.
Karma is an extremely powerful tool.
It has a plug in system for extending its behavior.
We even have the option of developing custom plug ins.
The Angular team recommends five plug ins.
The first plug in is called Karma Jasmine.
Karma and Jasmine are two completely independent tools.
They do not need to be paired together.
In our case, we're interested in using both tools.
This plug in will ensure a seamless integration between both tools.
The next plugin is called Karma Chrome Launcher.
Karma can be launched with various browsers.
We must install a plug in for each browser.
In this example, the test runner will launch Chrome in the resource section of this lecture.
I provide a link to an official list of browsers.
If you plan on testing your application on various browsers, you must install the package for the respective
browser.
This page contains links to each package.
For our purposes, Chrome will be more than sufficient.
We will not be running our tests on other browsers.
Let's head back to the editor.
The third plugin is called Kama Jasmine html reporter.
Jasmine does not need to run in a browser.
It's more than capable of running from the command line.
However, the command line does not output the cleanest interface.
This plugin will generate a clean, easy to read page on the browser.
It will display a list of tests that have been executed by the test runner.
While this plugin is optional, it will be easier to understand our tests with this plugin afterward.
We have a plugin called Karma Coverage.
Ideally, you should be able to test every corner of your application, but how can you know for sure
that you've tested everything?
This plugin will help you with verifying the coverage of your tests.
It'll tell you how many lines of code are covered by your tests.
The last plugin is called Angular Dev Kit Karma.
This is an official plugin by the Angular team.
It will make sure that karma plays nicely with Angular applications.
We're finished covering plugins.
Let's move on to the next option.
After the list of plugins, we have an option called Clients.
This option gives us the opportunity to configure the client, which is the browser.
In this object we have a configuration object for Jasmine.
Jasmine can be directly configured from this object.
For this reason, you will not find a dedicated file for this tool.
If you're interested in a complete list of configuration settings, check out the comment.
There's a link for a complete list of options.
In our case, we do not need to configure Jasmine.
The default configuration will work for our project.
Let's scroll to the bottom of the configuration.
There are three options worth discussing.
The first option is called Auto Watch.
By default, karma will scan your project for a test files.
If these files are updated, karma will rerun the tests by setting this option to true this behavior
is enabled.
The second option is called browsers, which is an array of browsers to launch.
Like I said before, we are going to run our tests on Chrome.
However, let's say you want to run tests with Firefox, you can include it in the array like so.
Karma can run tests on multiple browsers.
You're not limited to a single browser.
Keep in mind you must install the respective package for a browser.
Otherwise, adding the browser to this array may produce an error.
Let's move on to the final property called Restart on file change.
As I said before, Karma has been configured to watch your tests for changes.
Tests can take a while to run.
The more tests you have, the longer it will take for your tests to run.
What if you update your tests while the tests are being executed?
By setting this option to true karma will stop running the current set of tests.
It will automatically refresh the page to run the tests again.
I always recommend enabling this behavior.
There isn't a point in waiting for the current set of tests to finish running if the test files have
been updated.
There isn't anything else worth mentioning in the configuration file before ending this lecture.
Let's try launching Karma.
Switch over to the command line.
In the command line, you may need to stop the server.
Angular has a separate command for running tests.
Run the following command and PM run test.
The command line will begin building your application for testing after a few moments.
A browser should be launched by the command.
A custom page will be generated by Karma and Jasmine to display a list of results from your tests.
You may encounter errors.
That's perfectly normal.
As long as the browser is launching, we can consider our tests a success.
In the next lecture, let's begin fixing these errors and understand why they appear.