test: reorder child items

cypress/integration/item/order/reorderItems.spec.js

@@ -0,0 +1,29 @@
+import { buildItemPath } from '../../../../src/config/paths';
+import { SAMPLE_ITEMS } from '../../../fixtures/items';
+import { buildItemsTableRowId } from '../../../../src/config/selectors';
+
+describe('Order Items', () => {
+  it('move item to a spot below', () => {
+    cy.setUpApi(SAMPLE_ITEMS);
+
+    const { id: parentId } = SAMPLE_ITEMS.items[0];
+
+    cy.visit(buildItemPath(parentId));
+
+    const { id: childId } = SAMPLE_ITEMS.items[2];
+
+    const childEl = `#${buildItemsTableRowId(childId)}`;
+
+    cy.dragAndDrop(childEl, 0, 500);
+
+    cy.wait('@editItem').then(
+      ({
+        response: {
+          body: { extra },
+        },
+      }) => {
+        expect(extra.folder.childrenOrder[1]).to.equal(childId);
+      },
+    );
+  });
+});

cypress/support/commands/item.js

@@ -130,3 +130,33 @@ Cypress.Commands.add(
     }
   },
 );
+
+Cypress.Commands.add('dragAndDrop', (subject, x, y) => {
+  cy.get(subject)
+    .first()
+    // eslint-disable-next-line no-shadow
+    .then((subject) => {
+      const coordsDrag = subject[0].getBoundingClientRect();
+      cy.wrap(subject)
+        .trigger('mousedown', {
+          button: 0,
+          clientX: coordsDrag.x,
+          clientY: coordsDrag.y,
+          force: true,
+        })
+        .trigger('mousemove', {
+          button: 0,
+          clientX: coordsDrag.x + 10,
+          clientY: coordsDrag.y,
+          force: true,
+        });
+      cy.get('body')
+        .trigger('mousemove', {
+          button: 0,
+          clientX: x,
+          clientY: y,
+          force: true,
+        })
+        .trigger('mouseup');
+    });
+});