Widget resize tests

[ranbena]

What type of PR is this? (check all applicable)

• Other - Tests

Description

[ranbena]

Moved to parent node in order to locate the handle (which is a sibling)

https://github.com/getredash/redash/blob/689e1a63bff22e5e7cdc354890e5c576cd307ea1/cypress/integration/dashboard/dashboard_spec.js#L112-L116

[ranbena]

wip - I'm adding another resize related test

[ranbena]

Added 2 tests for auto height cause resizing disables it.

[ranbena]

@gabrieldutra this is ready for review

[gabrieldutra]

Not that different from the Drag tests 😁. Left some comments :)

[gabrieldutra]

Just to show a different way to assert the same thing:

expect(() => {
  // add 4 table rows
  cy.get('@paramInput').clear().type('5');
  cy.get('@refreshButton').click();
  cy.wait('@FreshResults');
}).not.to.change(this.widget, 'height');

[ranbena]

Oooh that's nice.

[ranbena]

But I don't think this specifically would work cause

1. height is a method, not a property.
2. this.widget is a cy object, not jquery.

Right?

[ranbena]

Ideally the dragBy and resizeBy functions would not return a delta value but instead:

it('moves one column', () => {
  const getLeft = () => $el.offset().left;
  const drag = () => dragBy($el, 200);

  expect(drag).to.increase(getLeft).by(200);
});

Then resizeBy would simply be a dragBy of the element's handle. So nice.

BUT, disconnecting the drag from the delta calculation is currently problematic since the dragged element animates to its new position on mouseup (compensated by calculating the drag placeholder position instead).
Any workaround suggestion? (wait for animation end, disable animation for test, ...)

[gabrieldutra]

Really cool, once I get to my laptop I'll run a few tests with it. For the questions:

But I don't think this specifically would work cause

It worked for success, need to try on failure haha. The assertion is essentially the same, they just run it before the function and then guarantee it's the same after.

height is a method, not a property

I hope not to have seen the above wrongly, but this is not supposed to be a problem

this.widget is a cy object, not jquery.

Need to confirm, but I think it is a jQuery object, when I saw it in docs it seemed the same as getting the result of cy.get('@widget')

[ranbena]

If you can make it work that would be awesome 👍

[gabrieldutra]

I could not 😅. That works well with javascript objects, not with elements (I could use a helper object to represent the element, but I don't think it is worth it for my example).

Yours is much better, it would make tests a lot more readable.

Any workaround suggestion?

Can we use the placeholder position for the getLeft method? If not, NP, we can move on.

[ranbena]

Can we use the placeholder position for the getLeft method? If not, NP, we can move on.

It doesn't get rendered in the dom until mousedown (or mousemove, I didn't check) so it's not ideal.