test(web-app): add cypress for unit test

web-app/tests/e2e/app.spec.ts

@@ -0,0 +1,96 @@
+/// <reference types="cypress" />
+
+import { Serie } from "../../src/Measures/Serie";
+import { TEMPERATURE, HUMIDITY } from "../../src/const";
+import { Colors } from "../../src/Measures/Utils";
+
+// This is a simplified E2E test that doesn't require a server
+// It demonstrates how we would test the application components
+describe('Home Monitor Application (Mock)', () => {
+  
+  // Create sample data for testing
+  const mockData = [
+    { time: 1625097600000, value: new Date(22.5) },
+    { time: 1625184000000, value: new Date(23.8) }
+  ];
+
+  // Test Serie class in E2E context
+  it('should create temperature series with correct properties', () => {
+    // Create a new temperature series
+    const tempSerie = new Serie(
+      TEMPERATURE,
+      mockData,
+      "user1",
+      "living-room",
+      "sensor1"
+    );
+    
+    // Get the formatted series data
+    const result = tempSerie.getSerie();
+    
+    // Verify the series has the correct properties
+    expect(result.label).to.equal("Temperature [°C]");
+    expect(result.borderColor).to.equal(Colors.BLUE);
+    expect(result.yAxisID).to.equal(TEMPERATURE);
+    expect(result.data.length).to.equal(2);
+  });
+
+  it('should create humidity series with correct properties', () => {
+    // Create a new humidity series
+    const humiditySerie = new Serie(
+      HUMIDITY,
+      mockData,
+      "user1",
+      "living-room",
+      "sensor1"
+    );
+    
+    // Get the formatted series data
+    const result = humiditySerie.getSerie();
+    
+    // Verify the series has the correct properties
+    expect(result.label).to.equal("Humidity [%]");
+    expect(result.borderColor).to.equal(Colors.GREEN);
+    expect(result.yAxisID).to.equal(HUMIDITY);
+  });
+
+  it('should handle data transformations correctly', () => {
+    const tempSerie = new Serie(
+      TEMPERATURE,
+      mockData,
+      "user1",
+      "living-room",
+      "sensor1"
+    );
+    
+    const result = tempSerie.getSerie();
+    
+    // Verify data transformation
+    expect(result.data[0].x).to.equal(mockData[0].time);
+    expect(result.data[0].y).to.deep.equal(mockData[0].value);
+    expect(result.data[1].x).to.equal(mockData[1].time);
+    expect(result.data[1].y).to.deep.equal(mockData[1].value);
+  });
+  
+  // Mock DOM elements without a server
+  it('should mock DOM interactions', () => {
+    // Create a mock HTML structure in the test
+    cy.document().then(doc => {
+      const div = doc.createElement('div');
+      div.innerHTML = `
+        <h1>Home Monitor</h1>
+        <div class="chart-container">
+          <div class="temperature-chart">Temperature [°C]</div>
+          <div class="humidity-chart">Humidity [%]</div>
+        </div>
+      `;
+      doc.body.appendChild(div);
+      
+      // Now we can test DOM interactions
+      cy.contains('Home Monitor').should('be.visible');
+      cy.get('.chart-container').should('exist');
+      cy.contains('Temperature [°C]').should('be.visible');
+      cy.contains('Humidity [%]').should('be.visible');
+    });
+  });
+});