Feature/#93 front end tests (#203)

* add cypress code coverage plugin

Signed-off-by: Leander Tolksdorf <[email protected]>

* git ignore code coverage report

Signed-off-by: Leander Tolksdorf <[email protected]>

* add general buttons test

Signed-off-by: Leander Tolksdorf <[email protected]>

* add tests

Signed-off-by: Leander Tolksdorf <[email protected]>

* merge indicator tests into one file, remove mock socket test

Signed-off-by: Leander Tolksdorf <[email protected]>

* make line breaks after tests consistent

Signed-off-by: Leander Tolksdorf <[email protected]>

* remove broken test for gnd-button

Signed-off-by: Leander Tolksdorf <[email protected]>

* remove empty config from cy.visit

Signed-off-by: Leander Tolksdorf <[email protected]>

---------

Signed-off-by: Leander Tolksdorf <[email protected]>
Co-authored-by: Leander Tolksdorf <[email protected]>

Apps/frontend/.gitignore

@@ -25,3 +25,7 @@ dist-ssr
 /cypress/fixtures/
 /cypress/screenshots/
 /cypress/videos/
+
+# Code coverage report
+coverage
+.nyc_output

Apps/frontend/cypress.config.js

@@ -1,9 +1,11 @@
 import { defineConfig } from "cypress";
+import codeCoverage from "@cypress/code-coverage/task.js";
 
 export default defineConfig({
   e2e: {
-    // setupNodeEvents(on, config) {
-    //   // implement node event listeners here
-    // },
+    setupNodeEvents(on, config) {
+      codeCoverage(on, config);
+      return config;
+    },
   },
 });

Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js

@@ -9,6 +9,11 @@ describe("everything visible on front page", () => {
     cy.get('[data-cy="settings-button"]').should("be.visible");
   });
 
+  it("shows tooltip on hover", () => {
+    cy.get('[data-cy="settings-button"]').trigger("mouseover");
+    cy.get('[data-cy="settings-button-tooltip"]').should("be.visible");
+  });
+
   it("is clickable", () => {
     cy.get('[data-cy="settings-button"]').click();
     cy.get('[data-cy="preset-config-open-popup"]').should("be.visible");
@@ -17,4 +22,10 @@ describe("everything visible on front page", () => {
     cy.get('[data-cy="selected-preset"]').should("be.visible");
     cy.get('[data-cy="store-channel-config"]').should("be.visible");
   });
+
+  it("closes popup on click outside", () => {
+    cy.get('[data-cy="settings-button"]').click();
+    cy.get('[data-cy="oscilloscope"]').click();
+    cy.get('[data-cy="preset-config-open-popup"]').should("not.be.visible");
+  });
 });

Apps/frontend/cypress/e2e/2-indicators/indicators.cy.js

@@ -1,9 +1,39 @@
-describe("indicators", () => {
+describe("LineIndicators", () => {
   beforeEach(() => {
     cy.visit("http://localhost:5173/");
   });
 
   it("is visible", () => {
-    cy.get('[data-cy="indicators"]').should("be.visible");
+    cy.get('[data-cy="line-indicators"]').should("be.visible");
+  });
+});
+
+describe("TextIndicators", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("are visible", () => {
+    cy.get('[data-cy="text-indicators"]').should("be.visible");
+  });
+
+  it("have correct colors", () => {
+    let expectedColors = [
+      "rgb(230, 0, 73)",
+      "rgb(11, 180, 255)",
+      "rgb(80, 233, 145)",
+      "rgb(230, 216, 0)",
+      "rgb(155, 25, 245)",
+      "rgb(255, 163, 0)",
+      "rgb(220, 10, 180)",
+      "rgb(179, 212, 255)",
+      "rgb(0, 191, 160)",
+      "rgb(128, 143, 128)",
+    ];
+    cy.get('[data-cy="text-indicators"]')
+      .find("tr")
+      .each((tr, i) => {
+        cy.wrap(tr).should("have.css", "color").and("equal", expectedColors[i]);
+      });
   });
 });

Apps/frontend/cypress/e2e/3-control-panel-top/distribute-button.cy.js

@@ -13,4 +13,9 @@ describe("distributeButton", () => {
   it("is clickable", () => {
     cy.get('[data-cy="distribute-button"]').click();
   });
+
+  it("shows tooltip on hover", () => {
+    cy.get('[data-cy="distribute-button"]').trigger("mouseover");
+    cy.get('[data-cy="distribute-button-tooltip"]').should("be.visible");
+  });
 });

Apps/frontend/cypress/e2e/3-control-panel-top/general-buttons.cy.js

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+describe("GeneralButtons", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("resets on off button when reset button is clicked", () => {
+    cy.get('[data-cy="on-off-button"]').click();
+    cy.get('[data-cy="reset-button"]').click();
+    cy.get('[data-cy="on-off-button"]').should("have.class", "icon--on");
+  });
+});

Apps/frontend/cypress/e2e/3-control-panel-top/gnd-button.cy.js

@@ -13,4 +13,9 @@ describe("gndButton", () => {
   it("is clickable", () => {
     cy.get('[data-cy="gnd-button"]').click();
   });
+
+  it("shows tooltip on hover", () => {
+    cy.get('[data-cy="gnd-button"]').trigger("mouseover");
+    cy.get('[data-cy="gnd-button-tooltip"]').should("be.visible");
+  });
 });

Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js

@@ -14,4 +14,9 @@ describe("onOffButton", () => {
     cy.get('[data-cy="on-off-button"]').click();
     cy.get('[data-cy="on-off-button"]').should("have.class", "icon--off");
   });
+
+  it("shows tooltip on hover", () => {
+    cy.get('[data-cy="on-off-button"]').trigger("mouseover");
+    cy.get('[data-cy="on-off-button-tooltip"]').should("be.visible");
+  });
 });

Apps/frontend/cypress/e2e/3-control-panel-top/reset-button.cy.js

@@ -13,4 +13,9 @@ describe("resetButton", () => {
   it("is clickable", () => {
     cy.get('[data-cy="reset-button"]').click();
   });
+
+  it("shows tooltip on hover", () => {
+    cy.get('[data-cy="reset-button"]').trigger("mouseover");
+    cy.get('[data-cy="reset-button-tooltip"]').should("be.visible");
+  });
 });

Apps/frontend/cypress/support/e2e.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
+import "@cypress/code-coverage/support";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')