feat(plugins): remove jQuery from Grid Resizer plugin (#758)

cypress/integration/example15-auto-resize.spec.js

@@ -0,0 +1,47 @@
+
+describe('Example 0070 - Grid State using Local Storage', () => {
+  const titles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven'];
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example15-auto-resize.html`);
+    cy.get('h2 + p').should('contain', 'Slick.Plugins.Resizer');
+  });
+
+  it('should have exact Column Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(titles[index]));
+  });
+
+  it('should have grid with size that is not 800 by 600px', () => {
+    cy.get('#myGrid')
+      .should($el => {
+        expect(parseInt(`${$el.width()}`, 10)).to.greaterThan(900);
+        expect(parseInt(`${$el.height()}`, 10)).not.to.eq(600);
+      });
+  });
+
+  it('should resize the grid to 800 by 600px when clicking on "Fixed Dimension" button', () => {
+    cy.get('[data-test="fixed-dimension"]')
+      .click();
+
+    cy.get('#myGrid')
+      .should($el => {
+        expect(parseInt(`${$el.width()}`, 10)).to.eq(800);
+        expect(parseInt(`${$el.height()}`, 10)).to.eq(600);
+      });
+  });
+
+  it('should auto-resize the grid when clicking on "auto-resize" button', () => {
+    cy.get('[data-test="auto-resize"]')
+      .click();
+
+    cy.get('#myGrid')
+      .should($el => {
+        expect(parseInt(`${$el.width()}`, 10)).to.greaterThan(900);
+        expect(parseInt(`${$el.height()}`, 10)).not.to.eq(600);
+      });
+  });
+
+});

examples/example11-autoheight.html

@@ -46,7 +46,6 @@ <h2>View Source:</h2>
     </ul>
 </div>
 
-<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>

examples/example12-fillbrowser.html

@@ -57,7 +57,6 @@ <h2>View Source:</h2>
     </ul>
 </div>
 
-<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>

examples/example15-auto-resize.html

@@ -13,8 +13,8 @@
   <h2>Demonstrates:</h2>
   <p>
     Basic Grid with the use of Slick.Plugins.Resizer
-    <button onclick="resizeToFixedDimensions()">Fixed Dimensions 800x600</button>
-    <button onclick="resumeAutoResize()">Resume Auto-Resize</button>
+    <button data-test="fixed-dimension" onclick="resizeToFixedDimensions()">Fixed Dimensions 800x600</button>
+    <button data-test="auto-resize" onclick="resumeAutoResize()">Resume Auto-Resize</button>
   </p>
 
   <h2>View Source:</h2>
@@ -34,7 +34,6 @@ <h2>My Grid Report</h2>
     <div id="myGrid"></div>
   </div>
 
-  <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>
@@ -74,7 +73,7 @@ <h2>My Grid Report</h2>
       // resizer.resizeGrid(100);
     }
 
-    $(function () {
+    (function () {
       var data = [];
       for (var i = 0; i < 500; i++) {
         data[i] = {
@@ -120,7 +119,7 @@ <h2>My Grid Report</h2>
         console.log('onGridAfterResize new dimensions', args.dimensions);
       });
       */
-    });
+    })();
   </script>
 </body>