feat(filter): add Cypress E2E tests for the Filter by Range grid

- refactored a few other Cypress tests to be a bit more consistent

src/app/examples/grid-graphql.component.ts

@@ -236,7 +236,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.graphqlQuery = this.angularGrid.backendService.buildQuery();
         resolve(mockedResult);
-      }, 500);
+      }, 250);
     });
   }
 

src/app/examples/grid-odata.component.ts

@@ -253,7 +253,7 @@ export class GridOdataComponent implements OnInit {
 
         setTimeout(() => {
           resolve({ items: updatedData, totalRecordCount: countTotalItems, query });
-        }, 500);
+        }, 250);
       });
     });
   }

src/app/examples/grid-range.component.html

@@ -22,7 +22,7 @@ <h2>{{title}}</h2>
   <b>Locale:</b> <span style="font-style: italic"
         data-test="selected-locale">{{selectedLanguage + '.json'}}</span>
 
-  <angular-slickgrid gridId="grid2"
+  <angular-slickgrid gridId="grid25"
                      [columnDefinitions]="columnDefinitions"
                      [gridOptions]="gridOptions"
                      [dataset]="dataset"

src/app/examples/grid-range.component.ts

@@ -17,7 +17,7 @@ import {
 } from '../modules/angular-slickgrid';
 import * as moment from 'moment-mini';
 
-const NB_ITEMS = 1000;
+const NB_ITEMS = 1200;
 
 function randomBetween(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1) + min);

src/app/modules/angular-slickgrid/filters/sliderRangeFilter.ts

@@ -164,11 +164,11 @@ export class SliderRangeFilter implements Filter {
     // create the DOM element & add an ID and filter class
     const $lowestSliderValueElm = $(`
     <div class="input-group-addon input-group-prepend slider-range-value">
-      <span class="input-group-text" id="lowest">${defaultStartValue}</span>
+      <span class="input-group-text lowest-range-${fieldId}">${defaultStartValue}</span>
     </div>`);
     const $highestSliderValueElm = $(`
     <div class="input-group-addon input-group-append slider-range-value">
-      <span class="input-group-text" id="highest">${defaultEndValue}</span>
+      <span class="input-group-text highest-range-${fieldId}">${defaultEndValue}</span>
     </div>`);
     this.$filterElm = $(`<div class="filter-${fieldId}"></div>`);
     this.$filterContainerElm = $(`<div class="input-group search-filter slider-range-container slider-values form-control">`);
@@ -236,8 +236,9 @@ export class SliderRangeFilter implements Filter {
    * @param highestValue number
    */
   private renderSliderValues(lowestValue: number | string, highestValue: number | string) {
-    const lowerElm = document.getElementById('lowest');
-    const highestElm = document.getElementById('highest');
+    const fieldId = this.columnDef && this.columnDef.id;
+    const lowerElm = document.querySelector(`.lowest-range-${fieldId}`);
+    const highestElm = document.querySelector(`.highest-range-${fieldId}`);
     if (lowerElm && lowerElm.innerHTML) {
       lowerElm.innerHTML = lowestValue.toString();
     }

test/cypress/integration/example1.spec.js

@@ -1,7 +1,7 @@
 describe('Example 1 - Basic Grids', () => {
   const titles = ['Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
-  it('should display Example 1 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}`);
     cy.get('h2').should('contain', 'Example 1: Basic Grid');
   });

test/cypress/integration/example10.spec.js

@@ -1,7 +1,7 @@
 describe('Example 10 - Multiple Grids with Row Selection', () => {
   const titles = ['', 'Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
-  it('should display Example 10 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/selection`);
     cy.get('h2').should('contain', 'Example 10: Multiple Grids with Row Selection');
   });

test/cypress/integration/example16.spec.js

@@ -10,7 +10,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => {
     cy.saveLocalStorage();
   });
 
-  it('should display Example 16 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/gridstate`);
     cy.get('h2').should('contain', 'Example 16: Grid State & Presets using Local Storage');
 

test/cypress/integration/example25.spec.js

@@ -0,0 +1,149 @@
+/// <reference types="cypress" />
+import moment from 'moment-mini';
+
+const presetMinComplete = 5;
+const presetMaxComplete = 88;
+const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
+const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+
+describe('Example 25 - Range Filters', () => {
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/range`);
+    cy.get('h2').should('contain', 'Example 25: Filtering from Range of Search Values');
+  });
+
+  it('should have "% Complete" fields within the range (inclusive) of the filters presets', () => {
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(2)')
+          .each(($cell) => {
+            const value = parseInt($cell.text().trim(), 10);
+            if (!isNaN(value)) {
+              expect(value >= presetMinComplete).to.eq(true);
+              expect(value <= presetMaxComplete).to.eq(true);
+            }
+          });
+      });
+  });
+
+  it('should have Finish Dates within the range (inclusive) of the filters presets', () => {
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(4)')
+          .each(($cell) => {
+            const isDateBetween = moment($cell.text()).isBetween(presetLowestDay, presetHighestDay, null, '[]'); // [] is inclusive, () is exclusive
+            expect(isDateBetween).to.eq(true);
+          });
+      });
+  });
+
+  it('should have "Duration" fields within the range (exclusive by default) of the filters presets', () => {
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(5)')
+          .each(($cell) => {
+            const value = parseInt($cell.text().trim(), 10);
+            if (!isNaN(value)) {
+              console.log('duration', value, presetMinComplete, presetMaxComplete, value > presetMinComplete, value < presetMaxComplete)
+              expect(value > presetMinComplete).to.eq(true);
+              expect(value < presetMaxComplete).to.eq(true);
+            }
+          });
+      });
+  });
+
+  it('should change "% Complete" filter range by using the slider left handle (min value) to make it a higher min value and expect all rows to be within new range', () => {
+    let newLowest = presetMinComplete;
+    let newHighest = presetMaxComplete;
+
+    cy.get('.ui-slider-range')
+      .click('bottom', { force: true });
+
+    cy.get('.lowest-range-complete')
+      .then(($lowest) => {
+        newLowest = parseInt($lowest.text(), 10);
+      });
+
+    cy.get('.highest-range-complete')
+      .then(($highest) => {
+        newHighest = parseInt($highest.text(), 10);
+      });
+
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(2)')
+          .each(($cell) => {
+            const value = parseInt($cell.text().trim(), 10);
+            if (!isNaN(value)) {
+              expect(value >= newLowest).to.eq(true);
+              expect(value <= newHighest).to.eq(true);
+            }
+          });
+      });
+  });
+
+  it('should change the "Duration" input filter and expect all rows to be within new range', () => {
+    const newMin = 10;
+    const newMax = 40;
+
+    cy.contains('Clear Filters')
+      .click({ force: true });
+
+    cy.get('.search-filter.filter-duration')
+      .focus()
+      .type(`${newMin}..${newMax}`);
+
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(5)')
+          .each(($cell) => {
+            const value = parseInt($cell.text().trim(), 10);
+            if (!isNaN(value)) {
+              expect(value > newMin).to.eq(true);
+              expect(value < newMax).to.eq(true);
+            }
+          });
+      });
+  });
+
+
+  xit('should change the "Finish" date in the picker and expect all rows to be within new dates range', () => {
+    cy.contains('Clear Filters')
+      .click({ force: true });
+
+    cy.get('.flatpickr.search-filter.filter-finish:nth(1)')
+      .click('bottom', { force: true });
+
+    cy.get('.flatpickr-days')
+      .find('[aria-label]')
+      .contains(moment().format('MMMM'));
+
+    cy.get('.flatpickr-day:nth(7)')
+      .click({ force: true });
+
+    cy.get('.flatpickr-day')
+      .should('contain', '28')
+      .click({ force: true });
+
+    cy.get('#grid25')
+      .find('.slick-row')
+      .each(($row) => {
+        cy.wrap($row)
+          .children('.slick-cell:nth(4)')
+          .each(($cell) => {
+            const isDateBetween = moment($cell.text()).isBetween(presetLowestDay, presetHighestDay, null, '[]'); // [] is inclusive, () is exclusive
+            expect(isDateBetween).to.eq(true);
+          });
+      });
+  });
+});

test/cypress/integration/example5.spec.js

@@ -1,5 +1,5 @@
 describe('Example 5 - OData Grid', () => {
-  it('should display Example 5 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/odata`);
     cy.get('h2').should('contain', 'Example 5: Grid connected to Backend Server with OData');
   });

test/cypress/integration/example6.spec.js

@@ -1,13 +1,14 @@
+import moment from 'moment-mini';
+
 function removeSpaces(textS) {
   return `${textS}`.replace(/\s+/g, '');
 }
-import moment from 'moment-mini';
-// import moment from 'moment';
+
 const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
 const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
 
 describe('Example 6 - GraphQL Grid', () => {
-  it('should display Example 6 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/gridgraphql`);
     cy.get('h2').should('contain', 'Example 6: Grid connected to Backend Server with GraphQL');
   });

test/cypress/integration/example9.spec.js

@@ -2,7 +2,7 @@ describe('Example 9 - Grid Menu', () => {
   const fullEnglishTitles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed'];
   const fullFrenchTitles = ['Titre', 'Durée', '% Achevée', 'Début', 'Fin', 'Terminé'];
 
-  it('should display Example 9 title', () => {
+  it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/gridmenu`);
     cy.get('h2').should('contain', 'Example 9: Grid Menu Control');
   });

test/cypress/integration/home.spec.js

@@ -1,9 +1,12 @@
 describe('Home Page', () => {
   it('should display Home Page', () => {
     cy.visit('http://localhost:4300/home');
+
     cy.get('h2').should(($h2) => {
       expect($h2, 'text content').to.have.text('Angular-Slickgrid - Demo Site');
     });
-  });
 
+    cy.get('.subtitle')
+      .contains('This site is to demo multiple usage of Angular-Slickgrid');
+  });
 });