Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

feat(tests): add more Cypress E2E tests for grid with Editors #532

Merged
merged 2 commits into from
Jul 18, 2020
Merged

feat(tests): add more Cypress E2E tests for grid with Editors #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ac83db
feat(tests): add more Cypress E2E tests for grid with Editors
ghiscoding-SE Jul 17, 2020
67f2762
refactor(core): update few npm packages
ghiscoding-SE Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,44 +123,44 @@
"@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",
"jest-junit": "^6.4.0",
"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"
Expand Down
24 changes: 12 additions & 12 deletions src/app/examples/grid-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion src/app/examples/grid-editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
189 changes: 189 additions & 0 deletions test/cypress/integration/example03.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});