svelte-comp 1.3.3 → 1.3.5

package/dist/lib/__tests__/Calendar.test.js

@@ -0,0 +1,171 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+// src/lib/__tests__/Calendar.test.ts
+import "./setupLangContext";
+import { fireEvent, render } from "@testing-library/svelte";
+import { tick } from "svelte";
+import { describe, it, expect, vi } from "vitest";
+import Calendar from "../Calendar.svelte";
+describe("Calendar", function () {
+    it("renders month and year labels", function () {
+        var getByText = render(Calendar, {
+            props: { value: "2025-05-20", locale: "en-US" },
+        }).getByText;
+        expect(getByText("May")).toBeTruthy();
+        expect(getByText("2025")).toBeTruthy();
+    });
+    it("switches to month view and selects a month", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Calendar, {
+                        props: { value: "2025-05-20", locale: "en-US" },
+                    }).getByText;
+                    return [4 /*yield*/, fireEvent.click(getByText("May").closest("button"))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.click(getByText("Jun"))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 4:
+                    _a.sent();
+                    expect(getByText("June")).toBeTruthy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("switches to year view and selects a year", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Calendar, {
+                        props: { value: "2025-05-20", locale: "en-US" },
+                    }).getByText;
+                    return [4 /*yield*/, fireEvent.click(getByText("2025").closest("button"))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.click(getByText("2026"))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 4:
+                    _a.sent();
+                    expect(getByText("2026")).toBeTruthy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("returns to days view after selecting a month", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Calendar, {
+                        props: { value: "2025-05-20", locale: "en-US" },
+                    }).getByText;
+                    return [4 /*yield*/, fireEvent.click(getByText("May").closest("button"))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.click(getByText("Jun"))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, tick()];
+                case 4:
+                    _a.sent();
+                    expect(getByText("June")).toBeTruthy();
+                    expect(getByText("Mon")).toBeTruthy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("disables dates before the default minimum", function () {
+        var getByRole = render(Calendar, {
+            props: { value: "1926-01-15", locale: "en-US" },
+        }).getByRole;
+        var disabledDay = getByRole("button", {
+            name: /December 31, 1925/i,
+        });
+        expect(disabledDay.disabled).toBe(true);
+    });
+    it("fires onChange when a date is selected", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, getByRole;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = vi.fn();
+                    getByRole = render(Calendar, {
+                        props: { value: "2025-05-20", locale: "en-US", onChange: onChange },
+                    }).getByRole;
+                    return [4 /*yield*/, fireEvent.click(getByRole("button", { name: "Thursday, May 15, 2025" }))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledWith("2025-05-15");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("respects min and max boundaries", function () {
+        var getByRole = render(Calendar, {
+            props: {
+                value: "1926-01-15",
+                locale: "en-US",
+                min: "1926-01-10",
+                max: "1926-01-20",
+            },
+        }).getByRole;
+        var beforeMin = getByRole("button", {
+            name: "Monday, January 4, 1926",
+        });
+        var afterMax = getByRole("button", {
+            name: "Thursday, January 21, 1926",
+        });
+        expect(beforeMin.disabled).toBe(true);
+        expect(afterMax.disabled).toBe(true);
+    });
+});

package/dist/lib/__tests__/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/__tests__/Card.test.js

@@ -0,0 +1,148 @@
+// src/lib/__tests__/Card.test.ts
+import { render } from "@testing-library/svelte";
+import { describe, it, expect } from "vitest";
+import Card from "../Card.svelte";
+import { TEXT } from "../types";
+var textSnippet = function (text) { return (function () { return text; }); };
+describe("Card", function () {
+    it("renders base card with content area", function () {
+        var container = render(Card).container;
+        var card = container.firstElementChild;
+        expect(card).toBeTruthy();
+        expect(card.className).toContain("bg-[var(--color-bg-surface)]");
+        expect(card.className).toContain("border");
+        expect(card.className).toContain("border-[var(--border-color-default)]");
+        expect(card.className).toContain("rounded-[var(--radius-xl)]");
+        expect(card.className).toContain("shadow-[0_1px_2px_var(--shadow-color)]");
+        expect(card.className).toContain("overflow-hidden");
+        var content = card.querySelector("[class*='flex-1']");
+        expect(content).toBeTruthy();
+    });
+    it("merges external classes with base classes", function () {
+        var container = render(Card, {
+            props: { class: "my-custom-class another-class" },
+        }).container;
+        var card = container.firstElementChild;
+        expect(card.className).toContain("my-custom-class");
+        expect(card.className).toContain("another-class");
+        expect(card.className).toContain("bg-[var(--color-bg-surface)]");
+        expect(card.className).toContain("border");
+    });
+    it("does not render header or footer by default", function () {
+        var container = render(Card).container;
+        var card = container.firstElementChild;
+        expect(card.querySelector('[class*="border-b"]')).toBeNull();
+        expect(card.querySelector('[class*="border-t"]')).toBeNull();
+    });
+    it("renders header, content and footer in correct order", function () {
+        var container = render(Card, {
+            props: {
+                header: textSnippet("Header"),
+                children: textSnippet("Body"),
+                footer: textSnippet("Footer"),
+            },
+        }).container;
+        var card = container.firstElementChild;
+        var header = card.querySelector('[class*="border-b"]');
+        var body = card.querySelector('[class*="flex-1"]');
+        var footer = card.querySelector('[class*="border-t"]');
+        var order = Array.from(card.children);
+        expect(header).toBeTruthy();
+        expect(body).toBeTruthy();
+        expect(footer).toBeTruthy();
+        expect(order[0]).toBe(header);
+        expect(order[1]).toBe(body);
+        expect(order[2]).toBe(footer);
+    });
+    it("applies borders and padding for header/footer by default", function () {
+        var container = render(Card, {
+            props: {
+                header: textSnippet("Header"),
+                footer: textSnippet("Footer"),
+                children: textSnippet("Body"),
+            },
+        }).container;
+        var card = container.firstElementChild;
+        var header = card.querySelector('[class*="border-b"]');
+        var footer = card.querySelector('[class*="border-t"]');
+        expect(header).toBeTruthy();
+        expect(footer).toBeTruthy();
+        expect(header.className).toContain("border-[var(--border-color-default)]");
+        expect(footer.className).toContain("border-[var(--border-color-default)]");
+        expect(header.className).toContain("px-[");
+        expect(footer.className).toContain("px-[");
+    });
+    it("removes borders and padding when flushHeader/flushFooter true", function () {
+        var container = render(Card, {
+            props: {
+                header: textSnippet("Header"),
+                footer: textSnippet("Footer"),
+                children: textSnippet("Body"),
+                flushHeader: true,
+                flushFooter: true,
+            },
+        }).container;
+        var card = container.firstElementChild;
+        var header = card.firstElementChild;
+        var footer = card.lastElementChild;
+        expect(card === null || card === void 0 ? void 0 : card.firstElementChild).toBe(header);
+        expect(card === null || card === void 0 ? void 0 : card.lastElementChild).toBe(footer);
+        expect(header.className).not.toContain("border-b");
+        expect(header.className).not.toContain("px-[");
+        expect(footer.className).not.toContain("border-t");
+        expect(footer.className).not.toContain("px-[");
+    });
+    it("uses correct default text size (md)", function () {
+        var container = render(Card).container;
+        var card = container.firstElementChild;
+        expect(card.className).toContain(TEXT.md);
+    });
+    it("applies correct text size classes for all `sz` values", function () {
+        var sizes = ["xs", "sm", "md", "lg", "xl"];
+        sizes.forEach(function (sz) {
+            var container = render(Card, {
+                props: { sz: sz, children: textSnippet("X") },
+            }).container;
+            var card = container.firstElementChild;
+            expect(card.className).toContain(TEXT[sz]);
+        });
+    });
+    it("applies correct padding to content for each size", function () {
+        var cases = [
+            {
+                sz: "xs",
+                pad: "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)]",
+            },
+            { sz: "sm", pad: "px-[var(--spacing-md)] py-[var(--spacing-sm)]" },
+            {
+                sz: "md",
+                pad: "px-[calc(var(--spacing-md)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+            },
+            {
+                sz: "lg",
+                pad: "px-[calc(var(--spacing-md)+var(--spacing-sm))] py-[var(--spacing-md)]",
+            },
+            {
+                sz: "xl",
+                pad: "px-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-md)+var(--spacing-xs))]",
+            },
+        ];
+        cases.forEach(function (_a) {
+            var sz = _a.sz, pad = _a.pad;
+            var container = render(Card, {
+                props: { sz: sz, children: textSnippet("X") },
+            }).container;
+            var content = container.querySelector("[class*='flex-1']");
+            for (var _i = 0, _b = pad.split(" "); _i < _b.length; _i++) {
+                var cls = _b[_i];
+                expect(content.className).toContain(cls);
+            }
+        });
+    });
+    it("content area always has flex-1 and min-h-0", function () {
+        var container = render(Card).container;
+        var content = container.querySelector("[class*='flex-1']");
+        expect(content.className).toContain("flex-1");
+        expect(content.className).toContain("min-h-0");
+    });
+});

package/dist/lib/__tests__/Carousel.test.d.ts

@@ -0,0 +1 @@
+export {};