diff --git a/package.json b/package.json index 4c11aad7..34133b1f 100644 --- a/package.json +++ b/package.json @@ -52,13 +52,13 @@ }, "dependencies": { "@ngx-translate/core": "^15.0.0", - "@slickgrid-universal/common": "~5.13.0", - "@slickgrid-universal/custom-footer-component": "~5.13.0", - "@slickgrid-universal/empty-warning-component": "~5.13.0", + "@slickgrid-universal/common": "~5.13.1", + "@slickgrid-universal/custom-footer-component": "~5.13.1", + "@slickgrid-universal/empty-warning-component": "~5.13.1", "@slickgrid-universal/event-pub-sub": "~5.13.0", - "@slickgrid-universal/pagination-component": "~5.13.0", - "@slickgrid-universal/row-detail-view-plugin": "~5.13.0", - "@slickgrid-universal/rxjs-observable": "~5.13.0", + "@slickgrid-universal/pagination-component": "~5.13.1", + "@slickgrid-universal/row-detail-view-plugin": "~5.13.1", + "@slickgrid-universal/rxjs-observable": "~5.13.1", "dequal": "^2.0.3", "rxjs": "^7.8.2" }, @@ -88,7 +88,7 @@ "@angular/platform-browser": "^18.2.13", "@angular/platform-browser-dynamic": "^18.2.13", "@angular/router": "^18.2.13", - "@faker-js/faker": "^9.5.1", + "@faker-js/faker": "^9.6.0", "@fnando/sparkline": "^0.3.10", "@formkit/tempo": "^0.1.2", "@ng-select/ng-select": "^13.9.1", @@ -98,12 +98,12 @@ "@nx/vite": "^20.6.1", "@popperjs/core": "^2.11.8", "@release-it/conventional-changelog": "^10.0.0", - "@slickgrid-universal/composite-editor-component": "~5.13.0", - "@slickgrid-universal/custom-tooltip-plugin": "~5.13.0", - "@slickgrid-universal/excel-export": "~5.13.0", - "@slickgrid-universal/graphql": "~5.13.0", - "@slickgrid-universal/odata": "~5.13.0", - "@slickgrid-universal/text-export": "~5.13.0", + "@slickgrid-universal/composite-editor-component": "~5.13.1", + "@slickgrid-universal/custom-tooltip-plugin": "~5.13.1", + "@slickgrid-universal/excel-export": "~5.13.1", + "@slickgrid-universal/graphql": "~5.13.1", + "@slickgrid-universal/odata": "~5.13.1", + "@slickgrid-universal/text-export": "~5.13.1", "@types/fnando__sparkline": "^0.3.7", "@types/node": "^22.13.10", "@types/sortablejs": "^1.15.8", diff --git a/src/app/examples/grid45-detail.component.html b/src/app/examples/grid45-detail.component.html index ea511cff..83691b39 100644 --- a/src/app/examples/grid45-detail.component.html +++ b/src/app/examples/grid45-detail.component.html @@ -2,6 +2,7 @@

{{ model.companyName }} - Order Details (id: {{ model.id }})

Use Inner Grid State/Presets + +
diff --git a/src/app/examples/grid45.component.ts b/src/app/examples/grid45.component.ts index 2c3123d8..4b584811 100644 --- a/src/app/examples/grid45.component.ts +++ b/src/app/examples/grid45.component.ts @@ -19,9 +19,10 @@ export class Grid45Component implements OnDestroy, OnInit { gridOptions!: GridOption; angularGrid!: AngularGridInstance; dataset: Distributor[] = []; - detailViewRowCount = 8; + detailViewRowCount = 9; hideSubTitle = false; isUsingInnerGridStatePresets = false; + isUsingAutoHeight = false; serverWaitDelay = FAKE_SERVER_DELAY; get rowDetailInstance(): SlickRowDetailView { @@ -100,6 +101,7 @@ export class Grid45Component implements OnDestroy, OnInit { this.gridOptions = { autoResize: { container: '#demo-container', + autoHeight: this.isUsingAutoHeight, // works with/without autoHeight bottomPadding: 20, }, autoHeight: false, @@ -159,6 +161,15 @@ export class Grid45Component implements OnDestroy, OnInit { return true; } + changeUsingResizerAutoHeight() { + this.isUsingAutoHeight = !this.isUsingAutoHeight; + this.angularGrid.slickGrid?.setOptions({ + autoResize: { ...this.gridOptions.autoResize, autoHeight: this.isUsingAutoHeight }, + }); + this.angularGrid.resizerService.resizeGrid(); + return true; + } + closeAllRowDetail() { this.rowDetailInstance?.collapseAll(); } diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts index 8b09532a..e5613116 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts @@ -176,24 +176,24 @@ describe('SlickRowDetailView', () => { vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); plugin.init(gridStub); - const output = await (gridOptionsMock.rowDetailView as RowDetailView).preTemplate!(); + const output = (await (gridOptionsMock.rowDetailView as RowDetailView).preTemplate!()) as HTMLElement; - expect(output).toEqual(`
`); + expect(output.outerHTML).toEqual(`
`); }); it('should provide a sanitized "postTemplate" when only a "viewComponent" is provided (meaning no "postTemplate" is originally provided)', async () => { (gridOptionsMock.rowDetailView as RowDetailView).viewComponent = TestComponent; vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); - const output = await gridOptionsMock.rowDetailView!.postTemplate!({ id: 'field1', field: 'field1' }); - expect(output).toEqual(`
`); + const output = (await gridOptionsMock.rowDetailView!.postTemplate!({ id: 'field1', field: 'field1' })) as HTMLElement; + expect(output.outerHTML).toEqual(`
`); }); it('should define "datasetIdPropertyName" with different "id" and provide a sanitized "postTemplate" when only a "viewComponent" is provided (meaning no "postTemplate" is originally provided)', async () => { (gridOptionsMock.rowDetailView as RowDetailView).viewComponent = TestComponent; gridOptionsMock.datasetIdPropertyName = 'rowId'; - const output = await gridOptionsMock.rowDetailView!.postTemplate!({ rowId: 'field1', field: 'field1' }); - expect(output).toEqual(`
`); + const output = (await gridOptionsMock.rowDetailView!.postTemplate!({ rowId: 'field1', field: 'field1' })) as HTMLElement; + expect(output.outerHTML).toEqual(`
`); }); describe('registered addon', () => { diff --git a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts index 2212e3e2..084bf961 100644 --- a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts +++ b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts @@ -9,6 +9,7 @@ import type { import { addToArrayWhenNotExists, castObservableToPromise, + createDomElement, SlickEventData, SlickRowSelectionModel, unsubscribeAll, @@ -119,15 +120,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods) if (!this.gridOptions.rowDetailView.preTemplate) { this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent; - this.addonOptions.preTemplate = () => - this._grid.sanitizeHtmlString(`
`) as string; + this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` }); } if (!this.gridOptions.rowDetailView.postTemplate) { this._viewComponent = this.gridOptions?.rowDetailView?.viewComponent; this.addonOptions.postTemplate = (itemDetail: any) => - this._grid.sanitizeHtmlString( - `
` - ) as string; + createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` }); } // this also requires the Row Selection Model to be registered as well @@ -247,21 +245,19 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** Redraw the necessary View Component */ redrawViewComponent(createdView: CreatedView) { - const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`); - if (containerElements?.length >= 0) { + const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`); + if (containerElement) { this.renderViewModel(createdView.dataContext); } } /** Render (or re-render) the View Component (Row Detail) */ renderPreloadView() { - const containerElements = this.gridContainerElement.getElementsByClassName( - `${PRELOAD_CONTAINER_PREFIX}` - ) as HTMLCollectionOf; - if (this._preloadComponent && containerElements?.length >= 0) { + const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`); + if (this._preloadComponent && containerElement) { const preloadComp = this.angularUtilService.createAngularComponentAppendToDom( this._preloadComponent, - containerElements[containerElements.length - 1], + containerElement, {}, { sanitizer: this._grid.sanitizeHtmlString } ); @@ -271,15 +267,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** Render (or re-render) the View Component (Row Detail) */ renderViewModel(item: any): CreatedView | undefined { - const containerElements = this.gridContainerElement.getElementsByClassName( - `${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}` - ) as HTMLCollectionOf; - - if (this._viewComponent && containerElements?.length > 0) { + const containerElement = this.gridContainerElement.querySelector( + `.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}` + ); + if (this._viewComponent && containerElement) { // render row detail const componentOutput = this.angularUtilService.createAngularComponentAppendToDom( this._viewComponent, - containerElements[containerElements.length - 1], + containerElement, { model: item, addon: this, @@ -291,6 +286,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { sanitizer: this._grid.sanitizeHtmlString, } ); + if (componentOutput?.componentRef) { const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]); if (viewObj) { @@ -309,9 +305,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { protected disposeViewByItem(item: any, removeFromArray = false): void { const foundViewIndex = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]); - if (foundViewIndex >= 0 && foundViewIndex in this._views) { - const expandedView = this._views[foundViewIndex]; - this.disposeView(expandedView); + if (foundViewIndex >= 0) { + this.disposeView(this._views[foundViewIndex]); if (removeFromArray) { this._views.splice(foundViewIndex, 1); } @@ -319,12 +314,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { } protected disposeView(expandedView: CreatedView): CreatedView | void { + expandedView.rendered = false; const compRef = expandedView?.componentRef; if (compRef) { this.appRef.detachView(compRef.hostView); if (typeof compRef?.destroy === 'function') { compRef.destroy(); - expandedView.rendered = false; } return expandedView; } @@ -358,8 +353,10 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { } if (!awaitedItemDetail || !(this.datasetIdPropName in awaitedItemDetail)) { - throw new Error(`[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback - (a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property`); + throw new Error( + '[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback ' + + `returns an item object that has an "${this.datasetIdPropName}" property` + ); } // notify the plugin with the new item details @@ -382,8 +379,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { dataContext: args.item, rendered: false, }; - const idPropName = this.gridOptions.datasetIdPropertyName || 'id'; - addToArrayWhenNotExists(this._views, viewInfo, idPropName); + addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName); } else { // collapsing, so dispose of the View/Component this.disposeViewByItem(args.item, true); @@ -392,7 +388,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** When Row comes back to Viewport Range, we need to redraw the View */ protected handleOnRowBackToViewportRange(_e: SlickEventData, args: OnRowBackToViewportRangeArgs) { - const viewModel = Array.from(this._views).find((x) => x.id === args.rowId); + const viewModel = this._views.find((x) => x.id === args.rowId); if (viewModel && !viewModel.rendered) { this.redrawViewComponent(viewModel); } diff --git a/test/cypress/e2e/example45.cy.ts b/test/cypress/e2e/example45.cy.ts index 36992d23..330b7707 100644 --- a/test/cypress/e2e/example45.cy.ts +++ b/test/cypress/e2e/example45.cy.ts @@ -16,435 +16,448 @@ describe('Example 45 - Row Detail with inner Grid', () => { .each(($child, index) => expect($child.text()).to.eq(rootGridTitles[index])); }); - it('should 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('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); - cy.get('#innergrid-1') - .find('.slick-header-column:nth(2)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .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)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .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)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .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)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .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)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .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 go to the bottom end of the grid and open row 987', () => { - cy.get('#grid45').type('{ctrl}{end}', { release: false }); - cy.wait(50); - cy.get('.slick-row[data-row=1001] .detail-view-toggle').first().click(); - - cy.get('#innergrid-987 .search-filter.filter-orderId').clear().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').clear().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"]').clear().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="${ROW_DETAIL_PANEL_COUNT - 1}"] .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"]').clear().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'); - }); + 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(); + } + }); + }); + } }); diff --git a/yarn.lock b/yarn.lock index 33bddbaa..366a0dc1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1977,17 +1977,17 @@ "@eslint/core" "^0.12.0" levn "^0.4.1" -"@excel-builder-vanilla/types@^3.0.14": - version "3.0.14" - resolved "https://registry.yarnpkg.com/@excel-builder-vanilla/types/-/types-3.0.14.tgz#162fd36f21c100c4046903c0e11d335ed82c0de9" - integrity sha512-9gq9hPPdVGzz/3fESgVW6WlxienIxpr83QnGS364cRPmzxg3cZQewZvKns2DFYfLLMxBLH3L6PperVqInR+0ag== +"@excel-builder-vanilla/types@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@excel-builder-vanilla/types/-/types-3.1.0.tgz#be205a970454f1f41b55fbf2cae75375d56b25bf" + integrity sha512-BcCMAFI3XtuJ0AUnkCIP3SSyz7tn3kNp32Ew3JTxCpkluVDgty1AIIr7hUngHhNdwNx6WkFOyniJz/KIYJtcTQ== dependencies: fflate "^0.8.2" -"@faker-js/faker@^9.5.1": - version "9.5.1" - resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.5.1.tgz#1f32fb726db5f539415455cadbc93c9fb457e42d" - integrity sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg== +"@faker-js/faker@^9.6.0": + version "9.6.0" + resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.6.0.tgz#64235d20330b142eef3d1d1638ba56c083b4bf1d" + integrity sha512-3vm4by+B5lvsFPSyep3ELWmZfE3kicDtmemVpuwl1yH7tqtnHdsA6hG8fbXedMVdkzgtvzWoRgjSB4Q+FHnZiw== "@fnando/sparkline@^0.3.10": version "0.3.10" @@ -4293,12 +4293,12 @@ resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-5.12.2.tgz#102dc7db985dc3c52cfd13a176153f385f15a5b0" integrity sha512-o7dTmmW4DVBZi01VQHjO/cIJEH5RNz+rIrnQKwldTRoKC05vKOQTF/vuQAqTkhI7YHzFaspfvdy92oagEt5niw== -"@slickgrid-universal/common@5.13.0", "@slickgrid-universal/common@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.13.0.tgz#6971844b4b939a3b59bbea6de098d6b23d81aa02" - integrity sha512-iP1pN25uSAIoLrDnhmTt3uX+QQAL7+GPfbO/qA7zQYSP0vtP1VRtx4aA/l8g7gHvA+KMAmN+k4kybVq2LOeGFg== +"@slickgrid-universal/common@5.13.1", "@slickgrid-universal/common@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.13.1.tgz#2dc8a2a7f930a520a5cea9e021a0fda5852b3482" + integrity sha512-RqJpUG6vk2XI76+QKPwe1+2aYry1GOZ+aq+7gtzLL+jktKPY/mw/h8I1IV+24slUBs7naXz04Ar/NWkcOQ61og== dependencies: - "@excel-builder-vanilla/types" "^3.0.14" + "@excel-builder-vanilla/types" "^3.1.0" "@formkit/tempo" "^0.1.2" "@slickgrid-universal/binding" "5.12.2" "@slickgrid-universal/event-pub-sub" "5.13.0" @@ -4307,43 +4307,43 @@ "@types/trusted-types" "^2.0.7" autocompleter "^9.3.2" dequal "^2.0.3" - multiple-select-vanilla "^3.4.4" + multiple-select-vanilla "^3.5.0" sortablejs "^1.15.6" un-flatten-tree "^2.0.12" vanilla-calendar-pro "^2.9.10" -"@slickgrid-universal/composite-editor-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.13.0.tgz#d968ee28b0ba8f30b3795d6490c635cdca8ce1f0" - integrity sha512-1PU5Cf5AUnR6szMbM4Adi9s7d/bNs+93vyzPUl3X7yChyG3yr36L318NImseuLYUSG5eom5p32lEybfcFwbCvA== +"@slickgrid-universal/composite-editor-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.13.1.tgz#ba784a24bb8f310fce1ad2afcb5eaed9a3db0598" + integrity sha512-xhdjBnrSjIzEwXWn5Ra1xPfewKfrTzlpTi/KLq8cbf5RRZSXiXEcDtd76x4NeSfRqMJKOMh5c0Do7xDR+oAaOg== dependencies: "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/custom-footer-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.13.0.tgz#b18479ffde9aa4b12d5ff801c28778fadf7fe968" - integrity sha512-3pFxtT686N++BqjQc1tgc8gRmmO3S+plTRKnmG2QEu4YjL44gUAnSdch0mHNfAo/wztvombw1CbtNu1UJsyolg== +"@slickgrid-universal/custom-footer-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.13.1.tgz#d61f87b7e9e1f1329b937134daa3bbfbd1e506d0" + integrity sha512-LcWnkWv4zTYSJKES5wdtnKmFnF0MYp2sqvSns0bqN/fEzJXlUwFxMINLJ5KLdnzB2V4gLlQP7HZrDsXuDlc+Bw== dependencies: "@formkit/tempo" "^0.1.2" "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" -"@slickgrid-universal/custom-tooltip-plugin@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.13.0.tgz#3f4319d8d01d865c6b17077052547cc15f88c9e6" - integrity sha512-uvRI3xISJhl75cH1201a3roIJipv2mdc0I0SE2PumhR4gBg3gha3dYVbmt/XBLSD3V6qpid1fTmxYZIAwvWAwQ== +"@slickgrid-universal/custom-tooltip-plugin@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.13.1.tgz#05fcabd0b1441d0332a3ff8753684033f03e5ed6" + integrity sha512-JrMzLij4TLq+cnhtqQZ6wOq0H1Ta8ZxyeuPBVGD0V5xhPwW3DBC101gqRV9wrefo0NaoQHqCtJHD4vtfJ2q7NQ== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/empty-warning-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.13.0.tgz#0c857db68692f80f077e9f1cc983960f4fd707c8" - integrity sha512-YsMCRz8dqapDSAxYuOSN+BCaiWjk1aR85eNpD00uu11DU0bE+hZbP2nqmUscerDAT+5BLF6GJzAdE+J9TjV2mQ== +"@slickgrid-universal/empty-warning-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.13.1.tgz#92bdf8c9cbc29c03c2df4fa2078b4d82d4c8fe07" + integrity sha512-Nufo3FgBFmrHam7ijhwwP/VUNrH7dp8ZhVwSdndPgfl/WbYID9KUwZI4P3Yx6ml0KNJ2OEzHW1RfxIsGxr5M9A== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/event-pub-sub@5.13.0", "@slickgrid-universal/event-pub-sub@~5.13.0": version "5.13.0" @@ -4352,61 +4352,61 @@ dependencies: "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/excel-export@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.13.0.tgz#6f87b9747c9073ba068974fa19d477dae5e293ec" - integrity sha512-6uPHhy25pxkj/XKCDghvQTnrDRsoEc1d/vsp9HDgoxbpIy7vKnBLqDAT+pnT+1n4R0nZsnyqEhnrIgV+k+d0Ew== +"@slickgrid-universal/excel-export@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.13.1.tgz#7660f22a7706ce3a5df574482b4c1b54ef8454af" + integrity sha512-k9PPHp2Er+a3kU4ZDbh6MPDK/a/n/WW9UYBmFWVJrmPcNGP+OwMN/N2RGV99i/einDzT6PleFfIsDvzF0ZnE/g== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" - excel-builder-vanilla "^3.0.14" + excel-builder-vanilla "^3.1.0" -"@slickgrid-universal/graphql@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.13.0.tgz#c8326b4b98147deed322598355627e755c25cf93" - integrity sha512-OX73GJ9bgvM0yv1EHbrel+RHIu6pDQ7TccSLs3fgtHkdWAqvJzrB54uOZRDHupgXnedajc+UkL3Exj3yBAjr/w== +"@slickgrid-universal/graphql@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.13.1.tgz#1aa1315ea0eef93c352ef912d0568b9db6526ef4" + integrity sha512-W8Z2Y1j6umnARmOhqRLF42RhqfkrbQhGGr8ETvhuCVoqJIjvxVGVU1jeVqKcIXCMU6La01V8rOmGDWInnqG+mg== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/odata@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.13.0.tgz#89491508872f3b0430a90eb0a04516b5d548b2cc" - integrity sha512-ko2Wjja1S//AYrrNTSs4Bi+X3Ha6fdGt3t9RTUY36EznSp9lCORuZsXB5Y9TZTPE+URIyV2JfIiC6IyIb8Pblg== +"@slickgrid-universal/odata@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.13.1.tgz#2c5120b30e57f6b077f2390ae17b0309c1640a6d" + integrity sha512-0t8DRy6gfcUGhWryu9MgR41RzHn1prpA9Ks7P2w35WZwxRE94oc0qdeoPfzPQKSFi6m9OsDryVM4FDYuq5ig3A== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/pagination-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.13.0.tgz#f462437786789208a9501355a2e0e6c3bde489be" - integrity sha512-Ripo9qYvTrH/hXRHnN2OPE6vPbV3j6HSacbh6UXPFb1LWl2fHxoi49iZMrdZh7w+k2F3ElentmcjAQ3OA3FFwQ== +"@slickgrid-universal/pagination-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.13.1.tgz#4a334fb62c839bde5b3d32ee314ead885a46b4c3" + integrity sha512-05z68g0gP03gPbzYkH4+RtJlqNiz5PJAu/cjjPNzxk0OY6Jk/BdQTSYHmf0jBJEteORn+df7JIwjYHRjagtwGg== dependencies: "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" -"@slickgrid-universal/row-detail-view-plugin@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/row-detail-view-plugin/-/row-detail-view-plugin-5.13.0.tgz#70ff434c80e953559e4b3ebb7082e8b65dcda699" - integrity sha512-dYQYZdHSZ5QF/J13UZFZD9KzDu6z2z0E7iWe3HU9lEhR66vE+byNyM7JWfb1n8mDP/3x4agsn3QoEbKNwOPyDQ== +"@slickgrid-universal/row-detail-view-plugin@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/row-detail-view-plugin/-/row-detail-view-plugin-5.13.1.tgz#ac8f4cdfae7b1444e8c39224cfb5c9eb7ea6a772" + integrity sha512-IEXNoT6MDVNUExuiIpsg+RtCoycCOBdF4JbfFQKf3P8G9S/7LA/Y2A3UAVR+CHl5pC1ZobKAvEtrXIKnD0y54Q== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/rxjs-observable@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.13.0.tgz#0389360177e91573d7c4ef3b5ac726428cd9072a" - integrity sha512-rUtNusMx4wrnCqIU3G0JrD5JQ9PKIprtKp9i1FN6tvGPBmRO3upR7EXURGquCE/DYS9m0OR+SqtX0tfhqJh5wA== +"@slickgrid-universal/rxjs-observable@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.13.1.tgz#9f6ba54b26fd9ac2c240b7aaba6f8f6f2adb1610" + integrity sha512-AqSUeYkMaK+GGiONM10nO+9nJimDO4XPe/wQAEHvG6X/oNnVyekzOl3yxmo2kNmDs6R3qo1Sx6BQkIcO71nIow== dependencies: - "@slickgrid-universal/common" "5.13.0" - rxjs "^7.8.1" + "@slickgrid-universal/common" "5.13.1" + rxjs "^7.8.2" -"@slickgrid-universal/text-export@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.13.0.tgz#dc300dffec88c53dfb13d89f1fccf6ebd41c3844" - integrity sha512-innFVhDtfDyHPSgB7ibGyqL9gOhIS86duf0lfBbj1hmPP1MUgtKcK9vb0x54TlI3estNzPXp4Kf4iSHL5XZd+Q== +"@slickgrid-universal/text-export@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.13.1.tgz#e87a877600dd121a547d1c440529681282ff1e3e" + integrity sha512-EAdlKKMf6AvoV0ohd/5NbhcOjwxh7uyT13RDnL/8l560HMq8/nAJMXg+9h+V2cDZk7xcvXLYyBUABWSna/xlhA== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" text-encoding-utf-8 "^1.0.2" @@ -7737,10 +7737,10 @@ events@^3.2.0, events@^3.3.0: resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== -excel-builder-vanilla@^3.0.14: - version "3.0.14" - resolved "https://registry.yarnpkg.com/excel-builder-vanilla/-/excel-builder-vanilla-3.0.14.tgz#622775c71652fc1e96487543a3239cbb7912eae9" - integrity sha512-lXjyxAVVSwkHIikzCpQq+ydtrXWIGec/x6f5IzZV30BvW30i1adzNISSuq+OZqMuxbffKgmH0wgRkvSrl9WHgg== +excel-builder-vanilla@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/excel-builder-vanilla/-/excel-builder-vanilla-3.1.0.tgz#e67d860f7afa0be0249779d77a5739c4e47c2a41" + integrity sha512-98HxjD4iAJ+Noqfrwhk8Enol3cbZi9YyfkBozJJpwFJPmibEgH6TWURENSX5ugWs+ihruRDAWCsmFXc05eJcDA== dependencies: fflate "^0.8.2" @@ -10486,10 +10486,10 @@ multicast-dns@^7.2.5: dns-packet "^5.2.2" thunky "^1.0.2" -multiple-select-vanilla@^3.4.4: - version "3.4.4" - resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-3.4.4.tgz#84c58c8cef280ff8f1f47586aa3bafd727f63210" - integrity sha512-V59lF9bCmLrmGiqmvhoGNS99wnwCHk58La7JawlYl74glm6+YDgS/y9UdGSnoP6QaPJMany4oPzuOtWk45VCUg== +multiple-select-vanilla@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-3.5.0.tgz#4679f5ff29879a7a7233f95e90a8abaee16a2698" + integrity sha512-ifIrnWqsRtbE5O8uBUV9/+LeX0CT0yVwYcEzdX8Bwa88nVkACrHEUE1m5JfURPa6+7YRN47b94Hp37N59eow7g== dependencies: "@types/trusted-types" "^2.0.7"