1 00:00:00,090 --> 00:00:04,800 In this lecture, we are going to write a test for checking the components templates. 2 00:00:04,830 --> 00:00:07,060 The process is relatively simple. 3 00:00:07,080 --> 00:00:11,920 For this demonstration, let's try writing tests for the TAB component. 4 00:00:11,940 --> 00:00:18,060 This component is more advanced than the about component, but simple enough to test in your editor. 5 00:00:18,060 --> 00:00:20,580 Search for the tab test file. 6 00:00:22,690 --> 00:00:28,750 Let's rename the extension from spec broken dots to spec dots. 7 00:00:30,890 --> 00:00:33,730 We don't have to clear the contents of this file. 8 00:00:33,740 --> 00:00:38,700 Believe it or not, it's 100% similar to the about test file. 9 00:00:38,720 --> 00:00:43,000 Let's quickly review the code at the top of the described function. 10 00:00:43,010 --> 00:00:48,410 We have two variables for storing the fixture and the instance of the component. 11 00:00:48,440 --> 00:00:52,290 Afterward, there are two for each functions. 12 00:00:52,310 --> 00:00:55,670 The first function is initializing a test module. 13 00:00:55,670 --> 00:00:59,230 It's registering the tab component with our module. 14 00:00:59,240 --> 00:01:06,080 Lastly, the component is compiled in the second before each function an instance is created. 15 00:01:06,080 --> 00:01:08,960 This instance is stored in our variables. 16 00:01:09,050 --> 00:01:13,880 After these functions, a single test has been written for our components. 17 00:01:13,880 --> 00:01:17,090 The test will verify the components creation. 18 00:01:17,090 --> 00:01:20,840 Overall, we can skip setting up our test files. 19 00:01:20,840 --> 00:01:25,910 We can proceed to write our next test at the bottom of the described block. 20 00:01:25,910 --> 00:01:29,150 Run the ID function with the following description. 21 00:01:29,150 --> 00:01:32,480 Should have dot hidden class. 22 00:01:34,660 --> 00:01:37,150 Next pass in an arrow function. 23 00:01:39,330 --> 00:01:43,810 Let's take a moment to inspect the TAB component in your editor. 24 00:01:43,830 --> 00:01:46,740 Open the TAB Components Class file. 25 00:01:49,010 --> 00:01:54,440 In this component, we have two properties called Active and TAB Title. 26 00:01:54,470 --> 00:01:59,370 The active property is responsible for toggling the appearance of the TAB. 27 00:01:59,390 --> 00:02:02,930 Let's open the tab component template file. 28 00:02:05,310 --> 00:02:06,720 On the root elements. 29 00:02:06,720 --> 00:02:09,509 We have a div tag with a class binding. 30 00:02:09,509 --> 00:02:13,030 We're binding the hidden class to the active property. 31 00:02:13,050 --> 00:02:17,280 Let's write a test for testing the div tag by default. 32 00:02:17,310 --> 00:02:19,190 Tabs are hidden from the user. 33 00:02:19,200 --> 00:02:24,820 We can test for this behavior by checking the div element for the hidden class. 34 00:02:24,840 --> 00:02:26,940 Head back to the test file. 35 00:02:27,090 --> 00:02:30,160 The first step is to select the div tag. 36 00:02:30,180 --> 00:02:34,070 There are three solutions for grabbing an element from a component. 37 00:02:34,080 --> 00:02:36,030 Let's go through each of them. 38 00:02:36,060 --> 00:02:38,640 Define a variable called elements. 39 00:02:40,760 --> 00:02:47,240 The value for this variable will be the fixture dot debug element dot query function. 40 00:02:49,550 --> 00:02:56,330 The fixture object has a property called Debug Element for referencing the entire component template. 41 00:02:56,360 --> 00:03:01,920 On this object we can select an element from the template by calling the query function. 42 00:03:01,940 --> 00:03:05,610 Keep in mind this is not the actual DOM element. 43 00:03:05,630 --> 00:03:10,590 The debug element is a representation of the template as an object. 44 00:03:10,610 --> 00:03:13,850 We can't use the query selector function. 45 00:03:14,120 --> 00:03:17,180 This function accepts a special type of value. 46 00:03:17,210 --> 00:03:22,310 We have to generate a selector with a function called by CSS. 47 00:03:22,340 --> 00:03:24,140 Pass that into the function. 48 00:03:26,320 --> 00:03:31,380 Next we must pass in a valid CCIS selector as a string. 49 00:03:31,390 --> 00:03:35,260 If the element is hidden, it should have the hidden class. 50 00:03:37,340 --> 00:03:40,360 We may receive an error for using this function. 51 00:03:40,370 --> 00:03:46,040 The by object is not available unless we import it at the top of the file. 52 00:03:46,040 --> 00:03:51,830 Import the buy object from the angular slash platform browser package. 53 00:03:54,060 --> 00:03:55,560 Heading back to the test. 54 00:03:55,560 --> 00:04:00,570 We've successfully selected the element before writing the test assertion. 55 00:04:00,570 --> 00:04:04,230 Let's explore the other options for selecting an element. 56 00:04:04,260 --> 00:04:12,720 Create a variable called element to the value for this variable will be the fixture dot native element. 57 00:04:12,720 --> 00:04:15,120 Dot query selector function. 58 00:04:17,519 --> 00:04:24,750 Angular will expose the component templates elements via two properties called native element and debug 59 00:04:24,750 --> 00:04:25,440 element. 60 00:04:25,470 --> 00:04:27,280 Sounds strange, right? 61 00:04:27,300 --> 00:04:29,530 Why would we need two different objects? 62 00:04:29,550 --> 00:04:30,930 The reason is simple. 63 00:04:30,930 --> 00:04:33,640 Angular does not need to run on the browser. 64 00:04:33,660 --> 00:04:36,720 We can run applications on different platforms. 65 00:04:36,870 --> 00:04:42,390 The Native Element Object exposes the template via the browser's DOM API. 66 00:04:42,420 --> 00:04:47,880 We have access to the same methods and properties available from the document object. 67 00:04:47,910 --> 00:04:52,310 The debug element object is angular as version of the templates. 68 00:04:52,320 --> 00:04:54,660 It's independent of any platform. 69 00:04:54,690 --> 00:05:01,290 If we're not running our app in the browser, the native element property may give us trouble since 70 00:05:01,290 --> 00:05:04,260 we don't have access to the browsers API. 71 00:05:04,290 --> 00:05:08,490 The debug element object is considered more reliable. 72 00:05:08,730 --> 00:05:12,090 Regardless, you may need to use it in your tests. 73 00:05:12,090 --> 00:05:16,440 Let's select the element with the query selector function. 74 00:05:16,470 --> 00:05:19,500 The value will be the following dot hidden. 75 00:05:21,740 --> 00:05:26,050 Let's look at the last solution for selecting an element from the test. 76 00:05:26,060 --> 00:05:29,070 Create a variable called element three. 77 00:05:29,090 --> 00:05:34,040 The value will be the following document dot query selector. 78 00:05:34,040 --> 00:05:35,150 Dot hidden. 79 00:05:37,560 --> 00:05:39,160 Tests run in the browser. 80 00:05:39,180 --> 00:05:42,500 Therefore, we have access to the DOM API. 81 00:05:42,510 --> 00:05:45,830 We don't need to use Angular for selecting elements. 82 00:05:45,840 --> 00:05:49,800 However, it's not recommended to use the DOM API. 83 00:05:49,830 --> 00:05:54,310 It's possible that change detection can cause the element to disappear. 84 00:05:54,330 --> 00:05:57,870 It's not reliable as a solution for selecting elements. 85 00:05:57,900 --> 00:06:01,980 You're better off using the properties from the fixture object. 86 00:06:02,010 --> 00:06:06,570 In my opinion, the first solution is the best solution for our test. 87 00:06:06,600 --> 00:06:08,850 Let's write our test assertion. 88 00:06:08,850 --> 00:06:12,450 Call the expected function with the element variable. 89 00:06:14,550 --> 00:06:17,170 Next chain me to be truth. 90 00:06:17,190 --> 00:06:18,000 You function. 91 00:06:20,050 --> 00:06:22,480 Check out the browser for the results. 92 00:06:24,560 --> 00:06:27,020 Our test passes successfully. 93 00:06:27,020 --> 00:06:32,930 By selecting the element science class, we can verify that the tab is hidden from the user. 94 00:06:32,960 --> 00:06:38,510 In the next lecture, let's write another test for testing the opposite behavior.