@digital-realty/ix-grid 1.4.1-alpha.1 → 1.4.1-alpha.2

package/src/test/ix-grid-row-filter.test.js

@@ -0,0 +1,281 @@
+/* eslint-disable no-restricted-globals */
+import { aTimeout, elementUpdated, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import { IxGridRowFilter } from '../components/IxGridRowFilter.js';
+const columns = [
+    {
+        name: 'firstName',
+        header: 'First name',
+        filterable: true,
+        filterOperators: ['contains', 'equals'],
+    },
+    {
+        name: 'lastName',
+        header: 'Last name',
+        filterable: true,
+        filterOperators: ['contains', 'equals'],
+    },
+    {
+        name: 'middleName',
+        header: 'Middle name',
+        filterable: false,
+        filterOperators: ['contains', 'equals'],
+    },
+    {
+        name: 'email',
+        header: 'Email',
+        filterable: true,
+        filterOperators: ['contains', 'equals'],
+    },
+];
+const filters = [
+    {
+        columnField: 'firstName',
+        operatorValue: 'contains',
+        value: 'John',
+    },
+];
+describe('IxGridRowFilter', () => {
+    it('should render the grid row filter', async () => {
+        const el = await fixture(html `<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`);
+        expect(el).to.be.instanceOf(IxGridRowFilter);
+    });
+    it('renders and popluates the grid row filter', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<ix-grid-row-filter
+        .columns=${columns}
+        .filters=${filters}
+      ></ix-grid-row-filter>`);
+        const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+        openMenu.click();
+        await elementUpdated(el);
+        const columnOptions = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('select[data-v="firstName"] option');
+        expect(columnOptions === null || columnOptions === void 0 ? void 0 : columnOptions.length).to.equal(3);
+        const filterOperatorInput = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('select.filterOperatorInput');
+        filterOperatorInput.value = 'equals';
+        filterOperatorInput.dispatchEvent(new Event('change', {
+            bubbles: true,
+            cancelable: true,
+        }));
+        await elementUpdated(el);
+        const selectedOperator = filterOperatorInput.querySelector('option[selected]');
+        expect(selectedOperator === null || selectedOperator === void 0 ? void 0 : selectedOperator.value).to.equal('equals');
+    });
+    it('should debounce the filter input', async () => {
+        var _a, _b;
+        const debounceTime = 100;
+        const el = await fixture(html `<ix-grid-row-filter
+        .columns=${columns}
+        .filters=${filters}
+        .filterValueChangeDebounceTime=${debounceTime}
+      ></ix-grid-row-filter>`);
+        const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+        openMenu.click();
+        await elementUpdated(el);
+        const filterInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField input');
+        const debouncedOnFilterValueChangeSpy = sinon.spy(el, 'debouncedOnFilterValueChange');
+        const onFilterValueChangeSpy = sinon.spy(el, 'onfilterValueChange');
+        for (let i = 0; i < 5; i += 1) {
+            filterInput.dispatchEvent(new InputEvent('input', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+            }));
+        }
+        expect(debouncedOnFilterValueChangeSpy).to.have.been.called;
+        expect(onFilterValueChangeSpy).to.not.have.been.called;
+        await aTimeout(debounceTime);
+        expect(onFilterValueChangeSpy).to.have.been.calledOnce;
+    });
+    describe('Filter type input', () => {
+        it('should render a string input control for non-supplied data type', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'firstName',
+                    header: 'First name',
+                    filterable: true,
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const filterInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField input');
+            expect(filterInput).to.exist;
+            expect(filterInput).to.be.instanceOf(HTMLInputElement);
+        });
+        it('should render a string input control for string data type', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'firstName',
+                    header: 'First name',
+                    filterable: true,
+                    dataType: 'string',
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const filterInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField input');
+            expect(filterInput).to.exist;
+            expect(filterInput).to.be.instanceOf(HTMLInputElement);
+        });
+        it('should render a date input control for dateTime data type', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'createdDate',
+                    header: 'Created Date',
+                    filterable: true,
+                    dataType: 'dateTime',
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const dateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField ix-date');
+            expect(dateInput).to.exist;
+            expect(dateInput).to.be.instanceOf(HTMLElement);
+        });
+        it('should render nothing when an unknown data type is used', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'unknownTypeField',
+                    header: 'Unknown Type',
+                    filterable: true,
+                    dataType: 'unknownType',
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const inputField = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField input');
+            expect(inputField).to.be.null;
+        });
+        it('should build filter from URL when readParamsFromURL is True', async () => {
+            var _a, _b, _c, _d, _e, _f;
+            const columnsWithDataType = [
+                {
+                    name: 'firstName',
+                    header: 'First name',
+                    filterable: true,
+                    dataType: 'string',
+                    filterOperators: ['contains', 'equals'],
+                },
+                {
+                    name: 'lastName',
+                    header: 'Last Name',
+                    filterable: true,
+                    dataType: 'string',
+                    filterOperators: ['equals'],
+                },
+                {
+                    name: 'createdDate',
+                    header: 'Created Date',
+                    filterable: true,
+                    dataType: 'dateTime',
+                    filterOperators: ['equals'],
+                },
+            ];
+            const el = (await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+          .readParamsFromURL=${true}
+        ></ix-grid-row-filter>`));
+            const url = 'firstName_contains=John&createdDate_equals=2021-09-01';
+            history.pushState(null, '', `${location.pathname}?${url}`);
+            el.firstUpdated();
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const formFilters = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.filter-form');
+            const filter1Name = (_c = formFilters[0]
+                .querySelector('.filterColumnField')
+                .querySelector('select')
+                .attributes.getNamedItem('data-v')) === null || _c === void 0 ? void 0 : _c.value;
+            const filter1Operator = (_d = formFilters[0]
+                .querySelector('.filterOperatorField')
+                .querySelector('select')
+                .attributes.getNamedItem('data-v')) === null || _d === void 0 ? void 0 : _d.value;
+            const filter1Value = formFilters[0]
+                .querySelector('.filterValueField')
+                .querySelector('input').value;
+            const filter2Name = (_e = formFilters[1]
+                .querySelector('.filterColumnField')
+                .querySelector('select')
+                .attributes.getNamedItem('data-v')) === null || _e === void 0 ? void 0 : _e.value;
+            const filter2Operator = (_f = formFilters[1]
+                .querySelector('.filterOperatorField')
+                .querySelector('select')
+                .attributes.getNamedItem('data-v')) === null || _f === void 0 ? void 0 : _f.value;
+            const filter2Value = formFilters[1]
+                .querySelector('.filterValueField')
+                .querySelector('ix-date').value;
+            expect(formFilters.length).to.be.eq(2);
+            expect(filter1Name).to.be.eq('firstName');
+            expect(filter1Operator).to.be.eq('contains');
+            expect(filter1Value).to.be.eq('John');
+            expect(filter2Name).to.be.eq('createdDate');
+            expect(filter2Operator).to.be.eq('equals');
+            expect(filter2Value).to.be.eq('2021-09-01');
+        });
+        it('should use maxDate for date inputs if provided', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'dateField',
+                    header: 'Date Field',
+                    filterable: true,
+                    filterOperators: ['='],
+                    dataType: 'dateTime',
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+          .maxDate=${'2025-12-31'}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const dateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField ix-date');
+            expect(dateInput).to.exist;
+            expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.getAttribute('max')).to.equal('2025-12-31');
+        });
+        it('should fallback to default maxDate if maxDate is not provided', async () => {
+            var _a, _b;
+            const columnsWithDataType = [
+                {
+                    name: 'dateField',
+                    header: 'Date Field',
+                    filterable: true,
+                    filterOperators: ['='],
+                    dataType: 'dateTime',
+                },
+            ];
+            const el = await fixture(html `<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+        ></ix-grid-row-filter>`);
+            const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+            openMenu === null || openMenu === void 0 ? void 0 : openMenu.click();
+            await elementUpdated(el);
+            const dateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div.filterValueField ix-date');
+            expect(dateInput).to.exist;
+            const today = new Date().toISOString().split('T')[0];
+            expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.getAttribute('max')).to.equal(today);
+        });
+    });
+});

package/src/test/ix-grid.test.js

@@ -0,0 +1,391 @@
+/* eslint-disable no-restricted-globals */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import { IxGridRowFilter } from '../components/IxGridRowFilter.js';
+import '../ix-grid-no-rows.js';
+import '../ix-grid.js';
+const rows = [
+    {
+        name: 'one',
+    },
+    {
+        name: 'two',
+    },
+    {
+        name: 'three',
+    },
+];
+const columns = [
+    {
+        name: 'one',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+        filterable: true,
+        filterOperators: ['equals'],
+    },
+    {
+        name: 'two',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+        filterable: true,
+        filterOperators: ['equals', 'contains'],
+    },
+    {
+        name: 'three',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+        filterable: true,
+        filterOperators: ['equals', 'contains'],
+    },
+];
+describe('IxGrid', () => {
+    it('renders a grid', async () => {
+        const el = await fixture(html `<ix-grid></ix-grid>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders the correct number of rows', async () => {
+        const el = await fixture(html `<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+    ></ix-grid>`);
+        expect(rows.length).to.equal(3);
+        expect(el).to.not.be.null;
+    });
+    it('renders no rows component state', async () => {
+        var _a;
+        const el = await fixture(html `<ix-grid
+      .columns=${columns}
+      .rows=${[]}
+      ><ix-grid-no-rows slot="no-rows"></ix-grid-no-rows
+    ></ix-grid>`);
+        const noRows = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="no-rows"]');
+        expect(noRows).to.not.be.null;
+    });
+    it('renders an ix-grid-row-filter', async () => {
+        var _a;
+        const el = await fixture(html `<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+      .filterValueChangeDebounceTime=${1000}
+    ></ix-grid>`);
+        const rowFilter = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-grid-row-filter');
+        expect(rowFilter).to.be.instanceOf(IxGridRowFilter);
+        expect(rowFilter.filterValueChangeDebounceTime).to.equal(1000);
+    });
+    it('resets pagination upon filter change', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+    ></ix-grid>`);
+        const pagination = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-pagination');
+        pagination.dispatchEvent(new CustomEvent('updatePagination', {
+            detail: {
+                page: 2,
+                pageSize: 10,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        expect(el.page).to.equal(2);
+        const rowFilter = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-grid-row-filter');
+        rowFilter.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                resetPage: true,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        expect(el.page).to.equal(1);
+    });
+    it('should read and set sort, order, page and page size from URL if readParamsFromURL is set to true', async () => {
+        const el = await fixture(html `<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+      .readParamsFromURL=${true}
+    ></ix-grid>`);
+        const url = '?sort=lastName&order=asc&page=2&size=5';
+        history.pushState(null, '', `${location.pathname}${url}`);
+        el.firstUpdated();
+        expect(el.page).to.be.eq(2);
+        expect(el.pageSize).to.be.eq(5);
+        expect(el.sortedColumn).to.be.eq('lastName');
+        expect(el.sortDirection).to.be.eq('asc');
+    });
+    it('should set sort, order, page, page size and filters in the URL when addParamsToURL is set to true', async () => {
+        var _a, _b;
+        const columnsWithFilters = [
+            {
+                name: 'firstName',
+                header: 'First name',
+                filterable: true,
+                dataType: 'string',
+                filterOperators: ['contains', 'equals'],
+            },
+            {
+                name: 'lastName',
+                header: 'Last Name',
+                filterable: true,
+                dataType: 'string',
+                filterOperators: ['equals'],
+            },
+            {
+                name: 'createdDate',
+                header: 'Created Date',
+                filterable: true,
+                dataType: 'dateTime',
+                filterOperators: ['equals'],
+            },
+        ];
+        const existingSearchParams = '?realUsername=Earl&userAge=30';
+        history.pushState(null, '', `${location.pathname}${existingSearchParams}`);
+        const el = await fixture(html `<ix-grid
+      .columns=${columnsWithFilters}
+      .addParamsToURL=${true}
+    ></ix-grid>`);
+        const rowFilter = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-grid-row-filter');
+        rowFilter.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                filters: [
+                    {
+                        columnField: 'firstName',
+                        operatorValue: 'contains',
+                        value: 'test',
+                    },
+                    {
+                        columnField: 'createdDate',
+                        operatorValue: 'equals',
+                        value: '2024-10-10',
+                    },
+                ],
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        el.sortedColumn = 'firstName';
+        el.sortDirection = 'desc';
+        const pagination = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-pagination');
+        pagination.dispatchEvent(new CustomEvent('updatePagination', {
+            detail: {
+                page: 3,
+                pageSize: 5,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        expect(location.search).to.be.eq(`${existingSearchParams}&sort=firstName&order=desc&page=3&size=5&firstName_contains=test&createdDate_equals=2024-10-10`);
+    });
+    describe('IxGrid updateSort', () => {
+        it('should update URL with sort, order, page, pageSize, filters', async () => {
+            history.replaceState(null, '', '/?userId=123&token=abc');
+            const updateSortColumns = [
+                {
+                    name: 'name',
+                    header: 'Name',
+                    filterable: true,
+                    filterOperators: ['contains'],
+                    sortable: true,
+                },
+            ];
+            const el = await fixture(html `
+        <ix-grid
+          .columns=${updateSortColumns}
+          .rows=${[]}
+          .addParamsToURL=${true}
+          .preservedQueryParamKeys=${['userId', 'token']}
+        ></ix-grid>
+      `);
+            await el.updateComplete;
+            await el.handleSort('name');
+            const url = new URL(window.location.href);
+            const { searchParams } = url;
+            expect(searchParams.get('sort')).to.equal('name');
+            expect(searchParams.get('order')).to.equal('asc');
+            expect(searchParams.get('page')).to.equal('1');
+            expect(searchParams.get('size')).to.equal('10');
+            expect(searchParams.get('userId')).to.equal('123');
+            expect(searchParams.get('token')).to.equal('abc');
+        });
+    });
+    describe('IxGrid LocalStorage Persistence', () => {
+        beforeEach(() => {
+            localStorage.clear();
+        });
+        it('should reset localStorage value if columns length does not match', async () => {
+            const tempEl = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            const localStorageKey = tempEl.columnsLocalStorageKey;
+            // Simulating a user fully deleting and adding a fake column to their local storage
+            localStorage.setItem(localStorageKey, JSON.stringify([{ name: 'six', header: 'six' }]));
+            const el = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            await el.updateComplete;
+            const storedColumns = JSON.parse(localStorage.getItem(el.columnsLocalStorageKey) || '[]');
+            expect(storedColumns.length).to.equal(columns.length);
+            expect(storedColumns.map(c => c.name)).to.deep.equal(columns.map(c => c.name));
+        });
+        it('should reset localStorage value if it contains a column that does not exist in the provided columns', async () => {
+            const tempEl = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            const localStorageKey = tempEl.columnsLocalStorageKey;
+            // Simulating a user adding an additional column to local storage
+            localStorage.setItem(localStorageKey, JSON.stringify([
+                ...columns,
+                { name: 'nonexistent', header: 'Nonexistent' },
+            ]));
+            const el = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            await el.updateComplete;
+            const storedColumns = JSON.parse(localStorage.getItem(el.columnsLocalStorageKey) || '[]');
+            expect(storedColumns.length).to.equal(columns.length);
+            expect(storedColumns.map(c => c.name)).to.deep.equal(columns.map(c => c.name));
+        });
+        it('should delete localStorage if a provided column does not exist in localStorage and not create new local storage', async () => {
+            const initialColumns = columns.slice(0, -1);
+            const tempEl = await fixture(html `<ix-grid
+          .columns=${initialColumns}
+          localStorageID="testGrid"
+        ></ix-grid>`);
+            const localStorageKey = tempEl.columnsLocalStorageKey;
+            // Simulating a user deleting most columns from local storage
+            localStorage.setItem(localStorageKey, JSON.stringify(initialColumns));
+            const el = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            await el.updateComplete;
+            expect(localStorage.getItem(el.columnsLocalStorageKey)).to.equal(null);
+        });
+        it('should reorder columns based on table header flex order', async () => {
+            var _a;
+            const el = await fixture(html `<ix-grid
+          .columns=${columns}
+          .rows=${rows}
+          localStorageID="testGrid"
+        ></ix-grid>`);
+            await el.updateComplete;
+            const headerCells = (_a = el.grid.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('th');
+            if (!headerCells || headerCells.length !== columns.length) {
+                throw new Error('Table headers not found or do not match expected count');
+            }
+            const orderMap = [2, 0, 1];
+            headerCells.forEach((th, index) => {
+                const thElement = th;
+                thElement.style.order = orderMap[index].toString();
+            });
+            await el.updateComplete;
+            await el.reorderColumnsFromTable();
+            const reorderedColumns = [columns[1], columns[2], columns[0]];
+            const storedColumns = JSON.parse(localStorage.getItem(el.columnsLocalStorageKey) || '[]');
+            expect(storedColumns.map(c => c.name)).to.deep.equal(reorderedColumns.map(c => c.name));
+        });
+        it('should reorder columns when a filter reorder event is triggered', async () => {
+            const el = await fixture(html `<ix-grid .columns=${columns} localStorageID="testGrid"></ix-grid>`);
+            await el.updateComplete;
+            const reorderedColumns = [columns[2], columns[0], columns[1]];
+            const event = new CustomEvent('columnFilter', {
+                detail: { reorderedColumns },
+                bubbles: true,
+                composed: true,
+            });
+            el.reorderColumnsFromFilter(event);
+            await el.updateComplete;
+            const storedColumns = JSON.parse(localStorage.getItem(el.columnsLocalStorageKey) || '[]');
+            expect(el.displayColumns.map(c => c.name)).to.deep.equal(reorderedColumns.map(c => c.name));
+            expect(storedColumns.map(c => c.name)).to.deep.equal(reorderedColumns.map(c => c.name));
+        });
+    });
+    describe('IxGrid handlePopState', () => {
+        const handlePopStateColumns = [
+            {
+                name: 'customcolumnfilter',
+                header: 'Custom',
+                filterable: true,
+                filterOperators: ['contains'],
+            },
+            {
+                name: 'id',
+                header: 'ID',
+                filterable: true,
+                filterOperators: ['equals'],
+            },
+        ];
+        it('should handle empty sort/order/page/size in URL', async () => {
+            history.replaceState(null, '', '/?sort=&order=&page=&size=');
+            const el = await fixture(html `
+        <ix-grid
+          .columns=${handlePopStateColumns}
+          .rows=${[]}
+          .readParamsFromURL=${true}
+        ></ix-grid>
+      `);
+            await el.updateComplete;
+            const changeEventPromise = oneEvent(el, 'change');
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            const event = await changeEventPromise;
+            expect(el.sortedColumn).to.equal('');
+            expect(el.sortDirection).to.equal('');
+            expect(el.page).to.equal(1);
+            expect(el.pageSize).to.equal(10);
+            expect(event.detail.filters).to.deep.equal({});
+        });
+        it('should handle valid sort/order/page/size in URL', async () => {
+            history.replaceState(null, '', '/?sort=id&order=desc&page=1&size=20');
+            const el = await fixture(html `
+        <ix-grid
+          .columns=${handlePopStateColumns}
+          .rows=${[]}
+          .readParamsFromURL=${true}
+        ></ix-grid>
+      `);
+            await el.updateComplete;
+            const changeEventPromise = oneEvent(el, 'change');
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            const event = await changeEventPromise;
+            expect(el.sortedColumn).to.equal('id');
+            expect(el.sortDirection).to.equal('desc');
+            expect(el.page).to.equal(1);
+            expect(el.pageSize).to.equal(20);
+            expect(event.detail.filters).to.deep.equal({});
+        });
+        it('should update filters from URL with custom filter', async () => {
+            history.replaceState(null, '', '/?customcolumnfilter_contains=foobar');
+            const el = await fixture(html `
+        <ix-grid
+          .columns=${handlePopStateColumns}
+          .rows=${[]}
+          .readParamsFromURL=${true}
+        ></ix-grid>
+      `);
+            await el.updateComplete;
+            const changeEventPromise = oneEvent(el, 'change');
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            const event = await changeEventPromise;
+            expect(event.detail.filters).to.deep.equal({
+                customcolumnfilter: 'foobar',
+            });
+        });
+        it('should dispatch a change event with correct detail', async () => {
+            history.replaceState(null, '', '/?sort=id&order=desc&page=1&size=20&customcolumnfilter_contains=foobar');
+            const el = await fixture(html `
+        <ix-grid
+          .columns=${handlePopStateColumns}
+          .rows=${[]}
+          .readParamsFromURL=${true}
+        ></ix-grid>
+      `);
+            await el.updateComplete;
+            const changeEventPromise = oneEvent(el, 'change');
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            const event = await changeEventPromise;
+            expect(event.detail).to.include({
+                columnName: 'id',
+                sortOrder: 'desc',
+                page: 1,
+                pageSize: 20,
+            });
+            expect(event.detail.filters).to.deep.equal({
+                customcolumnfilter: 'foobar',
+            });
+            expect(event.detail.filtersOperators).to.deep.equal([
+                {
+                    columnField: 'customcolumnfilter',
+                    operator: 'contains',
+                },
+            ]);
+        });
+    });
+});