Testing Using Cypress

What Is Cypress?

Cypress is an automated testing tool that can be used for modern web application development. Cypress enables integration testing, functional testing, and end-to-end testing easily and efficiently. Cypress runs in the browser and interacts directly with DOM elements, thus providing a stable and consistent testing experience. It is hoped that in the future testing using Cypress will become a standard in application testing.

Installation

tip

No specific version is required.

The first thing to do is install Cypress on your device.

1. Open your terminal.
2. Add the command below.

   npm install cypress --save-dev
3. Enter to Install and wait until it is done.

Cypress and Modular System

The modular system in Cypress is a practice that organizes end-to-end (E2E) tests into separate files. Instead of having one monolithic test file, Cypress' modular system allows developers to group tests into separate files.

With this modular system, developers can avoid problems that may occur when changing a single test, which may require testing all the tests in the file. In addition, the modular system also allows developers to have more control over the setup and conditions that each test requires.

Folder Structure

cypress
├── e2e
│   ├── test1.cy.ts
│   ├── test2.cy.ts
│   └── ...
├── fixtures
│   ├── fixtures1.json
│   └── ...
├── support
│   ├── support1.ts
│   └── ...
└── ...

Folder Name	Description
e2e	Contains end to end testing and is also temporarily used for storing unit tests.
fixtures	This is a folder filled with support data for testing in json format.
support	A folder contains a collection of unit testing files that are imported into e2e testing.

Testing Types

So far, there are 2 types of testing as follows:

End-To-End Testing

Penggunaan unit test dan E2E testing digunakan untuk memastikan bahwa aplikasi berjalan sesuai harapan. Misalnya, ketika ada pengembangan fitur baru, ada kemungkinan bahwa fitur baru tersebut akan berdampak pada fitur yang sudah ada sebelumnya. Oleh karena itu, E2E testing diperlukan untuk memastikan bahwa fitur yang sudah ada masih berfungsi dengan baik setelah adanya penambahan fitur baru.

Unit Testing

Unit testing is a software testing practice in which the smallest units of code, such as functions or methods, are tested in isolation to ensure that each unit functions correctly. The goal is to validate that each unit of the program behaves according to predefined functional specifications.

How To

Guide cypress testing

1. Open the repository arkademi-frontend-next-v2.
2. Switch it to unit-testing branch.
3. Install the package and ignore dependency issues relating to incompatible versions of peer modules.

   npm i --legacy-peer-deps
4. Run Cypress in GUI (Graphical User Interface) mode.

   npm run cypress:open
5. The Cypress GUI window is opened, choose E2E Testing.
6. Choose Chrome as the testing browser.
7. On the sidebar, click specs.
8. Scroll down to the homepage, course page and checkout page.
9. Click test spec on any of the three specs above
10. Run the test.

---

Writer, Media
Contributor, Chaton
25 April 2024