In this lecture, we are going to write a test for checking the components templates.
The process is relatively simple.
For this demonstration, let's try writing tests for the TAB component.
This component is more advanced than the about component, but simple enough to test in your editor.
Search for the tab test file.
Let's rename the extension from spec broken dots to spec dots.
We don't have to clear the contents of this file.
Believe it or not, it's 100% similar to the about test file.
Let's quickly review the code at the top of the described function.
We have two variables for storing the fixture and the instance of the component.
Afterward, there are two for each functions.
The first function is initializing a test module.
It's registering the tab component with our module.
Lastly, the component is compiled in the second before each function an instance is created.
This instance is stored in our variables.
After these functions, a single test has been written for our components.
The test will verify the components creation.
Overall, we can skip setting up our test files.
We can proceed to write our next test at the bottom of the described block.
Run the ID function with the following description.
Should have dot hidden class.
Next pass in an arrow function.
Let's take a moment to inspect the TAB component in your editor.
Open the TAB Components Class file.
In this component, we have two properties called Active and TAB Title.
The active property is responsible for toggling the appearance of the TAB.
Let's open the tab component template file.
On the root elements.
We have a div tag with a class binding.
We're binding the hidden class to the active property.
Let's write a test for testing the div tag by default.
Tabs are hidden from the user.
We can test for this behavior by checking the div element for the hidden class.
Head back to the test file.
The first step is to select the div tag.
There are three solutions for grabbing an element from a component.
Let's go through each of them.
Define a variable called elements.
The value for this variable will be the fixture dot debug element dot query function.
The fixture object has a property called Debug Element for referencing the entire component template.
On this object we can select an element from the template by calling the query function.
Keep in mind this is not the actual DOM element.
The debug element is a representation of the template as an object.
We can't use the query selector function.
This function accepts a special type of value.
We have to generate a selector with a function called by CSS.
Pass that into the function.
Next we must pass in a valid CCIS selector as a string.
If the element is hidden, it should have the hidden class.
We may receive an error for using this function.
The by object is not available unless we import it at the top of the file.
Import the buy object from the angular slash platform browser package.
Heading back to the test.
We've successfully selected the element before writing the test assertion.
Let's explore the other options for selecting an element.
Create a variable called element to the value for this variable will be the fixture dot native element.
Dot query selector function.
Angular will expose the component templates elements via two properties called native element and debug
element.
Sounds strange, right?
Why would we need two different objects?
The reason is simple.
Angular does not need to run on the browser.
We can run applications on different platforms.
The Native Element Object exposes the template via the browser's DOM API.
We have access to the same methods and properties available from the document object.
The debug element object is angular as version of the templates.
It's independent of any platform.
If we're not running our app in the browser, the native element property may give us trouble since
we don't have access to the browsers API.
The debug element object is considered more reliable.
Regardless, you may need to use it in your tests.
Let's select the element with the query selector function.
The value will be the following dot hidden.
Let's look at the last solution for selecting an element from the test.
Create a variable called element three.
The value will be the following document dot query selector.
Dot hidden.
Tests run in the browser.
Therefore, we have access to the DOM API.
We don't need to use Angular for selecting elements.
However, it's not recommended to use the DOM API.
It's possible that change detection can cause the element to disappear.
It's not reliable as a solution for selecting elements.
You're better off using the properties from the fixture object.
In my opinion, the first solution is the best solution for our test.
Let's write our test assertion.
Call the expected function with the element variable.
Next chain me to be truth.
You function.
Check out the browser for the results.
Our test passes successfully.
By selecting the element science class, we can verify that the tab is hidden from the user.
In the next lecture, let's write another test for testing the opposite behavior.