angular-slickgrid 9.0.0 → 9.0.2

package/test/cypress/e2e/example06.cy.ts

@@ -1,890 +0,0 @@
-import { addDay, format } from '@formkit/tempo';
-
-import { removeWhitespaces } from '../plugins/utilities';
-
-const currentYear = new Date().getFullYear();
-const presetLowestDay = `${currentYear}-01-01`;
-const presetHighestDay = `${currentYear}-02-15`;
-function removeSpaces(textS) {
-  return `${textS}`.replace(/\s+/g, '');
-}
-
-describe('Example 6 - GraphQL Grid', { retries: 0 }, () => {
-  it('should display Example title', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/example06`);
-    cy.get('h2').should('contain', 'Example 6: Grid connected to Backend Server with GraphQL');
-  });
-
-  it('should have a grid of size 900 by 200px', () => {
-    cy.get('#slickGridContainer-grid6').should('have.css', 'width', '900px');
-
-    cy.get('#slickGridContainer-grid6 > .slickgrid-container').should(($el) => expect(parseInt(`${$el.height()}`, 10)).to.eq(200));
-  });
-
-  it('should have English Text inside some of the Filters', () => {
-    cy.get('.search-filter.filter-gender .ms-choice > span').contains('Male');
-  });
-
-  it('should have GraphQL query with defined Grid Presets', () => {
-    cy.get('.search-filter.filter-name select').should('not.have.value');
-
-    cy.get('.search-filter.filter-name')
-      .find('input')
-      .invoke('val')
-      .then((text) => expect(text).to.eq('Joh*oe'));
-
-    cy.get('.search-filter.filter-gender .ms-choice > span').contains('Male');
-
-    cy.get('.search-filter.filter-company .ms-choice > span').contains('Company XYZ');
-
-    cy.get('.search-filter.filter-finish')
-      .find('input')
-      .invoke('val')
-      .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
-
-    cy.get('[data-test=alert-graphql-query]').should('exist');
-    cy.get('[data-test=alert-graphql-query]').should('contain', 'GraphQL Query');
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:20,offset:20,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){
-            totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should use fake smaller server wait delay for faster E2E tests', () => {
-    cy.get('[data-test="server-delay"]').clear().type('20');
-  });
-
-  it('should change Pagination to next page', () => {
-    cy.get('.icon-seek-next').click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:20,offset:40,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should change Pagination to last page', () => {
-    cy.get('.icon-seek-end').click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:20,offset:80,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should change Pagination to first page using the external button', () => {
-    cy.get('[data-test=goto-first-page').click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query { users (first:20,offset:0,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},
-            {field:"finish",operator:GE,value:"${presetLowestDay}"},
-            {field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`)
-      );
-    });
-  });
-
-  it('should change Pagination to last page using the external button', () => {
-    cy.get('[data-test=goto-last-page').click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:20,offset:80,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should change Pagination to first page with 30 items', () => {
-    cy.get('.icon-seek-first').click();
-
-    cy.get('#items-per-page-label').select('30');
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should clear a single filter, that is not empty, by the header menu and expect query change', () => {
-    cy.get('#grid6')
-      .find('.slick-header-left .slick-header-column:nth(0)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(6)')
-      .children('.slick-menu-content')
-      .should('contain', 'Remove Filter')
-      .click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"},
-            {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should try clearing same filter, which is now empty, by the header menu and expect same query without loading spinner', () => {
-    cy.get('[data-test="server-delay"]').clear().type('250');
-
-    cy.get('#grid6')
-      .find('.slick-header-left .slick-header-column:nth(0)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(6)')
-      .children('.slick-menu-content')
-      .should('contain', 'Remove Filter')
-      .click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"},
-            {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should clear the date range filter expect the query to have the 2 "finish" (GE, LE) filters removed', () => {
-    cy.get('#grid6')
-      .find('.slick-header-left .slick-header-column:nth(5)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list')
-      .should('be.visible')
-      .children('.slick-menu-item[data-command=clear-filter]')
-      .children('.slick-menu-content')
-      .should('contain', 'Remove Filter')
-      .click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-          filterBy:[{field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"}],
-          locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should Clear all Filters & Sorts', () => {
-    cy.contains('Clear all Filter & Sorts').click();
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(
-          `query{users(first:30,offset:0,locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`
-        )
-      );
-    });
-  });
-
-  it('should click on "Name" column to sort it Ascending', () => {
-    cy.get('.slick-header-columns').children('.slick-header-left .slick-header-column:nth(0)').click();
-
-    cy.get('.slick-header-columns')
-      .children('.slick-header-left .slick-header-column:nth(0)')
-      .find('.slick-sort-indicator.slick-sort-indicator-asc')
-      .should('be.visible');
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC}],
-          locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should perform filterQueryOverride when operator "%%" is selected', () => {
-    cy.get('.search-filter.filter-name select')
-      .find('option')
-      .last()
-      .then((element) => {
-        cy.get('.search-filter.filter-name select').select(element.val());
-      });
-
-    cy.get('.search-filter.filter-name').find('input').clear().type('Jo%yn%er');
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeSpaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeSpaces(`query { users (first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC}],
-          filterBy:[{field:"name",operator:Like,value:"Jo%yn%er"}],
-          locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`)
-      );
-    });
-  });
-
-  it('should click on Set Dynamic Filter and expect query and filters to be changed', () => {
-    cy.get('[data-test=set-dynamic-filter]').click();
-
-    cy.get('.search-filter.filter-name select').should('have.value', 'a*');
-
-    cy.get('.search-filter.filter-name')
-      .find('input')
-      .invoke('val')
-      .then((text) => expect(text).to.eq('Jane'));
-
-    cy.get('.search-filter.filter-gender .ms-choice > span').contains('Female');
-
-    cy.get('.search-filter.filter-company .ms-choice > span').contains('Acme');
-
-    cy.get('.search-filter.filter-billingAddressZip select').should('have.value', '>=');
-
-    cy.get('.search-filter.filter-billingAddressZip')
-      .find('input')
-      .invoke('val')
-      .then((text) => expect(text).to.eq('11'));
-
-    cy.get('.search-filter.filter-finish')
-      .find('input')
-      .invoke('val')
-      .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query{users(first:30,offset:0,
-          orderBy:[{field:"name",direction:ASC}],
-          filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:StartsWith,value:"Jane"},
-          {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"},
-          {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"en",userId:123)
-          {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should use a range filter when searching with ".."', () => {
-    cy.get('.slick-header-columns').children('.slick-header-left .slick-header-column:nth(0)').contains('Name').click();
-
-    cy.get('.search-filter.filter-name').find('input').clear().type('Anthony Joyner..Ayers Hood');
-
-    // wait for the query to finish
-    cy.get('[data-test=status]').should('contain', 'finished');
-
-    cy.get('[data-test=graphql-query-result]').should(($span) => {
-      const text = removeWhitespaces($span.text()); // remove all white spaces
-      expect(text).to.eq(
-        removeWhitespaces(`query { users (first:30,offset:0,
-          orderBy:[{field:"name",direction:DESC}],
-          filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:GE,value:"Anthony Joyner"},{field:"name",operator:LE,value:"Ayers Hood"},
-          {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"},
-          {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"en",userId:123)
-          {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-      );
-    });
-  });
-
-  it('should open Date picker and expect date range between 01-Jan to 15-Feb', () => {
-    cy.get('.search-filter.filter-finish.filled input').click({ force: true });
-
-    cy.get('.vc:visible');
-
-    cy.get('[data-vc="column"]:nth(0) [data-vc="month"]').should('have.text', 'January');
-
-    cy.get('[data-vc="column"]:nth(1) [data-vc="month"]').should('have.text', 'February');
-
-    cy.get('[data-vc="year"]:nth(0)').should('have.text', currentYear);
-
-    cy.get('.vc:visible [data-vc-date-selected] button').should('have.length', 46);
-
-    cy.get('.vc:visible [data-vc-date-selected]').first().should('have.text', '1');
-
-    cy.get('.vc:visible [data-vc-date-selected]').last().should('have.text', '15');
-  });
-
-  describe('Set Dynamic Sorting', () => {
-    it('should use slower server wait delay to test loading widget', () => {
-      cy.get('[data-test="server-delay"]').clear().type('250');
-    });
-
-    it('should click on "Clear all Filters & Sorting" then "Set Dynamic Sorting" buttons', () => {
-      cy.get('[data-test=clear-filters-sorting]').click();
-
-      cy.get('[data-test=status]').should('contain', 'processing');
-      cy.get('[data-test=status]').should('contain', 'finished');
-
-      cy.get('[data-test=set-dynamic-sorting]').click();
-
-      cy.get('[data-test=status]').should('contain', 'processing');
-      cy.get('[data-test=status]').should('contain', 'finished');
-    });
-
-    it('should use smaller server wait delay for faster E2E tests', () => {
-      cy.get('[data-test="server-delay"]').clear().type('20');
-    });
-
-    it('should expect the grid to be sorted by "Zip" descending then by "Company" ascending', () => {
-      cy.get('#grid6')
-        .get('.slick-header-left .slick-header-column:nth(2)')
-        .find('.slick-sort-indicator-asc')
-        .should('have.length', 1)
-        .siblings('.slick-sort-indicator-numbered')
-        .contains('2');
-
-      cy.get('#grid6')
-        .get('.slick-header-left .slick-header-column:nth(3)')
-        .find('.slick-sort-indicator-desc')
-        .should('have.length', 1)
-        .siblings('.slick-sort-indicator-numbered')
-        .contains('1');
-
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeWhitespaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeWhitespaces(`query{users(first:30,offset:0,
-            orderBy:[{field:"billing.address.zip",direction:DESC},{field:"company",direction:ASC}],locale:"en",userId:123){
-            totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-        );
-      });
-    });
-
-    it('should open Date picker and no longer expect date range selection in the picker', () => {
-      cy.get('.search-filter.filter-finish').should('not.have.class', 'filled').click();
-
-      cy.get('[data-vc="year"]:nth(0)').should('have.text', currentYear);
-
-      cy.get('.vc:visible').find('[data-vc-date-selected]').should('not.exist');
-    });
-  });
-
-  describe('Translate by Language', () => {
-    it('should Clear all Filters & Sorts', () => {
-      cy.contains('Clear all Filter & Sorts').click();
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-    });
-
-    it('should have English Column Titles in the grid after switching locale', () => {
-      const expectedColumnTitles = ['Name', 'Gender', 'Company', 'Billing Address Zip', 'Billing Address Street', 'Date'];
-
-      cy.get('#grid6')
-        .find('.slick-header-left .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(expectedColumnTitles[index]));
-    });
-
-    it('should have English Column Grouping Titles in the grid after switching locale', () => {
-      const expectedGroupTitles = ['Customer Information', 'Billing Information'];
-      cy.get('#grid6')
-        .find('.slick-preheader-panel .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(expectedGroupTitles[index]));
-    });
-
-    it('should hover over the "Title" column header menu and expect all commands be displayed in English', () => {
-      cy.get('#grid6')
-        .find('.slick-header-columns.slick-header-columns-left .slick-header-column')
-        .first()
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .invoke('show')
-        .click();
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .should('be.visible')
-        .children('.slick-menu-item:nth-of-type(3)')
-        .children('.slick-menu-content')
-        .should('contain', 'Sort Ascending');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(4)')
-        .children('.slick-menu-content')
-        .should('contain', 'Sort Descending');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(6)')
-        .children('.slick-menu-content')
-        .should('contain', 'Remove Filter');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(7)')
-        .children('.slick-menu-content')
-        .should('contain', 'Remove Sort');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(8)')
-        .children('.slick-menu-content')
-        .should('contain', 'Hide Column');
-    });
-
-    it('should open the Grid Menu and expect all commands be displayed in English', () => {
-      cy.get('#grid6').find('button.slick-grid-menu-button').trigger('click');
-
-      cy.get('.slick-grid-menu .slick-menu-title:nth(0)').contains('Commands');
-
-      cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span').contains('Clear all Filters');
-
-      cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span').contains('Clear all Sorting');
-
-      cy.get('.slick-grid-menu .slick-menu-title:nth(1)').contains('Columns');
-
-      cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)').contains('Customer Information - Name');
-
-      cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)').contains('Customer Information - Gender');
-
-      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close').click({ force: true });
-    });
-
-    it('should switch locale from English to French', () => {
-      cy.get('[data-test=selected-locale]').should('contain', 'en.json');
-
-      cy.get('[data-test=language-button]').click();
-
-      cy.get('[data-test=selected-locale]').should('contain', 'fr.json');
-    });
-
-    it('should have French Column Titles in the grid after switching locale', () => {
-      const expectedColumnTitles = ['Nom', 'Sexe', 'Compagnie', 'Code zip de facturation', 'Adresse de facturation', 'Date'];
-
-      cy.get('#grid6')
-        .find('.slick-header-left .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(expectedColumnTitles[index]));
-    });
-
-    it('should have French Column Grouping Titles in the grid after switching locale', () => {
-      const expectedGroupTitles = ['Information Client', 'Information de Facturation'];
-      cy.get('#grid6')
-        .find('.slick-preheader-panel .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(expectedGroupTitles[index]));
-    });
-
-    it('should display Pagination in French', () => {
-      cy.get('.slick-pagination-settings > span').contains('éléments par page');
-
-      cy.get('.page-info-from-to').contains('de');
-
-      cy.get('[data-test=item-from]').contains('1');
-
-      cy.get('[data-test=item-to]').contains('30');
-
-      cy.get('[data-test=total-items]').contains('100');
-
-      cy.get('.page-info-total-items').contains('éléments');
-    });
-
-    it('should hover over the "Title" column header menu and expect all commands be displayed in French', () => {
-      cy.get('#grid6')
-        .find('.slick-header-columns.slick-header-columns-left .slick-header-column')
-        .first()
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .invoke('show')
-        .click();
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .should('be.visible')
-        .children('.slick-menu-item:nth-of-type(3)')
-        .children('.slick-menu-content')
-        .should('contain', 'Trier par ordre croissant');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(4)')
-        .children('.slick-menu-content')
-        .should('contain', 'Trier par ordre décroissant');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(6)')
-        .children('.slick-menu-content')
-        .should('contain', 'Supprimer le filtre');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(7)')
-        .children('.slick-menu-content')
-        .should('contain', 'Supprimer le tri');
-
-      cy.get('.slick-header-menu .slick-menu-command-list')
-        .children('.slick-menu-item:nth-of-type(8)')
-        .children('.slick-menu-content')
-        .should('contain', 'Cacher la colonne');
-    });
-
-    it('should open the Grid Menu and expect all commands be displayed in French', () => {
-      cy.get('#grid6').find('button.slick-grid-menu-button').trigger('click');
-
-      cy.get('.slick-grid-menu .slick-menu-title:nth(0)').contains('Commandes');
-
-      cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span').contains('Supprimer tous les filtres');
-
-      cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span').contains('Supprimer tous les tris');
-
-      cy.get('.slick-grid-menu .slick-menu-title:nth(1)').contains('Colonnes');
-
-      cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)').contains('Information Client - Nom');
-
-      cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)').contains('Information Client - Sexe');
-
-      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close').click({ force: true });
-    });
-
-    it('should click on Set Dynamic Filter and expect query and filters to be changed', () => {
-      cy.get('[data-test=set-dynamic-filter]').click();
-
-      cy.get('.search-filter.filter-name select').should('have.value', 'a*');
-
-      cy.get('.search-filter.filter-name')
-        .find('input')
-        .invoke('val')
-        .then((text) => expect(text).to.eq('Jane'));
-
-      cy.get('.search-filter.filter-gender .ms-choice > span').contains('Féminin');
-
-      cy.get('.search-filter.filter-company .ms-choice > span').contains('Acme');
-
-      cy.get('.search-filter.filter-billingAddressZip select').should('have.value', '>=');
-
-      cy.get('.search-filter.filter-billingAddressZip')
-        .find('input')
-        .invoke('val')
-        .then((text) => expect(text).to.eq('11'));
-
-      cy.get('.search-filter.filter-finish')
-        .find('input')
-        .invoke('val')
-        .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`));
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeWhitespaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeWhitespaces(`query{users(first:30,offset:0,
-            filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:StartsWith,value:"Jane"},
-            {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"},
-            {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"fr",userId:123)
-            {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)
-        );
-      });
-    });
-
-    it('should have French Text inside some of the Filters', () => {
-      cy.get('div.ms-filter.filter-gender').trigger('click');
-
-      cy.get('.ms-drop')
-        .contains('Masculin') // use regexp to avoid finding first Task 3 which is in fact Task 399
-        .click();
-
-      cy.get('.search-filter.filter-gender .ms-choice > span').contains('Masculin');
-    });
-
-    it('should switch locale to English', () => {
-      cy.get('[data-test=language-button]').click();
-
-      cy.get('[data-test=selected-locale]').should('contain', 'en.json');
-    });
-  });
-
-  describe('Cursor Pagination', () => {
-    it('should re-initialize grid for cursor pagination', () => {
-      cy.get('[data-test="reset-presets"]').click(); // reset to same original presets
-      cy.get('[data-test=cursor]').click();
-      cy.wait(1);
-
-      // the page number input should be a label now
-      cy.get('[data-test=page-number-label]').should('exist').should('have.text', '1');
-    });
-
-    it('should change Pagination to the last page', () => {
-      // Go to first page (if not already there)
-      cy.get('[data-test=goto-first-page').click();
-
-      cy.get('.icon-seek-end').click();
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeWhitespaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeWhitespaces(`query{users(last:20,
-            orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-            filterBy:[
-              {field:"gender",operator:EQ,value:"male"},
-              {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-              {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-            ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)
-        );
-      });
-    });
-
-    it('should change Pagination to the first page', () => {
-      // Go to first page (if not already there)
-      cy.get('[data-test=goto-last-page').click();
-
-      cy.get('.icon-seek-first').click();
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeWhitespaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeWhitespaces(`query{users(first:20,
-            orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-            filterBy:[
-              {field:"gender",operator:EQ,value:"male"},
-              {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-              {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-            ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)
-        );
-      });
-    });
-
-    it('should change Pagination to next page and all the way to the last', () => {
-      // Go to first page (if not already there)
-      cy.get('[data-test=goto-first-page').click();
-      cy.get('[data-test=status]').should('contain', 'finished');
-
-      // on page 1, click 4 times to get to page 5 (the last page)
-      cy.wrap([0, 1, 2, 3]).each((el, i) => {
-        cy.wait(25); // Avoid clicking too fast and hitting race conditions because of the setTimeout in the example page (this timeout should be greater than in the page)
-        cy.get('.icon-seek-next')
-          .click()
-          .then(() => {
-            // wait for the query to finish
-            cy.get('[data-test=status]').should('contain', 'finished');
-            cy.get('[data-test=graphql-query-result]').should(($span) => {
-              // First page is A-B
-              // first click is to get page after A-B
-              // => get first 20 after 'B'
-              const afterCursor = String.fromCharCode('B'.charCodeAt(0) + i);
-
-              const text = removeWhitespaces($span.text()); // remove all white spaces
-              expect(text).to.eq(
-                removeWhitespaces(`query{users(first:20,after:"${afterCursor}",
-                orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-                filterBy:[
-                  {field:"gender",operator:EQ,value:"male"},
-                  {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-                  {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-                ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)
-              );
-            });
-          });
-      });
-    });
-
-    it('should change Pagination from the last page all the way to the first', () => {
-      // Go to last page (if not already there)
-      cy.get('[data-test=goto-last-page').click();
-
-      // on page 5 (last page), click 4 times to go to page 1
-      cy.wrap([0, 1, 2, 3]).each((el, i) => {
-        cy.wait(25); // Avoid clicking too fast and hitting race conditions because of the setTimeout in the example page (this timeout should be greater than in the page)
-        cy.get('.icon-seek-prev')
-          .click()
-          .then(() => {
-            // wait for the query to finish
-            cy.get('[data-test=status]').should('contain', 'finished');
-            cy.get('[data-test=graphql-query-result]').should(($span) => {
-              // Last page is E-F
-              // first click is to get page before E-F
-              // => get last 20 before 'E'
-              const beforeCursor = String.fromCharCode('E'.charCodeAt(0) - i);
-
-              const text = removeWhitespaces($span.text()); // remove all white spaces
-              expect(text).to.eq(
-                removeWhitespaces(`query{users(last:20,before:"${beforeCursor}",
-                orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
-                filterBy:[
-                  {field:"gender",operator:EQ,value:"male"},
-                  {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-                  {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
-                ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)
-              );
-            });
-          });
-      });
-    });
-  });
-
-  describe('Filter Shortcuts', () => {
-    const today = format(new Date(), 'YYYY-MM-DD');
-    const next20Day = format(addDay(new Date(), 20), 'YYYY-MM-DD');
-
-    it('should open header menu of "Finish" again then choose "Filter Shortcuts -> In the Future" and expect date range of the next 20 days', () => {
-      cy.get('[data-test=offset]').click();
-
-      cy.get('#grid6')
-        .find('.slick-header-column:nth-of-type(6)')
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .invoke('show')
-        .click();
-
-      cy.get('[data-command=filter-shortcuts-root-menu]').trigger('mouseover');
-
-      cy.get('.slick-header-menu.slick-menu-level-1').find('[data-command=next-20-days]').should('contain', 'Next 20 days').click();
-
-      cy.get('.search-filter.filter-finish input.date-picker').invoke('val').should('equal', `${today} — ${next20Day}`);
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeSpaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC},
-                {field:"company",direction:DESC}],filterBy:[{field:"gender",operator:EQ,value:"male"},
-                {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-                {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${today}"},
-                {field:"finish",operator:LE,value:"${next20Day}"}],locale:"en",userId:123) {
-                totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`)
-        );
-      });
-    });
-
-    it('should switch locale to French', () => {
-      cy.get('[data-test=language-button]').click();
-
-      cy.get('[data-test=selected-locale]').should('contain', 'fr.json');
-    });
-
-    it('should open header menu of "Finish" again now expect French translations "Filter Shortcuts -> In the Future" and expect date range of the next 20 days', () => {
-      cy.get('#grid6')
-        .find('.slick-header-column:nth-of-type(6)')
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .invoke('show')
-        .click();
-
-      cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Raccourcis de filtre').trigger('mouseover');
-
-      cy.get('.slick-header-menu.slick-menu-level-1').find('[data-command=next-20-days]').should('contain', '20 prochain jours').click();
-
-      cy.get('.search-filter.filter-finish input.date-picker').invoke('val').should('equal', `${today} — ${next20Day}`);
-
-      // wait for the query to finish
-      cy.get('[data-test=status]').should('contain', 'finished');
-
-      cy.get('[data-test=graphql-query-result]').should(($span) => {
-        const text = removeSpaces($span.text()); // remove all white spaces
-        expect(text).to.eq(
-          removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC},
-                  {field:"company",direction:DESC}],filterBy:[{field:"gender",operator:EQ,value:"male"},
-                  {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
-                  {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${today}"},
-                  {field:"finish",operator:LE,value:"${next20Day}"}],locale:"fr",userId:123) {
-                  totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`)
-        );
-      });
-    });
-  });
-});