feat(plugins): remove jQuery from Grid State plugin (#757)

.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = true

.eslintrc

@@ -13,6 +13,8 @@
         "Sortable": true
     },
     "rules": {
+        "cypress/no-unnecessary-waiting": "off",
+        "cypress/unsafe-to-chain-command": "off",
         "no-prototype-builtins": [0]
     }
 }

cypress/integration/example-0070-plugin-state.spec.js

@@ -0,0 +1,114 @@
+
+describe('Example 0070 - Grid State using Local Storage', () => {
+  const originalTitles = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-0070-plugin-state.html`);
+    cy.get('h2 + p').should('contain', 'Slick.State');
+
+    cy.clearLocalStorage();
+    cy.get('[data-test="clear-storage"]').click();
+  });
+
+  it('should have exact Column Titles in the grid', () => {
+    cy.get('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
+  });
+
+  it('should sort ascending column "D"', () => {
+    cy.get('.slick-header-columns .slick-header-column:nth(3)')
+      .click({ force: true });
+
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(3)')
+      .find('.slick-sort-indicator.slick-sort-indicator-asc')
+      .should('be.visible');
+  });
+
+  it('should drag column "A" to be after column "C" in the grid', () => {
+    const expectedTitles = ['A', 'C', 'D', 'B', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(1)')
+      .contains('B')
+      .drag('.slick-header-column:nth(3)');
+
+    cy.get('.slick-header-column:nth(3)').contains('B');
+
+    cy.get('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
+  });
+
+  it('should resize 1st column and make it wider', () => {
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(1)')
+      .should('contain', 'C');
+
+    cy.get('.slick-resizable-handle:nth(1)')
+      .trigger('mousedown', { which: 1, force: true })
+      .trigger('mousemove', 'bottomRight');
+
+    cy.get('.slick-header-column:nth(2)')
+      .trigger('mousemove', 'bottomRight')
+      .trigger('mouseup', 'bottomRight', { which: 1, force: true });
+
+    cy.get('.slick-header-column:nth(1)')
+      .should(($el) => {
+        const expectedWidth = 170; // calculate with a calculated width including a (+/-)5px precision
+        expect($el.width()).greaterThan(expectedWidth - 5);
+        expect($el.width()).lessThan(expectedWidth + 5);
+      });
+  });
+
+  it('should reload the page', () => {
+    cy.reload().wait(50);
+  });
+
+  it('should reload page and expect same columns orders, 2nd column wider and 3rd column sorted ascending', () => {
+    const expectedTitles = ['A', 'C', 'D', 'B', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+    cy.get('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
+
+    cy.get('.slick-header-column:nth(1)')
+      .should(($el) => {
+        const expectedWidth = 170; // calculate with a calculated width including a (+/-)5px precision
+        expect($el.width()).greaterThan(expectedWidth - 5);
+        expect($el.width()).lessThan(expectedWidth + 5);
+      });
+
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(2)')
+      .find('.slick-sort-indicator.slick-sort-indicator-asc')
+      .should('be.visible');
+  });
+
+  it('should clear local storage & reload the page', () => {
+    cy.clearLocalStorage();
+    cy.get('[data-test="clear-storage"]').click();
+
+    cy.reload().wait(50);
+  });
+
+  it('should expect grid to be reset to default', () => {
+    cy.get('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
+
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(2)')
+      .find('.slick-sort-indicator.slick-sort-indicator-asc')
+      .should('not.exist');
+  });
+});

cypress/support/commands.js

@@ -35,4 +35,18 @@ Cypress.Commands.add("getCell", (row, col, viewport = 'topLeft', { parentSelecto
   const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : '';
 
   return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top:${row * rowHeight}px"] > .slick-cell:nth(${col})`);
-})
+});
+
+let LOCAL_STORAGE_MEMORY = {};
+
+Cypress.Commands.add('saveLocalStorage', () => {
+  Object.keys(localStorage).forEach(key => {
+    LOCAL_STORAGE_MEMORY[key] = localStorage[key];
+  });
+});
+
+Cypress.Commands.add('restoreLocalStorage', () => {
+  Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
+    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
+  });
+});

examples/example-0070-plugin-state.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <title>SlickGrid example: Plugin: State</title>
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
@@ -38,12 +39,12 @@ <h2>About</h2>
       This example demonstrates using the <b>Slick.State</b> plugin persisting grid column width, order, visibility and sort order using Local Storage.
       For this demo, we use Local Storage, but you could technically save this data into a database and reload at any time your previous session.
     </p>
+
+    <h2>Options:</h2>
+    <button data-test="clear-storage" onclick="clearLocalStorage()">Clear Local Storage & Page Reload</button>
   </div>
 </div>
 
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -85,7 +86,12 @@ <h2>About</h2>
     }
   }
 
-  $(function () {
+  function clearLocalStorage() {
+    localStorage.clear();
+    window.location.reload();
+  }
+
+  (function () {
     var dataView = new Slick.Data.DataView();
     var statePersistor = new Slick.State({
       cid: 'sample-grid',
@@ -144,17 +150,17 @@ <h2>About</h2>
 
     statePersistor.restore()
       .then(function (state) {
-        grid.setSortColumns(state.sortcols);
+        grid.setSortColumns(state.sortcols || []);
         var columns = grid.getColumns();
-        var sortCols = $.map(grid.getSortColumns(), function (col) {
+        var sortCols = (grid.getSortColumns() || []).map(function (col) {
           return {
             sortCol: columns[grid.getColumnIndex(col.columnId)],
             sortAsc: col.sortAsc
           };
         });
         sortDataView(sortCols);
       });
-  });
+  })();
 </script>
 </body>
 </html>

examples/example-row-detail-selection-and-move.html

@@ -116,9 +116,7 @@ <h3>Selected Titles:</h3>
       </ul>
     </div>
   </div>
-
-  <script src="../lib/firebugx.js"></script>
-
+
   <script src="../lib/jquery-3.1.0.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
@@ -225,7 +223,7 @@ <h3>Selected Titles:</h3>
       return (x == y ? 0 : (x > y ? 1 : -1));
     }
 
-    $(function () {
+    (function () {
       // prepare the data
       for (var i = 0; i < 1000; i++) {
         data[i] = new DataItem(i);
@@ -358,7 +356,7 @@ <h3>Selected Titles:</h3>
             return item && item.title || '';
           });
         }
-        $('#selectedTitles').text(selectedTitles.toString());
+        document.querySelector('#selectedTitles').textContent = selectedTitles.toString();
       });
 
       grid.onSort.subscribe(function (e, args) {
@@ -380,7 +378,7 @@ <h3>Selected Titles:</h3>
       dataView.onSelectedRowIdsChanged.subscribe(function (e, args) {
         console.log('onSelectedRowIdsChanged', args)
       });
-    });
+    })();
   </script>
 </body>