1
00:00:00,120 --> 00:00:03,310
In this lecture, we are going to write one more test.

2
00:00:03,330 --> 00:00:07,400
Let's write a test for checking that the video player is functional.

3
00:00:07,410 --> 00:00:12,240
If users aren't able to play clips, this means that our app is not working.

4
00:00:12,240 --> 00:00:13,640
Let's get started.

5
00:00:13,650 --> 00:00:18,150
First, we will review the steps that will be performed by our test.

6
00:00:18,150 --> 00:00:21,060
The first step is to visit the home page.

7
00:00:21,060 --> 00:00:25,680
Naturally, users will visit the home page on their first visit.

8
00:00:25,710 --> 00:00:30,750
Afterward, we'll click on the first clip from the list of clips.

9
00:00:30,750 --> 00:00:35,340
Next, the video player will be clicked on to begin playing the clip.

10
00:00:35,340 --> 00:00:41,640
Once the clip starts playing, we'll wait 5 seconds before clicking on the video player to pause the

11
00:00:41,640 --> 00:00:42,210
clip.

12
00:00:42,210 --> 00:00:46,050
Lastly, we will assert the width of the progress bar.

13
00:00:46,080 --> 00:00:50,820
Overall, it's a simple test that will verify that the clip player is working.

14
00:00:50,820 --> 00:00:55,290
If the test fails, we can assume that the video player is non functional.

15
00:00:55,970 --> 00:00:57,050
To get started.

16
00:00:57,050 --> 00:01:03,020
We should create a new test file in the cypress slash e2e directory.

17
00:01:03,050 --> 00:01:05,630
Create a file called clip dot.

18
00:01:05,660 --> 00:01:08,180
See why dot pt is.

19
00:01:10,380 --> 00:01:15,090
Next, add the described block to group the test suite.

20
00:01:15,120 --> 00:01:18,060
The identifier will be the following clip.

21
00:01:20,290 --> 00:01:23,320
Afterward pass in a function for the body.

22
00:01:25,480 --> 00:01:26,740
Inside the body.

23
00:01:26,740 --> 00:01:32,200
Call the it function with the following description should play clip.

24
00:01:34,400 --> 00:01:38,180
Lastly passed in a function as the second argument.

25
00:01:40,440 --> 00:01:42,060
The basic setup is ready.

26
00:01:42,060 --> 00:01:47,420
As we discussed before, the first step in our test will be to visit the home page.

27
00:01:47,430 --> 00:01:54,990
We already know how to perform this step and the body of the function call the c y dot visit function

28
00:01:54,990 --> 00:01:58,050
with a forward slash character passed in.

29
00:02:00,480 --> 00:02:04,650
Our next step is to click on the first clip from the list of clips.

30
00:02:04,650 --> 00:02:10,080
Selecting elements in the document can be performed with the c y dot get function.

31
00:02:12,270 --> 00:02:20,490
This function accepts a valid CSS selector pass in the following selector app clips list greater than

32
00:02:20,490 --> 00:02:23,430
dot grid a colon first.

33
00:02:25,630 --> 00:02:29,140
Angular does not remove component tags from the document.

34
00:02:29,170 --> 00:02:33,690
If we were to search through the document, component tags are kept in place.

35
00:02:33,700 --> 00:02:40,300
The components template is inserted into the tags of our components while it clutters the document.

36
00:02:40,330 --> 00:02:44,490
It does allow us to select the components template in our tests.

37
00:02:44,500 --> 00:02:50,920
The list of clips are rendered with the Eclipse List component and this example we are selecting the

38
00:02:50,920 --> 00:02:57,340
first anchor element in the list after selecting an element chain, a function called Click.

39
00:02:59,620 --> 00:03:05,860
In addition to the elements properties, Cyprus offers a wide variety of functions for interacting with

40
00:03:05,860 --> 00:03:06,610
elements.

41
00:03:06,640 --> 00:03:10,610
For example, we can trigger a click event with this function.

42
00:03:10,630 --> 00:03:13,600
This action should cause the next page to load.

43
00:03:13,630 --> 00:03:15,880
Here's the best part about Cyprus.

44
00:03:15,880 --> 00:03:19,450
We do not need to wait for the page to load with our code.

45
00:03:19,450 --> 00:03:24,340
Cyprus will automatically wait for the page to load before running the next step.

46
00:03:24,520 --> 00:03:30,530
We can immediately assume or on the next page, which is the page for an individual clip.

47
00:03:30,550 --> 00:03:34,780
Let's play the clip by using the following chain of functions.

48
00:03:34,780 --> 00:03:37,870
See why dot get video.

49
00:03:37,870 --> 00:03:39,820
Just click.

50
00:03:42,280 --> 00:03:47,020
Our application uses the video JS library for playing videos.

51
00:03:47,050 --> 00:03:50,710
All videos will have the video JS class.

52
00:03:50,710 --> 00:03:54,010
We can select the video player with this class.

53
00:03:54,010 --> 00:03:59,920
After selecting the element for the video, we start playing the video with the click function.

54
00:03:59,920 --> 00:04:05,050
Before pausing the video, we should wait a few seconds to allow the video to play.

55
00:04:05,080 --> 00:04:12,100
Luckily, we can instruct side press to manually wait by calling the c y dot wait function.

56
00:04:14,290 --> 00:04:21,160
Cyprus will wait before proceeding with the next action we need to pass in the time in milliseconds,

57
00:04:21,160 --> 00:04:23,980
we'll wait for 3000 milliseconds.

58
00:04:26,080 --> 00:04:29,980
Next, we're going to pause the video with the same code as before.

59
00:04:30,010 --> 00:04:33,070
You can copy and paste the previous line.

60
00:04:35,220 --> 00:04:35,840
Great.

61
00:04:35,850 --> 00:04:38,580
The last step is to write a test assertion.

62
00:04:38,580 --> 00:04:43,980
In the resource section of this lecture, I provide a link to a library called Shy.

63
00:04:46,210 --> 00:04:49,840
China is a testing library for JavaScript applications.

64
00:04:49,840 --> 00:04:51,830
It's very similar to Jasmine.

65
00:04:51,850 --> 00:04:56,170
Under the hood, Cypress uses Chai for writing test assertions.

66
00:04:56,170 --> 00:05:01,570
You can refer to this library's documentation for a complete list of functions available.

67
00:05:01,570 --> 00:05:06,040
Luckily, most of the functions have a similar syntax to Jasmine.

68
00:05:06,040 --> 00:05:11,820
If you check out the examples, you'll notice a lot of similarities such as the expect function.

69
00:05:11,830 --> 00:05:15,000
Let's try writing our first test assertion.

70
00:05:15,010 --> 00:05:16,570
Head back to the editor.

71
00:05:16,570 --> 00:05:20,530
Our test should check the progress bar of the video player.

72
00:05:20,530 --> 00:05:26,050
The width of the progress should have a greater width than zero pixels by having a width.

73
00:05:26,050 --> 00:05:29,140
This indicates that the video was playing first.

74
00:05:29,140 --> 00:05:32,050
Let's select the element for the progress bar.

75
00:05:32,080 --> 00:05:35,380
Run the see why not get function.

76
00:05:37,600 --> 00:05:42,650
The Progress bar has a class called VG s play progress.

77
00:05:42,670 --> 00:05:44,800
Let's add it as the selector.

78
00:05:46,980 --> 00:05:48,540
After grabbing the element.

79
00:05:48,540 --> 00:05:51,990
Let's grab the width by calling the invoke function.

80
00:05:54,170 --> 00:06:01,910
Behind the scenes, Cypress uses a similar API to query for selecting elements most or queries functions

81
00:06:01,910 --> 00:06:03,600
are supported in Cyprus.

82
00:06:03,620 --> 00:06:07,400
If you're not familiar with jQuery, that's perfectly fine.

83
00:06:07,400 --> 00:06:12,470
In the resource section of this lecture, I provide a link to this library.

84
00:06:14,650 --> 00:06:19,830
Before frameworks like Angular applications were developed with jQuery.

85
00:06:19,840 --> 00:06:26,350
While not as popular anymore, it offers various functions for interacting with elements and has a function

86
00:06:26,350 --> 00:06:29,540
called width for grabbing the width of an element.

87
00:06:29,560 --> 00:06:36,430
We can run jQuery functions by chaining the invoke function after selecting an element with Cypress.

88
00:06:36,460 --> 00:06:38,590
Let's head back to our editors.

89
00:06:38,710 --> 00:06:42,430
The invoke function accepts the name of a jQuery function.

90
00:06:42,460 --> 00:06:46,300
In our case, we're trying to invoke a function called width.

91
00:06:48,470 --> 00:06:53,630
After grabbing the width, we can test the value by chaining a function called should.

92
00:06:55,840 --> 00:06:56,650
They should.

93
00:06:56,650 --> 00:07:00,580
Function's definition comes from the China testing framework.

94
00:07:00,610 --> 00:07:06,010
At this point, the API for the China Testing Library differs from Jasmine.

95
00:07:06,040 --> 00:07:10,390
The first argument of this function is how it should compare the value.

96
00:07:10,390 --> 00:07:12,610
Let's pass in GTI.

97
00:07:14,870 --> 00:07:18,530
This string is short for greater than or equal to.

98
00:07:18,570 --> 00:07:19,310
It'll tell.

99
00:07:19,310 --> 00:07:22,580
Try to compare the current value with another value.

100
00:07:22,610 --> 00:07:28,010
The value should be greater than or equal to the value passed into the second argument.

101
00:07:28,040 --> 00:07:30,830
In this example, let's pass in zero.

102
00:07:33,040 --> 00:07:39,120
As long as the width of the progress bar is greater than zero, our tests can be considered a success.

103
00:07:39,130 --> 00:07:44,050
Switch over to the browser for running our tests in the list of tests.

104
00:07:44,080 --> 00:07:47,180
The clip test file should appear in the list.

105
00:07:47,200 --> 00:07:49,720
Click on it to initiate the test.

106
00:07:55,540 --> 00:07:58,550
After a few seconds, the tests should pass.

107
00:07:58,570 --> 00:07:59,200
Great.

108
00:07:59,200 --> 00:08:01,210
We're finished writing tests.

109
00:08:01,210 --> 00:08:02,380
Is this simple?

110
00:08:02,380 --> 00:08:04,330
We don't have to worry about checking up.

111
00:08:04,330 --> 00:08:10,130
The page has loaded so I press is smart enough to start clicking after the document is fully loaded.

112
00:08:10,150 --> 00:08:14,470
The only time we have to tell it to wait is after the clip starts playing.

113
00:08:14,500 --> 00:08:17,070
We've written our first real test.

114
00:08:17,080 --> 00:08:22,780
We were able to test the clip by selecting elements and then mimicking the user behavior of clicking

115
00:08:22,780 --> 00:08:23,450
on them.

116
00:08:23,470 --> 00:08:28,690
Cypress provides us with the functions necessary for interacting with the browser.

117
00:08:28,780 --> 00:08:32,590
With that finished, that wraps up this section on testing.

118
00:08:32,620 --> 00:08:37,900
Admittedly, testing can feel repetitive and boring, but after you've written them, you never have

119
00:08:37,900 --> 00:08:40,750
to worry about manually testing your app again.

120
00:08:40,780 --> 00:08:45,420
Testing allows you to automate a lot of the process for testing a feature.

121
00:08:45,430 --> 00:08:52,510
If you ever write new features for your app, you can run the tests to make sure nothing else breaks.