1
00:00:00,090 --> 00:00:05,340
In this lecture, we are going to write tests for the tabs container component.

2
00:00:05,370 --> 00:00:10,600
Unlike our previous tests, the tabs container component has a dependency.

3
00:00:10,620 --> 00:00:15,420
It's not uncommon to encounter components that can't be tested in isolation.

4
00:00:15,450 --> 00:00:20,910
In some cases, we may need to compromise by including the dependencies with our test.

5
00:00:20,940 --> 00:00:23,550
Let's try testing this component.

6
00:00:23,580 --> 00:00:25,010
First things first.

7
00:00:25,020 --> 00:00:30,430
The test file should be renamed Search for the Tabs Container Test File.

8
00:00:30,450 --> 00:00:37,390
Rename the file by changing the extension from spec broken BTS to spec BTS.

9
00:00:39,750 --> 00:00:43,020
Next lets check out the browser for the test.

10
00:00:43,050 --> 00:00:45,900
The test should have been picked up by the server.

11
00:00:45,930 --> 00:00:48,740
If not, you can always restart the server.

12
00:00:48,750 --> 00:00:51,510
Initially the test is going to fail.

13
00:00:51,510 --> 00:00:56,880
It's because the component does not have tab components for displaying content.

14
00:00:56,910 --> 00:01:00,810
Our container is expecting at least one tab component.

15
00:01:01,050 --> 00:01:03,040
This is where things get tricky.

16
00:01:03,060 --> 00:01:08,730
The tabs container component uses content projection for inserting content.

17
00:01:08,760 --> 00:01:16,650
Unfortunately, the test bed object does not offer a solution for adding content to the component.

18
00:01:16,680 --> 00:01:21,300
To test our components, we need to create a dummy host component.

19
00:01:21,330 --> 00:01:23,040
Let me show you what I mean.

20
00:01:23,520 --> 00:01:26,400
Head back to the editor at the top of the file.

21
00:01:26,400 --> 00:01:31,620
Import the component decorator from the angular slash core package.

22
00:01:33,790 --> 00:01:40,300
Next, let's create a class called test host component with the component decorator.

23
00:01:42,590 --> 00:01:49,430
Rather than testing the tabs container component, we're going to test the test host components inside

24
00:01:49,430 --> 00:01:50,450
this component.

25
00:01:50,480 --> 00:01:54,140
The template will contain the tabs container components.

26
00:01:54,140 --> 00:02:00,740
By adding this component to the template, we'll be able to project content and the components configuration

27
00:02:00,740 --> 00:02:01,370
object.

28
00:02:01,370 --> 00:02:03,260
Add the template property.

29
00:02:05,530 --> 00:02:07,880
This component is a dummy component.

30
00:02:07,900 --> 00:02:11,110
We're not going to develop a fully fledged components.

31
00:02:11,140 --> 00:02:18,820
Its purpose is to help us test the tabs container components in the templates and the app tabs.

32
00:02:18,820 --> 00:02:20,410
Container components.

33
00:02:22,510 --> 00:02:25,260
Next, let's try adding content.

34
00:02:25,270 --> 00:02:29,980
I think it would make sense to add the tab components at the top of the file.

35
00:02:29,980 --> 00:02:32,080
Import the TAB component.

36
00:02:34,990 --> 00:02:36,310
Back in the template.

37
00:02:36,310 --> 00:02:42,190
Add the app tab component as the content of the app tabs container components.

38
00:02:42,190 --> 00:02:43,990
Let's add two tabs.

39
00:02:46,120 --> 00:02:51,340
For the first tab, set the tab title property to the following tab one.

40
00:02:53,460 --> 00:02:58,110
As for the second tab, the title will be the following tab to.

41
00:03:00,300 --> 00:03:04,260
Lastly, insert dummy content into both tabs.

42
00:03:06,460 --> 00:03:08,010
The component is ready.

43
00:03:08,020 --> 00:03:11,810
Let's update the test suite to use our new components.

44
00:03:11,830 --> 00:03:18,910
First, let's update the type annotation for the component property by setting the type to tab host

45
00:03:18,910 --> 00:03:19,840
component.

46
00:03:22,160 --> 00:03:26,270
The fixtures annotation will be updated with this component to.

47
00:03:28,610 --> 00:03:32,600
Afterward, we can update the first before each function.

48
00:03:32,630 --> 00:03:37,590
Our component will not work without declaring the components within the same module.

49
00:03:37,610 --> 00:03:42,980
At the moment, only the tabs container component is registered with the module.

50
00:03:43,010 --> 00:03:48,320
Let's add the tab and test host components to the declarations array.

51
00:03:50,510 --> 00:03:57,290
We're almost finished and the second before each function update the create component function by passing

52
00:03:57,290 --> 00:03:59,450
in the test host component.

53
00:04:01,660 --> 00:04:02,160
Great.

54
00:04:02,170 --> 00:04:03,740
We fixed the test.

55
00:04:03,760 --> 00:04:07,310
Let's verify the test is working by checking out the browser.

56
00:04:07,330 --> 00:04:09,940
The test from this component should have passed.

57
00:04:09,940 --> 00:04:13,870
Writing a test for nested components requires extra work.

58
00:04:13,900 --> 00:04:16,930
It's not as simple as initializing the components.

59
00:04:16,959 --> 00:04:22,810
We must create a dummy component for loading nested components with projected content.

60
00:04:23,140 --> 00:04:28,670
For eating additional components for the purpose of assisting you with tests is not uncommon.

61
00:04:28,690 --> 00:04:33,950
You may need to create dozens of fake components for handling scenarios like this.

62
00:04:33,970 --> 00:04:41,170
In the next lecture, let's write additional tests for testing the behavior of the nested components.