From bd503d564174891e04ce3ef8daa8ac617c3a2a70 Mon Sep 17 00:00:00 2001
From: fastium <yannsierro.pro@gmail.com>
Date: Fri, 13 Jun 2025 19:45:13 +0200
Subject: [PATCH] test(web-app): add e2e fetch process

It tests the normal request case of timeserie
---
 web-app/cypress.config.ts                 |  17 +-
 web-app/cypress.unit.js                   |  40 -----
 web-app/cypress/e2e/fetch_process.cy.ts   |  16 ++
 web-app/cypress/fixtures/example.json     |   5 +
 web-app/cypress/support/commands.ts       |  37 ++++
 web-app/cypress/support/e2e.ts            |  17 ++
 web-app/package.json                      |   4 +-
 web-app/src/components/ChartComponent.vue |  16 +-
 web-app/src/components/ControlPanel.vue   |  11 +-
 web-app/tests/e2e/app.spec.ts             | 196 ----------------------
 web-app/tests/support/commands.ts         |  73 --------
 web-app/tests/support/e2e.ts              |  11 --
 web-app/tests/tests.md                    | 146 ----------------
 web-app/tests/unit/Serie.spec.ts          | 129 --------------
 14 files changed, 93 insertions(+), 625 deletions(-)
 delete mode 100644 web-app/cypress.unit.js
 create mode 100644 web-app/cypress/e2e/fetch_process.cy.ts
 create mode 100644 web-app/cypress/fixtures/example.json
 create mode 100644 web-app/cypress/support/commands.ts
 create mode 100644 web-app/cypress/support/e2e.ts
 delete mode 100644 web-app/tests/e2e/app.spec.ts
 delete mode 100644 web-app/tests/support/commands.ts
 delete mode 100644 web-app/tests/support/e2e.ts
 delete mode 100644 web-app/tests/tests.md
 delete mode 100644 web-app/tests/unit/Serie.spec.ts

diff --git a/web-app/cypress.config.ts b/web-app/cypress.config.ts
index 68d0dc3..17161e3 100644
--- a/web-app/cypress.config.ts
+++ b/web-app/cypress.config.ts
@@ -2,21 +2,8 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    specPattern: "tests/e2e/*.spec.ts",
-    baseUrl: "http://localhost:8080",
-    supportFile: "tests/support/e2e.ts",
-    // Don't skip server checks - we want to ensure the app is running
-    // Wait up to 10 seconds for the server to be available
-    defaultCommandTimeout: 10000,
-    requestTimeout: 10000,
-    responseTimeout: 10000,
-    pageLoadTimeout: 30000,
-  },
-  component: {
-    devServer: {
-      framework: "vue",
-      bundler: "webpack",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
     },
-    specPattern: "src/**/*.cy.ts",
   },
 });
diff --git a/web-app/cypress.unit.js b/web-app/cypress.unit.js
deleted file mode 100644
index 0dca11f..0000000
--- a/web-app/cypress.unit.js
+++ /dev/null
@@ -1,40 +0,0 @@
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  // Shared settings for all test types
-  watchForFileChanges: false,
-  screenshotOnRunFailure: false,
-  video: false,
-  defaultCommandTimeout: 10000,
-  chromeWebSecurity: false,
-  retries: {
-    runMode: 2,
-    openMode: 0,
-  },
-  
-  // E2E test configuration
-  e2e: {
-    specPattern: ['tests/e2e/*.spec.ts', 'tests/unit/*.spec.ts'],
-    baseUrl: null, // No baseUrl to prevent server checks in headless mode
-    supportFile: 'tests/support/e2e.ts',
-    experimentalRunAllSpecs: true,
-    testIsolation: false, // Allow shared context for unit tests
-    setupNodeEvents(on, config) {
-      // Disable baseUrl verification for headless testing
-      on('before:browser:launch', (browser, launchOptions) => {
-        return launchOptions;
-      });
-      return config;
-    },
-  },
-  
-  // Component test configuration (for Vue components)
-  component: {
-    devServer: {
-      framework: 'vue',
-      bundler: 'webpack',
-    },
-    specPattern: 'tests/unit/*.spec.ts', // Component tests are in unit directory
-    supportFile: 'tests/support/e2e.ts',
-  },
-});
diff --git a/web-app/cypress/e2e/fetch_process.cy.ts b/web-app/cypress/e2e/fetch_process.cy.ts
new file mode 100644
index 0000000..8aaf42c
--- /dev/null
+++ b/web-app/cypress/e2e/fetch_process.cy.ts
@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+
+describe("Test fetch measurments button in the main page", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/");
+  });
+
+  it("Fetch timeseries with valid user-room-device", () => {
+    cy.get('[data-cy="new-measurements-button"]').should("be.visible");
+    // keep default mulitselector value for the test
+    cy.get('[data-cy="new-measurements-button"]').click();
+
+    cy.get('[data-cy="main-chart"]').should("be.visible");
+    cy.get('[data-cy="no-data-display"]').should("not.exist");
+  });
+});
diff --git a/web-app/cypress/fixtures/example.json b/web-app/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/web-app/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/web-app/cypress/support/commands.ts b/web-app/cypress/support/commands.ts
new file mode 100644
index 0000000..698b01a
--- /dev/null
+++ b/web-app/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/web-app/cypress/support/e2e.ts b/web-app/cypress/support/e2e.ts
new file mode 100644
index 0000000..e4e246e
--- /dev/null
+++ b/web-app/cypress/support/e2e.ts
@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
\ No newline at end of file
diff --git a/web-app/package.json b/web-app/package.json
index 0a4bc86..5143db1 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -7,8 +7,8 @@
     "build": "vue-cli-service build",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "test:unit": "cypress run --config-file cypress.unit.js --spec 'tests/unit/*.spec.ts'",
-    "test:e2e": "cypress run --spec 'tests/e2e/*.spec.ts'",
+    "test:unit": "cypress run --config-file cypress.unit.ts --spec 'cypress/unit/*.cy.ts'",
+    "test:e2e": "cypress run --spec 'cypress/e2e/*.cy.ts'",
     "test": "npm run test:unit && npm run test:e2e"
   },
   "dependencies": {
diff --git a/web-app/src/components/ChartComponent.vue b/web-app/src/components/ChartComponent.vue
index ff4ac4a..30b0869 100644
--- a/web-app/src/components/ChartComponent.vue
+++ b/web-app/src/components/ChartComponent.vue
@@ -1,16 +1,10 @@
 <!-- src/components/ChartComponent.vue -->
 <template>
-  <div class="chart-wrapper">
-    <div v-if="manager.loading" class="loading-state">Loading data...</div>
-    <div v-else-if="manager.error" class="error-state">{{ manager.error }}</div>
-    <div v-else class="chart-container">
-      <Scatter
-        v-if="chartData.datasets.length > 0"
-        :data="chartData"
-        :options="chartOptions"
-      />
-      <div v-else class="no-data-state">No data to display</div>
-    </div>
+  <div v-if="chartData.datasets.length > 0" class="chart-wrapper">
+    <Scatter data-cy="main-chart" :data="chartData" :options="chartOptions" />
+  </div>
+  <div v-else class="no-data-state" data-cy="no-data-display">
+    No data to display
   </div>
   <br />
 </template>
diff --git a/web-app/src/components/ControlPanel.vue b/web-app/src/components/ControlPanel.vue
index f12fe36..f21f4a5 100644
--- a/web-app/src/components/ControlPanel.vue
+++ b/web-app/src/components/ControlPanel.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="control-panel">
-    <button @click="newMeasurments" class="action-button">
+    <button @click="newMeasurments" class="action-button" data-cy="new-measurements-button">
         New Measurments
     </button>
 
-    <button @click="fetchData" class="refresh-button">
+    <button
+        @click="fetchData"
+        class="refresh-button"
+        data-cy="fetch-measurements-button"
+        >
         Fetch Measurments
     </button>
   </div>
@@ -12,6 +16,7 @@
   <div>
       <span>
         <multiselect
+        data-cy="user-mulitselect"
         id="user-select"
         v-model="manager.selected_user"
         :options="manager.user_options"
@@ -24,6 +29,7 @@
       </span>
       <span>
         <multiselect
+        data-cy="room-mulitselect"
         id="room-select"
         v-model="manager.selected_room"
         :options="manager.room_options"
@@ -36,6 +42,7 @@
       </span>
       <span>
         <multiselect
+        data-cy="device-mulitselect"
         id="device-select"
         v-model="manager.selected_device"
         :options="manager.device_options"
diff --git a/web-app/tests/e2e/app.spec.ts b/web-app/tests/e2e/app.spec.ts
deleted file mode 100644
index 1a7b054..0000000
--- a/web-app/tests/e2e/app.spec.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-/// <reference types="cypress" />
-
-import { TEMPERATURE, HUMIDITY } from "../../src/const";
-
-describe('Home Monitor Application (E2E)', () => {
-  // Prevent tests from failing when app throws uncaught exceptions (like 401 errors)
-  Cypress.on('uncaught:exception', (err) => {
-    // Returning false prevents Cypress from failing the test
-    console.log('Ignoring uncaught exception:', err.message);
-    return false;
-  });
-
-  beforeEach(() => {
-    // Visit the application running on the development server
-    cy.visit('/');
-    
-    // Mock ALL API calls to avoid authentication issues
-    cy.intercept('GET', '**/rest.mse.kb28.ch/**', (req) => {
-      // Generic mock for all GET requests to the API server
-      const mockData = {
-        data: [
-          { time: new Date(2023, 0, 1, 10, 0).getTime(), value: 22.5, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 10, 30).getTime(), value: 23.8, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 11, 0).getTime(), value: 24.2, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 10, 0).getTime(), value: 45, type: 'humidity' },
-          { time: new Date(2023, 0, 1, 10, 30).getTime(), value: 48, type: 'humidity' },
-          { time: new Date(2023, 0, 1, 11, 0).getTime(), value: 51, type: 'humidity' }
-        ],
-        users: ['user1', 'user2'],
-        rooms: ['living-room', 'bedroom', 'kitchen'],
-        devices: ['sensor1', 'sensor2', 'sensor3']
-      };
-      req.reply({ status: 200, body: mockData });
-    }).as('apiGetRequest');
-    
-    // More specific intercept for measurements endpoint
-    cy.intercept('GET', '**/api/measurements*', {
-      statusCode: 200,
-      body: {
-        data: [
-          { time: new Date(2023, 0, 1, 10, 0).getTime(), value: 22.5, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 10, 30).getTime(), value: 23.8, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 11, 0).getTime(), value: 24.2, type: 'temperature' },
-          { time: new Date(2023, 0, 1, 10, 0).getTime(), value: 45, type: 'humidity' },
-          { time: new Date(2023, 0, 1, 10, 30).getTime(), value: 48, type: 'humidity' },
-          { time: new Date(2023, 0, 1, 11, 0).getTime(), value: 51, type: 'humidity' }
-        ],
-        users: ['user1', 'user2'],
-        rooms: ['living-room', 'bedroom', 'kitchen'],
-        devices: ['sensor1', 'sensor2', 'sensor3']
-      }
-    }).as('getMeasurements');
-    
-    // Mock all POST requests to avoid auth issues
-    cy.intercept('POST', '**/rest.mse.kb28.ch/**', {
-      statusCode: 200,
-      body: { success: true }
-    }).as('apiPostRequest');
-    
-    // More specific intercept for new measurements endpoint
-    cy.intercept('POST', '**/api/measurements*', {
-      statusCode: 200,
-      body: { success: true }
-    }).as('postNewMeasurement');
-  });
-
-  it('should load the application with correct title', () => {
-    // Check page title
-    cy.contains('h1', 'Home Monitor').should('be.visible');
-    
-    // Verify main layout sections are present
-    cy.get('.sidebar').should('be.visible');
-    cy.get('.chart-area').should('be.visible');
-  });
-
-  it('should display the control panel with all interactive elements', () => {
-    // Verify control panel buttons
-    cy.contains('button', 'New Measurments').should('be.visible');
-    cy.contains('button', 'Fetch Measurments').should('be.visible');
-    
-    // Verify dropdowns
-    cy.get('#user-select').should('exist');
-    cy.get('#room-select').should('exist');
-    cy.get('#device-select').should('exist');
-  });
-
-  it('should load and display chart with data', () => {
-    // We can't reliably wait for specific API calls, so we'll give the app time to load
-    cy.wait(1000);
-    
-    // Verify the app structure is loaded
-    cy.get('.app-container').should('be.visible');
-    
-    // Chart.js creates a canvas element, which is difficult to test in detail
-    // But we can verify that the container exists
-    cy.get('.chart-area').should('be.visible');
-    cy.get('.chart-container').should('exist');
-  });
-
-  it('should fetch new data when "Fetch Measurements" is clicked', () => {
-    // Give the app time to stabilize
-    cy.wait(500);
-    
-    // Click the fetch button (force: true to bypass overlay issues)
-    cy.contains('button', 'Fetch Measurments').click({ force: true });
-    
-    // Give the app time to process the click
-    cy.wait(500);
-    
-    // Verify the app is still responsive
-    cy.get('.app-container').should('be.visible');
-  });
-
-  it('should request new measurements when "New Measurements" is clicked', () => {
-    // Click the New Measurements button (force: true to bypass overlay issues)
-    cy.contains('button', 'New Measurments').click({ force: true });
-    
-    // Give the app time to process the click
-    cy.wait(500);
-    
-    // Verify the app is still responsive
-    cy.get('.app-container').should('be.visible');
-  });
-
-  it('should allow selecting different users from dropdown', () => {
-    // Give the app time to load
-    cy.wait(500);
-    
-    // Test if user-select exists
-    cy.get('#user-select').should('exist');
-    
-    // We can't reliably test multiselect component in this environment,
-    // so we'll just verify that the component exists
-    cy.log('User selection dropdown is present in the DOM');
-  });
-
-  it('should allow selecting different rooms from dropdown', () => {
-    // Give the app time to load
-    cy.wait(500);
-    
-    // Test if room-select exists
-    cy.get('#room-select').should('exist');
-    
-    // We can't reliably test multiselect component in this environment,
-    // so we'll just verify that the component exists
-    cy.log('Room selection dropdown is present in the DOM');
-  });
-
-  it('should allow selecting different devices from dropdown', () => {
-    // Give the app time to load
-    cy.wait(500);
-    
-    // Test if device-select exists
-    cy.get('#device-select').should('exist');
-    
-    // We can't reliably test multiselect component in this environment,
-    // so we'll just verify that the component exists
-    cy.log('Device selection dropdown is present in the DOM');
-  });
-
-  it('should handle error states appropriately', () => {
-    // In a real test, we would check error states
-    // Here we're just verifying the app structure
-    cy.get('.app-container').should('be.visible');
-    
-    // We need to skip this test for now since we can't reliably create error states
-    // in this environment due to the authentication issues
-    cy.log('Error state testing is skipped in this environment');
-  });
-
-  it('should handle empty data appropriately', () => {
-    // In a real test, we would check empty data states
-    // Here we're just verifying the app structure
-    cy.get('.app-container').should('be.visible');
-    
-    // We need to skip this test for now since we can't reliably create empty data states
-    // in this environment due to the authentication issues
-    cy.log('Empty data state testing is skipped in this environment');
-  });
-
-  it('should have responsive layout that adapts to different screen sizes', () => {
-    // Test responsive behavior at desktop size
-    cy.viewport(1200, 800);
-    cy.get('.main-content').should('have.css', 'grid-template-columns')
-      .and('not.eq', '1fr');
-    
-    // Test at mobile size
-    cy.viewport(600, 800);
-    
-    // On mobile, the layout should change, but we can't reliably test CSS in this environment
-    // Instead, we'll just verify that the elements still exist at the different viewport size
-    cy.get('.sidebar').should('exist');
-    cy.get('.chart-area').should('exist');
-    cy.log('Responsive layout verified at mobile viewport size');
-  });
-});
\ No newline at end of file
diff --git a/web-app/tests/support/commands.ts b/web-app/tests/support/commands.ts
deleted file mode 100644
index 39b9b22..0000000
--- a/web-app/tests/support/commands.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-
-// -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
-  // Implementation example for a login command
-  cy.visit('/login')
-  cy.get('[data-cy=email]').type(email)
-  cy.get('[data-cy=password]').type(password)
-  cy.get('[data-cy=submit]').click()
-})
-
-// -- This is a child command --
-Cypress.Commands.add('getByDataCy', { prevSubject: 'element' }, (subject, value) => {
-  return cy.wrap(subject).find(`[data-cy=${value}]`)
-})
-
-// -- This is a dual command --
-Cypress.Commands.add('getByTestId', { prevSubject: 'optional' }, (subject, value) => {
-  return subject 
-    ? cy.wrap(subject).find(`[data-testid=${value}]`) 
-    : cy.get(`[data-testid=${value}]`)
-})
-
-// -- Example command for chart testing --
-Cypress.Commands.add('getChartCanvas', (selector = 'canvas') => {
-  return cy.get(selector)
-})
-
-// -- Command to select an option from a multiselect dropdown --
-Cypress.Commands.add('selectMultiselectOption', (selectId, optionText) => {
-  cy.get(`#${selectId}`).click()
-  cy.get('.multiselect__content-wrapper').contains(optionText).click()
-})
-
-// -- Command to wait for chart to load and be visible --
-Cypress.Commands.add('waitForChart', () => {
-  cy.get('.loading-state').should('not.exist')
-  cy.get('.chart-container canvas').should('be.visible')
-})
-
-// -- Command to check app loading state --
-Cypress.Commands.add('checkLoadingState', (isLoading) => {
-  if (isLoading) {
-    cy.get('.loading-state').should('be.visible')
-  } else {
-    cy.get('.loading-state').should('not.exist')
-  }
-})
-
-// Declare the types for the custom commands
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      login(email: string, password: string): Chainable<void>
-      getByDataCy(value: string): Chainable<JQuery<HTMLElement>>
-      getByTestId(value: string): Chainable<JQuery<HTMLElement>>
-      getChartCanvas(selector?: string): Chainable<JQuery<HTMLElement>>
-      selectMultiselectOption(selectId: string, optionText: string): Chainable<void>
-      waitForChart(): Chainable<void>
-      checkLoadingState(isLoading: boolean): Chainable<void>
-    }
-  }
-}
-
-export {}
\ No newline at end of file
diff --git a/web-app/tests/support/e2e.ts b/web-app/tests/support/e2e.ts
deleted file mode 100644
index eca373f..0000000
--- a/web-app/tests/support/e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Import cypress commands
-import "./commands";
-
-// Add Cypress types
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      // Add custom commands here if needed
-    }
-  }
-}
diff --git a/web-app/tests/tests.md b/web-app/tests/tests.md
deleted file mode 100644
index e9bfa20..0000000
--- a/web-app/tests/tests.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# Test Documentation
-
-This document describes the automated tests implemented for the Home Monitor project. The tests are written with Cypress and are organized into two distinct categories: unit tests and end-to-end (E2E) tests.
-
-## Test Types and Structure
-
-The tests are organized in separate folders according to their type:
-
-### 1. Unit Tests (`tests/unit/`)
-
-Unit tests focus on testing individual components or classes in isolation, without dependencies on other parts of the system.
-
-- **Example**: `Serie.spec.ts` - Tests the `Serie` class methods and functionality in isolation
-- **Purpose**: Verify that individual components work correctly on their own
-- **Characteristics**: Fast, focused, and test a single unit of code
-
-### 2. End-to-End Tests (`tests/e2e/`)
-
-E2E tests simulate real user scenarios by testing the entire application flow from start to finish.
-
-- **Example**: `app.spec.ts` - Tests complete user workflows like navigating the application and interacting with charts
-- **Purpose**: Verify that the entire application works as expected from a user's perspective
-- **Characteristics**: Most comprehensive, test the entire system, slower than other test types
-
-## Configuration
-
-Tests use a custom configuration in `cypress.unit.js` that allows different test types to run with appropriate settings. Key features:
-
-- Unit tests run without isolation (can share context)
-- E2E tests run with isolation (fresh environment for each test)
-- All tests can run without requiring a server (baseUrl is set to null)
-- Optimized settings for performance (no videos, screenshots disabled by default)
-
-## Running Tests
-
-### Running Specific Test Types
-
-```bash
-# Run unit tests
-npm run test:unit
-
-# Run E2E tests
-npm run test:e2e
-```
-
-### Running All Tests
-
-```bash
-npm run test
-```
-
-### Using Cypress GUI
-
-To run tests through the Cypress graphical interface:
-
-```bash
-npm run cypress:open
-```
-
-This method is particularly useful during development, as it allows you to:
-- View tests in real-time
-- Inspect DOM elements
-- Replay individual tests
-- See a detailed overview of the executed steps
-
-## Detailed Test Examples
-
-### Unit Tests for Serie Class
-
-The unit tests (`tests/unit/Serie.spec.ts`) verify that the Serie class works correctly in isolation:
-
-- **Initialization**: Tests that the class initializes with the correct properties
-- **Label Generation**: Tests that the `getLabel()` method returns the correct label based on series type
-- **Data Formatting**: Tests that the `getSerie()` method correctly formats data for the chart library
-
-### E2E Tests for Application
-
-The E2E tests (`tests/e2e/app.spec.ts`) verify complete user workflows:
-
-- **Application Loading**: Tests that the application loads correctly
-- **Data Display**: Tests that temperature and humidity data are displayed properly
-- **Filtering**: Tests that users can filter data by date range
-- **Room Selection**: Tests that users can switch between different rooms
-- **Error Handling**: Tests that errors are handled gracefully
-
-## Test Data Structure
-
-The tests use mock data in the following format:
-
-```typescript
-const mockData = [
-  { time: 1625097600000, value: new Date(22.5) },
-  { time: 1625184000000, value: new Date(23.8) }
-];
-```
-
-Where:
-- `time`: Unix timestamp in milliseconds
-- `value`: Value encapsulated in a Date object (according to the current implementation)
-
-## Special Note on Date Usage
-
-The `Serie` class uses `Date` objects to store temperature and humidity values, which is a unique approach. In the test code, we create Date objects by directly passing the numeric values to the constructor:
-
-```typescript
-new Date(22.5)  // For a temperature of 22.5°C
-new Date(45)    // For a humidity of 45%
-```
-
-This approach is specific to the current implementation of the `Serie` class and might be modified in the future to directly use numeric values.
-
-## Best Practices
-
-## Test Organization
-
-1. **Test Hierarchy**: 
-   - Unit tests -> E2E tests
-   - Tests should get progressively more comprehensive
-   - Most of your tests should be unit tests (faster and more focused)
-
-2. **AAA Structure**: Tests follow the Arrange-Act-Assert pattern:
-   - **Arrange**: Prepare test data and environment
-   - **Act**: Execute the action being tested
-   - **Assert**: Verify the expected results
-
-3. **Isolation**: Each test should be independent and not depend on shared state
-
-### Test Troubleshooting
-
-If tests fail, check the following:
-
-1. **Server Issues**: If you're running E2E tests that require a server, make sure it's started on the appropriate port
-
-2. **API Changes**: If the classes or components are modified, tests must be updated accordingly
-
-3. **Synchronization Issues**: Cypress might need additional time for certain operations
-
-4. **Environment Issues**: Verify that all dependencies are installed with `npm install`
-
-## Future Test Extensions
-
-The current tests cover basic functionality. In the future, it would be useful to add:
-
-1. More unit tests for all components and services
-2. More comprehensive E2E tests covering all user scenarios
-3. Performance tests for operations on large data sets
\ No newline at end of file
diff --git a/web-app/tests/unit/Serie.spec.ts b/web-app/tests/unit/Serie.spec.ts
deleted file mode 100644
index d1c228b..0000000
--- a/web-app/tests/unit/Serie.spec.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/// <reference types="cypress" />
-
-import { Serie } from "../../src/Measures/Serie";
-import { TEMPERATURE, HUMIDITY } from "../../src/const";
-import { Colors } from "../../src/Measures/Utils";
-
-describe("Serie Component Tests", () => {
-  // Mock data for tests
-  const mockDataTemperature = [
-    { time: 1625097600000, value: new Date(22.5) },
-    { time: 1625184000000, value: new Date(23.8) }
-  ];
-  
-  const mockDataHumidity = [
-    { time: 1625097600000, value: new Date(45) },
-    { time: 1625184000000, value: new Date(48) }
-  ];
-
-  it("should initialize with correct properties", () => {
-    // Create a new Serie instance
-    const serie = new Serie(
-      TEMPERATURE, 
-      mockDataTemperature,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    // Verify that it has the correct type
-    expect(serie).to.be.instanceOf(Serie);
-  });
-
-  it("should return the correct label for temperature", () => {
-    const serie = new Serie(
-      TEMPERATURE, 
-      mockDataTemperature,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    expect(serie.getLabel()).to.equal("Temperature [°C]");
-  });
-
-  it("should return the correct label for humidity", () => {
-    const serie = new Serie(
-      HUMIDITY, 
-      mockDataHumidity,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    expect(serie.getLabel()).to.equal("Humidity [%]");
-  });
-
-  it("should return 'Unknown' label for unknown type", () => {
-    const serie = new Serie(
-      "UNKNOWN_TYPE", 
-      mockDataTemperature,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    expect(serie.getLabel()).to.equal("Unknown");
-  });
-
-  it("should format temperature data correctly with getSerie()", () => {
-    const serie = new Serie(
-      TEMPERATURE, 
-      mockDataTemperature.map(item => ({ time: item.time, value: new Date(item.value) })),
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    const result = serie.getSerie();
-    
-    // Verify the properties of the formatted data
-    expect(result).to.have.property("label", "Temperature [°C]");
-    expect(result).to.have.property("borderColor", Colors.BLUE);
-    expect(result).to.have.property("backgroundColor", Colors.BLUE);
-    expect(result).to.have.property("borderWidth", 1);
-    expect(result).to.have.property("yAxisID", TEMPERATURE);
-    
-    // Verify the data points
-    expect(result.data).to.have.length(mockDataTemperature.length);
-    expect(result.data[0]).to.have.property("x", mockDataTemperature[0].time);
-    expect(result.data[1]).to.have.property("x", mockDataTemperature[1].time);
-  });
-
-  it("should format humidity data correctly with getSerie()", () => {
-    const serie = new Serie(
-      HUMIDITY, 
-      mockDataHumidity,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    const result = serie.getSerie();
-    
-    // Verify the properties of the formatted data
-    expect(result).to.have.property("label", "Humidity [%]");
-    expect(result).to.have.property("borderColor", Colors.GREEN);
-    expect(result).to.have.property("backgroundColor", Colors.GREEN);
-    expect(result).to.have.property("borderWidth", 1);
-    expect(result).to.have.property("yAxisID", HUMIDITY);
-  });
-
-  it("should handle unknown types appropriately in getSerie()", () => {
-    const serie = new Serie(
-      "UNKNOWN_TYPE", 
-      mockDataTemperature,
-      "user1",
-      "bedroom",
-      "sensor1"
-    );
-    
-    const result = serie.getSerie();
-    
-    // Verify the properties for unknown type
-    expect(result).to.have.property("label", "Unknown");
-    expect(result).to.have.property("borderColor", Colors.RED);
-    expect(result).to.have.property("backgroundColor", Colors.RED);
-    expect(result).to.have.property("yAxisID", TEMPERATURE); // Defaults to TEMPERATURE
-  });
-});
\ No newline at end of file