Skip to content

Commit

Permalink
fix(plugin): check usabilityOverride before accepting new position (#485
Browse files Browse the repository at this point in the history 
)

* fix(plugin): check usabilityOverride before accepting new position
- we should not allow a row to be moved where it's not possible (where the "usabilityOverride" returns false)

* refactor(tests): update Cypress and add E2E tests

* refactor(readme): fix typo and tweak the text

Co-authored-by: Ghislain Beaulac <ghislain.beaulac@se.com>
  • Loading branch information
@ghiscoding @ghiscoding-SE
ghiscoding and ghiscoding-SE authored May 6, 2020
1 parent ace612e commit dc554f5
Show file tree
Hide file tree
Showing 5 changed files with 240 additions and 106 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ Check out the **[Examples](https://github.com/6pac/SlickGrid/wiki/Examples)** fo
Also check out the [Wiki](https://github.com/6pac/SlickGrid/wiki) for news and documentation.

### E2E Tests with Cypress
We are now starting to add E2E (end to end) tests in the browser with [Cypress](https://www.cypress.io/). You can see [here](https://github.com/6pac/SlickGrid/tree/master/cypress/integration) the list of Examples that now have E2E tests. We also added these Cypress E2E tests to the [GitHub Actions](https://github.com/features/actions) Workflow to automate certain steps while making sure any new commits aren't breaking the build/test. It will basically run all the E2E tests every time someone pushes a commit or a PR.
We are now starting to add E2E (end to end) tests in the browser with [Cypress](https://www.cypress.io/). You can see [here](https://github.com/6pac/SlickGrid/tree/master/cypress/integration) the list of Examples that now have E2E tests. We also added these tests to the [GitHub Actions](https://github.com/features/actions) Workflow to automate certain steps while making sure any new commits aren't breaking the build/test. It will basically run all the E2E tests every time someone pushes a Commit or a Pull Request.

We also welcome any contributions (tests or fixes) and if you wish to add Cypress E2E tests, all you need to do is to clone the repo and then run the following commands
We also welcome any new contributions (tests or fixes) and if you wish to add Cypress E2E tests, all you need to do is to clone the repo and then run the following commands
```bash
npm install # install all npm packages
npm run server # run a local http server
npm run cypress:open # open Cypress tool
npm install # install all npm packages
npm run serve # run a local http server on port 8080
npm run cypress:open # open Cypress tool
```
Once Cypress UI is open, you can click on "Run all Specs" to start the E2E browser tests.
Once the Cypress UI is open, you can then click on "Run all Specs" to execute all E2E browser tests.
79 changes: 50 additions & 29 deletions cypress/integration/example-row-detail-selection-and-move.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,19 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
.should('have.length', 0);
});

it('should drag opened Row Detail to another position in the grid', () => {
it('should drag opened Row Detail to another valid position in the grid', () => {
cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
cy.get('[style="top:75px"] > .slick-cell.cell-reorder').as('moveIconTask3');

cy.get('@moveIconTask3').should('have.length', 1);
cy.get('[style="top:100px"]').as('expandIconTask4');

cy.get('@moveIconTask3')
.trigger('mousedown', { button: 0, force: true })
.trigger('mousemove', 'bottomRight');

cy.get('@moveIconTask1')
.trigger('mousemove', 'bottomRight')
cy.get('[style="top:100px"]')
.trigger('mousemove', 'bottomRight', { force: true });

cy.get('[style="top:100px"]')
.trigger('mouseup', 'bottomRight', { force: true });

cy.get('input[type="checkbox"]:checked')
Expand All @@ -63,73 +64,93 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {

cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 3');

cy.get('input[type="checkbox"]:checked')
.should('have.length', 0);
});

it('should try moving a row to an invalid target and expect nothing moved (same rows as prior test)', () => {
cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
cy.get('[style="top:100px"]').as('expandIconTask4');

cy.get('@moveIconTask1')
.trigger('mousedown', { button: 0, force: true })
.trigger('mousemove', 'bottomRight');

cy.get('[style="top:75px"]')
.trigger('mousemove', 'topRight', { force: true });

cy.get('[style="top:75px"]')
.trigger('mouseup', 'topRight', { force: true });

cy.get('input[type="checkbox"]:checked')
.should('have.length', 0);
});

it('should select 2 rows (Task 3,4), then move row and expect the 2 rows to still be selected without any others', () => {
cy.get('[style="top:50px"] > .slick-cell:nth(2)').click();
it('should select 2 rows (Task 1,3), then move row and expect the 2 rows to still be selected without any other rows', () => {
cy.get('[style="top:25px"] > .slick-cell:nth(2)').click();
cy.get('[style="top:100px"] > .slick-cell:nth(2)').click();

cy.get('[style="top:50px"] > .slick-cell.cell-reorder').as('moveIconTask3');
cy.get('[style="top:125px"] > .slick-cell.cell-reorder').as('moveIconTask5');
cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
cy.get('[style="top:150px"]').as('moveIconTask3');

cy.get('@moveIconTask3').should('have.length', 1);
cy.get('@moveIconTask1').should('have.length', 1);

cy.get('@moveIconTask3')
cy.get('@moveIconTask1')
.trigger('mousedown', { button: 0, force: true })
.trigger('mousemove', 'bottomRight');

cy.get('@moveIconTask5')
.trigger('mousemove', 'bottomRight')
cy.get('@moveIconTask3')
.trigger('mousemove', 'bottomRight', { force: true })
.trigger('mouseup', 'bottomRight', { force: true });

cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 5');
cy.get('[style="top:125px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
cy.get('[style="top:125px"] > .slick-cell:nth(4)').should('contain', 'Task 6');
cy.get('[style="top:150px"] > .slick-cell:nth(4)').should('contain', 'Task 1');

// Task 4 and 3 should be selected
cy.get('input[type="checkbox"]:checked').should('have.length', 2);
cy.get('[style="top:75px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
cy.get('[style="top:125px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
cy.get('[style="top:150px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
});

it('should click on "Single Row Move OFF", then drag a row and expect both selected rows to be moved together', () => {
cy.contains('Single Row Move OFF').click();

cy.get('[style="top:175px"] > .slick-cell.cell-reorder').as('moveIconTask7');
cy.get('[style="top:125px"] > .slick-cell.cell-reorder').as('moveIconTask3');
cy.get('[style="top:75px"] > .slick-cell.cell-reorder').as('moveIconTask3');

cy.get('@moveIconTask3').should('have.length', 1);

cy.get('@moveIconTask3')
.trigger('mousedown', { button: 0, force: true })
.trigger('mousemove', 'bottomRight');

cy.get('@moveIconTask7')
.trigger('mousemove', 'bottomRight')
cy.get('[style="top:200px"]')
.trigger('mousemove', 'bottomRight', { force: true })
.trigger('mouseup', 'bottomRight', { force: true });

cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 5');
cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 6');
cy.get('[style="top:125px"] > .slick-cell:nth(4)').should('contain', 'Task 7');
cy.get('[style="top:150px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
cy.get('[style="top:150px"] > .slick-cell:nth(4)').should('contain', 'Task 8');
cy.get('[style="top:175px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
cy.get('[style="top:200px"] > .slick-cell:nth(4)').should('contain', 'Task 1');

// Task 4 and 3 should be selected
// // Task 1 and 3 should be selected
cy.get('input[type="checkbox"]:checked').should('have.length', 2);
cy.get('[style="top:150px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
cy.get('[style="top:175px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
cy.get('[style="top:200px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
});

it('should open the Task 3 Row Detail and still expect same detail', () => {
Expand Down
Loading

0 comments on commit dc554f5

Please sign in to comment.