Add Unit tests for the Pill

.babelrc

@@ -1,8 +1,7 @@
 {
-    "presets": [
-      ["@babel/preset-env", { "modules": false }],
-      ["@babel/preset-react", { "runtime": "automatic" }],
-      "@babel/preset-typescript"
-    ]
-  }
-
+  "presets": [
+    ["@babel/preset-env", { "modules": "commonjs" }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

jest.config.js

@@ -0,0 +1,13 @@
+export default {
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+};

package.json

@@ -18,7 +18,9 @@
   "scripts": {
     "build": "rollup -c",
     "build:types": "tsc --emitDeclarationOnly",
-    "prepare": "npm run build && npm run build:types"
+    "prepare": "npm run build && npm run build:types",
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -32,14 +34,22 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@rollup/plugin-typescript": "^12.1.0",
+    "@testing-library/jest-dom": "^6.6.1",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.13",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rollup": "^4.22.5",
     "rollup-plugin-postcss": "^4.0.2",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.6.2"
   },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^15.3.0",
     "tslib": "^2.7.0"
   }
-}
+}

src/Pill.test.tsx

@@ -0,0 +1,109 @@
+// src/components/MyComponent.test.tsx
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import Pill, { PillProps, PillType } from "./Pill";
+
+const basicPillData: PillType = {
+  label: "Test",
+  bgcolor: "lime",
+};
+
+const basicPill: PillProps = {
+  data: [basicPillData],
+  itemClassName: "custom-class",
+};
+
+const closeSelectPillData: PillType = {
+  label: "With icon and close button",
+  bgcolor: "#ff0000",
+};
+
+const closeSelectPill: PillProps = {
+  data: [closeSelectPillData],
+  onClose: jest.fn(),
+  onSelect: jest.fn(),
+};
+
+const roundedIconPillData: PillType = {
+  label: "Rounded Icon Pill",
+  icon: "🎂",
+};
+
+const roundedIconPill: PillProps = {
+  data: [roundedIconPillData],
+  rounded: true,
+};
+
+afterEach(() => {
+  cleanup();
+});
+
+test("renders one pill", () => {
+  render(<Pill {...basicPill} />);
+  const element = screen.getByRole("button");
+  expect(element).toBeInTheDocument();
+  expect(element).toHaveTextContent(basicPillData.label);
+  expect(element).toHaveClass("custom-class");
+});
+
+test("renders 2 pills", () => {
+  render(
+    <>
+      <Pill {...basicPill} />
+      <Pill {...closeSelectPill} />
+    </>
+  );
+  const element1 = screen.getByText(basicPillData.label);
+  const element2 = screen.getByText(closeSelectPillData.label);
+  expect(element1).toBeInTheDocument();
+  expect(element2).toBeInTheDocument();
+});
+
+test("renders rounded pill with icon", () => {
+  render(<Pill {...roundedIconPill} />);
+
+  const button = screen.getByRole("button");
+
+  expect(button).toContainHTML(
+    `<span class="iconContainer">${roundedIconPillData.icon}</span>`
+  );
+
+  expect(button).toHaveClass("rounded");
+});
+
+test("registers onSelect and onClick", () => {
+  render(<Pill {...closeSelectPill} />);
+  const element = screen.getByText(closeSelectPillData.label);
+  const closeBtn = screen.getByLabelText(`Close ${closeSelectPillData.label}`);
+
+  fireEvent.click(element);
+  expect(closeSelectPill.onSelect).toHaveBeenCalledTimes(1);
+
+  fireEvent.click(closeBtn);
+  expect(closeSelectPill.onClose).toHaveBeenCalledTimes(1);
+});
+
+test("keyboard actions closes a pill onClick", () => {
+  render(<Pill {...closeSelectPill} />);
+  const closeBtn = screen.getByLabelText(`Close ${closeSelectPillData.label}`);
+
+  closeBtn.focus();
+  fireEvent.keyDown(document.activeElement || document.body, {
+    key: "Enter",
+    code: "Enter",
+    charCode: 13,
+  });
+  fireEvent.keyDown(document.activeElement || document.body, {
+    key: " ",
+    code: "Space",
+    charCode: 32,
+  });
+
+  expect(closeSelectPill.onClose).toHaveBeenCalledTimes(3); // 1 time from mouse event + 2 times from keyboard events
+
+  fireEvent.keyDown(document.activeElement || document.body, {
+    key: "Escape",
+    code: "Escape",
+    charCode: 27,
+  });
+  expect(document.activeElement).toBe(document.body);
+});

src/Pill.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import "./Pill.css";
 
-interface PillProps {
+export type PillType = {
+  label: string;
+  icon?: React.ReactNode;
+  bgcolor?: string;
+};
+
+export interface PillProps {
   onClose?: (index: number) => void;
-  data: Array<{
-    label: string;
-    icon?: React.ReactNode;
-    bgcolor?: string;
-  }>;
+  data: Array<PillType>;
   rounded?: boolean;
   onSelect?: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
   itemClassName?: string;
@@ -29,7 +31,7 @@ const Pill: React.FC<PillProps> = ({
           style={{ backgroundColor: value.bgcolor ? value.bgcolor : "#eee" }}
           key={index}
           className={`${rounded ? "rounded" : ""} ${
-            itemClassName ? "pill" : ""
+            itemClassName || ""
           } defaultPill`}
           onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
             e.preventDefault();
@@ -42,9 +44,9 @@ const Pill: React.FC<PillProps> = ({
           {onClose ? (
             <span
               className="closeButton"
+              role="button"
               aria-label={`Close ${value.label}`}
               aria-labelledby={`label-${index}`}
-              role="button"
               tabIndex={0}
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                 e.stopPropagation();

src/setupTests.ts

@@ -0,0 +1,2 @@
+// src/setupTests.ts
+import "@testing-library/jest-dom";

tsconfig.json

@@ -1,17 +1,16 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "module": "esnext",
-      "jsx": "react-jsx",
-      "moduleResolution": "node",
-      "declaration": true,
-      "declarationDir": "./dist/types",
-      "outDir": "./dist",
-      "strict": true,
-      "esModuleInterop": true,
-      "skipLibCheck": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-  }
-
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}