diff --git a/package.json b/package.json
index cce477921..a4f3da85a 100644
--- a/package.json
+++ b/package.json
@@ -123,24 +123,24 @@
"@types/dompurify": "^2.0.1",
"@types/flatpickr": "^3.1.2",
"@types/jest": "^24.0.25",
- "@types/jquery": "^3.3.37",
+ "@types/jquery": "^3.5.0",
"@types/moment": "^2.13.0",
"@types/node": "^13.13.4",
"@types/text-encoding-utf-8": "^1.0.1",
"babel-jest": "^24.9.0",
"bootstrap": "3.4.1",
- "codecov": "^3.6.1",
+ "codecov": "^3.7.0",
"codelyzer": "~4.5.0",
- "conventional-changelog": "^3.1.18",
- "copyfiles": "^2.2.0",
+ "conventional-changelog": "^3.1.21",
+ "copyfiles": "^2.3.0",
"core-js": "^2.6.11",
"cross-env": "^7.0.2",
"custom-event-polyfill": "^1.0.7",
"del": "^5.1.0",
- "del-cli": "^3.0.0",
+ "del-cli": "^3.0.1",
"gulp": "^4.0.2",
- "gulp-bump": "^3.1.3",
- "gulp-sass": "^4.0.2",
+ "gulp-bump": "^3.2.0",
+ "gulp-sass": "^4.1.0",
"gulp-yuidoc": "^0.1.2",
"jest": "^24.9.0",
"jest-extended": "^0.11.5",
@@ -148,19 +148,19 @@
"jest-preset-angular": "^6.0.1",
"ng-packagr": "~5.3.0",
"ngx-bootstrap": "^4.3.0",
- "node-sass": "4.14.0",
+ "node-sass": "4.14.1",
"npm-run-all": "^4.1.5",
- "postcss-cli": "^7.1.0",
+ "postcss-cli": "^7.1.1",
"require-dir": "^1.2.0",
"rimraf": "^3.0.2",
"run-sequence": "^2.2.1",
- "standard-version": "^8.0.1",
+ "standard-version": "^8.0.2",
"ts-node": "~3.3.0",
"tsickle": "^0.34.0",
"tslib": "^1.11.0",
"tslint": "^5.12.0",
"typescript": ">=3.1.1 <3.2.0",
- "uglify-js": "^3.8.0",
+ "uglify-js": "^3.10.0",
"vinyl-paths": "^2.1.0",
"yargs": "^15.1.0",
"zone.js": "^0.8.29"
diff --git a/src/app/examples/grid-editor.component.html b/src/app/examples/grid-editor.component.html
index fdd5f9626..17ea8ea05 100644
--- a/src/app/examples/grid-editor.component.html
+++ b/src/app/examples/grid-editor.component.html
@@ -7,11 +7,11 @@
{{title}}
@@ -21,8 +21,8 @@
{{title}}
Undo last edit(s)
@@ -31,15 +31,15 @@ {{title}}
+ title="Clear Filters & Sorting to see it better">Add item
-
diff --git a/src/app/examples/grid-editor.component.ts b/src/app/examples/grid-editor.component.ts
index 2a152e161..8b5686704 100644
--- a/src/app/examples/grid-editor.component.ts
+++ b/src/app/examples/grid-editor.component.ts
@@ -65,7 +65,7 @@ const taskFormatter = (row, cell, value, columnDef, dataContext) => {
})
@Injectable()
export class GridEditorComponent implements OnInit {
- title = 'Example 3: Editors';
+ title = 'Example 3: Editors / Delete';
subTitle = `
Grid with Inline Editors and onCellClick actions (Wiki docs).
diff --git a/test/cypress/integration/example03.spec.js b/test/cypress/integration/example03.spec.js
new file mode 100644
index 000000000..0827fe583
--- /dev/null
+++ b/test/cypress/integration/example03.spec.js
@@ -0,0 +1,189 @@
+///
+
+function removeExtraSpaces(textS) {
+ return `${textS}`.replace(/\s+/g, ' ').trim();
+}
+
+describe('Example 3 - Grid with Editors', () => {
+ const GRID_ROW_HEIGHT = 35;
+ const fullTitles = [
+ '', '', 'Title', 'Title, Custom Editor', 'Duration (days)', '% Complete',
+ 'Start', 'Finish', 'City of Origin', 'Country of Origin', 'Country of Origin Name',
+ 'Effort Driven', 'Prerequisites',
+ ];
+
+ it('should display Example title', () => {
+ cy.visit(`${Cypress.config('baseExampleUrl')}/editor`);
+ cy.get('h2').should('contain', 'Example 3: Editors / Delete');
+ });
+
+ it('should have exact Column Titles in the grid', () => {
+ cy.get('#grid3')
+ .find('.slick-header-columns')
+ .children()
+ .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+ });
+
+ it('should enable "Auto Commit Edit"', () => {
+ cy.get('[data-test=auto-commit]')
+ .click();
+ });
+
+ it('should be able to change all values of 3rd row', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', 'Task 2').click();
+
+ // change Title & Custom Title
+ cy.get('.editor-title > textarea').type('Task 2222');
+ cy.get('.editor-title .btn-save').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', 'Task 2222');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'Task 2222');
+
+ // change duration
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click();
+ cy.get('.slider-editor input[type=range]').as('range')
+ .invoke('val', 25)
+ .trigger('change')
+ .type('{enter}', { force: true });
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '25');
+
+ // change % Complete
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).click();
+ cy.get('[name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`)
+ .find('.percent-complete-bar[style="background:green; width:95%"]');
+
+ // change Finish date
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).click();
+ cy.get('.flatpickr-monthDropdown-months:visible')
+ .select('January', { force: true });
+ cy.get('.numInput.cur-year:visible').type('2009');
+ cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true })
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+
+ // change City of Origin
+ // cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).click({ force: true });
+ // cy.get('input.autocomplete.editor-cityOfOrigin.ui-autocomplete-input')
+ // .type('Venice');
+
+ // change Effort Driven
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(11)`).click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check();
+
+ cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+ .scrollTo('top');
+ });
+
+ it('should dynamically add 2x new "Title" columns', () => {
+ const updatedTitles = [
+ '', '', 'Title', 'Title, Custom Editor', 'Duration (days)', '% Complete',
+ 'Start', 'Finish', 'City of Origin', 'Country of Origin', 'Country of Origin Name',
+ 'Effort Driven', '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(13)`).should('not.exist');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('not.exist');
+
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`)
+ .should('contain', 'Task 0')
+ .should('have.length', 1);
+
+ cy.get('#grid3')
+ .find('.slick-header-columns')
+ .children()
+ .each(($child, index) => expect($child.text()).to.eq(updatedTitles[index]));
+
+ cy.get('[data-test=add-title-column]')
+ .click()
+ .click();
+
+ 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(3)`).should('contain', 'Task 0');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(13)`).should('contain', 'Task 0');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('contain', 'Task 0');
+ });
+
+ it('should be able to change value of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click();
+
+ // change Title & Custom Title
+ cy.get('.editor-title > textarea').type('Task 0000');
+ cy.get('.editor-title .btn-save').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0000');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'Task 0000');
+
+ // change duration
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click();
+ cy.get('.slider-editor input[type=range]').as('range')
+ .invoke('val', 50)
+ .trigger('change')
+ .type('{enter}', { force: true });
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50');
+
+ // change % Complete
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).click();
+ cy.get('[name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`)
+ .find('.percent-complete-bar[style="background:green; width:95%"]');
+
+ // change Finish date
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).click();
+ cy.get('.flatpickr-monthDropdown-months:visible')
+ .select('January', { force: true });
+ cy.get('.numInput.cur-year:visible').type('2009');
+ cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true })
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+
+ // change Effort Driven
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check().blur();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).click(); // the blur seems to not always work, so just click on another cell
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).find('.fa-check.checkmark-icon');
+
+ cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+ .scrollTo('top');
+ });
+
+ it('should be able to dynamically remove last 2 added Title columns', () => {
+ cy.get('[data-test=remove-title-column]')
+ .click()
+ .click();
+
+ 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(13)`).should('not.exist');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('not.exist');
+ });
+
+ it('should be able to change values again of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => {
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click();
+
+ // change Title & Custom Title
+ cy.get('.editor-title > textarea').type('Task 0000');
+ cy.get('.editor-title .btn-save').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0000');
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'Task 0000');
+
+ // change duration
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click();
+ cy.get('.slider-editor input[type=range]').as('range')
+ .invoke('val', 50)
+ .trigger('change')
+ .type('{enter}', { force: true });
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50');
+
+ // change % Complete
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).click();
+ cy.get('[name=editor-complete].ms-drop > ul > li > label:nth(3)').contains('97').click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`)
+ .find('.percent-complete-bar[style="background:green; width:97%"]');
+
+ // change Finish date
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).click();
+ cy.get('.flatpickr-day:visible:nth(24)').click('bottom', { force: true })
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-21');
+
+ // // change Effort Driven
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).click();
+ cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).uncheck();
+ });
+});