feat: unit testing demo

apps/front-end/package.json

@@ -39,8 +39,8 @@
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.1",
     "react-ga4": "^2.1.0",
-    "react-hook-form": "^7.47.0",
     "react-google-charts": "^4.0.1",
+    "react-hook-form": "^7.47.0",
     "react-i18next": "^11.18.6",
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-carousel": "^2.8.5",
@@ -74,14 +74,29 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "test": "react-scripts test",
+    "test": "jest --coverage",
     "eject": "react-scripts eject",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
+  "jest": {
+    "collectCoverage": true,
+    "coverageReporters": ["json", "lcov", "text", "clover"],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!src/**/*.test.{js,jsx}",
+      "!src/index.js",
+      "!src/serviceWorker.js",
+      "!src/setupTests.js"
+    ]
+  },
   "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
     "overrides": [
       {
         "files": [
@@ -118,12 +133,15 @@
     "@storybook/preset-create-react-app": "^4.0.1",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "craco-module-federation": "^1.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "external-remotes-plugin": "^1.0.0",
+    "jest": "^29.7.0",
     "prettier": "^2.5.1",
     "webpack": "^5.69.1",
     "workbox-sw": "^7.0.0"

apps/front-end/src/component/Chip.test.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import Chip from "./Chip";
+import { MemoryRouter } from "react-router-dom";
+
+describe("Chip Component Additional Tests", () => {
+  test("renders with custom label", () => {
+    render(
+      <MemoryRouter>
+        <Chip label="Custom Label" />
+      </MemoryRouter>
+    );
+    expect(screen.getByText("Custom Label")).toBeInTheDocument();
+  });
+
+  test("renders children instead of label when both are provided", () => {
+    render(
+      <MemoryRouter>
+        <Chip label="Label">
+          <span>Child Content</span>
+        </Chip>
+      </MemoryRouter>
+    );
+    expect(screen.getByText("Child Content")).toBeInTheDocument();
+    expect(screen.queryByText("Label")).not.toBeInTheDocument();
+  });
+
+  test("applies active styles when isActive is true", () => {
+    render(
+      <MemoryRouter>
+        <Chip isActive>Active Chip</Chip>
+      </MemoryRouter>
+    );
+    const chip = screen.getByText("Active Chip");
+    expect(chip).toHaveStyle("background-color: var(--textMaroonColor-500)");
+    expect(chip).toHaveStyle("color: white");
+  });
+
+  test("applies inactive styles when isActive is false", () => {
+    render(
+      <MemoryRouter>
+        <Chip isActive={false}>Inactive Chip</Chip>
+      </MemoryRouter>
+    );
+    const chip = screen.getByText("Inactive Chip");
+    expect(chip).toHaveStyle("background-color: var(--primary-100)");
+    expect(chip).toHaveStyle("color: black");
+  });
+
+  test("passes additional props to Box component", () => {
+    render(
+      <MemoryRouter>
+        <Chip data-testid="custom-chip">Test Chip</Chip>
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId("custom-chip")).toBeInTheDocument();
+  });
+
+  test("applies correct padding and margin", () => {
+    render(
+      <MemoryRouter>
+        <Chip>Padding Test</Chip>
+      </MemoryRouter>
+    );
+    const chip = screen.getByText("Padding Test");
+    expect(chip).toHaveStyle("padding-top: 1px");
+    expect(chip).toHaveStyle("padding-bottom: 1px");
+    expect(chip).toHaveStyle("padding-left: 2px");
+    expect(chip).toHaveStyle("padding-right: 2px");
+    expect(chip).toHaveStyle("margin: 1px");
+  });
+
+  test("renders with rounded corners", () => {
+    render(
+      <MemoryRouter>
+        <Chip>Rounded Chip</Chip>
+      </MemoryRouter>
+    );
+    const chip = screen.getByText("Rounded Chip");
+    expect(chip).toHaveStyle("border-radius: 9999px");
+  });
+});

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "start": "lerna run --parallel start --stream",
     "build": "lerna run build --stream",
+    "test": "lerna run test --stream",
     "serve": "lerna run --parallel serve --stream",
     "clean": "lerna run --parallel clean --stream",
     "cls-dep": "npx rimraf ./**/node_modules",