In this lecture, we are going to write one more test.
Let's write a test for checking that the video player is functional.
If users aren't able to play clips, this means that our app is not working.
Let's get started.
First, we will review the steps that will be performed by our test.
The first step is to visit the home page.
Naturally, users will visit the home page on their first visit.
Afterward, we'll click on the first clip from the list of clips.
Next, the video player will be clicked on to begin playing the clip.
Once the clip starts playing, we'll wait 5 seconds before clicking on the video player to pause the
clip.
Lastly, we will assert the width of the progress bar.
Overall, it's a simple test that will verify that the clip player is working.
If the test fails, we can assume that the video player is non functional.
To get started.
We should create a new test file in the cypress slash e2e directory.
Create a file called clip dot.
See why dot pt is.
Next, add the described block to group the test suite.
The identifier will be the following clip.
Afterward pass in a function for the body.
Inside the body.
Call the it function with the following description should play clip.
Lastly passed in a function as the second argument.
The basic setup is ready.
As we discussed before, the first step in our test will be to visit the home page.
We already know how to perform this step and the body of the function call the c y dot visit function
with a forward slash character passed in.
Our next step is to click on the first clip from the list of clips.
Selecting elements in the document can be performed with the c y dot get function.
This function accepts a valid CSS selector pass in the following selector app clips list greater than
dot grid a colon first.
Angular does not remove component tags from the document.
If we were to search through the document, component tags are kept in place.
The components template is inserted into the tags of our components while it clutters the document.
It does allow us to select the components template in our tests.
The list of clips are rendered with the Eclipse List component and this example we are selecting the
first anchor element in the list after selecting an element chain, a function called Click.
In addition to the elements properties, Cyprus offers a wide variety of functions for interacting with
elements.
For example, we can trigger a click event with this function.
This action should cause the next page to load.
Here's the best part about Cyprus.
We do not need to wait for the page to load with our code.
Cyprus will automatically wait for the page to load before running the next step.
We can immediately assume or on the next page, which is the page for an individual clip.
Let's play the clip by using the following chain of functions.
See why dot get video.
Just click.
Our application uses the video JS library for playing videos.
All videos will have the video JS class.
We can select the video player with this class.
After selecting the element for the video, we start playing the video with the click function.
Before pausing the video, we should wait a few seconds to allow the video to play.
Luckily, we can instruct side press to manually wait by calling the c y dot wait function.
Cyprus will wait before proceeding with the next action we need to pass in the time in milliseconds,
we'll wait for 3000 milliseconds.
Next, we're going to pause the video with the same code as before.
You can copy and paste the previous line.
Great.
The last step is to write a test assertion.
In the resource section of this lecture, I provide a link to a library called Shy.
China is a testing library for JavaScript applications.
It's very similar to Jasmine.
Under the hood, Cypress uses Chai for writing test assertions.
You can refer to this library's documentation for a complete list of functions available.
Luckily, most of the functions have a similar syntax to Jasmine.
If you check out the examples, you'll notice a lot of similarities such as the expect function.
Let's try writing our first test assertion.
Head back to the editor.
Our test should check the progress bar of the video player.
The width of the progress should have a greater width than zero pixels by having a width.
This indicates that the video was playing first.
Let's select the element for the progress bar.
Run the see why not get function.
The Progress bar has a class called VG s play progress.
Let's add it as the selector.
After grabbing the element.
Let's grab the width by calling the invoke function.
Behind the scenes, Cypress uses a similar API to query for selecting elements most or queries functions
are supported in Cyprus.
If you're not familiar with jQuery, that's perfectly fine.
In the resource section of this lecture, I provide a link to this library.
Before frameworks like Angular applications were developed with jQuery.
While not as popular anymore, it offers various functions for interacting with elements and has a function
called width for grabbing the width of an element.
We can run jQuery functions by chaining the invoke function after selecting an element with Cypress.
Let's head back to our editors.
The invoke function accepts the name of a jQuery function.
In our case, we're trying to invoke a function called width.
After grabbing the width, we can test the value by chaining a function called should.
They should.
Function's definition comes from the China testing framework.
At this point, the API for the China Testing Library differs from Jasmine.
The first argument of this function is how it should compare the value.
Let's pass in GTI.
This string is short for greater than or equal to.
It'll tell.
Try to compare the current value with another value.
The value should be greater than or equal to the value passed into the second argument.
In this example, let's pass in zero.
As long as the width of the progress bar is greater than zero, our tests can be considered a success.
Switch over to the browser for running our tests in the list of tests.
The clip test file should appear in the list.
Click on it to initiate the test.
After a few seconds, the tests should pass.
Great.
We're finished writing tests.
Is this simple?
We don't have to worry about checking up.
The page has loaded so I press is smart enough to start clicking after the document is fully loaded.
The only time we have to tell it to wait is after the clip starts playing.
We've written our first real test.
We were able to test the clip by selecting elements and then mimicking the user behavior of clicking
on them.
Cypress provides us with the functions necessary for interacting with the browser.
With that finished, that wraps up this section on testing.
Admittedly, testing can feel repetitive and boring, but after you've written them, you never have
to worry about manually testing your app again.
Testing allows you to automate a lot of the process for testing a feature.
If you ever write new features for your app, you can run the tests to make sure nothing else breaks.