Feature/testing

.eslintignore

@@ -8,4 +8,5 @@ dist
 
 vite.config.ts
 vitest.setup.ts
+cypress.config.ts
 pwa-assets.config.ts

.eslintrc.cjs

@@ -14,9 +14,21 @@ module.exports = {
     ],
     ignorePatterns: ["**/node_modules/", ".git/", 'public/', 'build/', 'dist/', 'dev-dist/', '.eslintrc.cjs'],
     parserOptions: {
-        project: ['tsconfig.json'],
+        project: ['tsconfig.json', 'cypress/tsconfig.json'],
 
     },
+    "overrides": [
+        {
+            "extends": [
+                "plugin:cypress/recommended",
+                "plugin:mocha/recommended",
+                "plugin:chai-friendly/recommended"
+            ],
+            "files": [
+                "cypress/**/*.ts"
+            ]
+        }
+    ],
     plugins: ['react-refresh', 'react-hooks', 'jsx-a11y', 'import', 'prettier'],
     rules: {
         "no-restricted-imports": "off",

.github/workflows/npm-build.yml

@@ -19,3 +19,12 @@ jobs:
           node-version: "22.x"
       - run: npm ci
       - run: npm run build
+      - name: Cypress E2E
+        uses: cypress-io/github-action@v6
+        env:
+          VITE_MODE: e2e
+        with:
+          install: false
+          start: npm start
+          wait-on: "http://localhost:3000, http://localhost:4000"
+          wait-on-timeout: 130

.gitignore

@@ -23,4 +23,10 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-src/locales/**/zod.json
+src/locales/**/zod.json
+
+cypress/screenshots
+cypress/videos
+cypress/downloads
+
+.nyc_output/

cypress.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from "cypress";
+import codeCoverageTask from "@cypress/code-coverage/task";
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
+  e2e: {
+    baseUrl: "http://localhost:3000",
+
+    viewportHeight: 1000,
+    viewportWidth: 1280,
+
+    video: false,
+    screenshotOnRunFailure: true,
+    experimentalRunAllSpecs: true,
+
+    defaultCommandTimeout: 10000,
+
+    supportFile: "cypress/support/e2e.ts",
+
+    specPattern: "**/*.e2e.{ts,tsx}",
+    setupNodeEvents(on, config) {
+      //codeCoverageTask(on, config);
+
+      /*
+      on(
+        "file:preprocessor",
+        vitePreprocessor({
+          mode: "development",
+        }),
+      );
+      */
+      return config;
+    },
+  },
+});

cypress/e2e/configTable.e2e.ts

@@ -0,0 +1,72 @@
+import { HttpResponse } from "msw";
+
+import { url } from "../../src/features/configTable/config.mocks";
+import type { Employee } from "../../src/features/configTable/configTable";
+import type { PostDataType } from "../../src/features/fetchApiExample/jsonPlaceholderTypes";
+
+describe("Config Table", () => {
+  beforeEach(() => {
+    cy.actAsAnonUser();
+  });
+
+  it("has correct labels", () => {
+    cy.visit("/configTable");
+    cy.title().should("match", /config table/i);
+    cy.get("[data-role='spinner']").should("not.exist");
+
+    cy.get("main h2").contains(/employee/i);
+  });
+
+  describe("data tests", () => {
+    it("has correct rows count", () => {
+      cy.visit("/configTable");
+      cy.title().should("match", /config table/i);
+      cy.get("[data-role='spinner']").should("not.exist");
+
+      cy.get("table tbody tr").should("have.length", 20);
+    });
+
+    it("API mocks via MSW", () => {
+      cy.window()
+        .its("msw")
+        .then(msw => {
+          const data = [{ name: "Mario", surName: "Rossi", employed: true }] as Employee[];
+          const { worker, http } = msw;
+
+          worker.use(
+            http.get(url + "/", () => {
+              return HttpResponse.json(data);
+            }),
+          );
+        });
+      cy.navigateViaMenu(/config table/i);
+
+      cy.get("table tbody tr").should("have.length", 1);
+    });
+
+    it("API mocks via Cypress", () => {
+      // the global 'beforeEach' and the local 'actAsAnon' ensure we're on /null start'
+      const data = [{ id: 42, userId: 100, title: "Cypress Mock", body: "lorem ipsum ..." }] as PostDataType[];
+      cy.intercept("GET", "https://jsonplaceholder.typicode.com/posts", {
+        statusCode: 200,
+        body: data,
+      }).as("data");
+
+      cy.navigateViaMenu(/posts/i);
+
+      cy.wait("@data");
+
+      cy.get("table tbody tr").should("have.length", 1);
+    });
+
+    it("Navigate via Menu", () => {
+      cy.navigateViaMenu(/config table/i);
+      cy.url().should("contain", "/configTable");
+    });
+
+    it("Navigate via Path", () => {
+      cy.navigateViaRoute("/configTable");
+      cy.title().should("match", /config table/i);
+    });
+  });
+});

cypress/global.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    actAsAnonUser(): void;
+    navigateViaMenu(title: string | RegExp): void;
+    navigateViaRoute(route: string): void;
+  }
+}

cypress/support/commands.ts

@@ -0,0 +1,49 @@
+import "@testing-library/cypress/add-commands";
+import "cypress-localstorage-commands";
+import "cypress-wait-until";
+
+Cypress.Commands.add("actAsAnonUser", () => {
+  cy.session(
+    "acceptedCookies",
+    () => {
+      cy.visit("/null");
+      cy.window({ timeout: 20000 }).should("have.property", "appReady", true);
+      cy.get("[data-role='spinner']").should("not.exist");
+
+      cy.get("[data-role='gdpr-acceptAll']").should("be.visible");
+      cy.get("[data-role='gdpr-acceptAll']").click();
+    },
+    {
+      validate: () => {
+        cy.getLocalStorage("GDPR_CONSENT_STATE").then(x => expect(x).not.be.null);
+      },
+      cacheAcrossSpecs: true,
+    },
+  );
+
+  cy.visit("/null");
+  cy.window({ timeout: 20000 }).should("have.property", "appReady", true);
+  cy.get("[data-role='spinner']").should("not.exist");
+});
+
+Cypress.Commands.add("navigateViaMenu", (title: string | RegExp) => {
+  // CANNOT use cy.visit() as that cause a full reload, not a SPA Navigation ...
+  // - full page reload, resets the MSW mocks
+  // - Solution: use the menu system
+  // - Alternative: find a way to hook into the inner 'history'
+  // see: https://github.com/cypress-io/cypress/issues/128
+  cy.get("nav a").contains(title).parents("a").click();
+  cy.title().should("match", title);
+  cy.get("[data-role='spinner']").should("not.exist");
+});
+
+Cypress.Commands.add("navigateViaRoute", (route: string) => {
+  // CANNOT use cy.visit() as that cause a full reload, not a SPA Navigation ...
+  // - full page reload, resets the MSW mocks
+  // - Solution: use the menu system
+  // - Alternative: find a way to hook into the inner 'history'
+  // see: https://github.com/cypress-io/cypress/issues/128
+  cy.window().its("router").invoke("navigate", route);
+  cy.url().should("contain", route);
+  cy.get("[data-role='spinner']").should("not.exist");
+});

cypress/support/e2e.ts

@@ -0,0 +1,22 @@
+import "@cypress/code-coverage/support";
+import "./commands";
+
+beforeEach(() => {
+  // debug Cookies
+  Cypress.Cookies.debug(true);
+
+  // cy.intercept middleware to remove 'if-none-match' headers from all requests
+  // to prevent the server from returning cached responses of API requests
+  cy.intercept({ url: "*", middleware: true }, req => delete req.headers["if-none-match"]);
+
+  cy.visit("/null");
+  cy.window({ timeout: 20000 }).should("have.property", "appReady", true);
+  cy.get("[data-role='spinner']").should("not.exist");
+});
+
+afterEach(() => {
+  cy.window().then(win => {
+    if (win.rtkq) win.rtkq.resetCache();
+    if (win.msw) win.msw.worker.resetHandlers();
+  });
+});

cypress/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "extends": "../tsconfig.json",
+    "include": [
+        "./**/*.ts",
+        "../src/global.d.ts"
+    ],
+    "exclude": [],
+    "compilerOptions": {
+        "types": [
+            "cypress",
+            "@testing-library/cypress",
+            "cypress-wait-until"
+        ],
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "isolatedModules": false,
+        "allowJs": false,
+        "noEmit": true,
+    },
+}