Dashboards/E2E: Add tests for drag and drop (#105066)

e2e/cypress/support/assertions.js

@@ -0,0 +1,45 @@
+const elementPositions = (_chai) => {
+  function assertIsHigherThan(el) {
+    this.assert(
+      this._obj.offset().top < el.offset().top,
+      'expected #{this} to be above target',
+      'expected #{this} to not be above target',
+      this._obj
+    );
+  }
+
+  function assertIsLowerThan(el) {
+    this.assert(
+      this._obj.offset().top > el.offset().top,
+      'expected #{this} to be below target',
+      'expected #{this} to not be below target',
+      this._obj
+    );
+  }
+
+  function assertIsLeftOf(el) {
+    this.assert(
+      this._obj.offset().left < el.offset().left,
+      'expected #{this} to be left of target',
+      'expected #{this} to not be left of target',
+      this._obj
+    );
+  }
+
+  function assertIsRightOf(el) {
+    this.assert(
+      this._obj.offset().left > el.offset().left,
+      'expected #{this} to be right of target',
+      'expected #{this} to not be right of target',
+      this._obj
+    );
+  }
+
+  // Would prefer 'above' and 'below', but those already exist for numeric comparisons. Not sure they can be overloaded.
+  _chai.Assertion.addMethod('higherThan', assertIsHigherThan);
+  _chai.Assertion.addMethod('lowerThan', assertIsLowerThan);
+  _chai.Assertion.addMethod('leftOf', assertIsLeftOf);
+  _chai.Assertion.addMethod('rightOf', assertIsRightOf);
+};
+
+chai.use(elementPositions);

e2e/cypress/support/e2e.js

@@ -1,4 +1,5 @@
 require('./commands');
+require('./assertions');
 
 Cypress.Screenshot.defaults({
   screenshotOnRunFailure: false,

e2e/cypress/support/index.d.ts

@@ -10,4 +10,11 @@ declare namespace Cypress {
     checkHealthRetryable(fn: Function, retryCount: number): Chainable;
     setLocalStorage(key: string, value: string);
   }
+
+  interface Chainer<Subject extends JQuery<HTMLElement>> {
+    (chainer: 'be.higherThan'): Chainable<Subject>;
+    (chainer: 'be.lowerThan'): Chainable<Subject>;
+    (chainer: 'be.leftOf'): Chainable<Subject>;
+    (chainer: 'be.rightOf'): Chainable<Subject>;
+  }
 }