In this lecture, we are going to explore Angola's utility class for helping us perform tests.
So far, we've gotten a taste of karma and jasmine.
Karma will launch a server for hosting our application and tests, whereas Jasmine will define a set
of functions for comparing values.
However, neither package will allow us to interact with an angular application.
This is a problem.
We need to be able to create instances of components and modules on the spot.
This is where the TestBed class comes into play.
This object contains various methods and properties for interacting with an angular application.
In the resource section of this lecture, I provide a link to this class.
Feel free to explore this class methods after finishing this lecture.
Let's use this class for creating a component instance.
After an instance has been created, we'll verify its existence in the browser as a test.
Switch over to your editor.
Search for the about component test file.
Let's rename this file by changing the extension from the spec broken ts to Spectre's.
We're switching to a different component.
This component is the simplest component in our application.
It'll be easier to test this component without having to introduce other topics inside this file.
Let's clear the files.
Contents.
We are going to start fresh mixed.
Let's add the described function.
The first argument will be set to the following about components.
Afterward pass in an arrow function as the second argument.
Lastly, at the top of the file, import the test bed object from the angular slash core slash testing
package.
During the creation of a project the SEAL.
I will install this package for testing an app.
We can immediately start importing the TestBed class from this package.
As I mentioned before, the current goal is to test the creation of the about components.
Components must be declared with a module.
Therefore, before creating a component, a module must be created.
Alternatively, we can re-use the app module.
Let's open this file.
In this module, we're importing the about component to register it with the app module.
However, it's not the only component being imported.
There are other components and modules.
Ideally, our tests should test a component in isolation.
These other components aren't necessary for testing be about components.
It's a waste of resources to import this entire module for testing a single component.
A better approach would be to create a new module with the about components.
This way we can avoid importing unnecessary code.
Switch back to the test file inside the described function.
Run a function called before each.
We're going to initialize our module before running a test.
Jasmine allows us to run code before a test is executed.
This function gives us the opportunity to execute logic before every test.
Let's pass in an arrow function.
Inside this function.
Run the test bed dot configure testing module function.
This function will create a temporary module.
We do not need to create a separate module file for running tests.
The TestBed class can create a module on the fly.
This function accepts an object of configuration settings.
These settings are the same settings that can be passed into the energy module decorator.
Let's add our component first.
We must import the component at the top of the file.
Import the about component.
Next, add the declarations array to the module.
Lastly, add the about component.
We're almost done.
There's one problem with our components openly about components class.
We're not limited to testing a class.
We can test a components templates.
However, our components templates are stored in a separate file.
If we're using the template URLs property in the components decorator, we should compile our components
by doing so.
The components template will get loaded during the test, thus giving us access to the templates back
in the test file.
Add the async keyword to the arrow function.
Loading a components template is an asynchronous action.
Next, add the weight keyword to the configure testing module function.
Lastly, chain of function called compile components.
The compile components function will begin loading a components templates.
In some cases, it may not be necessary to run this function.
If you're using Webpack, the components template may have already been compiled.
However, I like to add it in as an extra precaution.
It never hurts to call this function.
Our component is ready for testing.
In the next lecture, let's begin writing a test for verifying the creation of the component.