(treeArray: T[], predicate: (ite
return undefined;
}
+/** Check if a value has any data (undefined, null or empty string will return false... but false boolean is consider as valid data) */
+export function hasData(value: any): boolean {
+ return value !== undefined && value !== null && value !== '';
+}
+
/**
* HTML encode using jQuery with a
* Create a in-memory div, set it's inner text(which jQuery automatically encodes)
@@ -338,7 +343,7 @@ export function htmlEncodedStringWithPadding(inputStr: string, paddingLength: nu
* Check if input value is a number, by default it won't be a strict checking
* but optionally we could check for strict equality, for example in strict "3" will return False but without strict it will return True
* @param value - input value of any type
- * @param strict - when using strict it also check for strict equality, for example in strict "3" will return but without strict it will return true
+ * @param strict - when using strict it also check for strict equality, for example in strict "3" would return False but without strict it would return True
*/
export function isNumber(value: any, strict = false) {
if (strict) {
@@ -1017,41 +1022,6 @@ export function findOrDefault(array: T[], logic: (item: T) => boolean,
return array;
}
-/** Get offset of HTML element relative to a parent element */
-export function getElementOffsetRelativeToParent(parentElm: HTMLElement | null, childElm: HTMLElement | null) {
- if (!parentElm || !childElm) {
- return undefined;
- }
- const parentPos = parentElm.getBoundingClientRect();
- const childPos = childElm.getBoundingClientRect();
- return {
- top: childPos.top - parentPos.top,
- right: childPos.right - parentPos.right,
- bottom: childPos.bottom - parentPos.bottom,
- left: childPos.left - parentPos.left,
- };
-}
-
-/** Get HTML element offset with pure JS */
-export function getHtmlElementOffset(element: HTMLElement): HtmlElementPosition | undefined {
- if (!element) {
- return undefined;
- }
- const rect = element?.getBoundingClientRect?.();
- let top = 0;
- let left = 0;
- let bottom = 0;
- let right = 0;
-
- if (rect?.top !== undefined && rect.left !== undefined) {
- top = rect.top + window.pageYOffset;
- left = rect.left + window.pageXOffset;
- right = rect.right;
- bottom = rect.bottom;
- }
- return { top, left, bottom, right };
-}
-
/**
* Converts a string from camelCase to snake_case (underscore) case
* @param str the string to convert
diff --git a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
index 649dbf68d..103d57ca2 100644
--- a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
+++ b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
@@ -34,7 +34,6 @@ import {
// extensions
CheckboxSelectorExtension,
CellExternalCopyManagerExtension,
- CellMenuExtension,
ContextMenuExtension,
DraggableGroupingExtension,
ExtensionUtility,
@@ -356,7 +355,6 @@ export class SlickVanillaGridBundle {
// extensions
const cellExternalCopyManagerExtension = new CellExternalCopyManagerExtension(this.extensionUtility, this.sharedService);
- const cellMenuExtension = new CellMenuExtension(this.extensionUtility, this.sharedService, this.translaterService);
const contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this.sharedService, this.treeDataService, this.translaterService);
const checkboxExtension = new CheckboxSelectorExtension(this.sharedService);
const draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this.sharedService);
@@ -371,7 +369,6 @@ export class SlickVanillaGridBundle {
this._eventPubSubService,
this.sortService,
cellExternalCopyManagerExtension,
- cellMenuExtension,
checkboxExtension,
contextMenuExtension,
draggableGroupingExtension,
@@ -739,11 +736,12 @@ export class SlickVanillaGridBundle {
this.translaterService.addPubSubMessaging(this._eventPubSubService);
}
- // translate some of them on first load, then on each language change
+ // translate them all on first load, then on each language change
if (gridOptions.enableTranslate) {
+ this.extensionService.translateAllExtensions();
+ this.translateCustomFooterTexts();
this.translateColumnHeaderTitleKeys();
this.translateColumnGroupKeys();
- this.translateCustomFooterTexts();
}
// on locale change, we have to manually translate the Headers, GridMenu
diff --git a/test/cypress/integration/example03.spec.js b/test/cypress/integration/example03.spec.js
index 6a4d8ddac..a32f87a50 100644
--- a/test/cypress/integration/example03.spec.js
+++ b/test/cypress/integration/example03.spec.js
@@ -1,7 +1,7 @@
///
describe('Example 03 - Draggable Grouping', { retries: 1 }, () => {
- const fullTitles = ['', 'Title', 'Duration', 'Cost', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Action'];
+ const fullTitles = ['', 'Title', 'Duration', 'Cost', '% Complete', 'Start', 'Finish', 'Effort-Driven', 'Action'];
const GRID_ROW_HEIGHT = 33;
it('should display Example title', () => {
@@ -17,6 +17,21 @@ describe('Example 03 - Draggable Grouping', { retries: 1 }, () => {
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
});
+ it('should open the Cell Menu on 2nd and 3rd row and change the Effort-Driven to "True" and expect the cell to be updated and have checkmark to be enabled', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).find('.checkmark-icon').should('have.length', 0);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).find('.checkmark-icon').should('have.length', 0);
+
+ cy.get('.grid3').find(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+ cy.get('.grid3').find(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 1);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 1);
+ });
+
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();
@@ -61,9 +76,9 @@ describe('Example 03 - Draggable Grouping', { retries: 1 }, () => {
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', () => {
+ 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');
+ cy.get('.slick-dropped-grouping:nth(1) div').contains('Effort-Driven');
});
it('should be able to drag and swap grouped column titles inside the pre-header', () => {
@@ -72,7 +87,7 @@ describe('Example 03 - Draggable Grouping', { retries: 1 }, () => {
.trigger('mousedown', 'bottom', { which: 1 });
cy.get('.slick-dropped-grouping:nth(1) div')
- .contains('Effort Driven')
+ .contains('Effort-Driven')
.trigger('mousemove', 'bottomRight')
.trigger('mouseup', 'bottomRight', { force: true });
});
diff --git a/test/cypress/integration/example04.spec.js b/test/cypress/integration/example04.spec.js
index b4a4be7f1..567d634b4 100644
--- a/test/cypress/integration/example04.spec.js
+++ b/test/cypress/integration/example04.spec.js
@@ -4,6 +4,7 @@ describe('Example 04 - Frozen Grid', { retries: 1 }, () => {
// NOTE: everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
const fullTitles = ['', 'Title', '% Complete', 'Start', 'Finish', 'Completed', 'Cost | Duration', 'City of Origin', 'Action'];
+ const GRID_ROW_HEIGHT = 45;
it('should display Example title', () => {
cy.visit(`${Cypress.config('baseExampleUrl')}/example04`);
@@ -218,4 +219,46 @@ describe('Example 04 - Frozen Grid', { retries: 1 }, () => {
cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '2009-01-01');
cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '2009-05-05');
});
+
+ it('should open the Cell Menu on 2nd and 3rd row and change the Effort-Driven to "True" and expect the cell to be updated and have checkmark icon', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).find('.checkmark-icon').should('have.length', 0);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).find('.checkmark-icon').should('have.length', 0);
+
+ cy.get('.grid4').find(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+ cy.get('.grid4').find(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 1);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 1);
+ });
+
+ it('should open the Cell Menu on 2nd and 3rd row and change the Effort-Driven to "False" and expect the cell to be updated and no longer have checkmark', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 1);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 1);
+
+ cy.get('.grid4').find(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('False').click();
+ cy.get('.grid4').find(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('False').click();
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 0);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).find('.checkmark-icon').should('have.length', 0);
+ });
+
+ it('should open the Cell Menu and delete Row 3 and 4 from the Cell Menu', () => {
+ const confirmStub = cy.stub();
+ cy.on('window:confirm', confirmStub);
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
+
+ cy.get('.grid4').find(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(8)`).contains('Action').click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-item').contains('Delete Row').click()
+ .then(() => expect(confirmStub.getCall(0)).to.be.calledWith('Do you really want to delete row (4) with "Task 3"?'));
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
+ });
});
diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js
index b5ac5aa25..3a737559c 100644
--- a/test/cypress/integration/example07.spec.js
+++ b/test/cypress/integration/example07.spec.js
@@ -6,7 +6,7 @@ function removeExtraSpaces(textS) {
describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries: 1 }, () => {
const GRID_ROW_HEIGHT = 45;
- const fullTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites'];
+ const fullTitles = ['', '', 'Title', 'Action', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites'];
it('should display Example title', () => {
cy.visit(`${Cypress.config('baseExampleUrl')}/example07`);
@@ -163,30 +163,30 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.click();
// change duration
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'day').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', 'day').click();
cy.get('.editor-duration').type('2222').type('{enter}');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '2222 days');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '2222 days');
// change % complete
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).click();
cy.get('.slider-editor input[type=range]').as('range').invoke('val', 25).trigger('change');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '25');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).should('contain', '25');
// change Finish date
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-05').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).should('contain', '2009-01-05').click();
cy.get('.flatpickr-calendar:visible .flatpickr-day').contains('22').click('bottom', { force: true });
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).should('contain', '2009-01-22');
cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
.scrollTo('top');
});
it('should dynamically add 2x new "Title" columns', () => {
- const updatedTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title', 'Title'];
+ const updatedTitles = ['', '', 'Title', 'Action', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title', 'Title'];
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('not.exist');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('not.exist');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).should('not.exist');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`)
.should('contain', 'Task 0')
@@ -205,12 +205,12 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.should('have.length', 9);
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Task 0');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Task 0');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).should('contain', 'Task 0');
});
it('should open Grid Menu and expect new columns to be added to the column picker section', () => {
- const updatedTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title', 'Title'];
+ const updatedTitles = ['', '', 'Title', 'Action', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title', 'Title'];
cy.get('.grid7')
.find('button.slick-gridmenu-button')
@@ -242,7 +242,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should hover over the last "Title" column and click on "Clear Filter" and expect grid to have all rows shown', () => {
- cy.get('.slick-header-column:nth(9)')
+ cy.get('.slick-header-column:nth(10)')
.first()
.trigger('mouseover')
.children('.slick-header-menubutton')
@@ -260,7 +260,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should dynamically remove 1x of the new "Title" columns', () => {
- const updatedTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+ const updatedTitles = ['', '', 'Title', 'Action', 'Duration', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
cy.get('[data-test=remove-title-column-btn]')
.click();
@@ -281,33 +281,33 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.click();
// change duration
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'day').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', 'day').click();
cy.get('.editor-duration').type('0000').type('{enter}');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '0000 day');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '0000 day');
// change % complete
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).click();
cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', '50');
// change Finish date
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-05').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).should('contain', '2009-01-05').click();
cy.get('.flatpickr-calendar:visible .flatpickr-day').contains('22').click('bottom', { force: true });
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).should('contain', '2009-01-22');
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Task 0000');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Task 0000');
});
it('should move "Duration" column to a different position in the grid', () => {
- const expectedTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Duration', 'Completed', 'Prerequisites', 'Title'];
+ const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Duration', 'Completed', 'Prerequisites', 'Title'];
cy.get('.slick-header-columns')
- .children('.slick-header-column:nth(3)')
+ .children('.slick-header-column:nth(4)')
.should('contain', 'Duration')
.trigger('mousedown', 'center', { which: 1 });
cy.get('.slick-header-columns')
- .children('.slick-header-column:nth(6)')
+ .children('.slick-header-column:nth(7)')
.should('contain', 'Finish')
.trigger('mousemove', 'bottomRight')
.trigger('mouseup', 'bottomRight', { force: true });
@@ -319,7 +319,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should be able to hide "Duration" column', () => {
- const expectedTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+ const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
cy.get('[data-test="hide-duration-btn"]').click();
@@ -330,7 +330,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should be able to click disable Filters functionality button and expect no Filters', () => {
- const expectedTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+ const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
cy.get('[data-test="disable-filters-btn"]').click().click(); // even clicking twice should have same result
@@ -345,6 +345,23 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
cy.get('[data-test="toggle-filtering-btn"]').click(); // show it back
});
+ it('should open the Cell Menu on row 9-10 row and change the Completed to "True" and expect the cell to be updated and have checkmark icon', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 9}px"] > .slick-cell:nth(2)`).should('contain', 'Task 9');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 10}px"] > .slick-cell:nth(2)`).should('contain', 'Task 10');
+
+ cy.get('.grid7').find(`[style="top:${GRID_ROW_HEIGHT * 9}px"] > .slick-cell:nth(3)`).click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .title').contains('Commands');
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-content').contains('Delete Row');
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-content').contains('Help');
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .title').contains('Change Completed Flag');
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+ cy.get('.grid7').find(`[style="top:${GRID_ROW_HEIGHT * 10}px"] > .slick-cell:nth(3)`).click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('True').click();
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 9}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 1);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 10}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 1);
+ });
+
it('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => {
const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel'];
@@ -367,7 +384,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should be able to toggle Filters functionality', () => {
- const expectedTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+ const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
cy.get('[data-test="toggle-filtering-btn"]').click(); // hide it
@@ -380,7 +397,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
cy.get('[data-test="toggle-filtering-btn"]').click(); // show it
- cy.get('.slick-headerrow-columns .slick-headerrow-column').should('have.length', 9);
+ cy.get('.slick-headerrow-columns .slick-headerrow-column').should('have.length', 10);
cy.get('.grid7')
.find('.slick-header-columns')
@@ -557,7 +574,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
it('should open Column Picker and show the "Duration" column back to visible and expect it to have kept its position after toggling filter/sorting', () => {
// first 2 cols are hidden but they do count as li item
- const expectedFullPickerTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Duration', 'Completed', 'Prerequisites', 'Title'];
+ const expectedFullPickerTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Duration', 'Completed', 'Prerequisites', 'Title'];
cy.get('.grid7')
.find('.slick-header-column')
@@ -577,7 +594,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
cy.get('.slick-columnpicker')
.find('.slick-columnpicker-list')
- .children('li:nth-child(7)')
+ .children('li:nth-child(8)')
.children('label')
.should('contain', 'Duration')
.click();
@@ -626,7 +643,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should open the "Prerequisites" Editor and expect to have Task 500 & 501 in the Editor', () => {
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`)
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`)
.should('contain', '')
.click();
@@ -645,7 +662,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.last()
.click({ force: true });
- cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', 'Task 501');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Task 501');
});
it('should delete the last item "Task 501" and expect it to be removed from the Filter', () => {
@@ -705,15 +722,15 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should reorder "Start" column to be after the "Completed" column', () => {
- const expectedTitles = ['', '', 'Title', '% Complete', 'Finish', 'Duration', 'Completed', 'Start', 'Prerequisites', 'Title'];
+ const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Finish', 'Duration', 'Completed', 'Start', 'Prerequisites', 'Title'];
cy.get('.slick-header-columns')
- .children('.slick-header-column:nth(4)')
+ .children('.slick-header-column:nth(5)')
.should('contain', 'Start')
.trigger('mousedown', 'bottom', { which: 1 });
cy.get('.slick-header-columns')
- .children('.slick-header-column:nth(7)')
+ .children('.slick-header-column:nth(8)')
.should('contain', 'Completed')
.trigger('mousemove', 'bottomRight')
.trigger('mouseup', 'bottomRight', { force: true });
@@ -725,7 +742,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should hide "Duration" column from column picker', () => {
- const originalColumns = ['', '', 'Title', '% Complete', 'Finish', 'Duration', 'Completed', 'Start', 'Prerequisites', 'Title'];
+ const originalColumns = ['', '', 'Title', 'Action', '% Complete', 'Finish', 'Duration', 'Completed', 'Start', 'Prerequisites', 'Title'];
cy.get('.grid7')
.find('.slick-header-column')
@@ -745,7 +762,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
cy.get('.slick-columnpicker')
.find('.slick-columnpicker-list')
- .children('li:nth-child(6)')
+ .children('li:nth-child(7)')
.children('label')
.should('contain', 'Duration')
.click();
@@ -782,7 +799,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
const expectedFullHeaderMenuCommands = ['Redimensionner par contenu', '', 'Trier par ordre croissant', 'Trier par ordre décroissant', '', 'Supprimer le filtre', 'Supprimer le tri', 'Cacher la colonne'];
cy.get('.grid7')
- .find('.slick-header-column:nth(8)')
+ .find('.slick-header-column:nth(9)')
.trigger('mouseover')
.children('.slick-header-menubutton')
.click();
@@ -801,7 +818,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
});
it('should open Grid Menu and expect new columns to be added to the column picker section, also "Duration" to be unchecked while "Finish" to be at new position', () => {
- const updatedTitles = ['', '', 'Titre', 'Durée', '% Achevée', 'Fin', 'Terminé', 'Début', 'Prerequisites', 'Titre'];
+ const updatedTitles = ['', '', 'Titre', 'Action', 'Durée', '% Achevée', 'Fin', 'Terminé', 'Début', 'Prerequisites', 'Titre'];
cy.get('.grid7')
.find('button.slick-gridmenu-button')
@@ -830,4 +847,41 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
.find('span.close')
.click();
});
+
+ it('should open the Cell Menu on first 2 rows and change the Completed to "True" and expect the cell to be updated and have checkmark icon', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 4');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 8');
+
+ cy.get('.grid7').find(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .title').contains('Commandes');
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-content').contains('Supprimer la ligne');
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-content').contains('Aide');
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .title').contains(`Changer l'indicateur terminé`);
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('Faux').click();
+ cy.get('.grid7').find(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-option-list .slick-cell-menu-item').contains('Faux').click();
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 0);
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.checkmark-icon').should('have.length', 0);
+ });
+
+ it('should open the Cell Menu on 2nr row and delete it', () => {
+ const confirmStub = cy.stub();
+ cy.on('window:confirm', confirmStub);
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 4');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 8');
+
+ cy.get('.grid7').find(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).click({ force: true });
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .title').contains('Commandes');
+ cy.get('.slick-cell-menu .slick-cell-menu-command-list .slick-cell-menu-content')
+ .contains('Supprimer la ligne')
+ .click()
+ .then(() => expect(confirmStub.getCall(0)).to.be.calledWith('Do you really want to delete row (2) with "Task 8"?'));
+ });
+
+ it('should have "1 de 500 éléments" shown as metrics on the right footer shown in French', () => {
+ cy.get('.right-footer.metrics')
+ .contains('1 de 500 éléments');
+ });
});
diff --git a/test/translateServiceStub.ts b/test/translateServiceStub.ts
index 00033518c..fce37e3b1 100644
--- a/test/translateServiceStub.ts
+++ b/test/translateServiceStub.ts
@@ -61,9 +61,10 @@ export class TranslateServiceStub implements TranslaterService {
case 'ITEMS_SELECTED': output = this._locale === 'en' ? 'items selected' : 'éléments sélectionnés'; break;
case 'NOT_CONTAINS': output = this._locale === 'en' ? 'Not contains' : 'Ne contient pas'; break;
case 'NOT_EQUAL_TO': output = this._locale === 'en' ? 'Not equal to' : 'Non égal à'; break;
+ case 'NONE': output = this._locale === 'en' ? 'None' : 'Aucun'; break;
case 'OF': output = this._locale === 'en' ? 'of' : 'de'; break;
case 'OK': output = this._locale === 'en' ? 'OK' : 'Terminé'; break;
- case 'OPTIONS_LIST': output = this._locale === 'en' ? 'Options List' : 'Liste d\'options'; break;
+ case 'OPTIONS_LIST': output = this._locale === 'en' ? 'Options List' : `Liste d'options`; break;
case 'OTHER': output = this._locale === 'en' ? 'Other' : 'Autre'; break;
case 'PAGE': output = this._locale === 'en' ? 'Page' : 'Page'; break;
case 'PRODUCT': output = this._locale === 'en' ? 'Product' : 'Produit'; break;