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>;
+  }
 }

e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts

@@ -0,0 +1,34 @@
+import { e2e } from '../utils';
+
+const PAGE_UNDER_TEST = 'ed155665/annotation-filtering';
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can drag and drop panels', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.movePanel(/^Panel three$/, /^Panel one$/);
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel three$/)
+      .then((panel3) => {
+        e2e.components.Panels.Panel.headerContainer()
+          .contains(/^Panel one$/)
+          .should('be.lowerThan', panel3);
+      });
+
+    e2e.flows.scenes.movePanel(/^Panel two$/, /^Panel three$/);
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel three$/)
+      .then((panel3) => {
+        e2e.components.Panels.Panel.headerContainer()
+          .contains(/^Panel two$/)
+          .should('be.higherThan', panel3);
+      });
+  });
+});

e2e/utils/flows/scenes/index.ts

@@ -2,5 +2,6 @@ export * from './addPanel';
 export * from './configurePanel';
 export * from './removePanel';
 export * from './toggleEditMode';
+export * from './movePanel';
 export * from './groupPanels';
 export * from './saveDashboard';

e2e/utils/flows/scenes/movePanel.ts

@@ -0,0 +1,15 @@
+import { e2e } from '../..';
+
+/** Drags and drops the panel with title `sourcePanel` to the location of the panel with title `targetPanel` */
+export const movePanel = (sourcePanel: string | RegExp, targetPanel: string | RegExp) => {
+  e2e.components.Panels.Panel.headerContainer()
+    .contains(targetPanel)
+    .then((el) => {
+      const rect = el.offset();
+      e2e.components.Panels.Panel.headerContainer()
+        .contains(sourcePanel)
+        .trigger('mousedown', { which: 1 })
+        .trigger('mousemove', { clientX: rect.left, clientY: rect.top })
+        .trigger('mouseup', { force: true });
+    });
+};