Cypress Umgebung ok

__tests__/components/modules/Kue705FO.test.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import "@testing-library/jest-dom";
+import Kue705FO from "../../../components/modules/Kue705FO";
+
+// Mocks für externe Abhängigkeiten
+jest.mock("chart.js/auto", () => ({
+    default: {
+        register: jest.fn(),
+      },
+  Chart: jest.fn().mockImplementation(() => ({
+    destroy: jest.fn(),
+    update: jest.fn(),
+  })),
+}));
+
+jest.mock("chartjs-plugin-zoom", () => ({}));
+
+// Initialzustand für Redux
+const mockStore = configureStore([]);
+const initialState = {
+  variables: {
+    kuePSTmMinus96V: [0],
+    kueCableBreak: [0],
+    kueGroundFault: [0],
+    kueAlarm1: [0],
+    kueAlarm2: [0],
+    kueOverflow: [0],
+    kueVersion: [419],
+    tdrActive: [1],
+  },
+  auth: {
+    isAdminLoggedIn: true, // Füge dies hinzu
+  },
+};
+
+// Standard-Props
+const defaultProps = {
+  isolationswert: 200,
+  schleifenwiderstand: 5.6,
+  modulName: "TestModul",
+  kueOnline: 1,
+  slotIndex: 0,
+  tdrLocation: [2.5],
+};
+
+describe("Kue705FO Integration Tests", () => {
+  let store: ReturnType<typeof mockStore>;
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+  });
+
+  it("should render correctly with default props", () => {
+    render(
+      <Provider store={store}>
+        <Kue705FO {...defaultProps} />
+      </Provider>
+    );
+
+    // Überprüfen, ob die Basis-Darstellung korrekt ist
+    expect(screen.getByText("KÜ705-FO")).toBeInTheDocument();
+    expect(screen.getByText("TestModul")).toBeInTheDocument();
+  });
+
+  it("should toggle between TDR and Schleife modes", () => {
+    render(
+      <Provider store={store}>
+        <Kue705FO {...defaultProps} />
+      </Provider>
+    );
+
+    // Überprüfen, ob Schleife aktiv ist
+    expect(screen.getByText("Schleifenwiderstand [kOhm]")).toBeInTheDocument();
+    expect(screen.getByText("5.6 KOhm")).toBeInTheDocument();
+
+    // TDR-Button klicken
+    fireEvent.click(screen.getByText("TDR"));
+
+    // Überprüfen, ob TDR aktiv ist
+    expect(screen.getByText("Entfernung [Km]")).toBeInTheDocument();
+    expect(screen.getByText("2.5 Km")).toBeInTheDocument();
+
+    // Zurück zu Schleife wechseln
+    fireEvent.click(screen.getByText("Schleife"));
+    expect(screen.getByText("Schleifenwiderstand [kOhm]")).toBeInTheDocument();
+  });
+
+  it("should open and close the settings modal", () => {
+    render(
+      <Provider store={store}>
+        <Kue705FO {...defaultProps} />
+      </Provider>
+    );
+
+    // Modal öffnen
+    fireEvent.click(screen.getByText("⚙"));
+    expect(screen.getByText("KUE Einstellung - Slot 1")).toBeInTheDocument();
+
+    // Modal schließen
+    fireEvent.click(screen.getByRole("button", { name: /x/i }));
+    expect(
+      screen.queryByText("KUE Einstellung - Slot 1")
+    ).not.toBeInTheDocument();
+  });
+
+  it("should disable TDR button when tdrActive is 0", () => {
+    // Zustand aktualisieren
+    store = mockStore({
+      ...initialState,
+      variables: {
+        ...initialState.variables,
+        tdrActive: [0],
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <Kue705FO {...defaultProps} />
+      </Provider>
+    );
+
+    // TDR-Button sollte deaktiviert sein
+    const tdrButton = screen.getByText("TDR");
+    expect(tdrButton).toBeDisabled();
+  });
+});

__tests__/example.test.ts

@@ -0,0 +1,7 @@
+// __tests__/example.test.ts
+describe('Basic Test', () => {
+    it('should pass', () => {
+      expect(true).toBe(true);
+    });
+  });
+  

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/kue705fo.cy.ts

@@ -0,0 +1,46 @@
+describe('Kue705FO Integration Tests', () => {
+    beforeEach(() => {
+      // Besuche die Seite, auf der die Komponente gerendert wird
+      //cy.visit('/path-to-your-component'); // Passe den Pfad an deine App an
+      cy.visit('http://localhost:3000/kabelueberwachung');
+    });
+  
+    it('should render the component with default props', () => {
+      // Überprüfe, ob der Modulname und die Slotnummer angezeigt werden
+      cy.contains('KÜ705-FO').should('be.visible');
+      cy.contains('Modul 1').should('be.visible'); // Beispiel für den Modulnamen
+    });
+  
+    it('should update display when TDR button is clicked', () => {
+      // Klicke auf den TDR-Button
+      cy.contains('TDR').click();
+  
+      // Überprüfe, ob der Text aktualisiert wurde
+      cy.contains('Entfernung [Km]').should('be.visible');
+    });
+  
+    it('should switch back to Schleife display', () => {
+      // Klicke auf TDR, dann zurück zu Schleife
+      cy.contains('TDR').click();
+      cy.contains('Schleife').click();
+  
+      // Überprüfe, ob der Text aktualisiert wurde
+      cy.contains('Schleifenwiderstand [kOhm]').should('be.visible');
+    });
+  
+    it('should disable TDR button when tdrActive is 0', () => {
+      // Dies erfordert eine benutzerdefinierte Backend-Konfiguration oder Redux-Manipulation
+      cy.contains('TDR').should('be.disabled');
+    });
+  
+    it('should open and close the settings modal', () => {
+      // Öffne das Modal
+      cy.contains('⚙').click();
+      cy.contains('KUE Einstellung - Slot 1').should('be.visible');
+  
+      // Schließe das Modal
+      cy.contains('×').click();
+      cy.contains('KUE Einstellung - Slot 1').should('not.exist');
+    });
+  });
+  

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"
+}

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>
+//     }
+//   }
+// }

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'

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  testEnvironment: "jest-environment-jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "^bootstrap-icons/font/bootstrap-icons.css$":
+      "<rootDir>/__mocks__/fileMock.js",
+  },
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-modal|bootstrap-icons|chart.js|chartjs-plugin-zoom)/)",
+  ],
+};

jest.setup.ts

@@ -0,0 +1,13 @@
+import "@testing-library/jest-dom";
+
+jest.mock("chart.js/auto", () => ({
+  default: {
+    register: jest.fn(), // Mock für register-Methode
+  },
+  Chart: jest.fn().mockImplementation(() => ({
+    destroy: jest.fn(),
+    update: jest.fn(),
+  })),
+}));
+
+jest.mock("chartjs-plugin-zoom", () => ({}));

package.json

@@ -8,7 +8,8 @@
     "build": "npm run clean && next build",
     "postbuild": "copy LICENSE_ICONIFY.txt out\\LICENSE_ICONIFY.txt",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.1.0",
@@ -36,13 +37,25 @@
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/cypress": "^1.1.6",
+    "@types/jest": "^29.5.14",
     "@types/node": "22.10.10",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-modal": "^3.16.3",
+    "@types/redux-mock-store": "^1.5.0",
+    "@types/testing-library__react": "^10.2.0",
+    "cypress": "^14.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.47",
+    "redux-mock-store": "^1.5.5",
     "rimraf": "^5.0.10",
     "tailwindcss": "^3.4.12",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.7.3"
   }
 }

tsconfig.json

@@ -1,30 +1,31 @@
 {
   "compilerOptions": {
-    "target": "esnext", // Ziel-JavaScript-Version
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["cypress"] ,
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
-    ], // Eingeschlossene Bibliotheken
+    ],
-    "allowJs": true, // JavaScript-Dateien zulassen
+    "allowJs": true,
-    "skipLibCheck": true, // Überspringe Typprüfung in Bibliotheken
-    "strict": true, // Aktiviert strikte Typüberprüfung
-    "forceConsistentCasingInFileNames": true, // Einheitliche Groß-/Kleinschreibung
-    "noEmit": true, // Keine Ausgabedateien erzeugen
-    "esModuleInterop": true, // Kompatibilität mit CommonJS-Modulen
-    "module": "esnext", // Modultyp
-    "moduleResolution": "node", // Modulauflösung
-    "resolveJsonModule": true, // Erlaube JSON-Dateien
-    "isolatedModules": true, // Isolierte Modulkompilierung
-    "jsx": "preserve" // JSX-Transform für React
-    ,
     "incremental": true
+    
   },
   "include": [
-    "next-env.d.ts",
+    "src",
-    "**/*.ts",
+    "**/*.test.ts",
-    "**/*.tsx"
+    "**/*.test.tsx"
-, "public/CPLmockData/SERVICE/System.js", "public/CPLmockData/SERVICE/Start.js", "public/CPLmockData/SERVICE/kueData.js", "public/CPLmockData/SERVICE/de.js", "public/CPLmockData/SERVICE/ae.js", "public/CPL/SERVICE/System.js", "public/CPL/SERVICE/Start.js", "public/CPL/SERVICE/kueData.js", "public/CPL/SERVICE/de.js", "public/CPL/SERVICE/ae.js"  ],
+  ],
   "exclude": [
     "node_modules"
   ]