In this lecture, we are going to explore Cyprus for running tests.
Cyprus makes this process as painless as possible before running Cyprus.
Let's explore the files in your project.
A few files have been created for helping you get started.
Let's start with the configuration file in your editor.
Open the Cyprus dot config dots file.
And the configuration we're importing the define config function for code completion.
It's completely optional to use this function.
However, it'll be easier to configure the file with code completion.
The last thing you want is a typo in your configuration file and this file the function is exported
with an object.
In this object we can add the configuration settings.
Cypress supports components and E to E testing for this demonstration.
We're interested solely in E to E testing.
Therefore we can add the E to E object.
Within this object, we're setting the base URL to our application.
Cypress will launch a browser.
We can instruct the browser to load our application during testing.
This saves us from performing this action from within our tests by defaults.
Most angular apps are served locally with Port 4200.
We do not need to make further modifications.
In the resource section of this lecture, I provide a link to the official documentation page for the
configuration settings.
I highly recommend checking out this page for a complete list of settings for our application.
The default settings will work for most projects.
As long as Cyprus can open our application, we can consider our configuration complete.
Let's head back to the editor in our projects directory.
A new folder was created called Cyprus.
If we look inside, we will be greeted with a few files.
First and foremost, a TypeScript configuration file will be available.
In most cases, you will likely want to write your tests with TypeScript.
It would be a pain to reconfigure TypeScript for Cyprus.
Luckily we don't have to.
The extends option will integrate an existing configuration file with the current file.
The most important setting in this file is the compiler options dot types property similar to Jasmine
Cypress will introduce a set of functions for performing actions in the browser.
TypeScript will be unfamiliar with these functions.
As a result, errors will be thrown by adding the cypress types to the array.
We can avoid these types of errors.
Let's explore the folders.
Firstly, we have an E to E folder.
This folder will contain our tests.
We will be spending most of our time in this folder.
Up next, we have a folder called Fixtures.
You may want to test an application with dummy data.
For example, you may want to create fake users rather than storing the user's registration details
in a test.
You can outsource user data in this file.
Fixtures are available globally in your tests.
Afterward, we have a folder called Support Supports R files that Cypress will load before tests run.
A common use case is to define a set of commands.
You can think of commands as actions you can perform in the browser.
For example, your tests may need to log in to the application, writing this type of action in multiple
tests as an efficient rather than repeating the same lines of code.
You can outsource this logic into a command which can be executed from your tests.
Now that we have an overview of the files, let's run Cyprus.
We can run a single command for launching Cyprus in your editor.
Open the package dot json file.
Under the scripts object.
A new command was created called e2e.
There are other commands, but we won't worry about them.
The most important command is the E to E command.
This command will perform two actions.
Firstly, it will launch our application.
Secondly, it'll launch Cyprus.
Let's give it a try in the command line.
Run the NPM.
Run E to E commands.
During this process, the program may take a while to open the patients.
After a few moments, Cyprus should launch a new program.
The welcome screen will ask you to select a specific type of testing for our case.
We're going to configure E to E testing.
Select this option.
Pop.
Next, we can select a browser.
In my opinion, Chrome provides the easiest experience for running tests.
In most cases, you will select this option.
However, feel free to use a different browser.
I'm going to use Chrome.
Soon after, Chrome will launch a test runner.
On this page we are given a list of test files in our project by default.
The package should have added an example.
Test.
Let's click on it.
This will cause the test runner to open our application in a window.
On the left, we have a list of actions being performed by Cyprus.
The test is going to inevitably fail.
That's perfectly fine.
We'll explore the test file in the next lecture.
For now, as long as the application appears in the browser, we can consider our test a success.
Great.
Our application is ready for testing for the rest of this section.
You should always have Cyprus running unless I state otherwise.
In the next lecture let's begin writing a test.