Card compact and expanded template

2026-02-11 22:02:10 -07:00
parent f60df15c2b
commit b2ed1d438c
44 changed files with 1920 additions and 48 deletions
@@ -0,0 +1,49 @@
+import { describe, test, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
+import Scrollbar from "../../app/components/utility/Scrollbar";
+
+describe("Scrollbar", () => {
+  test("renders children", () => {
+    renderWithProviders(
+      <Scrollbar>
+        <span>Scrollable content</span>
+      </Scrollbar>,
+    );
+    expect(screen.getByText("Scrollable content")).toBeInTheDocument();
+  });
+
+  test("wrapper has scrollbar-design class and overflow-y-auto for default orientation", () => {
+    const { container } = renderWithProviders(
+      <Scrollbar>
+        <div>Content</div>
+      </Scrollbar>,
+    );
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("scrollbar-design");
+    expect(wrapper).toHaveClass("overflow-y-auto");
+  });
+
+  test("applies horizontal overflow when orientation is horizontal", () => {
+    const { container } = renderWithProviders(
+      <Scrollbar orientation="horizontal">
+        <div>Content</div>
+      </Scrollbar>,
+    );
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("scrollbar-design");
+    expect(wrapper).toHaveClass("overflow-x-auto");
+  });
+
+  test("applies overflow-auto when orientation is both", () => {
+    const { container } = renderWithProviders(
+      <Scrollbar orientation="both">
+        <div>Content</div>
+      </Scrollbar>,
+    );
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("scrollbar-design");
+    expect(wrapper).toHaveClass("overflow-auto");
+  });
+});