test(web-app): update documentation
- coverage description - how to run - problem E2E CI
This commit is contained in:
@@ -7,7 +7,7 @@ The Home Monitor project uses Cypress to automate both End-to-End (E2E) and unit
|
|||||||
### Types of Tests
|
### Types of Tests
|
||||||
|
|
||||||
- **End-to-End (E2E) Tests**: Simulate real user behavior on the web interface. They check critical user flows, data display, error handling, and the responsiveness of the application.
|
- **End-to-End (E2E) Tests**: Simulate real user behavior on the web interface. They check critical user flows, data display, error handling, and the responsiveness of the application.
|
||||||
- **Unit Tests**: Verify the correct functioning of JavaScript/TypeScript components and functions in isolation.
|
- **Unit Tests**: Verify the correct functioning of TypeScript components and functions in isolation.
|
||||||
|
|
||||||
### Test Structure
|
### Test Structure
|
||||||
|
|
||||||
@@ -16,28 +16,53 @@ The Home Monitor project uses Cypress to automate both End-to-End (E2E) and unit
|
|||||||
- Custom commands and global setup are in `web-app/cypress/support/`
|
- Custom commands and global setup are in `web-app/cypress/support/`
|
||||||
- Cypress configuration is in `web-app/cypress.config.ts`
|
- Cypress configuration is in `web-app/cypress.config.ts`
|
||||||
|
|
||||||
### Example Scenarios Covered
|
|
||||||
|
|
||||||
- Application loading and display of main sections
|
|
||||||
- Control panel functionality (buttons, filters)
|
|
||||||
- User, room, and device selection
|
|
||||||
- Display and update of measurement charts
|
|
||||||
- Handling of error or empty data states
|
|
||||||
- Responsive layout for mobile and desktop
|
|
||||||
|
|
||||||
## How to Run the Tests
|
## How to Run the Tests
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
- Node.js (v14+)
|
|
||||||
- npm or yarn
|
|
||||||
- Chrome browser
|
|
||||||
|
|
||||||
### Install Dependencies
|
### Install Dependencies
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd project-softweng/web-app
|
cd ./web-app
|
||||||
npm install
|
npm install --inlude=dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### Run unit Tests
|
### Run unit Tests
|
||||||
|
```bash
|
||||||
|
npm run test:unit
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run E2E Tests
|
||||||
|
```bash
|
||||||
|
npm run test:e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run All Tests
|
||||||
|
```bash
|
||||||
|
npm run test
|
||||||
|
```
|
||||||
|
|
||||||
|
### Note
|
||||||
|
The cypress GUI can be launched with the command:
|
||||||
|
```bash
|
||||||
|
npx cypress open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Test Coverage
|
||||||
|
|
||||||
|
### End-to-End (E2E) Tests
|
||||||
|
|
||||||
|
- **Fetch Measurements Button**:
|
||||||
|
- Verifies that the "Fetch Measurements" button is visible and functional on the main page.
|
||||||
|
- Tests fetching timeseries data with a valid user-room-device selection, ensuring the main chart is displayed and no "no data" message appears.
|
||||||
|
- Tests fetching timeseries data with an invalid user-room-device selection (e.g., changing the user to "Sylvan"), ensuring the main chart is not displayed and the "no data" message is shown.
|
||||||
|
|
||||||
|
#### Important Notes
|
||||||
|
The E2E tests use a web-app development image deployed on https://app.mse.kb28.ch/ for the moment. Because there is a problem with the service image in the CI. The environment variables cannot be set correctly to the job's service. An issue is opened to fix this problem: [#37].
|
||||||
|
|
||||||
|
### Unit Tests
|
||||||
|
|
||||||
|
- **Serie Component**:
|
||||||
|
- Checks that a `Serie` instance initializes with the correct properties.
|
||||||
|
- Validates that the correct label is returned for temperature and humidity types.
|
||||||
|
- Ensures the label "Unknown" is returned for unknown types.
|
||||||
|
- Verifies that temperature and humidity data are formatted correctly by `getSerie()`, including label, color, and data structure.
|
||||||
|
- Ensures unknown types are handled appropriately in `getSerie()`, defaulting to the correct color and axis.
|
||||||
|
|||||||
Reference in New Issue
Block a user