From 4ac83db3b6351195a23754771c9d85725cc34307 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <ghislain.beaulac@se.com>
Date: Fri, 17 Jul 2020 09:15:15 -0400
Subject: [PATCH 1/2] feat(tests): add more Cypress E2E tests for grid with
 Editors

---
 src/app/examples/grid-editor.component.html |  24 +--
 src/app/examples/grid-editor.component.ts   |   2 +-
 test/cypress/integration/example03.spec.js  | 189 ++++++++++++++++++++
 3 files changed, 202 insertions(+), 13 deletions(-)
 create mode 100644 test/cypress/integration/example03.spec.js

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 @@ <h2>{{title}}</h2>
     <span id="radioAutoEdit">
       <label class="radio-inline control-label" for="radioTrue">
         <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit"
-          (change)="setAutoEdit(true)"> ON (single-click)
+               (change)="setAutoEdit(true)"> ON (single-click)
       </label>
       <label class="radio-inline control-label" for="radioFalse">
         <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit"
-          (change)="setAutoEdit(false)"> OFF (double-click)
+               (change)="setAutoEdit(false)"> OFF (double-click)
       </label>
     </span>
     <div class="row col-sm-12">
@@ -21,8 +21,8 @@ <h2>{{title}}</h2>
           Undo last edit(s)
         </button>
         <label class="checkbox-inline control-label" for="autoCommitEdit">
-          <input type="checkbox" id="autoCommitEdit" [checked]="gridOptions.autoCommitEdit"
-            (click)="changeAutoCommit()">
+          <input type="checkbox" id="autoCommitEdit" data-test="auto-commit" [checked]="gridOptions.autoCommitEdit"
+                 (click)="changeAutoCommit()">
           Auto Commit Edit
         </label>
       </span>
@@ -31,15 +31,15 @@ <h2>{{title}}</h2>
       <button class="btn btn-default btn-sm" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
       <button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
       <button class="btn btn-default btn-sm btn-info" (click)="addItem()"
-        title="Clear Filters &amp; Sorting to see it better">Add item</button>
+              title="Clear Filters &amp; Sorting to see it better">Add item</button>
       <button class="btn btn-default btn-sm btn-danger" (click)="deleteItem()">Delete item</button>
     </div>
     <div class="row" style="margin-top: 5px">
-      <button class="btn btn-default btn-sm" (click)="dynamicallyAddTitleHeader()">
+      <button class="btn btn-default btn-sm" data-test="add-title-column" (click)="dynamicallyAddTitleHeader()">
         <i class="fa fa-plus"></i>
         Dynamically Duplicate Title Column
       </button>
-      <button class="btn btn-default btn-sm" (click)="dynamicallyRemoveLastColumn()">
+      <button class="btn btn-default btn-sm" data-test="remove-title-column" (click)="dynamicallyRemoveLastColumn()">
         <i class="fa fa-minus"></i>
         Dynamically Remove Last Column
       </button>
@@ -58,11 +58,11 @@ <h2>{{title}}</h2>
   </div>
 
   <div class="col-sm-12 row">
-    <angular-slickgrid gridId="grid2" (onAngularGridCreated)="angularGridReady($event)"
-      (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
-      (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
-      (sgOnValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
-      [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+    <angular-slickgrid gridId="grid3" (onAngularGridCreated)="angularGridReady($event)"
+                       (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
+                       (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
+                       (sgOnValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
+                       [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
     </angular-slickgrid>
   </div>
 </div>
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 (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Editors" target="_blank">Wiki docs</a>).
   <ul>
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 @@
+/// <reference types="cypress" />
+
+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();
+  });
+});

From 67f27623a9c3ae69127ac24bd7602c37626fc363 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <ghislain.beaulac@se.com>
Date: Fri, 17 Jul 2020 09:16:07 -0400
Subject: [PATCH 2/2] refactor(core): update few npm packages

---
 package.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

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"