@digital-realty/ix-grid 1.3.9 → 1.3.11

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

@@ -385,5 +385,35 @@ describe('IxGridRowFilter', () => {
       const today = new Date().toISOString().split('T')[0];
       expect(dateInput?.getAttribute('max')).to.equal(today);
     });
+
+    it('should render ix-date-next if "useNewDatePicker" is true', async () => {
+      const columnsWithDataType = [
+        {
+          name: 'dateField',
+          header: 'Date Field',
+          filterable: true,
+          filterOperators: ['='],
+          dataType: 'dateTime',
+        },
+      ];
+
+      const el = await fixture(
+        html`<ix-grid-row-filter
+          .columns=${columnsWithDataType}
+          .useNewDatePicker=${true}
+        ></ix-grid-row-filter>`
+      );
+
+      const openMenu = el.shadowRoot?.querySelector(
+        '.filter-button'
+      ) as HTMLElement;
+      openMenu?.click();
+      await elementUpdated(el);
+
+      const dateInput = el.shadowRoot?.querySelector(
+        'div.filterValueField ix-date-next'
+      );
+      expect(dateInput).to.exist;
+    });
   });
 });

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>`);
@@ -122,8 +130,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 +146,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 +223,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 +288,7 @@ describe('IxGrid', () => {
           .rows=${[]}
           .addParamsToURL=${true}
           .preservedQueryParamKeys=${['userId', 'token']}
+          session-storage-key=${sessionStorageKey}
         ></ix-grid>
       `);