In this lecture, we are going to test the content projection of our components.
At the moment, our dummy components template has two tabs.
Let's write a test for verifying the number of tabs rendered in the tabs container component.
We should take a moment to study this component in your editor.
Open the tabs.
Container component.
Class File.
As a refresher, we created a property called Tabs for selecting the number of tabs in the component.
This property is decorated with the content children decorator, which will allow us to select the TAB
components from within the projected content.
Let's check out the tabs container template file.
In the template, we're rendering a list item element for each tab.
The goal of our test will be to count the number of tabs in the component.
There are two ways to tackle this test.
We can count the number of list item elements or we can grab the tabs property.
Either solution is valid for this demonstration.
We will explore both options.
Let's begin writing our test.
Open the test file for the tabs container component.
We're going to be performing a query for an element in the templates.
Let's import the BI object from the angular slash platform browser package.
At the bottom of the test file at a test with the ID function.
The description of our test will be the following should have two tabs.
Next pass in an arrow function.
First we're going to select the elements from the template, create a variable called tabs.
The value for this variable will be the fixture debug element dot query all function.
Angular has two functions for selecting elements called query and query.
All the query function can only select a single element.
If you're interested in selecting multiple elements, the query all function will allow you to do that.
This function has the same argument as the query function, which is a selector let's pass in the bi
dot CSS function.
The query will be the following list item.
After performing this query, we can start testing the results.
The query all function will return an array of results.
As the test suggests, we're testing for two tabs below the query.
Write the following code.
Expect tabs dot length to be to.
The test is very straightforward.
We're passing on the length property to be expect function.
The to be matcher will compare the length with the value passed into it.
In total, there should be two tabs.
Let's check out the browser for the results.
As you can see, the test has passed.
Overall, this is considered the simplest solution for accounting items in its templates.
However, for the sake of learning, let's explore the other option at our disposal.
Rather than querying the templates, we can grab the tabs, property from the components, the tabs
properties, stores, the number of tabs and the templates.
Unfortunately, this approach will be slightly challenging.
Head back to the editor.
Grabbing the tabs property from the component is not easily accessible.
The reason is simple.
The test file was updated to store an instance of a dummy component.
Therefore, we don't have access to the tabs container components properties.
To access this information, we'll need to perform a query for this component.
Let me show you what I mean.
Below the Tams variable create another variable called container component.
The value for this variable will be the fixture debug element dot query function.
Once again, we're using the query component for grabbing the component.
If we select a component with our query, Angular will return the components instance.
This result gives us access to the components properties in this function pass in the bi dot directive
function.
Unlike before, we can't select a component with a simple CSS selector.
We must call the directive function for selecting component instances from the templates.
The value for this function must be the component to select.
Let's pass in the tabs container component class.
The final result from this query will be another debug element object.
However, we're not interested in the templates of the components.
Rather, we're trying to grab the instance.
Luckily, the debug element object has a copy of the instance below.
This variable create another variable called Tab's prop.
The value for this variable will be the following container component dot component instance not tabs.
An instance of the component can be accessed via the component instance property.
From this object, we can access any of the properties from our class.
In this example, we're grabbing the tabs property.
Finally, we can write our test and the following test.
Expect tabs prop dot length to be to.
It's perfectly acceptable to write multiple expect functions from within a single test block.
And this example, we're writing the exact same test twice.
The difference is the source of the value.
Let's head on over to the browser to check out the test results.
Our test passed with flying colours.
In my opinion, it's easier to select an element as opposed to a component.
However, you may need this knowledge for a future test.