1
00:00:00,090 --> 00:00:05,120
In this lecture, we are going to test the content projection of our components.

2
00:00:05,130 --> 00:00:09,330
At the moment, our dummy components template has two tabs.

3
00:00:09,330 --> 00:00:15,330
Let's write a test for verifying the number of tabs rendered in the tabs container component.

4
00:00:15,330 --> 00:00:19,320
We should take a moment to study this component in your editor.

5
00:00:19,320 --> 00:00:20,460
Open the tabs.

6
00:00:20,460 --> 00:00:21,960
Container component.

7
00:00:21,960 --> 00:00:23,040
Class File.

8
00:00:25,280 --> 00:00:31,910
As a refresher, we created a property called Tabs for selecting the number of tabs in the component.

9
00:00:31,940 --> 00:00:38,750
This property is decorated with the content children decorator, which will allow us to select the TAB

10
00:00:38,750 --> 00:00:41,810
components from within the projected content.

11
00:00:41,840 --> 00:00:45,410
Let's check out the tabs container template file.

12
00:00:47,680 --> 00:00:52,490
In the template, we're rendering a list item element for each tab.

13
00:00:52,510 --> 00:00:56,830
The goal of our test will be to count the number of tabs in the component.

14
00:00:56,860 --> 00:00:59,610
There are two ways to tackle this test.

15
00:00:59,620 --> 00:01:05,090
We can count the number of list item elements or we can grab the tabs property.

16
00:01:05,110 --> 00:01:08,260
Either solution is valid for this demonstration.

17
00:01:08,260 --> 00:01:10,200
We will explore both options.

18
00:01:10,210 --> 00:01:12,290
Let's begin writing our test.

19
00:01:12,310 --> 00:01:16,180
Open the test file for the tabs container component.

20
00:01:18,350 --> 00:01:22,240
We're going to be performing a query for an element in the templates.

21
00:01:22,250 --> 00:01:28,130
Let's import the BI object from the angular slash platform browser package.

22
00:01:30,210 --> 00:01:34,530
At the bottom of the test file at a test with the ID function.

23
00:01:36,920 --> 00:01:41,780
The description of our test will be the following should have two tabs.

24
00:01:43,850 --> 00:01:46,340
Next pass in an arrow function.

25
00:01:48,440 --> 00:01:54,620
First we're going to select the elements from the template, create a variable called tabs.

26
00:01:54,620 --> 00:02:01,430
The value for this variable will be the fixture debug element dot query all function.

27
00:02:03,770 --> 00:02:08,780
Angular has two functions for selecting elements called query and query.

28
00:02:08,780 --> 00:02:12,940
All the query function can only select a single element.

29
00:02:12,950 --> 00:02:19,360
If you're interested in selecting multiple elements, the query all function will allow you to do that.

30
00:02:19,370 --> 00:02:26,360
This function has the same argument as the query function, which is a selector let's pass in the bi

31
00:02:26,360 --> 00:02:28,130
dot CSS function.

32
00:02:30,370 --> 00:02:33,580
The query will be the following list item.

33
00:02:35,810 --> 00:02:39,840
After performing this query, we can start testing the results.

34
00:02:39,860 --> 00:02:43,780
The query all function will return an array of results.

35
00:02:43,790 --> 00:02:49,040
As the test suggests, we're testing for two tabs below the query.

36
00:02:49,040 --> 00:02:50,600
Write the following code.

37
00:02:50,630 --> 00:02:54,020
Expect tabs dot length to be to.

38
00:02:56,240 --> 00:02:58,330
The test is very straightforward.

39
00:02:58,340 --> 00:03:02,400
We're passing on the length property to be expect function.

40
00:03:02,420 --> 00:03:07,130
The to be matcher will compare the length with the value passed into it.

41
00:03:07,160 --> 00:03:09,800
In total, there should be two tabs.

42
00:03:09,800 --> 00:03:12,470
Let's check out the browser for the results.

43
00:03:14,530 --> 00:03:17,350
As you can see, the test has passed.

44
00:03:17,380 --> 00:03:22,420
Overall, this is considered the simplest solution for accounting items in its templates.

45
00:03:22,450 --> 00:03:27,420
However, for the sake of learning, let's explore the other option at our disposal.

46
00:03:27,430 --> 00:03:33,940
Rather than querying the templates, we can grab the tabs, property from the components, the tabs

47
00:03:33,940 --> 00:03:37,240
properties, stores, the number of tabs and the templates.

48
00:03:37,360 --> 00:03:41,050
Unfortunately, this approach will be slightly challenging.

49
00:03:41,080 --> 00:03:42,730
Head back to the editor.

50
00:03:42,760 --> 00:03:47,390
Grabbing the tabs property from the component is not easily accessible.

51
00:03:47,410 --> 00:03:48,820
The reason is simple.

52
00:03:48,850 --> 00:03:53,060
The test file was updated to store an instance of a dummy component.

53
00:03:53,080 --> 00:03:58,510
Therefore, we don't have access to the tabs container components properties.

54
00:03:58,540 --> 00:04:03,280
To access this information, we'll need to perform a query for this component.

55
00:04:03,310 --> 00:04:04,870
Let me show you what I mean.

56
00:04:04,870 --> 00:04:10,330
Below the Tams variable create another variable called container component.

57
00:04:10,360 --> 00:04:16,540
The value for this variable will be the fixture debug element dot query function.

58
00:04:18,760 --> 00:04:23,260
Once again, we're using the query component for grabbing the component.

59
00:04:23,290 --> 00:04:29,080
If we select a component with our query, Angular will return the components instance.

60
00:04:29,110 --> 00:04:36,550
This result gives us access to the components properties in this function pass in the bi dot directive

61
00:04:36,550 --> 00:04:37,270
function.

62
00:04:39,480 --> 00:04:44,360
Unlike before, we can't select a component with a simple CSS selector.

63
00:04:44,370 --> 00:04:50,530
We must call the directive function for selecting component instances from the templates.

64
00:04:50,550 --> 00:04:54,700
The value for this function must be the component to select.

65
00:04:54,720 --> 00:04:58,650
Let's pass in the tabs container component class.

66
00:05:00,900 --> 00:05:05,690
The final result from this query will be another debug element object.

67
00:05:05,700 --> 00:05:09,300
However, we're not interested in the templates of the components.

68
00:05:09,330 --> 00:05:12,130
Rather, we're trying to grab the instance.

69
00:05:12,150 --> 00:05:17,310
Luckily, the debug element object has a copy of the instance below.

70
00:05:17,310 --> 00:05:21,870
This variable create another variable called Tab's prop.

71
00:05:21,930 --> 00:05:30,330
The value for this variable will be the following container component dot component instance not tabs.

72
00:05:32,520 --> 00:05:37,570
An instance of the component can be accessed via the component instance property.

73
00:05:37,590 --> 00:05:41,850
From this object, we can access any of the properties from our class.

74
00:05:41,850 --> 00:05:45,330
In this example, we're grabbing the tabs property.

75
00:05:45,330 --> 00:05:49,410
Finally, we can write our test and the following test.

76
00:05:49,410 --> 00:05:53,970
Expect tabs prop dot length to be to.

77
00:05:56,260 --> 00:06:02,010
It's perfectly acceptable to write multiple expect functions from within a single test block.

78
00:06:02,020 --> 00:06:06,360
And this example, we're writing the exact same test twice.

79
00:06:06,370 --> 00:06:08,740
The difference is the source of the value.

80
00:06:08,770 --> 00:06:12,700
Let's head on over to the browser to check out the test results.

81
00:06:12,910 --> 00:06:15,400
Our test passed with flying colours.

82
00:06:15,400 --> 00:06:20,420
In my opinion, it's easier to select an element as opposed to a component.

83
00:06:20,440 --> 00:06:23,890
However, you may need this knowledge for a future test.