refactor: update dependencies and add tests (#72)

* chore: update dependencies

* chore: update dependencies

* fix: fix typo

* fix(docs): add missing CSS

* docs(wedges): add changesets

* chore: bump node version

* style: fix CSS inconsistencies

* refactor: improve jest coverage report

* test(wedges): add Alert tests

* chore: update dependencies

* test(wedges): update AvatarGroup tests

* feat(Avatar): add delayMs prop

* test(wedges): improve Avatar tests

* refactor(Avatar): remove default value

* test: improve Badge tests

* test(AvatarGroup): improve coverage

* test(wedges): improve test cases

* fix(Kbd): allow keys to be a string

* fix(Kbd): don't render if invalid key

* test(Kbd): add Kbd tests

* fix(docs): fix type error

* test(Tag): refactor tests

* test(wedges): set verbose inline

* test(Textarea): add tests

* test(Toggle): add tests

* build: run build

* docs: add changesets

.changeset/fluffy-dogs-hang.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+add Kbd tests

.changeset/fuzzy-spoons-lay.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+add Textarea tests

.changeset/large-apes-trade.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+improve Badge tests

.changeset/silent-books-tie.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+improve AvatarGroup test coverage

.changeset/silver-lobsters-double.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+add Toggle tests

.changeset/soft-jobs-add.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+add `delayMs` prop for the Avatar component

.changeset/sour-walls-hammer.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+add Avatar tests

.changeset/stale-rings-raise.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+improve Tag tests

.nvmrc

@@ -1 +1 @@
-18
+20

CONTRIBUTING.md

@@ -22,7 +22,9 @@ In the Wedges project, we utilize a variety of tools to ensure code quality, con
 
 - **[ESLint](https://eslint.org/)**: for code linting. Make sure to check and fix any linting issues before submitting your code.
 
-- **[Jest](https://jestjs.io/)**: for testing. We encourage writing tests for new features and bug fixes.
+- **[React Testing Library](https://testing-library.com/)**: for testing. We encourage writing tests for new features and bug fixes.
+
+- **[Jest Framework](https://jestjs.io/)**: for running tests.
 
 - **[husky](https://typicode.github.io/husky/#/)**: for Git hooks. It ensures that linters, and other checks are passed before commits and pushes.
 

apps/docs/src/examples/index.ts

@@ -3275,7 +3275,7 @@ export function Example() {
   return (
     <Tag
       closable
-      onClose={(e) => {
+      onClose={(e: React.MouseEvent) => {
         e.preventDefault();
         // eslint-disable-next-line no-console
         alert("Custom onClose callback with preventDefault()");

apps/docs/src/examples/tag/preview.tsx

@@ -4,7 +4,7 @@ export default function Example() {
   return (
     <Tag
       closable
-      onClose={(e) => {
+      onClose={(e: React.MouseEvent) => {
         e.preventDefault();
         // eslint-disable-next-line no-console
         alert("Custom onClose callback with preventDefault()");

apps/docs/src/styles/docsearch.css

@@ -284,7 +284,7 @@
 .DocSearch-NoResults .DocSearch-Help {
   margin-left: 0.75rem;
   margin-bottom: 0.5rem;
-  font-family: theme("fontFamily.display");
+  font-family: theme("fontFamily.sans");
   color: var(--docsearch-heading-color);
   font-size: 0.875rem;
   font-weight: 500;

jest.config.js

@@ -13,13 +13,12 @@ const config = {
   },
   testEnvironment: "jsdom",
   collectCoverageFrom: [
-    "packages/**/*.tsx",
+    "packages/wedges/src/components/**/*.tsx",
     "!packages/**/icons/**/*", // Exclude files in the 'icons' folder
   ],
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
   preset: "ts-jest",
   testMatch: ["**/?(*.)+(test).+(ts|tsx|js)"],
-  verbose: true,
 };
 
 export default config;

package.json

@@ -13,8 +13,8 @@
     "format:fix": "prettier --write ./packages/**/src ./apps/** --cache",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
-    "test": "NODE_OPTIONS='--experimental-vm-modules' jest --passWithNoTests",
-    "test:coverage": "NODE_OPTIONS='--experimental-vm-modules' jest --coverage --passWithNoTests",
+    "test": "NODE_OPTIONS='--experimental-vm-modules' jest --passWithNoTests --coverage --coverageReporters=\"text-summary\"",
+    "test:coverage": "NODE_OPTIONS='--experimental-vm-modules' jest --coverage --verbose --passWithNoTests",
     "prepare": "husky",
     "version": "changeset version",
     "version:dev": "changeset version --snapshot --no-git-tag --tag dev",
@@ -26,12 +26,14 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.11",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@wedges/eslint-config": "workspace:*",
+    "clsx": "^2.1.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -40,12 +42,11 @@
     "react": "^18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "^5.0.6",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "3.4.3",
     "ts-jest": "^29.1.2",
     "turbo": "^1.13.3",
-    "typescript": "^5.4.5",
-    "tailwind-merge": "^2.3.0",
-    "clsx": "^2.1.1"
+    "typescript": "^5.4.5"
   },
   "packageManager": "pnpm@9.1.0",
   "dependencies": {

packages/wedges/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { jest } from "@jest/globals";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Alert } from ".";
+
+const TEST_TEXT = "Warning!";
+
+describe("Alert", () => {
+  it("should forward ref to the HTMLDivElement", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<Alert ref={ref}>{TEST_TEXT}</Alert>);
+
+    if (ref.current !== null) {
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current.textContent).toBe(TEST_TEXT);
+    } else {
+      fail("ref.current is null");
+    }
+  });
+
+  test("should render alert role", () => {
+    render(<Alert>{TEST_TEXT}</Alert>);
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+
+  describe("when the close button is clicked", () => {
+    test("then it should invoke onClose callback", () => {
+      const handleClose = jest.fn();
+      render(<Alert closable={true} onClose={handleClose} />);
+      fireEvent.click(screen.getByLabelText("Close"));
+      expect(handleClose).toHaveBeenCalled();
+    });
+
+    test("then it should no longer be visible", () => {
+      const { queryByRole } = render(<Alert closable={true} />);
+      fireEvent.click(screen.getByLabelText("Close"));
+      expect(queryByRole("alert")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("given it has a string title", () => {
+    test("then it should display the title within an AlertTitle component", () => {
+      render(<Alert title={TEST_TEXT} />);
+      expect(screen.getByText(TEST_TEXT)).toBeInTheDocument();
+    });
+  });
+
+  describe("given it has a component as a title", () => {
+    test("then it should render the title as-is", () => {
+      const titleElement = <span style={{ fontWeight: "bold" }}>{TEST_TEXT}</span>;
+      render(<Alert title={titleElement} />);
+      expect(screen.getByText(TEST_TEXT)).toHaveStyle("font-weight: bold");
+    });
+  });
+
+  describe("given it has a custom before and after slot", () => {
+    test("then it should render these elements correctly", () => {
+      render(<Alert before={<span>Before</span>} after={<button>After</button>} />);
+      expect(screen.getByText("Before")).toBeInTheDocument();
+      expect(screen.getByText("After")).toBeInTheDocument();
+    });
+  });
+
+  describe("given children are provided", () => {
+    test("Then it should render the children inside the Alert", () => {
+      render(<Alert>{TEST_TEXT}</Alert>);
+      expect(screen.getByText(TEST_TEXT)).toBeInTheDocument();
+    });
+  });
+});