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

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

@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-globals */
-import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing';
 import { html } from 'lit';
+
 import { IxGrid } from '../IxGrid.js';
 import { IxGridRowFilter } from '../components/IxGridRowFilter.js';
 import '../ix-grid-no-rows.js';
@@ -42,7 +43,13 @@ const columns = [
   },
 ];
 
+const sessionStorageKey = 'test-session-key';
+
 describe('IxGrid', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
   it('renders a grid', async () => {
     const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);
 
@@ -87,6 +94,7 @@ describe('IxGrid', () => {
 
   it('resets pagination upon filter change', async () => {
     const el = await fixture<IxGrid>(html`<ix-grid
+      session-storage-key=${sessionStorageKey}
       .columns=${columns}
       .rows=${rows}
     ></ix-grid>`);
@@ -105,6 +113,7 @@ describe('IxGrid', () => {
     expect(el.page).to.equal(2);
 
     const rowFilter = el.shadowRoot?.querySelector('ix-grid-row-filter');
+    const changeEvent = oneEvent(el, 'change');
     rowFilter!.dispatchEvent(
       new CustomEvent('rowFilter', {
         detail: {
@@ -114,7 +123,10 @@ describe('IxGrid', () => {
         composed: true,
       })
     );
+    const event = await changeEvent;
     expect(el.page).to.equal(1);
+    expect(event.detail.filters).to.deep.equal({});
+    expect(event.detail.filtersOperators).to.deep.equal([]);
   });
 
   it('should read and set sort, order, page and page size from URL if readParamsFromURL is set to true', async () => {
@@ -122,8 +134,11 @@ describe('IxGrid', () => {
       .columns=${columns}
       .rows=${rows}
       .readParamsFromURL=${true}
+      session-storage-key=${sessionStorageKey}
     ></ix-grid>`);
 
+    sessionStorage.removeItem(`urlPageSizeRead`);
+
     const url = '?sort=lastName&order=asc&page=2&size=5';
 
     history.pushState(null, '', `${location.pathname}${url}`);
@@ -135,6 +150,52 @@ describe('IxGrid', () => {
     expect(el.sortDirection).to.be.eq('asc');
   });
 
+  it('sessionStorage sets the URL', async () => {
+    sessionStorage.setItem(
+      `grid-${sessionStorageKey}`,
+      JSON.stringify({
+        pageSize: 25,
+      })
+    );
+
+    const el = await fixture<IxGrid>(html`<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+      session-storage-key=${sessionStorageKey}
+    ></ix-grid>`);
+
+    await elementUpdated(el);
+
+    expect(location.href).to.contain('size=25');
+  });
+
+  it('page and page size from URL sets sessionStorage', async () => {
+    sessionStorage.setItem(
+      `grid-${sessionStorageKey}`,
+      JSON.stringify({
+        pageSize: 10,
+      })
+    );
+
+    const el = await fixture<IxGrid>(html`<ix-grid
+      .columns=${columns}
+      .rows=${rows}
+      .readParamsFromURL=${true}
+      session-storage-key=${sessionStorageKey}
+    ></ix-grid>`);
+
+    const url = '?sort=lastName&order=asc&page=2&size=25';
+
+    history.pushState(null, '', `${location.pathname}${url}`);
+    await elementUpdated(el);
+
+    const sessionData = JSON.parse(
+      sessionStorage.getItem(`grid-${sessionStorageKey}`) || '{}'
+    );
+
+    expect(sessionData.pageSize).to.be.eq(25);
+  });
+
   it('should set sort, order, page, page size and filters in the URL when addParamsToURL is set to true', async () => {
     const columnsWithFilters = [
       {
@@ -166,6 +227,7 @@ describe('IxGrid', () => {
     const el = await fixture<IxGrid>(html`<ix-grid
       .columns=${columnsWithFilters}
       .addParamsToURL=${true}
+      session-storage-key=${sessionStorageKey}
     ></ix-grid>`);
 
     const rowFilter = el.shadowRoot?.querySelector('ix-grid-row-filter');
@@ -230,6 +292,7 @@ describe('IxGrid', () => {
           .rows=${[]}
           .addParamsToURL=${true}
           .preservedQueryParamKeys=${['userId', 'token']}
+          session-storage-key=${sessionStorageKey}
         ></ix-grid>
       `);
 

package/src/test/mockData.ts

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+
+export const rows = [
+  {
+    name: 'one',
+  },
+  {
+    name: 'two',
+  },
+  {
+    name: 'three',
+  },
+];
+
+export 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'],
+  },
+];

package/web-test-runner.config.mjs

@@ -31,6 +31,10 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
 
   port: 8030,
 
+  coverageConfig: {
+    exclude: ['**/node_modules/**', '**/__wds-outside-root__/**'],
+  },
+
   /** Filter out lit dev mode logs */
   filterBrowserLogs(log) {
     for (const arg of log.args) {