angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,455 +0,0 @@
-describe('Example 45 - Row Detail with inner Grid', () => {
-  const rootGridTitles = ['', 'ID', 'Company Name', 'Street Address', 'City', 'Zip Code', 'Country'];
-  const innerGridTitles = ['Order ID', 'Ship City', 'Freight', 'Ship Name'];
-  const GRID_ROW_HEIGHT = 33;
-  let ROW_DETAIL_PANEL_COUNT = 8;
-
-  it('should display Example title', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/example45`);
-    cy.get('h2').should('contain', 'Example 45: Row Detail with inner Grid');
-  });
-
-  it('should have exact column titles on 1st grid', () => {
-    cy.get('#grid45')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(rootGridTitles[index]));
-  });
-
-  for (const isUsingAutoHeight of [true, false]) {
-    describe(`using autoHeight: "${isUsingAutoHeight}"`, () => {
-      it(`should toggle autoHeight checkbox to ${isUsingAutoHeight}`, () => {
-        if (isUsingAutoHeight) {
-          cy.get('[data-test="use-auto-height"]').check();
-        } else {
-          cy.get('[data-test="use-auto-height"]').uncheck();
-        }
-      });
-
-      it('should set row detail height to 8 rows and change server delay to 40ms for faster testing', () => {
-        cy.get('[data-test="detail-view-row-count"]').clear().type('8');
-        cy.get('[data-test="set-count-btn"]').click();
-        cy.get('[data-test="server-delay"]').type('{backspace}');
-      });
-
-      it('should open the Row Detail of the 2nd row and expect to find an inner grid with all inner column titles', () => {
-        cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', '- Order Details (id: 1)');
-
-        cy.get('#innergrid-1')
-          .find('.slick-header-columns')
-          .children()
-          .each(($child, index) => expect($child.text()).to.eq(innerGridTitles[index]));
-      });
-
-      it('should sort 2nd Row Detail inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => {
-        cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click();
-
-        cy.get('#innergrid-1 .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')
-          .click();
-
-        cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*');
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should open 3rd row and still expect 2nd row to be sorted and filtered', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', '');
-        cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', '');
-        cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist');
-
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should go at the bottom end of the grid, then back to top and expect all Row Details to be opened but reset to default', () => {
-        cy.get('#grid45').type('{ctrl}{end}', { release: false });
-        cy.get('#grid45').type('{ctrl}{home}', { release: false });
-        cy.wait(50);
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', '');
-        cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', '');
-        cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should force redraw of all Row Details and expect same row details to be opened and opened', () => {
-        cy.get('[data-test="redraw-all-btn"]').click();
-        cy.wait(10);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', '');
-        cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', '');
-        cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should close all rows', () => {
-        cy.get('[data-test="collapse-all-btn"]').click();
-      });
-
-      it('should open 2nd row and sort inner grid "Freight" column in ascending order and filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`);
-
-        cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click();
-
-        cy.get('#innergrid-1 .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')
-          .click();
-
-        cy.get('#innergrid-1 .search-filter.filter-orderId').clear().type('>102');
-        cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*');
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should open 1st row and expect 2nd row no longer be sorted neither filtered because it has to re-rendered', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('#innergrid-1 .search-filter.filter-shipCity').should('have.value', '');
-        cy.get('#innergrid-1 .slick-sort-indicator-asc').should('not.exist');
-
-        // default rows
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should close all rows', () => {
-        cy.get('[data-test="collapse-all-btn"]').click();
-      });
-
-      it('should re-open 2nd row and sort inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`);
-
-        cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click();
-
-        cy.get('#innergrid-1 .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')
-          .click();
-
-        cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*');
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should scroll down when the row detail is just barely visible and then scroll back up and still expect same filters/sorting', () => {
-        cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350);
-        cy.wait(50);
-        cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0);
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should scroll down by 2 pages down and then scroll back up and no longer the same filters/sorting', () => {
-        cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 800);
-        cy.wait(50);
-        cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0);
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('not.contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.contain', 'Madrid');
-      });
-
-      it('should close all rows and enable inner Grid State/Presets', () => {
-        cy.get('[data-test="collapse-all-btn"]').click();
-        cy.get('[data-test="use-inner-grid-state-presets"]').click();
-      });
-
-      it('should open again 2nd row and sort inner grid "Freight" column in ascending order & filter "Ship City" with "m" and expect 2 sorted rows', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`);
-
-        cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click();
-
-        cy.get('#innergrid-1 .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')
-          .click();
-
-        cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*');
-
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should open again 3rd row and sort inner grid "Freight" column in ascending order & filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`);
-
-        cy.get('#innergrid-2 .slick-header-column:nth(2)').children('.slick-header-menu-button').click();
-
-        cy.get('#innergrid-2 .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')
-          .click();
-
-        cy.get('#innergrid-2 .search-filter.filter-orderId').clear().type('>102');
-        cy.get('#innergrid-2 .search-filter.filter-shipCity').clear().type('m*');
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should close and reopen the 3rd row and expect same filtered and sorted rows', () => {
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`).as('3rdRow');
-        cy.get('@3rdRow').click();
-        cy.get('@3rdRow').click();
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should go to the bottom end of the grid and open row 987', () => {
-        cy.get('#grid45').type('{ctrl}{end}', { release: false });
-
-        cy.get('.slick-row[data-row=1001] .detail-view-toggle').first().click();
-
-        cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch');
-        cy.get('@orderIdSearch').clear();
-        cy.get('@orderIdSearch').type('>987');
-        cy.get('.slick-empty-data-warning').should('be.visible');
-      });
-
-      it('should go again back to top of the grid and now expect that all Row Details are still opened AND their filters/sorting are kept and reapplied', () => {
-        cy.get('#grid45').type('{ctrl}{home}', { release: false });
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should go back to the bottom of the grid and still expect row detail 987 to be opened with same filter and no rows inside it', () => {
-        cy.get('#grid45').type('{ctrl}{end}', { release: false });
-
-        cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch');
-        cy.get('@orderIdSearch').clear();
-        cy.get('@orderIdSearch').type('>987');
-        cy.get('.slick-empty-data-warning').should('be.visible');
-      });
-
-      it('should go back to the top of the grid once more and close 3nd row and still expect same rows in both row details', () => {
-        cy.get('#grid45').type('{ctrl}{home}', { release: false });
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`)
-          .click()
-          .wait(40);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should change Row Detail panel height to 15, open 2nd and 3rd then execute PageDown twice', () => {
-        ROW_DETAIL_PANEL_COUNT = 15;
-        cy.get('[data-test="collapse-all-btn"]').click();
-        cy.get('[data-test="detail-view-row-count"]').as('rowCount');
-        cy.get('@rowCount').clear();
-        cy.get('@rowCount').type('15');
-        cy.get('[data-test="set-count-btn"]').click();
-
-        cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // open 3rd row detail
-        cy.get(`.slick-row[data-row="14"] .slick-cell:nth(0)`).click().wait(40);
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        cy.get('#grid45').type('{pageDown}{pageDown}', { release: false });
-        cy.wait(50);
-        cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350);
-
-        // expect same grid details for both grids
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should change Row Detail panel height back to 8, open 2nd and 3rd and filter Company ID with "1..2" and expect only these 2 rows to be rendered in the grid', () => {
-        ROW_DETAIL_PANEL_COUNT = 8;
-        cy.get('[data-test="collapse-all-btn"]').click();
-        cy.get('[data-test="detail-view-row-count"]').as('rowCount');
-        cy.get('@rowCount').clear();
-        cy.get('@rowCount').type('8');
-        cy.get('[data-test="set-count-btn"]').click();
-
-        cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40);
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // open 3rd row detail
-        cy.get(`.slick-row[data-row="9"] .slick-cell:nth(0)`).click().wait(40);
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        cy.get('.search-filter.filter-companyId').type('1..2');
-        cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should('have.length', ROW_DETAIL_PANEL_COUNT * 2);
-        cy.get('.search-filter.filter-companyId').type('{backspace}2');
-        cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should('have.length', ROW_DETAIL_PANEL_COUNT * 2);
-      });
-
-      it('should clear Company ID filter and have all rows back in grid and rendered', () => {
-        cy.get('#grid45').find('button.slick-grid-menu-button').first().click({ force: true });
-
-        cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click();
-
-        cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should(
-          'have.length.greaterThan',
-          ROW_DETAIL_PANEL_COUNT * 2
-        );
-
-        // 2nd row detail
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-
-        // 3rd row detail
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
-        cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
-      });
-
-      it('should reload page on first describe run', () => {
-        if (isUsingAutoHeight) {
-          cy.reload();
-        }
-      });
-    });
-  }
-});

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

@@ -1,7 +0,0 @@
-describe('Home Page', () => {
-  it('should display Home Page', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/home`);
-
-    cy.get('h2').should('have.text', 'Angular-Slickgrid - Demo Site');
-  });
-});

package/test/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

package/test/cypress/plugins/index.ts

@@ -1,17 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-export default (_on: any, _config: any) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};

package/test/cypress/plugins/utilities.ts

@@ -1,28 +0,0 @@
-export function changeTimezone(date: Date, tz: string) {
-  // suppose the date is 12:00 UTC
-  const invdate = new Date(
-    date.toLocaleString('en-US', {
-      timeZone: tz,
-    })
-  );
-
-  // then invdate will be 07:00 in Toronto
-  // and the diff is 5 hours
-  const diff = date.getTime() - invdate.getTime();
-
-  // so 12:00 in Toronto is 17:00 UTC
-  return new Date(date.getTime() + diff);
-}
-
-export function removeExtraSpaces(text: string) {
-  return `${text}`.replace(/\s+/g, ' ').trim();
-}
-
-export function removeWhitespaces(text: string) {
-  return `${text}`.replace(/\s+/g, '');
-}
-
-export function zeroPadding(input: string | number) {
-  const number = parseInt(input as string, 10);
-  return number < 10 ? `0${number}` : number;
-}

package/test/cypress/support/commands.ts

@@ -1,88 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-import '@4tw/cypress-drag-drop';
-import 'cypress-real-events';
-import { convertPosition } from './common';
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
-      getCell(
-        row: number,
-        col: number,
-        viewport?: string,
-        options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
-      getNthCell(
-        row: number,
-        nthCol: number,
-        viewport?: string,
-        options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
-      saveLocalStorage: () => void;
-      restoreLocalStorage: () => void;
-    }
-  }
-}
-
-const LOCAL_STORAGE_MEMORY: any = {};
-
-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]);
-  });
-});
-
-// convert position like 'topLeft' to the object { x: 'left|right', y: 'top|bottom' }
-Cypress.Commands.add('convertPosition', (viewport = 'topLeft') => cy.wrap(convertPosition(viewport)));
-
-Cypress.Commands.add('getCell', (row, col, viewport = 'topLeft', { parentSelector = '', rowHeight = 35 } = {}) => {
-  const position = convertPosition(viewport);
-  const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : '';
-  const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : '';
-
-  return cy.get(
-    `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell.l${col}.r${col}`
-  );
-});
-
-Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentSelector = '', rowHeight = 35 } = {}) => {
-  const position = convertPosition(viewport);
-  const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : '';
-  const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : '';
-
-  return cy.get(
-    `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})`
-  );
-});

package/test/cypress/support/common.ts

@@ -1,47 +0,0 @@
-/**
- * @typedef {('left'|'right')} xAllowed
- * @typedef {('top'|'bottom')} yAllowed
- *
- * Define allowed input position
- * @typedef {(xAllowed|yAllowed|'topLeft'|'topRight'|'bottomLeft'|'bottomRight')} AllowedInputPosition
- *
- * Define position object
- * @typedef {Object} Position
- * @property {xAllowed} x - horizontal
- * @property {yAllowed} y - vertical
- */
-
-/**
- * Enum for position values
- * @constant
- * @enum {(xAllowed|yAllowed)}
- */
-const POSITION = Object.freeze({
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  RIGHT: 'right',
-});
-
-/**
- * Convert position string to object
- *
- * @param {AllowedInputPosition} position
- * @returns {Position}
- */
-export function convertPosition(position: string) {
-  let x = '';
-  let y = '';
-  const _position = position.toLowerCase();
-  if (_position.includes(POSITION.LEFT)) {
-    x = POSITION.LEFT;
-  } else if (_position.includes(POSITION.RIGHT)) {
-    x = POSITION.RIGHT;
-  }
-  if (_position.includes(POSITION.TOP)) {
-    y = POSITION.TOP;
-  } else if (_position.includes(POSITION.BOTTOM)) {
-    y = POSITION.BOTTOM;
-  }
-  return { x, y };
-}