RAC-11: add components test and configer ci/cd

.github/workflows/ci-cd.yml

@@ -51,10 +51,29 @@ jobs:
           name: coverage-report
           path: coverage/
 
+  component:
+    name: Component Test
+    runs-on: ubuntu-latest
+    needs: [lint, test]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install dependencies
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+          pnpm install
+      - name: Run Cypress Component tests
+        run: pnpm run cy:component
+
   build:
     name: Build
     runs-on: ubuntu-latest
-    needs: [lint, test]
+    needs: [lint, test, component]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -71,7 +90,7 @@ jobs:
         run: pnpm run build
 
   e2e:
-    name: E2E Tests
+    name: E2E Test
     runs-on: ubuntu-latest
     needs: [build]
     steps:

cypress.d.ts

@@ -0,0 +1,9 @@
+import { mount } from "cypress/react";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}

cypress/support/component.ts

@@ -1,37 +1,3 @@
-// ***********************************************************
-// This example support/component.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";
-
-import { mount } from "cypress/react";
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount;
-    }
-  }
-}
-
-Cypress.Commands.add("mount", mount);
-
-// Example use:
-// cy.mount(<MyComponent />)
+// cypress/support/component.ts
+// This file is required for Cypress component testing setup. You can add custom commands or imports here if needed.
+import "../../src/index.css";

package.json

@@ -14,7 +14,8 @@
     "test:coverage": "vitest --coverage.enabled --coverage.reportsDirectory ./coverage",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "cy:start": "concurrently \"pnpm run dev\" \"cypress run\""
+    "cy:start": "concurrently \"pnpm run dev\" \"cypress run\"",
+    "cy:component": "cypress run --component"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.8.2",

src/components/atoms/APINotFound/APINotFound.cy.tsx

@@ -0,0 +1,14 @@
+import { mount } from "cypress/react";
+import { APINotFound } from "./APINotFound";
+import { StoreProvider } from "@/store/StoreProvider";
+
+describe("<APINotFound />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    mount(
+      <StoreProvider>
+        <APINotFound />
+      </StoreProvider>
+    );
+  });
+});

src/components/atoms/ChatTitle/ChatTitle.cy.tsx

@@ -0,0 +1,8 @@
+import { mount } from "cypress/react";
+import { ChatTitle } from "./ChatTitle";
+
+describe("<ChatTitle />", () => {
+  it("renders", () => {
+    mount(<ChatTitle />);
+  });
+});

src/components/atoms/ResultWrapper/ResultWrapper.cy.tsx

@@ -0,0 +1,19 @@
+import { mount } from "cypress/react";
+import { ResultWrapper } from "./ResultWrapper";
+
+describe("<ResultWrapper />", () => {
+  it("renders", () => {
+    // see: https://on.cypress.io/mounting-react
+    mount(
+      <ResultWrapper
+        id="api-1"
+        timestamp={1640995200000}
+        pinnedIds={new Set()}
+        responseMatches={{}}
+        togglePin={() => {}}
+      >
+        <div>Test</div>
+      </ResultWrapper>
+    );
+  });
+});

src/components/molecules/CatFacts/CatFacts.cy.tsx

@@ -0,0 +1,29 @@
+import { mount } from "cypress/react";
+import { CatFacts } from "./CatFacts";
+
+describe("<CatFacts />", () => {
+  it("renders", () => {
+    mount(
+      <CatFacts
+        response={{
+          id: "api-1",
+          apiId: "api-1",
+          timestamp: 1640995200000,
+          data: {
+            id: 1,
+            fact: "Cats are amazing animals",
+          },
+        }}
+        searchTerm={"cat"}
+        hasMatches={true}
+        matches={[
+          {
+            path: "fact",
+            value: "Cats are amazing animals",
+            matchedText: "cat",
+          },
+        ]}
+      />
+    );
+  });
+});

src/utils/highlight.ts

@@ -1,8 +1,8 @@
-export interface HighlightMatch {
+export type HighlightMatch = {
   path: string;
   value: string;
   matchedText: string;
-}
+};
 
 export function findMatches(
   obj: unknown,

tsconfig.app.json

@@ -29,5 +29,5 @@
     "noUncheckedSideEffectImports": true,
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["src"]
+  "include": ["src", "cypress.d.ts"]
 }