Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored dashboard drag/resize testing #3726

Merged
merged 2 commits into from
Apr 22, 2019
Merged

Refactored dashboard drag/resize testing #3726

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a0674e
Refactored dashboard drag/resize testing
ranbena Apr 19, 2019
7a88d8a
Code beautifying 🤩
ranbena Apr 22, 2019
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
114 changes: 45 additions & 69 deletions client/cypress/integration/dashboard/dashboard_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const DRAG_PLACEHOLDER_SELECTOR = '.grid-stack-placeholder';
const RESIZE_HANDLE_SELECTOR = '.ui-resizable-se';


Expand Down Expand Up @@ -82,55 +81,24 @@ function addWidgetByAPI(dashId, queryData = {}) {
});
}

function dragBy(wrapper, offsetLeft = 0, offsetTop = 0) {
function dragBy(wrapper, offsetLeft = 0, offsetTop = 0, force = false) {
let start;
let end;
return wrapper
.then(($el) => {
start = $el.offset();
return wrapper
.trigger('mousedown', { pageX: start.left, pageY: start.top, which: 1 })
.trigger('mousemove', { pageX: start.left + offsetLeft, pageY: start.top + offsetTop, which: 1 });
})
.then(() => {
// getting end position from placeholder instead of $el
// cause on mouseup, $el animates back to position
// and this is simpler than waiting for animationend
end = Cypress.$(DRAG_PLACEHOLDER_SELECTOR).offset();
return wrapper.trigger('mouseup');
})
.then(() => ({
left: end.left - start.left,
top: end.top - start.top,
}));
.trigger('mouseover', { force })
.trigger('mousedown', { pageX: start.left, pageY: start.top, which: 1, force })
.trigger('mousemove', { pageX: start.left + offsetLeft, pageY: start.top + offsetTop, which: 1, force })
.trigger('mouseup', { force });
});
}

function resizeBy(wrapper, offsetLeft = 0, offsetTop = 0) {
let start;
let end;
let from;
const getSize = $el => ({ height: $el.height(), width: $el.width() });

return wrapper
.then(($el) => {
start = getSize($el);
})
.within(() => cy.get(RESIZE_HANDLE_SELECTOR))
.then(($handle) => {
from = $handle.show().offset(); // turn on handle and get it's position
return wrapper
.trigger('mouseover', { force: true })
.trigger('mousedown', { pageX: from.left, pageY: from.top, force: true, which: 1 })
.trigger('mousemove', { pageX: from.left + offsetLeft, pageY: from.top + offsetTop, force: true, which: 1 });
})
.then(() => {
end = getSize(Cypress.$(DRAG_PLACEHOLDER_SELECTOR)); // see comment in dragBy ^^
return wrapper.trigger('mouseup', { force: true });
})
.then(() => ({
height: end.height - start.height,
width: end.width - start.width,
}));
.within(() => {
dragBy(cy.get(RESIZE_HANDLE_SELECTOR), offsetLeft, offsetTop, true);
});
}

describe('Dashboard', () => {
Expand Down Expand Up @@ -342,20 +310,20 @@ describe('Dashboard', () => {
});

it('stays put when dragged under snap threshold', () => {
dragBy(cy.get('@textboxEl'), 90).then((delta) => {
expect(delta.left).to.eq(0);
dragBy(cy.get('@textboxEl'), 90).should(($el) => {
expect($el.offset().left).to.eq(15); // no change, 15 -> 15
});
});

it('moves one column when dragged over snap threshold', () => {
dragBy(cy.get('@textboxEl'), 110).then((delta) => {
expect(delta.left).to.eq(200);
dragBy(cy.get('@textboxEl'), 110).should(($el) => {
expect($el.offset().left).to.eq(215); // moved by 200, 15 -> 215
});
});

it('moves two columns when dragged over snap threshold', () => {
dragBy(cy.get('@textboxEl'), 330).then((delta) => {
expect(delta.left).to.eq(400);
dragBy(cy.get('@textboxEl'), 330).should(($el) => {
ranbena marked this conversation as resolved.
Show resolved Hide resolved
expect($el.offset().left).to.eq(415); // moved by 400, 15 -> 415
});
});
});
Expand All @@ -378,21 +346,27 @@ describe('Dashboard', () => {
});

it('stays put when dragged under snap threshold', () => {
resizeBy(cy.get('@textboxEl'), 90).then((delta) => {
expect(delta.width).to.eq(0);
});
resizeBy(cy.get('@textboxEl'), 90)
.then(() => cy.get('@textboxEl'))
.should(($el) => {
expect($el.width()).to.eq(600); // no change, 600 -> 600
});
});

it('moves one column when dragged over snap threshold', () => {
resizeBy(cy.get('@textboxEl'), 110).then((delta) => {
expect(delta.width).to.eq(200);
});
resizeBy(cy.get('@textboxEl'), 110)
.then(() => cy.get('@textboxEl'))
.should(($el) => {
expect($el.width()).to.eq(800); // resized by 200, 600 -> 800
});
});

it('moves two columns when dragged over snap threshold', () => {
resizeBy(cy.get('@textboxEl'), 400).then((delta) => {
expect(delta.width).to.eq(400);
});
resizeBy(cy.get('@textboxEl'), 400)
.then(() => cy.get('@textboxEl'))
.should(($el) => {
expect($el.width()).to.eq(1000); // resized by 400, 600 -> 1000
});
});
});

Expand All @@ -402,26 +376,28 @@ describe('Dashboard', () => {
});

it('stays put when dragged under snap threshold', () => {
resizeBy(cy.get('@textboxEl'), 0, 10).then((delta) => {
expect(delta.height).to.eq(0);
});
resizeBy(cy.get('@textboxEl'), 0, 10)
.then(() => cy.get('@textboxEl'))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this being necessary is a sign that passing a cy.get() as an argument is an anti-pattern (similar to this one). We should rather use it as a Cypress command or pass something else as argument.

For now I think it's ok to leave as is, but let's keep in mind this to when we discover a better way to treat those helper commands.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I worked on making dragBy and resizeBy into commands but it didn't go smooth so I'm leaving as is to keep moving forward.

.should(($el) => {
expect($el.height()).to.eq(135); // no change, 135 -> 135
});
});

it('moves one row when dragged over snap threshold', () => {
resizeBy(cy.get('@textboxEl'), 0, 30).then((delta) => {
expect(delta.height).to.eq(50);
});
resizeBy(cy.get('@textboxEl'), 0, 30)
.then(() => cy.get('@textboxEl'))
.should(($el) => {
expect($el.height()).to.eq(185); // resized by 50, , 135 -> 185
});
});

it('shrinks to minimum', () => {
cy.get('@textboxEl')
.then(($el) => {
resizeBy(cy.get('@textboxEl'), -$el.width(), -$el.height()); // resize to 0,0
return cy.get('@textboxEl');
})
.then(($el) => {
expect($el.width()).to.eq(200);
expect($el.height()).to.eq(35);
.then($el => resizeBy(cy.get('@textboxEl'), -$el.width(), -$el.height())) // resize to 0,0
.then(() => cy.get('@textboxEl'))
.should(($el) => {
expect($el.width()).to.eq(200); // min textbox width
expect($el.height()).to.eq(35); // min textbox height
});
});
});
Expand Down