@inglorious/web 3.0.0 → 4.0.0

package/src/table/table.test.js

@@ -1,393 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { html } from "lit-html"
-import { beforeEach, describe, expect, it, vi } from "vitest"
-
-// Mock the filters module to prevent devtools-related errors in the test environment.
-vi.mock("./table/filters.js", () => ({
-  filters: { render: () => html`` },
-}))
-
-import { table } from "."
-import {
-  getPaginationInfo,
-  getRows,
-  getSortDirection,
-  getTotalRows,
-  isAllSelected,
-  isSomeSelected,
-} from "./logic.js"
-
-const sampleData = [
-  { id: 1, name: "Charlie", age: 35, active: true, role: "Admin" },
-  { id: 2, name: "Alice", age: 30, active: true, role: "User" },
-  { id: 3, name: "Bob", age: 25, active: false, role: "User" },
-  { id: 4, name: "David", age: 40, active: true, role: "Admin" },
-]
-
-const sampleColumns = [
-  { id: "name", title: "Name", isSortable: true, isFilterable: true },
-  {
-    id: "age",
-    title: "Age",
-    type: "number",
-    isSortable: true,
-    isFilterable: true,
-  },
-  {
-    id: "active",
-    title: "Active",
-    type: "boolean",
-    isFilterable: true,
-  },
-  {
-    id: "role",
-    title: "Role",
-    isFilterable: true,
-    filter: { type: "select", options: ["Admin", "User"] },
-  },
-]
-
-describe("table", () => {
-  let entity
-
-  beforeEach(() => {
-    entity = {
-      id: "test-table",
-      type: "table",
-      data: JSON.parse(JSON.stringify(sampleData)), // Deep clone
-      columns: JSON.parse(JSON.stringify(sampleColumns)),
-      pagination: { page: 0, pageSize: 2 },
-      search: { value: "" },
-    }
-  })
-
-  describe("logic", () => {
-    describe("create()", () => {
-      it("should initialize with default state", () => {
-        const newEntity = { data: [{ id: 1, name: "Test" }] }
-        table.create(newEntity)
-        expect(newEntity.sorts).toEqual([])
-        expect(newEntity.filters).toEqual({})
-        expect(newEntity.selection).toEqual([])
-        expect(newEntity.columns).toBeDefined()
-        expect(newEntity.columns[0].id).toBe("id")
-        expect(newEntity.columns[0].title).toBe("Id")
-      })
-    })
-
-    describe("sortChange()", () => {
-      beforeEach(() => {
-        table.create(entity)
-      })
-
-      it("should add a new sort", () => {
-        table.sortChange(entity, "name")
-        expect(entity.sorts).toEqual([{ column: "name", direction: "asc" }])
-      })
-
-      it("should toggle sort direction from asc to desc", () => {
-        table.sortChange(entity, "name") // asc
-        table.sortChange(entity, "name") // desc
-        expect(entity.sorts).toEqual([{ column: "name", direction: "desc" }])
-      })
-
-      it("should remove sort when toggling from desc", () => {
-        table.sortChange(entity, "name") // asc
-        table.sortChange(entity, "name") // desc
-        table.sortChange(entity, "name") // remove
-        expect(entity.sorts).toEqual([])
-      })
-
-      it("should reset to page 0 on sort change", () => {
-        entity.pagination.page = 1
-        table.sortChange(entity, "name")
-        expect(entity.pagination.page).toBe(0)
-      })
-    })
-
-    describe("filterChange()", () => {
-      beforeEach(() => {
-        table.create(entity)
-      })
-
-      it("should add a filter", () => {
-        table.filterChange(entity, { columnId: "name", value: "Alice" })
-        expect(entity.filters.name).toBe("Alice")
-      })
-
-      it("should remove a filter when value is empty", () => {
-        table.filterChange(entity, { columnId: "name", value: "Alice" })
-        table.filterChange(entity, { columnId: "name", value: "" })
-        expect(entity.filters.name).toBeUndefined()
-      })
-
-      it("should reset to page 0 on filter change", () => {
-        entity.pagination.page = 1
-        table.filterChange(entity, { columnId: "name", value: "Alice" })
-        expect(entity.pagination.page).toBe(0)
-      })
-    })
-
-    describe("pagination", () => {
-      beforeEach(() => {
-        table.create(entity)
-      })
-
-      it("pageNext: should go to the next page", () => {
-        table.pageNext(entity)
-        expect(entity.pagination.page).toBe(1)
-      })
-
-      it("pageNext: should not go past the last page", () => {
-        table.pageNext(entity) // page 1
-        table.pageNext(entity) // still page 1 (total 4 items, size 2 -> 2 pages)
-        expect(entity.pagination.page).toBe(1)
-      })
-
-      it("pagePrev: should go to the previous page", () => {
-        entity.pagination.page = 1
-        table.pagePrev(entity)
-        expect(entity.pagination.page).toBe(0)
-      })
-
-      it("pagePrev: should not go before the first page", () => {
-        table.pagePrev(entity)
-        expect(entity.pagination.page).toBe(0)
-      })
-
-      it("pageSizeChange: should change page size and reset to page 0", () => {
-        entity.pagination.page = 1
-        table.pageSizeChange(entity, 4)
-        expect(entity.pagination.pageSize).toBe(4)
-        expect(entity.pagination.page).toBe(0)
-      })
-    })
-
-    describe("selection", () => {
-      beforeEach(() => {
-        table.create(entity)
-      })
-
-      it("rowToggle: should select an unselected row", () => {
-        table.rowToggle(entity, 1)
-        expect(entity.selection).toContain(1)
-      })
-
-      it("rowToggle: should deselect a selected row", () => {
-        entity.selection = [1]
-        table.rowToggle(entity, 1)
-        expect(entity.selection).not.toContain(1)
-      })
-
-      it("rowToggle: should replace selection in single-select mode", () => {
-        entity.isMultiSelect = false
-        entity.selection = [1]
-        table.rowToggle(entity, 2)
-        expect(entity.selection).toEqual([2])
-      })
-
-      it("rowsToggleAll: should select all visible rows if not all are selected", () => {
-        entity.selection = [1] // Bob (id 3) is on page 2, so not visible
-        table.rowsToggleAll(entity) // Selects visible rows: Charlie (1), Alice (2)
-        expect(isAllSelected(entity)).toBe(true)
-        expect(entity.selection).toContain(1)
-        expect(entity.selection).toContain(2)
-      })
-
-      it("rowsToggleAll: should deselect all visible rows if all are selected", () => {
-        entity.selection = [1, 2] // All visible rows on page 0 are selected
-        table.rowsToggleAll(entity)
-        expect(entity.selection).toEqual([])
-      })
-    })
-
-    describe("getters and selectors", () => {
-      beforeEach(() => {
-        table.create(entity)
-      })
-
-      it("getRows: should return sorted, filtered, and paginated rows", () => {
-        // Sort by age descending
-        table.sortChange(entity, "age")
-        table.sortChange(entity, "age")
-        // Filter for active users
-        table.filterChange(entity, { columnId: "active", value: true })
-
-        // Expected after filter: Charlie (35), Alice (30), David (40)
-        // Expected after sort: David (40), Charlie (35), Alice (30)
-        // Expected after pagination (size 2): David (40), Charlie (35)
-        const rows = getRows(entity)
-        expect(rows.map((r) => r.name)).toEqual(["David", "Charlie"])
-      })
-
-      it("getTotalRows: should return total count after filtering", () => {
-        table.filterChange(entity, { columnId: "role", value: "Admin" })
-        expect(getTotalRows(entity)).toBe(2) // Charlie, David
-      })
-
-      it("getPaginationInfo: should return correct pagination details", () => {
-        const info = getPaginationInfo(entity)
-        expect(info).toEqual({
-          page: 0,
-          pageSize: 2,
-          totalPages: 2,
-          totalRows: 4,
-          start: 0,
-          end: 2,
-          hasNextPage: true,
-          hasPrevPage: false,
-        })
-      })
-
-      it("getSortDirection: should return the sort direction of a column", () => {
-        table.sortChange(entity, "name")
-        expect(getSortDirection(entity, "name")).toBe("asc")
-        expect(getSortDirection(entity, "age")).toBeNull()
-      })
-
-      it("isAllSelected: should return true if all visible rows are selected", () => {
-        entity.selection = [1, 2]
-        expect(isAllSelected(entity)).toBe(true)
-      })
-
-      it("isSomeSelected: should return true if some (but not all) visible rows are selected", () => {
-        entity.selection = [1]
-        expect(isSomeSelected(entity)).toBe(true)
-        entity.selection = [1, 2]
-        expect(isSomeSelected(entity)).toBe(false) // All are selected
-      })
-    })
-  })
-
-  describe("rendering", () => {
-    let api
-
-    beforeEach(() => {
-      // Mock the API and sub-renderers for focused testing
-      api = {
-        notify: vi.fn(),
-        getType: vi.fn().mockReturnValue({
-          ...table, // Use the real methods
-          renderHeader: vi.fn(() => html`<div>Header</div>`),
-          renderBody: vi.fn(() => html`<div>Body</div>`),
-          renderFooter: vi.fn(() => html`<div>Footer</div>`),
-        }),
-      }
-
-      table.create(entity)
-    })
-
-    it("render: should call sub-renderers", () => {
-      table.render(entity, api)
-      const type = api.getType()
-      expect(type.renderHeader).toHaveBeenCalledWith(entity, api)
-      expect(type.renderBody).toHaveBeenCalledWith(entity, api)
-      expect(type.renderFooter).toHaveBeenCalledWith(entity, api)
-    })
-
-    it("renderHeader: should render a header row with columns", () => {
-      // Use the real renderHeader
-      api.getType.mockReturnValue(table)
-      const result = table.renderHeader(entity, api)
-      const renderedItems = result.values.find(Array.isArray)
-      expect(renderedItems).toHaveLength(entity.columns.length)
-    })
-
-    it("renderHeaderColumn: should render a title and sort icon", () => {
-      table.sortChange(entity, "name") // sort asc
-      const column = entity.columns[0] // name column
-      const result = table.renderHeaderColumn(entity, column, api)
-      const renderedText = result.strings.join("")
-      const title = result.values[2]
-      const icon = result.values[3]
-      expect(renderedText).toContain("iw-table-header-title")
-      expect(`${title} ${icon}`).toBe("Name ▲")
-    })
-
-    it("renderBody: should render a row for each visible item", () => {
-      api.getType.mockReturnValue(table)
-      const result = table.renderBody(entity, api)
-      const [renderedRows] = result.values
-      const visibleRows = getRows(entity)
-      expect(renderedRows).toHaveLength(visibleRows.length)
-    })
-
-    it("renderRow: should render a row with correct classes", () => {
-      api.getType.mockReturnValue(table)
-      entity.selection = [1] // Select the first row
-      const rowData = entity.data[0] // Charlie
-
-      // The classMap directive is inside a string, making it hard to inspect.
-      // Instead, we can verify the logic that would be passed to it.
-      const isSelected = entity.selection?.includes(rowData.id)
-      const isEven = 0 % 2 !== 0 // The test passes index 0
-
-      // Assert that our logic correctly determines the class states.
-      expect(isEven).toBe(false)
-      expect(isSelected).toBe(true)
-    })
-
-    it("renderCell: should render a cell with correct style", () => {
-      api.getType.mockReturnValue(table)
-      const cellData = "Test"
-      const column = entity.columns[0] // name column
-      column.width = 150
-      const result = table.renderCell(entity, cellData, 0, api)
-      const styleString = result.values[1]
-      expect(styleString).toContain("width: 150px")
-    })
-
-    it("renderFooter: should render pagination info", () => {
-      api.getType.mockReturnValue(table)
-      // Ensure pagination is present for this test
-      entity.pagination = { page: 0, pageSize: 2 }
-      const result = table.renderFooter(entity, api)
-      // Reconstruct a simplified string from the template parts to check content
-      const renderedText = result.strings.reduce(
-        (acc, str, i) => acc + str + (result.values[i] ?? ""),
-        "",
-      )
-      // The reconstructed text might have extra whitespace, so we check for parts.
-      expect(renderedText).toContain("1 to 2 of 4")
-      expect(renderedText).toContain("entries")
-    })
-
-    it("renderPagination: should render page controls", () => {
-      api.getType.mockReturnValue(table)
-      entity.pagination = { page: 0, pageSize: 2 }
-      const paginationInfo = getPaginationInfo(entity)
-      const result = table.renderPagination(entity, paginationInfo, api)
-
-      // Reconstruct a simplified string from the template parts to check content
-      // This is more robust than inspecting the internal structure of lit-html's TemplateResult
-      const renderedText = result.strings.reduce(
-        (acc, str, i) => acc + str + (result.values[i] ?? ""),
-        "",
-      )
-      expect(renderedText).toContain('class="iw-table-page-input"')
-      expect(result.values).toContain(1) // Check that the dynamic value is correct
-    })
-
-    it("mount: should measure and set column widths", () => {
-      const mockColumn1 = document.createElement("div")
-      vi.spyOn(mockColumn1, "offsetWidth", "get").mockReturnValue(150)
-      const mockColumn2 = document.createElement("div")
-      vi.spyOn(mockColumn2, "offsetWidth", "get").mockReturnValue(200)
-
-      const containerEl = document.createElement("div")
-      containerEl.appendChild(mockColumn1)
-      containerEl.appendChild(mockColumn2)
-
-      // Only set width if it's a string (e.g., "auto")
-      entity.columns[0].width = "auto"
-      entity.columns[1].width = "auto"
-
-      table.mount(entity, containerEl)
-
-      expect(entity.columns[0].width).toBe(150)
-      expect(entity.columns[1].width).toBe(200)
-    })
-  })
-})