In this lecture, we are going to write tests for the tabs container component.
Unlike our previous tests, the tabs container component has a dependency.
It's not uncommon to encounter components that can't be tested in isolation.
In some cases, we may need to compromise by including the dependencies with our test.
Let's try testing this component.
First things first.
The test file should be renamed Search for the Tabs Container Test File.
Rename the file by changing the extension from spec broken BTS to spec BTS.
Next lets check out the browser for the test.
The test should have been picked up by the server.
If not, you can always restart the server.
Initially the test is going to fail.
It's because the component does not have tab components for displaying content.
Our container is expecting at least one tab component.
This is where things get tricky.
The tabs container component uses content projection for inserting content.
Unfortunately, the test bed object does not offer a solution for adding content to the component.
To test our components, we need to create a dummy host component.
Let me show you what I mean.
Head back to the editor at the top of the file.
Import the component decorator from the angular slash core package.
Next, let's create a class called test host component with the component decorator.
Rather than testing the tabs container component, we're going to test the test host components inside
this component.
The template will contain the tabs container components.
By adding this component to the template, we'll be able to project content and the components configuration
object.
Add the template property.
This component is a dummy component.
We're not going to develop a fully fledged components.
Its purpose is to help us test the tabs container components in the templates and the app tabs.
Container components.
Next, let's try adding content.
I think it would make sense to add the tab components at the top of the file.
Import the TAB component.
Back in the template.
Add the app tab component as the content of the app tabs container components.
Let's add two tabs.
For the first tab, set the tab title property to the following tab one.
As for the second tab, the title will be the following tab to.
Lastly, insert dummy content into both tabs.
The component is ready.
Let's update the test suite to use our new components.
First, let's update the type annotation for the component property by setting the type to tab host
component.
The fixtures annotation will be updated with this component to.
Afterward, we can update the first before each function.
Our component will not work without declaring the components within the same module.
At the moment, only the tabs container component is registered with the module.
Let's add the tab and test host components to the declarations array.
We're almost finished and the second before each function update the create component function by passing
in the test host component.
Great.
We fixed the test.
Let's verify the test is working by checking out the browser.
The test from this component should have passed.
Writing a test for nested components requires extra work.
It's not as simple as initializing the components.
We must create a dummy component for loading nested components with projected content.
For eating additional components for the purpose of assisting you with tests is not uncommon.
You may need to create dozens of fake components for handling scenarios like this.
In the next lecture, let's write additional tests for testing the behavior of the nested components.