@ukic/canary-web-components 2.0.0-canary.8 → 3.0.0-canary.1

package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js

@@ -5,10 +5,14 @@ import { IcPagination } from "@ukic/web-components/dist/components/ic-pagination
 import { PaginationBar } from "../../../ic-pagination-bar/ic-pagination-bar";
 import { IcPaginationItem } from "@ukic/web-components/dist/components/ic-pagination-item";
 import { h } from "@stencil/core";
+import { waitForTimeout } from "../../../../testspec.setup";
+import { IcEmptyState } from "@ukic/web-components/dist/components/ic-empty-state";
+import { DataTableTitleBar } from "../../../ic-data-table-title-bar/ic-data-table-title-bar";
 beforeAll(() => {
     jest.spyOn(console, "warn").mockImplementation(jest.fn());
 });
 const icDataTable = "ic-data-table";
+const icLoadingIndicator = "ic-loading-indicator";
 const employeeNumber = "Employee number";
 const name1 = "John Smith";
 const name2 = "Sally Jones";
@@ -16,12 +20,21 @@ const name3 = "Luke Fisher";
 const name4 = "Jane Lock";
 const name5 = "Margaret Hale";
 const highlightedRowClass = "table-row-selected";
+const showBackgroundClass = "show-background";
+const customIcon = '<svg aria-labelledby="error-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><title id="error-title">Error</title><g id="close-octagon"><path id="Vector" d="M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" /></g></svg>';
 const columns = [
     { key: "name", title: "Name", dataType: "string" },
     { key: "age", title: "Age", dataType: "number" },
     { key: "department", title: "Department", dataType: "string" },
     { key: "employeeNumber", title: employeeNumber, dataType: "number" },
 ];
+const columnsWithElements = [
+    { key: "name", title: "Name", dataType: "string" },
+    { key: "age", title: "Age", dataType: "number" },
+    { key: "department", title: "Department", dataType: "string" },
+    { key: "employeeNumber", title: employeeNumber, dataType: "number" },
+    { key: "actions", title: "Actions", dataType: "element" },
+];
 const columnsWithRowHeader = [
     { key: "header", title: employeeNumber, dataType: "number" },
     { key: "name", title: "Name", dataType: "string" },
@@ -49,6 +62,47 @@ const columnsWithOverrides = [
         emphasis: "low",
     },
 ];
+const columnsWithIcons = [
+    {
+        key: "name",
+        title: "Name",
+        dataType: "string",
+        icon: {
+            icon: customIcon,
+        },
+    },
+    { key: "age", title: "Age", dataType: "number" },
+    { key: "department", title: "Department", dataType: "string" },
+    { key: "employeeNumber", title: employeeNumber, dataType: "number" },
+];
+const columnsWithIconsOnAllCells = [
+    {
+        key: "name",
+        title: "Name",
+        dataType: "string",
+        icon: {
+            icon: customIcon,
+            onAllCells: true,
+        },
+    },
+    { key: "age", title: "Age", dataType: "number" },
+    { key: "department", title: "Department", dataType: "string" },
+    { key: "employeeNumber", title: employeeNumber, dataType: "number" },
+];
+const columnsWithIconsHideOnHeader = [
+    {
+        key: "name",
+        title: "Name",
+        dataType: "string",
+        icon: {
+            icon: customIcon,
+            hideOnHeader: true,
+        },
+    },
+    { key: "age", title: "Age", dataType: "number" },
+    { key: "department", title: "Department", dataType: "string" },
+    { key: "employeeNumber", title: employeeNumber, dataType: "number" },
+];
 const data = [
     { name: name1, age: 36, department: "Accounts", employeeNumber: 1 },
     {
@@ -270,6 +324,32 @@ const longData = [
         employeeNumber: 20,
     },
 ];
+const dataWithIcons = [
+    {
+        name: {
+            data: name1,
+            icon: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/></svg>',
+        },
+        age: 36,
+        department: "Accounts",
+        employeeNumber: 1,
+    },
+    {
+        name: name2,
+        age: 32,
+        department: "Engineering",
+        employeeNumber: 2,
+    },
+    { name: "Tim Rayes", age: 41, department: "Sales", employeeNumber: 3 },
+    {
+        name: name3,
+        age: "23",
+        department: "Engineering",
+        employeeNumber: 4,
+    },
+    { name: name4, age: 34, department: "Engineering", employeeNumber: 5 },
+    { name: name5, age: 45, department: "HR", employeeNumber: 6 },
+];
 describe(icDataTable, () => {
     it("should render", async () => {
         const page = await newSpecPage({
@@ -306,6 +386,13 @@ describe(icDataTable, () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render with a slotted ic-data-table-title-bar", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data }, h("ic-data-table-title-bar", { slot: "title-bar" }))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should render with column overrides", async () => {
         const page = await newSpecPage({
             components: [DataTable],
@@ -327,6 +414,136 @@ describe(icDataTable, () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should correctly render a custom icon in the header when passed through the column prop", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columnsWithIcons, data: data })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should not render custom icon in header when hideOnHeader is set", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columnsWithIconsHideOnHeader, data: data })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render column icon on all column cells if onAllCells is true, except ones that already have a custom icon", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columnsWithIconsOnAllCells, data: dataWithIcons })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a slotted icon instead of an icon defined in data", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columns, data: dataWithIcons }, h("svg", { slot: "name-0-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24" }, h("path", { d: "M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z" })))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render the empty state when data is null", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render the empty state when no data is passed through", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: [] })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should be able to slot a custom empty state into the data table", async () => {
+        const page = await newSpecPage({
+            components: [IcButton, DataTable, IcEmptyState],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: [] }, h("ic-empty-state", { slot: "empty-state", aligned: "left", heading: "Test heading", body: "test body" }, h("ic-button", { slot: "actions" }, "Button")))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render the loading state when the `loading` prop is passed through", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, loading: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render the updating state when the `updating` prop is passed through", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, updating: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should pass through the loadingOptions to the loading indicator", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, loadingOptions: {
+                    appearance: "light",
+                }, loading: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should pass through the updatingOptions to the linear loading indicator", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, updatingOptions: {
+                    progress: 30,
+                }, updating: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should apply a background to the loading indicator if data is supplied to the table", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columns, data: data, loading: true })),
+        });
+        expect(page.rootInstance.loadingOptions.showBackground).toBeTruthy();
+        const loadingIndicator = page.root.shadowRoot.querySelector(icLoadingIndicator);
+        expect(loadingIndicator).toHaveClass(showBackgroundClass);
+    });
+    it("should not apply a background to the loading indicator if no data is supplied to the table, and apply one when data is provided later", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columns, loading: true })),
+        });
+        expect(page.rootInstance.loadingOptions.showBackground).toBeFalsy();
+        let loadingIndicator = page.root.shadowRoot.querySelector(icLoadingIndicator);
+        expect(loadingIndicator).not.toHaveClass(showBackgroundClass);
+        page.root.data = data;
+        await page.waitForChanges();
+        expect(page.rootInstance.loadingOptions.showBackground).toBeTruthy();
+        loadingIndicator = page.root.shadowRoot.querySelector(icLoadingIndicator);
+        expect(loadingIndicator).toHaveClass(showBackgroundClass);
+        //delay to allow for 1 sec setTimeout in loading indicator, otherwise next test fails
+        await waitForTimeout(1100);
+    });
+    it("when loading is `true`, setting data should cancel the loading after 1 second from initial loading", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, loading: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+        await waitForTimeout(1100);
+        page.root.data = data;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("when loading is `true`, if data is set before 1 second of loading it will wait 1 second before rendering the data", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, loading: true })),
+        });
+        expect(page.root).toMatchSnapshot();
+        page.root.data = data;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        await waitForTimeout(1500);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
     it("should return correct alignment from getCellAlignment", async () => {
         const page = await newSpecPage({
             components: [DataTable],
@@ -388,13 +605,13 @@ describe(icDataTable, () => {
     it("should change number of items per page when select dropdown is changed", async () => {
         const page = await newSpecPage({
             components: [DataTable, PaginationBar],
-            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: longData, "show-pagination": true, paginationOptions: {
-                    itemsPerPage: [
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: longData, "show-pagination": true, paginationBarOptions: {
+                    itemsPerPageOptions: [
                         { label: "10", value: "10" },
                         { label: "25", value: "25" },
                         { label: "50", value: "50" },
                     ],
-                    type: "data",
+                    rangeLabelType: "data",
                 } })),
         });
         await page.waitForChanges();
@@ -440,6 +657,32 @@ describe(icDataTable, () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it("should change the density of the element when it receives the icTableDensityUpdate event", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columns, data: data }, h("ic-data-table-title-bar", { slot: "title-bar" }))),
+        });
+        expect(page.rootInstance.density).toBe("default");
+        let icDensityUpdateEvent = new CustomEvent("icTableDensityUpdate", {
+            detail: { value: "dense" },
+        });
+        page.root.dispatchEvent(icDensityUpdateEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.density).toBe("dense");
+        icDensityUpdateEvent = new CustomEvent("icTableDensityUpdate", {
+            detail: { value: "spacious" },
+        });
+        page.root.dispatchEvent(icDensityUpdateEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.density).toBe("spacious");
+    });
+    it("should pass the caption down to any slotted ic-data-table-title-bar", async () => {
+        const page = await newSpecPage({
+            components: [DataTable, DataTableTitleBar],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columns, data: data }, h("ic-data-table-title-bar", { slot: "title-bar" }))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should highlight the correct row when clicked", async () => {
         const page = await newSpecPage({
             components: [IcButton, DataTable],
@@ -462,5 +705,98 @@ describe(icDataTable, () => {
         expect(rows[1]).not.toHaveClass(highlightedRowClass);
         expect(rows[2]).not.toHaveClass(highlightedRowClass);
     });
+    it("should apply a specified row height to all rows when globalRowHeight is set", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, globalRowHeight: 80 })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should apply a specified row height to specific rows when variableRowHeight is set, and any not included should use the default globalRowHeight", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data,
+                // eslint-disable-next-line react/jsx-no-bind
+                variableRowHeight: ({ index }) => (index % 2 === 0 ? 200 : null) })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should reset all rows to the default height when resetRowHeights is called", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, globalRowHeight: 80,
+                // eslint-disable-next-line react/jsx-no-bind
+                variableRowHeight: ({ index }) => (index % 2 === 0 ? 200 : null) })),
+        });
+        expect(page.root).toMatchSnapshot();
+        await page.root.resetRowHeights(40);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should emit icRowHeightChange when globalRowHeight or variableRowHeight is changed", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, globalRowHeight: 80,
+                // eslint-disable-next-line react/jsx-no-bind
+                variableRowHeight: ({ index }) => (index % 2 === 0 ? 200 : null) })),
+        });
+        const eventSpy = jest.fn();
+        page.root.addEventListener("icRowHeightChange", eventSpy);
+        const dataTable = page.root;
+        dataTable.globalRowHeight = 50;
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledTimes(1);
+        dataTable.variableRowHeight = ({ index }) => (index % 2 === 0 ? 100 : null);
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledTimes(2);
+    });
+    it("should emit icSortChange when column sort button is clicked", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, sortable: true })),
+        });
+        const eventSpy = jest.fn();
+        page.root.addEventListener("icSortChange", eventSpy);
+        const dataTable = document.querySelector(icDataTable);
+        const sortButton = Array.from(dataTable.shadowRoot.querySelectorAll(".sort-button"));
+        sortButton[0].click();
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: { columnName: "name", sorted: "ascending" },
+        }));
+    });
+    it("should apply the correct density scaler to rowHeights when not using the default density", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, globalRowHeight: 80, density: "dense" })),
+        });
+        expect(page.root).toMatchSnapshot();
+        page.root.density = "spacious";
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should not override the height of rows if `globalRowHeight` is set to auto", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data, globalRowHeight: "auto" })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should not override the height of certain rows if `variableRowHeight` returns auto", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "test table", columns: columns, data: data,
+                // eslint-disable-next-line react/jsx-no-bind
+                variableRowHeight: ({ index }) => (index % 2 === 0 ? "auto" : null) })),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should slot a custom element into a cell", async () => {
+        const page = await newSpecPage({
+            components: [DataTable],
+            template: () => (h("ic-data-table", { caption: "Table", columns: columnsWithElements, data: data }, data.map((_, index) => (h("ic-button", { key: index, slot: `actions-${index}` }, "Delete"))))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
 });
 //# sourceMappingURL=ic-data-table.spec.js.map