mtrl-addons 0.1.2 → 0.2.1

package/test/components/vlist-selection.test.ts

@@ -0,0 +1,240 @@
+// test/components/vlist-selection.test.ts
+
+import { describe, test, expect, beforeEach, afterEach } from "bun:test";
+import { createVList } from "../../src/components/vlist";
+import type { VListComponent } from "../../src/components/vlist/types";
+
+describe("VList Selection", () => {
+  let container: HTMLElement;
+  let vlist: VListComponent<any>;
+
+  beforeEach(() => {
+    // Create container
+    container = document.createElement("div");
+    container.style.height = "400px";
+    container.style.width = "300px";
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    // Cleanup
+    if (vlist?.destroy) {
+      vlist.destroy();
+    }
+    document.body.removeChild(container);
+  });
+
+  test("should initialize without selection when not enabled", () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Selection methods should not be available
+    expect(vlist.selectItems).toBeUndefined();
+    expect(vlist.getSelectedItems).toBeUndefined();
+  });
+
+  test("should initialize with selection when enabled", () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "single",
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Selection methods should be available
+    expect(vlist.selectItems).toBeDefined();
+    expect(vlist.getSelectedItems).toBeDefined();
+    expect(vlist.clearSelection).toBeDefined();
+  });
+
+  test("should handle single selection mode", () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "single",
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Select first item
+    vlist.selectItems([0]);
+    expect(vlist.getSelectedIndices()).toEqual([0]);
+    expect(vlist.getSelectedItems()).toEqual([items[0]]);
+
+    // Select another item - should replace selection
+    vlist.selectItems([2]);
+    expect(vlist.getSelectedIndices()).toEqual([2]);
+    expect(vlist.getSelectedItems()).toEqual([items[2]]);
+  });
+
+  test("should handle multiple selection mode", () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "multiple",
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Select multiple items
+    vlist.selectItems([0, 2, 4]);
+    expect(vlist.getSelectedIndices().sort()).toEqual([0, 2, 4]);
+
+    // Deselect one item
+    vlist.deselectItems([2]);
+    expect(vlist.getSelectedIndices().sort()).toEqual([0, 4]);
+
+    // Clear selection
+    vlist.clearSelection();
+    expect(vlist.getSelectedIndices()).toEqual([]);
+  });
+
+  test("should handle click selection", async () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "single",
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Wait for render
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Find first item element
+    const firstItem = container.querySelector(
+      '[data-index="0"]'
+    ) as HTMLElement;
+    expect(firstItem).toBeTruthy();
+
+    // Click on first item
+    firstItem.click();
+
+    // Check selection
+    expect(vlist.getSelectedIndices()).toEqual([0]);
+    expect(firstItem.classList.contains("mtrl-list-item--selected")).toBe(true);
+  });
+
+  test("should emit selection events", async () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    let selectionChangeEvent: any = null;
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "single",
+        onSelectionChange: (selectedItems, selectedIndices) => {
+          selectionChangeEvent = { selectedItems, selectedIndices };
+        },
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Select an item
+    vlist.selectItems([3]);
+
+    // Check event was fired
+    expect(selectionChangeEvent).toBeTruthy();
+    expect(selectionChangeEvent.selectedIndices).toEqual([3]);
+    expect(selectionChangeEvent.selectedItems).toEqual([items[3]]);
+  });
+
+  test("should handle initial selection", () => {
+    const items = Array.from({ length: 10 }, (_, i) => ({
+      id: `item-${i}`,
+      name: `Item ${i}`,
+    }));
+
+    vlist = createVList({
+      container,
+      items,
+      selection: {
+        enabled: true,
+        mode: "multiple",
+        selectedIndices: [1, 3, 5],
+      },
+      template: (item) => {
+        const div = document.createElement("div");
+        div.className = "list-item";
+        div.textContent = item.name;
+        return div;
+      },
+    });
+
+    // Check initial selection
+    expect(vlist.getSelectedIndices().sort()).toEqual([1, 3, 5]);
+  });
+});

package/test/components/vlist.test.ts

@@ -0,0 +1,63 @@
+// test/components/vlist.test.ts
+
+import { describe, it, expect, beforeEach } from "bun:test";
+import { JSDOM } from "jsdom";
+
+// Mock DOM environment for testing
+const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+global.document = dom.window.document;
+global.HTMLElement = dom.window.HTMLElement;
+global.window = dom.window as any;
+global.navigator = dom.window.navigator;
+global.requestAnimationFrame = (cb: FrameRequestCallback) => {
+  setTimeout(cb, 0);
+  return 0;
+};
+
+// Import VList after DOM setup
+import { createVList } from "../../src/components/vlist";
+
+describe("VList Component", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  it("should create a VList component", () => {
+    const vlist = createVList({
+      container,
+      items: ["Item 1", "Item 2", "Item 3"],
+      template: (item) => `<div>${item}</div>`,
+    });
+
+    expect(vlist).toBeDefined();
+    expect(vlist.element).toBeDefined();
+    expect(vlist.element.tagName).toBe("DIV");
+    expect(vlist.element.className).toContain("mtrl-vlist");
+  });
+
+  it("should have viewport functionality", () => {
+    const vlist = createVList({
+      container,
+      items: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
+    });
+
+    expect(vlist.viewport).toBeDefined();
+    expect(typeof vlist.viewport.scrollToIndex).toBe("function");
+    expect(typeof vlist.viewport.getVisibleRange).toBe("function");
+  });
+
+  it("should have public API methods", () => {
+    const vlist = createVList({ container });
+
+    expect(typeof vlist.setItems).toBe("function");
+    expect(typeof vlist.getItems).toBe("function");
+    expect(typeof vlist.scrollToIndex).toBe("function");
+    expect(typeof vlist.scrollToTop).toBe("function");
+    expect(typeof vlist.scrollToBottom).toBe("function");
+    expect(typeof vlist.getState).toBe("function");
+    expect(typeof vlist.destroy).toBe("function");
+  });
+});

package/test/core/collection/adapter.test.ts

@@ -0,0 +1,161 @@
+// test/core/collection/adapter.test.ts
+
+import { describe, test, expect, beforeEach } from "bun:test";
+import {
+  createRouteAdapter,
+  withRouteAdapter,
+} from "../../../src/core/collection/features/adapter";
+import { createCollection } from "../../../src/core/collection";
+
+describe("Route Adapter", () => {
+  let fetchMock: any;
+
+  beforeEach(() => {
+    // Mock fetch
+    fetchMock = {
+      calls: [] as any[],
+      response: {
+        items: [
+          { id: "1", name: "Item 1" },
+          { id: "2", name: "Item 2" },
+        ],
+        meta: {
+          total: 100,
+          hasNext: true,
+          cursor: "next-cursor",
+        },
+      },
+    };
+
+    global.fetch = async (url: any, options: any) => {
+      fetchMock.calls.push({ url, options });
+      return {
+        ok: true,
+        headers: {
+          get: () => "application/json",
+        },
+        json: async () => fetchMock.response,
+      } as any;
+    };
+  });
+
+  describe("createRouteAdapter", () => {
+    test("creates adapter with default config", () => {
+      const adapter = createRouteAdapter();
+      expect(adapter).toBeDefined();
+      expect(adapter.read).toBeDefined();
+      expect(adapter.disconnect).toBeDefined();
+    });
+
+    test("makes API request with correct parameters", async () => {
+      const adapter = createRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/users" },
+        headers: { Authorization: "Bearer token" },
+        pagination: { strategy: "offset" }, // Use offset strategy for this test
+      });
+
+      const result = await adapter.read({
+        offset: 0,
+        limit: 20,
+        search: "john",
+        sort: "name",
+      });
+
+      expect(fetchMock.calls).toHaveLength(1);
+      const [call] = fetchMock.calls;
+      expect(call.url).toContain("/api/users");
+      expect(call.url).toContain("offset=0");
+      expect(call.url).toContain("limit=20");
+      expect(call.url).toContain("search=john");
+      expect(call.url).toContain("sort=name");
+      expect(call.options.headers["Authorization"]).toBe("Bearer token");
+    });
+
+    test("handles different pagination strategies", async () => {
+      // Cursor pagination
+      const cursorAdapter = createRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/items" },
+        pagination: { strategy: "cursor" },
+      });
+
+      await cursorAdapter.read({ cursor: "abc123", limit: 10 });
+      expect(fetchMock.calls[0].url).toContain("cursor=abc123");
+
+      // Page pagination
+      const pageAdapter = createRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/items" },
+        pagination: { strategy: "page" },
+      });
+
+      await pageAdapter.read({ page: 3, limit: 10 });
+      expect(fetchMock.calls[1].url).toContain("page=3");
+    });
+
+    test("transforms query operators", async () => {
+      const adapter = createRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/items" },
+      });
+
+      await adapter.read({
+        filters: {
+          age: { GT: 18, LTE: 65 },
+          status: { EQ: "active" },
+          tags: { IN: ["premium", "verified"] },
+        },
+      });
+
+      const url = fetchMock.calls[0].url;
+      expect(url).toContain("age_gt=18");
+      expect(url).toContain("age_lte=65");
+      expect(url).toContain("status_eq=active");
+      expect(url).toContain("tags_in=premium");
+      expect(url).toContain("tags_in=verified");
+    });
+
+    test("handles caching", async () => {
+      const adapter = createRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/items" },
+        cache: true,
+        pagination: { strategy: "offset" }, // Use offset strategy to test offset params
+      });
+
+      // First call
+      await adapter.read({ offset: 0, limit: 10 });
+      expect(fetchMock.calls).toHaveLength(1);
+
+      // Second call with same params - should use cache
+      await adapter.read({ offset: 0, limit: 10 });
+      expect(fetchMock.calls).toHaveLength(1);
+
+      // Different params - should make new request
+      await adapter.read({ offset: 10, limit: 10 });
+      expect(fetchMock.calls).toHaveLength(2);
+    });
+  });
+
+  describe("withRouteAdapter", () => {
+    test("adds route adapter to collection", async () => {
+      const collection = createCollection({
+        pageSize: 20,
+      });
+
+      const enhancedCollection = withRouteAdapter({
+        base: "/api",
+        endpoints: { list: "/users" },
+      })(collection);
+
+      expect(enhancedCollection.disconnect).toBeDefined();
+
+      // Load data
+      await enhancedCollection.loadPage(1);
+
+      expect(fetchMock.calls).toHaveLength(1);
+      expect(fetchMock.calls[0].url).toContain("/api/users");
+    });
+  });
+});