1
00:00:00,090 --> 00:00:06,220
In this lecture, we are going to write a test for testing the opposite behavior of our previous test.

2
00:00:06,240 --> 00:00:13,020
Previously, we tested the default behavior of a component by checking the components templates in your

3
00:00:13,020 --> 00:00:15,900
editor, open the tab test file.

4
00:00:18,180 --> 00:00:22,900
The last test checked for the hidden class on the div elements.

5
00:00:22,920 --> 00:00:27,510
If this class was present on the element, the tab was hidden from the page.

6
00:00:27,540 --> 00:00:33,810
Let's try toggling the appearance of the tab by changing the active property to true.

7
00:00:33,840 --> 00:00:37,410
After doing so, we can create a test assertion.

8
00:00:37,440 --> 00:00:40,880
The test is going to be similar to our last test.

9
00:00:40,900 --> 00:00:45,270
In fact, we can make a copy of this test to speed up the process.

10
00:00:45,300 --> 00:00:48,510
Let's copy and paste the last test.

11
00:00:50,710 --> 00:00:56,470
Next changed the description to the following should not have hidden class.

12
00:00:58,640 --> 00:01:00,140
At the top of the test.

13
00:01:00,140 --> 00:01:04,760
Let's change the component active property to true.

14
00:01:07,030 --> 00:01:12,400
As a reminder, the component variable holds the instance of the component.

15
00:01:12,400 --> 00:01:17,310
We have access to the methods and properties of the components class.

16
00:01:17,320 --> 00:01:19,840
We can freely modify the properties.

17
00:01:19,840 --> 00:01:27,070
In this example, we are changing the active property to display the tab after updating this property

18
00:01:27,070 --> 00:01:31,030
called the fixture dot detect changes function.

19
00:01:33,270 --> 00:01:36,930
Change detection does not run after updating a property.

20
00:01:36,960 --> 00:01:43,290
Attempting to test our component without running change detection will bring back mixed results for

21
00:01:43,290 --> 00:01:44,980
the most accurate results.

22
00:01:45,000 --> 00:01:50,400
I always recommend running change detection after updating a component's properties.

23
00:01:50,430 --> 00:01:53,930
The last step is to update our test assertion.

24
00:01:53,940 --> 00:01:59,060
The queries we've written will not be able to find an element with the hidden class.

25
00:01:59,070 --> 00:02:02,040
The variables will store a null value.

26
00:02:02,070 --> 00:02:04,420
Therefore our test will fail.

27
00:02:04,440 --> 00:02:07,230
We have different ways to assert a test.

28
00:02:07,260 --> 00:02:11,600
The first solution is to change the function from to be true.

29
00:02:11,970 --> 00:02:13,230
Two to be false.

30
00:02:13,230 --> 00:02:13,710
See.

31
00:02:15,900 --> 00:02:17,190
The to be false.

32
00:02:17,190 --> 00:02:19,620
You function will check for a false value.

33
00:02:19,650 --> 00:02:23,420
This solution works, but I want to present another option.

34
00:02:23,430 --> 00:02:27,540
Not all matches will have a function for checking the opposite value.

35
00:02:27,570 --> 00:02:32,000
Luckily, Jasmine has a solution for inverting matches.

36
00:02:32,010 --> 00:02:33,690
Lets revert the function.

37
00:02:33,690 --> 00:02:35,710
Let's say the to be false.

38
00:02:35,730 --> 00:02:37,520
If function didn't exist.

39
00:02:37,530 --> 00:02:42,510
In this case we can chain an object called not before the function.

40
00:02:44,760 --> 00:02:48,490
The not object is available for all matters.

41
00:02:48,510 --> 00:02:51,860
By chaining this object, the matcher becomes inverted.

42
00:02:51,870 --> 00:02:54,390
The opposite behavior will be tested.

43
00:02:54,390 --> 00:02:58,410
In this example, we are checking for a non true value.

44
00:02:58,440 --> 00:03:00,330
Let's check out the browser.

45
00:03:02,460 --> 00:03:03,190
Great.

46
00:03:03,210 --> 00:03:05,760
Our tests are passing with flying colors.

47
00:03:05,760 --> 00:03:10,140
In the next lecture, let's continue exploring component tests.