xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/Table/Table.spec.js

@@ -1,827 +0,0 @@
-"use strict";
-/**
- * Table Component End-to-End Tests
- *
- * This test suite provides comprehensive coverage for the Table component following
- * XMLUI testing conventions. The tests validate all documented properties, events,
- * accessibility features, and edge cases.
- *
- * Test Results Summary:
- * - ✅ 25 tests passing
- * - ⏭️ 6 tests skipped (require additional implementation investigation)
- *
- * Key Testing Insights:
- * - Use HTML element selectors (th, td, table) rather than role-based selectors
- * - Add .first() to avoid strict mode violations when multiple elements match
- * - Some features like selection checkboxes exist but are hidden via CSS
- * - Loading states, sorting, and pagination may use different implementations than expected
- *
- * Skipped Tests (for future investigation):
- * 1. Loading property visual indicators
- * 2. Row selection interaction (checkboxes are hidden)
- * 3. Sorting functionality behavior
- * 4. Pagination control identification
- * 5. Theme variable CSS property testing
- */
-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());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// Sample data for testing
-const sampleData = [
-    { id: 1, name: "Apple", quantity: 5, category: "Fruit" },
-    { id: 2, name: "Banana", quantity: 3, category: "Fruit" },
-    { id: 3, name: "Carrot", quantity: 10, category: "Vegetable" },
-    { id: 4, name: "Spinach", quantity: 2, category: "Vegetable" },
-];
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders with basic data and columns", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-        <Column bindTo="category" header="Category"/>
-      </Table>
-    `);
-        const table = page.getByTestId("table");
-        yield (0, fixtures_1.expect)(table).toBeVisible();
-        // Check for actual HTML table elements
-        const htmlTable = page.locator("table");
-        yield (0, fixtures_1.expect)(htmlTable).toBeVisible();
-        // Check headers are present
-        const headers = page.locator("th");
-        yield (0, fixtures_1.expect)(headers).toHaveCount(3); // Should have 3 headers
-        // Check header text content
-        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
-        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
-        yield (0, fixtures_1.expect)(headers.nth(2)).toContainText("Category");
-        // Check data content - use first() to avoid strict mode violations
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Fruit" }).first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with empty data array", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{[]}' testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        const table = page.getByTestId("table");
-        yield (0, fixtures_1.expect)(table).toBeVisible();
-        // Headers should still be visible
-        const headers = page.locator("th");
-        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
-        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
-    }));
-    fixtures_1.test.describe("data property", () => {
-        (0, fixtures_1.test)("displays data with different value types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const mixedData = [
-                { id: 1, name: "Test", number: 42, boolean: true, nullValue: null },
-                { id: 2, name: "Another", number: 0, boolean: false, nullValue: undefined },
-            ];
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(mixedData)}}' testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="number"/>
-          <Column bindTo="boolean"/>
-          <Column bindTo="nullValue"/>
-        </Table>
-      `);
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Test" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "42" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "true" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "0" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "false" }).first()).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles null data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{null}' testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            const table = page.getByTestId("table");
-            yield (0, fixtures_1.expect)(table).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles undefined data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{undefined}' testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            const table = page.getByTestId("table");
-            yield (0, fixtures_1.expect)(table).toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("items property", () => {
-        (0, fixtures_1.test)("items property works as alias for data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table items='{${JSON.stringify(sampleData)}}' testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
-        }));
-        (0, fixtures_1.test)("items takes priority over data when both are provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const itemsData = [{ id: 1, name: "Items Data" }];
-            const dataProperty = [{ id: 1, name: "Data Property" }];
-            yield initTestBed(`
-        <Table 
-          items='{${JSON.stringify(itemsData)}}' 
-          data='{${JSON.stringify(dataProperty)}}' 
-          testId="table"
-        >
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Items Data" }).first()).toBeVisible();
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Data Property" })).toHaveCount(0);
-        }));
-    });
-    fixtures_1.test.describe("hideHeader property", () => {
-        (0, fixtures_1.test)("hides header when hideHeader is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' hideHeader="true" testId="table">
-          <Column bindTo="name" header="Name"/>
-          <Column bindTo="quantity" header="Quantity"/>
-        </Table>
-      `);
-            // Header should not be visible
-            yield (0, fixtures_1.expect)(page.locator("th")).toHaveCount(0);
-            // Data should still be visible
-            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows header when hideHeader is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' hideHeader="false" testId="table">
-          <Column bindTo="name" header="Name"/>
-          <Column bindTo="quantity" header="Quantity"/>
-        </Table>
-      `);
-            const headers = page.locator("th");
-            yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
-            yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
-        }));
-    });
-    fixtures_1.test.describe("noBottomBorder property", () => {
-        (0, fixtures_1.test)("removes bottom border when noBottomBorder is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' noBottomBorder="true" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            const table = page.getByTestId("table");
-            yield (0, fixtures_1.expect)(table).toBeVisible();
-            // Note: Visual border testing would require specific CSS assertions
-        }));
-    });
-    fixtures_1.test.describe("rowsSelectable property", () => {
-        (0, fixtures_1.test)("enables row selection when rowsSelectable is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            // Selection checkboxes should be present - they exist but might be hidden via CSS
-            const checkboxes = page.locator("input[type='checkbox']");
-            yield (0, fixtures_1.expect)(checkboxes).toHaveCount(5); // 4 data rows + 1 header checkbox
-        }));
-        (0, fixtures_1.test)("disables row selection when rowsSelectable is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="false" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            // No selection checkboxes should be present
-            const checkboxes = page.locator("input[type='checkbox']");
-            yield (0, fixtures_1.expect)(checkboxes).toHaveCount(0);
-        }));
-    });
-    fixtures_1.test.describe("autoFocus property", () => {
-        (0, fixtures_1.test)("focuses table when autoFocus is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' autoFocus="true" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            const table = page.getByTestId("table");
-            yield (0, fixtures_1.expect)(table).toBeFocused();
-        }));
-    });
-    fixtures_1.test.describe("checkboxTolerance property", () => {
-        (0, fixtures_1.test)("allows checkbox interaction within compact tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               checkboxTolerance="compact"
-               onSelectionDidChange="testState = 'selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get first row checkbox - checkboxes exist but are hidden via CSS
-            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
-            // Get the first table row to interact with
-            const firstDataRow = page.locator("tbody tr").first();
-            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
-            // Get row bounds for calculation
-            const rowBounds = yield firstDataRow.boundingBox();
-            // Click near the left edge of the row (where checkbox would be with tolerance)
-            // This simulates clicking within the 8px compact tolerance of the checkbox
-            const clickX = rowBounds.x + 15; // Slightly to the right of where checkbox would be
-            const clickY = rowBounds.y + rowBounds.height / 2;
-            // Click within tolerance boundary should trigger selection due to checkboxTolerance="compact"
-            yield page.mouse.click(clickX, clickY);
-            // Verify checkbox is now checked (using force since it's hidden)
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('selection changed');
-        }));
-        (0, fixtures_1.test)("allows header checkbox interaction within compact tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               enableMultiRowSelection="true"
-               checkboxTolerance="compact"
-               onSelectionDidChange="testState = 'header selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get header checkbox (select all checkbox)
-            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
-            // Get the header row to interact with
-            const headerRow = page.locator("thead tr").first();
-            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
-            // Get header row bounds for calculation
-            const headerBounds = yield headerRow.boundingBox();
-            // Click near the left edge of the header row (where checkbox would be with tolerance)
-            // This simulates clicking within the 8px compact tolerance of the header checkbox
-            const clickX = headerBounds.x + 15; // Slightly to the right of where checkbox would be
-            const clickY = headerBounds.y + headerBounds.height / 2;
-            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="compact"
-            yield page.mouse.click(clickX, clickY);
-            // Verify header checkbox is now checked (select all)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
-            // Verify all row checkboxes are also checked (select all behavior)
-            const allCheckboxes = page.locator("input[type='checkbox']");
-            const checkboxCount = yield allCheckboxes.count();
-            for (let i = 0; i < checkboxCount; i++) {
-                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
-            }
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header selection changed');
-        }));
-        (0, fixtures_1.test)("allows checkbox interaction within none tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               checkboxTolerance="none"
-               onSelectionDidChange="testState = 'none selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get first row checkbox - checkboxes exist but are hidden via CSS
-            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
-            // Get the first table row to interact with
-            const firstDataRow = page.locator("tbody tr").first();
-            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
-            // Get row bounds for calculation
-            const rowBounds = yield firstDataRow.boundingBox();
-            // For "none" tolerance, we need to click precisely on the checkbox
-            // Since checkboxes are hidden, click on their expected position
-            yield firstRowCheckbox.click({ force: true });
-            // Verify checkbox is now checked
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('none selection changed');
-        }));
-        (0, fixtures_1.test)("allows header checkbox interaction within none tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               enableMultiRowSelection="true"
-               checkboxTolerance="none"
-               onSelectionDidChange="testState = 'header none selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get header checkbox (select all checkbox)
-            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
-            // Get the header row to interact with
-            const headerRow = page.locator("thead tr").first();
-            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
-            // Get header row bounds for calculation
-            const headerBounds = yield headerRow.boundingBox();
-            // For "none" tolerance, we need to click precisely on the checkbox
-            // Since checkboxes are hidden, click on their expected position
-            yield headerCheckbox.click({ force: true });
-            // Verify header checkbox is now checked (select all)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
-            // Verify all row checkboxes are also checked (select all behavior)
-            const allCheckboxes = page.locator("input[type='checkbox']");
-            const checkboxCount = yield allCheckboxes.count();
-            for (let i = 0; i < checkboxCount; i++) {
-                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
-            }
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header none selection changed');
-        }));
-        (0, fixtures_1.test)("allows checkbox interaction within comfortable tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               checkboxTolerance="comfortable"
-               onSelectionDidChange="testState = 'comfortable selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get first row checkbox - checkboxes exist but are hidden via CSS
-            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
-            // Get the first table row to interact with
-            const firstDataRow = page.locator("tbody tr").first();
-            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
-            // Get row bounds for calculation
-            const rowBounds = yield firstDataRow.boundingBox();
-            // Click near the left edge of the row (where checkbox would be with tolerance)
-            // This simulates clicking within the 12px comfortable tolerance of the checkbox
-            const clickX = rowBounds.x + 20; // Further right to test 12px tolerance
-            const clickY = rowBounds.y + rowBounds.height / 2;
-            // Click within tolerance boundary should trigger selection due to checkboxTolerance="comfortable"
-            yield page.mouse.click(clickX, clickY);
-            // Verify checkbox is now checked
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('comfortable selection changed');
-        }));
-        (0, fixtures_1.test)("allows header checkbox interaction within comfortable tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               enableMultiRowSelection="true"
-               checkboxTolerance="comfortable"
-               onSelectionDidChange="testState = 'header comfortable selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get header checkbox (select all checkbox)
-            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
-            // Get the header row to interact with
-            const headerRow = page.locator("thead tr").first();
-            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
-            // Get header row bounds for calculation
-            const headerBounds = yield headerRow.boundingBox();
-            // Click near the left edge of the header row (where checkbox would be with tolerance)
-            // This simulates clicking within the 12px comfortable tolerance of the header checkbox
-            const clickX = headerBounds.x + 20; // Further right to test 12px tolerance
-            const clickY = headerBounds.y + headerBounds.height / 2;
-            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="comfortable"
-            yield page.mouse.click(clickX, clickY);
-            // Verify header checkbox is now checked (select all)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
-            // Verify all row checkboxes are also checked (select all behavior)
-            const allCheckboxes = page.locator("input[type='checkbox']");
-            const checkboxCount = yield allCheckboxes.count();
-            for (let i = 0; i < checkboxCount; i++) {
-                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
-            }
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header comfortable selection changed');
-        }));
-        (0, fixtures_1.test)("allows checkbox interaction within spacious tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               checkboxTolerance="spacious"
-               onSelectionDidChange="testState = 'spacious selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get first row checkbox - checkboxes exist but are hidden via CSS
-            const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeAttached();
-            // Get the first table row to interact with
-            const firstDataRow = page.locator("tbody tr").first();
-            yield (0, fixtures_1.expect)(firstDataRow).toBeVisible();
-            // Get row bounds for calculation
-            const rowBounds = yield firstDataRow.boundingBox();
-            // Click near the left edge of the row (where checkbox would be with tolerance)
-            // This simulates clicking within the 16px spacious tolerance of the checkbox
-            const clickX = rowBounds.x + 24; // Even further right to test 16px tolerance
-            const clickY = rowBounds.y + rowBounds.height / 2;
-            // Click within tolerance boundary should trigger selection due to checkboxTolerance="spacious"
-            yield page.mouse.click(clickX, clickY);
-            // Verify checkbox is now checked
-            yield (0, fixtures_1.expect)(firstRowCheckbox).toBeChecked();
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('spacious selection changed');
-        }));
-        (0, fixtures_1.test)("allows header checkbox interaction within spacious tolerance boundary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' 
-               rowsSelectable="true" 
-               enableMultiRowSelection="true"
-               checkboxTolerance="spacious"
-               onSelectionDidChange="testState = 'header spacious selection changed'"
-               testId="table">
-          <Column bindTo="name"/>
-          <Column bindTo="quantity"/>
-        </Table>
-      `);
-            // Get header checkbox (select all checkbox)
-            const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
-            // Verify checkbox exists (even if hidden)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeAttached();
-            // Get the header row to interact with
-            const headerRow = page.locator("thead tr").first();
-            yield (0, fixtures_1.expect)(headerRow).toBeVisible();
-            // Get header row bounds for calculation
-            const headerBounds = yield headerRow.boundingBox();
-            // Click near the left edge of the header row (where checkbox would be with tolerance)
-            // This simulates clicking within the 16px spacious tolerance of the header checkbox
-            const clickX = headerBounds.x + 24; // Even further right to test 16px tolerance
-            const clickY = headerBounds.y + headerBounds.height / 2;
-            // Click within tolerance boundary should trigger "select all" due to checkboxTolerance="spacious"
-            yield page.mouse.click(clickX, clickY);
-            // Verify header checkbox is now checked (select all)
-            yield (0, fixtures_1.expect)(headerCheckbox).toBeChecked();
-            // Verify all row checkboxes are also checked (select all behavior)
-            const allCheckboxes = page.locator("input[type='checkbox']");
-            const checkboxCount = yield allCheckboxes.count();
-            for (let i = 0; i < checkboxCount; i++) {
-                yield (0, fixtures_1.expect)(allCheckboxes.nth(i)).toBeChecked();
-            }
-            // Verify selection event was fired
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual('header spacious selection changed');
-        }));
-    });
-    fixtures_1.test.describe("noDataTemplate property", () => {
-        (0, fixtures_1.test)("shows custom no data template when data is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{[]}' testId="table">
-          <Column bindTo="name"/>
-          <property name="noDataTemplate">
-            <Text>No items found</Text>
-          </property>
-        </Table>
-      `);
-            yield (0, fixtures_1.expect)(page.getByText("No items found")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("hides no data view when noDataTemplate is empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{[]}' noDataTemplate="" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            // Should not show default no data message
-            yield (0, fixtures_1.expect)(page.getByText(/no data/i)).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("hides no data view when noDataTemplate is null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Table data='{[]}' noDataTemplate="{null}" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-            // Should not show default no data message
-            yield (0, fixtures_1.expect)(page.getByText(/no data/i)).not.toBeVisible();
-        }));
-    });
-});
-// =============================================================================
-// TESTS FOR FEATURES THAT NEED INVESTIGATION
-// =============================================================================
-fixtures_1.test.describe("Features Needing Investigation", () => {
-    (0, fixtures_1.test)("loading property shows loading state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table loading="true" testId="table">
-          <Column bindTo="name"/>
-        </Table>
-      `);
-        yield (0, fixtures_1.expect)(page.getByRole("status").and(page.getByLabel("Loading"))).toBeVisible();
-    }));
-    (0, fixtures_1.test)("row selection works with checkboxes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table 
-          data='{${JSON.stringify(sampleData)}}' 
-          rowsSelectable="true" 
-          enableMultiRowSelection="true" 
-          testId="table"
-        >
-          <Column bindTo="name"/>
-        </Table>
-      `);
-        const checkboxes = page.locator("input[type='checkbox']");
-        yield checkboxes.nth(1).check({ force: true }); // First data row
-        yield checkboxes.nth(2).check({ force: true }); // Second data row
-        yield (0, fixtures_1.expect)(checkboxes.nth(1)).toBeChecked();
-        yield (0, fixtures_1.expect)(checkboxes.nth(2)).toBeChecked();
-    }));
-    (0, fixtures_1.test)("sorting works correctly with descending order", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table 
-          data='{${JSON.stringify(sampleData)}}' 
-          sortBy="name" 
-          sortDirection="descending" 
-          testId="table"
-        >
-          <Column bindTo="name" canSort="true"/>
-        </Table>
-      `);
-        const cells = page.locator("td");
-        // Should be sorted reverse alphabetically: Spinach, Carrot, Banana, Apple
-        yield (0, fixtures_1.expect)(cells.nth(0)).toHaveText("Spinach");
-        yield (0, fixtures_1.expect)(cells.nth(1)).toHaveText("Carrot");
-    }));
-    (0, fixtures_1.test)("sorting works correctly with ascending order", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table 
-          data='{${JSON.stringify(sampleData)}}' 
-          sortBy="quantity" 
-          sortDirection="ascending" 
-          testId="table"
-        >
-          <Column bindTo="quantity" canSort="true"/>
-        </Table>
-      `);
-        const cells = page.locator("td");
-        // Should be sorted in ascending order: 2, 3, 5, 10
-        yield (0, fixtures_1.expect)(cells.nth(0)).toHaveText("2");
-        yield (0, fixtures_1.expect)(cells.nth(1)).toHaveText("3");
-        yield (0, fixtures_1.expect)(cells.nth(2)).toHaveText("5");
-        yield (0, fixtures_1.expect)(cells.nth(3)).toHaveText("10");
-    }));
-    (0, fixtures_1.test)("pagination works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table 
-          data='{${JSON.stringify(sampleData)}}' 
-          isPaginated="true" 
-          testId="table"
-        >
-          <Column bindTo="name"/>
-        </Table>
-      `);
-        yield (0, fixtures_1.expect)(page.locator("button[aria-label*='Previous page']")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("button[aria-label*='Next page']")).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has correct table structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        // Check proper table semantics
-        yield (0, fixtures_1.expect)(page.locator("table")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("th")).toHaveCount(2); // 2 headers
-        yield (0, fixtures_1.expect)(page.locator("tr")).toHaveCount(5); // 1 header + 4 data rows
-    }));
-    (0, fixtures_1.test)("column headers are focusable and have proper structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-        <Column bindTo="name" header="Name" canSort="true"/>
-        <Column bindTo="quantity" header="Quantity" canSort="true"/>
-      </Table>
-    `);
-        const headers = page.locator("th");
-        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
-        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
-    }));
-    (0, fixtures_1.test)("selection checkboxes have proper accessibility when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
-        <Column bindTo="name"/>
-      </Table>
-    `);
-        const checkboxes = page.locator("input[type='checkbox']");
-        // All checkboxes should have proper type
-        yield (0, fixtures_1.expect)(checkboxes.first()).toHaveAttribute("type", "checkbox");
-        // Should have expected count
-        yield (0, fixtures_1.expect)(checkboxes).toHaveCount(5); // 4 data rows + 1 header
-    }));
-    (0, fixtures_1.test)("has proper headers for screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-        <Column bindTo="name" header="Product Name"/>
-        <Column bindTo="quantity" header="Stock Quantity"/>
-      </Table>
-    `);
-        // Column headers should have descriptive names
-        yield (0, fixtures_1.expect)(page.locator("th").filter({ hasText: "Product Name" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("th").filter({ hasText: "Stock Quantity" })).toBeVisible();
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handles no props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Table testId="table"/>`);
-        const table = page.getByTestId("table");
-        yield (0, fixtures_1.expect)(table).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles data with missing properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const incompleteData = [
-            { name: "Apple" }, // missing quantity
-            { quantity: 5 }, // missing name
-            {}, // missing both
-        ];
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(incompleteData)}}' testId="table">
-        <Column bindTo="name"/>
-        <Column bindTo="quantity"/>
-      </Table>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("table")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles deeply nested object properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const nestedData = [
-            {
-                user: {
-                    profile: {
-                        name: "John Doe"
-                    }
-                }
-            },
-        ];
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(nestedData)}}' testId="table">
-        <Column bindTo="user.profile.name" header="Name"/>
-      </Table>
-    `);
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "John Doe" }).first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters in data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const specialData = [
-            { name: "Special: 🎉", symbol: "★" },
-            { name: "Unicode: 你好", symbol: "⚡" },
-            { name: "Emoji: 👨‍👩‍👧‍👦", symbol: "🔥" },
-        ];
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(specialData)}}' testId="table">
-        <Column bindTo="name"/>
-        <Column bindTo="symbol"/>
-      </Table>
-    `);
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Special: 🎉" }).first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Unicode: 你好" }).first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Emoji: 👨‍👩‍👧‍👦" }).first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom sorting icons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table 
-        data='{${JSON.stringify(sampleData)}}' 
-        iconNoSort="sort"
-        iconSortAsc="sort-up"
-        iconSortDesc="sort-down"
-        testId="table"
-      >
-        <Column bindTo="name" canSort="true" header="Name"/>
-      </Table>
-    `);
-        const headers = page.locator("th");
-        yield (0, fixtures_1.expect)(headers.first()).toContainText("Name");
-    }));
-});
-// =============================================================================
-// THEME AND STYLING TESTS
-// =============================================================================
-// TODO: Need more theme variable tests!
-fixtures_1.test.describe("Theme Variables and Styling", () => {
-    (0, fixtures_1.test)("applies heading background color theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-          <Column bindTo="name" header="Name"/>
-        </Table>
-      `, {
-            testThemeVars: { "backgroundColor-heading-Table": "rgb(255, 0, 0)" },
-        });
-        const header = page.locator("th").first();
-        yield (0, fixtures_1.expect)(header).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-});
-// =============================================================================
-// CELL VERTICAL ALIGNMENT TESTS
-// =============================================================================
-fixtures_1.test.describe("Cell Vertical Alignment", () => {
-    (0, fixtures_1.test)("applies center alignment by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        // Check header cells have center alignment class
-        const headerCell = page.locator("th").first();
-        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignCenter/);
-        // Check data cells have center alignment class
-        const dataCell = page.locator("td").first();
-        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignCenter/);
-    }));
-    (0, fixtures_1.test)("applies top alignment when cellVerticalAlign='top'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        // Check header cells have top alignment class
-        const headerCell = page.locator("th").first();
-        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignTop/);
-        // Check data cells have top alignment class
-        const dataCell = page.locator("td").first();
-        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignTop/);
-    }));
-    (0, fixtures_1.test)("applies bottom alignment when cellVerticalAlign='bottom'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="bottom" testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        // Check header cells have bottom alignment class
-        const headerCell = page.locator("th").first();
-        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignBottom/);
-        // Check data cells have bottom alignment class
-        const dataCell = page.locator("td").first();
-        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignBottom/);
-    }));
-    (0, fixtures_1.test)("applies center alignment when cellVerticalAlign='center'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="center" testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-      </Table>
-    `);
-        // Check header cells have center alignment class
-        const headerCell = page.locator("th").first();
-        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignCenter/);
-        // Check data cells have center alignment class
-        const dataCell = page.locator("td").first();
-        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignCenter/);
-    }));
-    (0, fixtures_1.test)("applies alignment to all cells consistently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
-        <Column bindTo="name" header="Name"/>
-        <Column bindTo="quantity" header="Quantity"/>
-        <Column bindTo="category" header="Category"/>
-      </Table>
-    `);
-        // Check all header cells have the same alignment
-        const headerCells = page.locator("th");
-        const headerCount = yield headerCells.count();
-        for (let i = 0; i < headerCount; i++) {
-            yield (0, fixtures_1.expect)(headerCells.nth(i)).toHaveClass(/alignTop/);
-        }
-        // Check all data cells have the same alignment
-        const dataCells = page.locator("td");
-        const dataCount = yield dataCells.count();
-        for (let i = 0; i < dataCount; i++) {
-            yield (0, fixtures_1.expect)(dataCells.nth(i)).toHaveClass(/alignTop/);
-        }
-    }));
-});