Skip to content

Commit

Permalink
feat: add optional Top-Header for Drag Grouping + Header Grouping (#1029
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@ghiscoding
ghiscoding authored Jun 19, 2024
1 parent fe46af0 commit cec789c
Show file tree
Hide file tree
Showing 9 changed files with 858 additions and 13 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/example-draggable-grouping.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
cy.get('h2 + ul > li').first().contains('Draggable Grouping feature');
});

it('should have exact column titles on both grids', () => {
it('should have exact column titles in grid', () => {
cy.get('#myGrid')
.find('.slick-header-columns')
.children()
Expand Down
218 changes: 218 additions & 0 deletions cypress/e2e/example-draggable-header-grouping.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
describe('Example - Draggable Grouping', { retries: 1 }, () => {
// NOTE: everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
const GRID_ROW_HEIGHT = 25;
const preHeaders = ['', 'Common Factor', 'Period', 'Analysis', ''];
const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', 'Cost', 'Effort-Driven'];
for (let i = 0; i < 30; i++) {
fullTitles.push(`Mock${i}`);
}

it('should display Example title', () => {
cy.visit(`${Cypress.config('baseUrl')}/examples/example-draggable-header-grouping.html`);
cy.get('h2').contains('Demonstrates');
cy.get('h2 + ul > li').first().contains('Draggable Grouping feature');
});

it('should have exact column (pre-header) grouping titles in grid', () => {
cy.get('#myGrid')
.find('.slick-preheader-panel .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(preHeaders[index]));
});

it('should have exact column titles in grid', () => {
cy.get('#myGrid')
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
});

it('should have 6x draggable icons', () => {
cy.get('.slick-column-groupable')
.should('have.length', 6);

cy.get('.slick-column-groupable.sgi-drag-vertical')
.should('have.length', 6);
});

describe('Grouping Tests', () => {
it('should "Group by Duration & sort groups by value" then Collapse All and expect only group titles', () => {
cy.get('[data-test="add-50k-rows-btn"]').click();
cy.get('[data-test="group-duration-sort-value-btn"]').click();
cy.get('[data-test="collapse-all-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4');
});

it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
cy.get('[data-test="add-50k-rows-btn"]').click();
cy.get('[data-test="group-duration-sort-value-btn"]').click();
cy.get('[data-test="expand-all-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '0');
});

it('should show 1 column title (Duration) shown in the pre-header section', () => {
cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
});

it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => {
cy.get('[data-test="group-duration-effort-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '0');
});

it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section', () => {
cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration');
cy.get('.slick-dropped-grouping:nth(1) div').contains('Effort-Driven');
});

it('should be able to drag and swap pre-header grouped column titles (Effort-Driven, Duration)', () => {
cy.get('.slick-dropped-grouping:nth(0) div')
.contains('Duration')
.drag('.slick-dropped-grouping:nth(1) div');

cy.get('.slick-dropped-grouping:nth(0) div').contains('Effort-Driven');
cy.get('.slick-dropped-grouping:nth(1) div').contains('Duration');
});

it('should expect the grouping to be swapped as well in the grid', () => {
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '0');
});

it('should use the topheader Toggle All button and expect all groups to now be collapsed', () => {
cy.get('.slick-topheader-panel .slick-group-toggle-all').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: True');
});

it('should expand all rows with "Expand All" and expect all the Groups to be expanded and the Toogle All icon to be collapsed', () => {
cy.get('#myGrid')
.find('.slick-row .slick-cell:nth(1)')
.rightclick({ force: true });

cy.get('[data-test="expand-all-btn"]')
.click();

cy.get('#myGrid')
.find('.slick-group-toggle.collapsed')
.should('have.length', 0);

cy.get('#myGrid')
.find('.slick-group-toggle.expanded')
.should(($rows) => expect($rows).to.have.length.greaterThan(0));

cy.get('.slick-group-toggle-all.expanded')
.should('exist');
});

it('should collapse all rows with "Collapse All" and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => {
cy.get('#myGrid')
.find('.slick-row .slick-cell:nth(1)')
.rightclick({ force: true });

cy.get('[data-test="collapse-all-btn"]')
.click();

cy.get('#myGrid')
.find('.slick-group-toggle.expanded')
.should('have.length', 0);

cy.get('#myGrid')
.find('.slick-group-toggle.collapsed')
.should(($rows) => expect($rows).to.have.length.greaterThan(0));

cy.get('.slick-group-toggle-all.collapsed')
.should('exist');
});

it('should use the topheader Toggle All button and expect all groups to now be expanded', () => {
cy.get('.slick-topheader-panel .slick-group-toggle-all').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
.should('have.css', 'marginLeft').and('eq', `0px`);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
.should('have.css', 'marginLeft').and('eq', `15px`);
});

it('should use the topheader Toggle All button again and expect all groups to now be collapsed', () => {
cy.get('.slick-topheader-panel .slick-group-toggle-all').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: True');
});

it('should clear all groups with "Clear all Grouping" and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => {
cy.get('#myGrid')
.find('.slick-row .slick-cell:nth(1)')
.rightclick({ force: true });

cy.get('[data-test="clear-grouping-btn"]')
.click();

cy.get('#myGrid')
.find('.slick-group-toggle-all')
.should('be.hidden');

cy.get('#myGrid')
.find('.slick-placeholder')
.should('be.visible')
.should('have.text', 'Drop a column header here to group by the column :)');
});

it('should add 500 items and expect last row to be Task 500', () => {
cy.get('[data-test="add-500-rows-btn"]')
.click();

cy.get('#myGrid')
.find('.slick-viewport-top.slick-viewport-left')
.scrollTo('bottom')
.wait(10);

cy.get(`#myGrid [style="top: ${GRID_ROW_HEIGHT * 499}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 499');
});

it('should add 50K items and expect last row to be Task 50,000', () => {
cy.get('[data-test="add-50k-rows-btn"]')
.click();

cy.get('#myGrid')
.find('.slick-viewport-top.slick-viewport-left')
.scrollTo('bottom')
.wait(10);

// cy.get(`#myGrid [style="top: ${GRID_ROW_HEIGHT * 49999}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 49999');
cy.get(`#myGrid [style="top: 1.24998e+06px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 49999');
});
});
});
Loading

0 comments on commit cec789c

Please sign in to comment.