@yusufalperendumlu/component-library 0.0.4 → 0.0.6

package/src/tests/Dialog.test.tsx

@@ -0,0 +1,86 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Dialog from "../components/Dialog";
+
+describe("Dialog Component", () => {
+  const onCloseMock = jest.fn();
+
+  beforeEach(() => {
+    onCloseMock.mockClear();
+  });
+
+  test("renders children when open", () => {
+    render(
+      <Dialog isOpen={true} onClose={onCloseMock}>
+        <Dialog.Header>Header Text</Dialog.Header>
+        <Dialog.Body>Body Text</Dialog.Body>
+        <Dialog.Footer>Footer Text</Dialog.Footer>
+      </Dialog>
+    );
+
+    expect(screen.getByText("Header Text")).toBeInTheDocument();
+    expect(screen.getByText("Body Text")).toBeInTheDocument();
+    expect(screen.getByText("Footer Text")).toBeInTheDocument();
+  });
+
+  test("does not render when isOpen is false", () => {
+    const { container } = render(
+      <Dialog isOpen={false} onClose={onCloseMock}>
+        <Dialog.Body>Body Text</Dialog.Body>
+      </Dialog>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("calls onClose when clicking the close button", () => {
+    render(
+      <Dialog isOpen={true} onClose={onCloseMock}>
+        <Dialog.Body>Body Text</Dialog.Body>
+      </Dialog>
+    );
+
+    const closeButton = screen.getByRole("button");
+    fireEvent.click(closeButton);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("calls onClose when clicking outside the dialog", () => {
+    render(
+      <Dialog isOpen={true} onClose={onCloseMock}>
+        <Dialog.Body>Body Text</Dialog.Body>
+      </Dialog>
+    );
+
+    // dialog içerisine değil, overlay alanına tıklayalım
+    fireEvent.mouseDown(document.body); // dialog dışına tıklama simülasyonu
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("calls onClose when pressing Escape key", () => {
+    render(
+      <Dialog isOpen={true} onClose={onCloseMock}>
+        <Dialog.Body>Body Text</Dialog.Body>
+      </Dialog>
+    );
+
+    fireEvent.keyDown(document, { key: "Escape", code: "Escape" });
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("does not show close icon if showCloseIcon is false", () => {
+    render(
+      <Dialog isOpen={true} onClose={onCloseMock} showCloseIcon={false}>
+        <Dialog.Body>Body Text</Dialog.Body>
+      </Dialog>
+    );
+
+    const closeButton = screen.queryByRole("button");
+    expect(closeButton).toBeNull();
+  });
+});

package/src/tests/Input.test.tsx

@@ -0,0 +1,42 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Input from "../components/Input";
+
+describe("Input Component", () => {
+  it("renders the input with placeholder", () => {
+    render(<Input placeholder="Enter your name" type="text" />);
+    const inputElement = screen.getByPlaceholderText("Enter your name");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it("accepts and displays typed value", () => {
+    render(<Input placeholder="Type here" type="text" />);
+    const inputElement = screen.getByPlaceholderText(
+      "Type here"
+    ) as HTMLInputElement;
+
+    fireEvent.change(inputElement, { target: { value: "Hello" } });
+
+    expect(inputElement.value).toBe("Hello");
+  });
+
+  it("applies custom className", () => {
+    render(<Input placeholder="Test" type="text" className="custom-class" />);
+    const inputElement = screen.getByPlaceholderText("Test");
+    expect(inputElement).toHaveClass("custom-class");
+  });
+
+  it("is disabled when disabled prop is passed", () => {
+    render(<Input placeholder="Disabled input" type="text" disabled />);
+    const inputElement = screen.getByPlaceholderText("Disabled input");
+    expect(inputElement).toBeDisabled();
+  });
+
+  it("renders password input type correctly", () => {
+    render(<Input placeholder="Password" type="password" />);
+    const inputElement = screen.getByPlaceholderText("Password");
+    expect(inputElement).toHaveAttribute("type", "password");
+  });
+});

package/src/tests/Table.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Table from "../components/Table/Table";
+import { TableColumn } from "../components/Table/Table.types";
+
+interface TestData {
+  id: number;
+  name: string;
+  age: number;
+}
+
+const columns: TableColumn<TestData>[] = [
+  { key: "id", label: "ID", sortable: true },
+  { key: "name", label: "Name", sortable: true },
+  { key: "age", label: "Age" },
+];
+
+const data: TestData[] = [
+  { id: 1, name: "Alice", age: 28 },
+  { id: 2, name: "Bob", age: 34 },
+  { id: 3, name: "Charlie", age: 22 },
+];
+
+describe("Table Component", () => {
+  it("renders table headers correctly", () => {
+    render(<Table columns={columns} data={data} />);
+    columns.forEach((col) => {
+      expect(screen.getByText(col.label)).toBeInTheDocument();
+    });
+  });
+
+  it("renders table rows and cells", () => {
+    render(<Table columns={columns} data={data} />);
+    data.forEach((item) => {
+      expect(screen.getByText(item.name)).toBeInTheDocument();
+      expect(screen.getByText(item.age.toString())).toBeInTheDocument();
+    });
+  });
+
+  it("calls onRowClick when a row is clicked", () => {
+    const handleRowClick = jest.fn();
+    render(<Table columns={columns} data={data} onRowClick={handleRowClick} />);
+    const row = screen.getByText("Alice").closest("tr");
+    if (row) fireEvent.click(row);
+    expect(handleRowClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it("toggles sort order when header is clicked", () => {
+    render(<Table columns={columns} data={data} />);
+    const idHeader = screen.getByText("ID");
+    fireEvent.click(idHeader); // sort asc
+    fireEvent.click(idHeader); // sort desc
+    expect(screen.getByText("3")).toBeInTheDocument(); // highest id
+  });
+});

package/src/tests/styleMock.ts

@@ -1 +1 @@
-module.exports = {}
+module.exports = {};

package/tailwind.config.js

@@ -1,7 +1,12 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        inter: ["Inter", "sans-serif"],
+      },
+    },
   },
   plugins: [],
 };

package/tsconfig.json

@@ -12,10 +12,14 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["node", "jest"]
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "tests",
+    "**/*.test.ts",
+    "**/*.test.tsx",
   ],
   "exclude": [
     "node_modules",

package/src/components/Input/index.tsx

@@ -1,3 +0,0 @@
-import Input from "./Input";
-
-export default Input;