cover custom fields drag and drop with tests (#852)

karma.conf.js

@@ -3,7 +3,7 @@ module.exports = (config) => {
     browserStack: {
       project: 'stripes-smart-components'
     },
-
+    client: { captureConsole: false },
     browserDisconnectTimeout: 3e5,
     browserDisconnectTolerance: 3,
     browserNoActivityTimeout: 3e5,

lib/CustomFields/components/CustomFieldsForm/tests/CustomFieldsForm-test.js

@@ -97,6 +97,78 @@ describe('CustomFieldsForm', () => {
     });
   });
 
+  describe('when custom fields accordions are reordered', () => {
+    const saveCustomFieldsHandler = sinon.spy();
+
+    beforeEach(async () => {
+      saveCustomFieldsHandler.resetHistory();
+
+      await renderComponent({
+        saveCustomFields: saveCustomFieldsHandler,
+        initialValues: {
+          customFields: [
+            {
+              id: 'field_1',
+              values: {
+                entityType: 'user',
+                helpText: '',
+                hidden: false,
+                name: 'Facebook ID',
+                order: 1,
+                required: false,
+                type: 'TEXTBOX_SHORT',
+                visible: true,
+              },
+            },
+            {
+              id: 'field_2',
+              values: {
+                entityType: 'user',
+                helpText: '',
+                hidden: false,
+                name: 'Facebook ID 2',
+                order: 2,
+                required: false,
+                type: 'TEXTBOX_SHORT',
+                visible: true,
+              },
+            },
+          ],
+          sectionTitle: 'Custom fields',
+        }
+      });
+
+      await customFieldsForm.moveAccordionDown();
+    });
+
+    it('should display fields in the correct order', () => {
+      expect(customFieldsForm.customFieldAccordions(0).label).to.equal('Facebook ID 2 · Text field');
+      expect(customFieldsForm.customFieldAccordions(1).label).to.equal('Facebook ID · Text field');
+    });
+
+    it('should save custom fields', () => {
+      expect(saveCustomFieldsHandler.called).to.be.true;
+    });
+
+    describe('and then some data is filled in before custom fields are reordered', () => {
+      beforeEach(async () => {
+        saveCustomFieldsHandler.resetHistory();
+
+        await customFieldsForm.fillSectionTitle('New custom fields');
+        await customFieldsForm.moveAccordionUp();
+      });
+
+      it('should display fields in the correct order', () => {
+        expect(customFieldsForm.customFieldAccordions(0).label).to.equal('Facebook ID · Text field');
+        expect(customFieldsForm.customFieldAccordions(1).label).to.equal('Facebook ID 2 · Text field');
+      });
+
+      it('should not save custom fields', () => {
+        expect(saveCustomFieldsHandler.called).to.be.false;
+      });
+    });
+  });
+
   describe('when editing section title', () => {
     describe('filling in valid data', () => {
       beforeEach(async () => {

lib/CustomFields/components/CustomFieldsForm/tests/DraggableAccordionInteractor.js

@@ -0,0 +1,32 @@
+import {
+  interactor,
+  focusable,
+  triggerable,
+} from '@bigtest/interactor';
+
+@interactor class DraggableAccordion {
+  focus = focusable();
+
+  pressSpace = triggerable('keydown', {
+    bubbles: true,
+    cancelable: true,
+    keyCode: 32,
+    which: 32,
+  });
+
+  pressArrowUp = triggerable('keydown', {
+    bubbles: true,
+    cancelable: true,
+    keyCode: 38,
+    key: 'ArrowUp',
+  });
+
+  pressArrowDown = triggerable('keydown', {
+    bubbles: true,
+    cancelable: true,
+    keyCode: 40,
+    key: 'ArrowDown',
+  });
+}
+
+export default DraggableAccordion;

lib/CustomFields/components/CustomFieldsForm/tests/interactor.js

@@ -8,13 +8,16 @@ import {
   blurrable,
   clickable,
   is,
+  scoped,
+  text,
 } from '@bigtest/interactor';
 
 import ButtonInteractor from '@folio/stripes-components/lib/Button/tests/interactor';
 import { AccordionInteractor } from '@folio/stripes-components/lib/Accordion/tests/interactor';
 import ExpandAllButtonInteractor from '@folio/stripes-components/lib/Accordion/tests/expand-all-button-interactor';
 import AddButtonInteractor from '../components/AddButton/tests/interactor';
 import DeleteModalInteractor from '../components/DeleteModal/tests/interactor';
+import DraggableAccordionInteractor from './DraggableAccordionInteractor';
 
 export default interactor(class CustomFieldsFormInteractor {
   formIsPresent = isPresent('[class^=custom-fields-form--]');
@@ -39,6 +42,42 @@ export default interactor(class CustomFieldsFormInteractor {
 
   deleteModal = new DeleteModalInteractor();
 
+  draggableAccordion = scoped('#field_1', DraggableAccordionInteractor);
+
+  log = text('[role="log"]');
+
+  moveAccordionDown() {
+    return this.draggableAccordion.focus()
+      .draggableAccordion.pressSpace()
+      .whenFieldLifted()
+      .draggableAccordion.pressArrowDown()
+      .whenFieldMoved()
+      .draggableAccordion.pressSpace()
+      .whenFieldDropped();
+  }
+
+  moveAccordionUp() {
+    return this.draggableAccordion.focus()
+      .draggableAccordion.pressSpace()
+      .whenFieldLifted()
+      .draggableAccordion.pressArrowUp()
+      .whenFieldMoved()
+      .draggableAccordion.pressSpace()
+      .whenFieldDropped();
+  }
+
+  whenFieldLifted() {
+    return this.when(() => !!this.log.match(/You have lifted field/i));
+  }
+
+  whenFieldMoved() {
+    return this.when(() => !!this.log.match(/You have moved field [a-zA-Z0-9\s]+ to position \d+/i));
+  }
+
+  whenFieldDropped() {
+    return this.when(() => !!this.log.match(/You have moved field [a-zA-Z0-9\s]+ from position \d+ to position \d+/i));
+  }
+
   whenLoaded() {
     return this.when(() => this.formIsPresent).timeout(500);
   }