@dhis2-ui/transfer 10.13.1 → 10.14.0

package/build/cjs/__e2e__/reorder-with-buttons.e2e.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.HasSomeSelected = void 0;
+exports.default = exports.HasThreeSelected = exports.HasSomeSelected = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _transfer = require("../transfer.js");
 var _options = require("./common/options.js");
@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 var _default = exports.default = {
   title: 'Transfer Reorder Buttons'
 };
-const HasSomeSelected = (_, _ref) => {
+const renderReorderTransfer = (_, _ref) => {
   let {
     selected,
     onChange
@@ -24,14 +24,25 @@ const HasSomeSelected = (_, _ref) => {
     options: _options.options
   });
 };
-exports.HasSomeSelected = HasSomeSelected;
+const HasSomeSelected = exports.HasSomeSelected = renderReorderTransfer.bind({});
 HasSomeSelected.story = {
   decorators: [(0, _statefulDecorator.statefulDecorator)({
-    initialState: _options.options.slice(0, 3).map(_ref2 => {
+    initialState: _options.options.slice(0, 8).map(_ref2 => {
       let {
         value
       } = _ref2;
       return value;
     })
   })]
+};
+const HasThreeSelected = exports.HasThreeSelected = renderReorderTransfer.bind({});
+HasThreeSelected.story = {
+  decorators: [(0, _statefulDecorator.statefulDecorator)({
+    initialState: _options.options.slice(0, 3).map(_ref3 => {
+      let {
+        value
+      } = _ref3;
+      return value;
+    })
+  })]
 };

package/build/cjs/__tests__/helper/default-filter-callback.test.js

@@ -39,4 +39,10 @@ describe('Transfer - defaultFilterCallback', () => {
     const actual = (0, _defaultFilterCallback.defaultFilterCallback)(options, filter);
     expect(actual).toEqual(expected);
   });
+  it('should return all options when the filter is invalid regexp', () => {
+    const filter = '(';
+    const expected = options;
+    const actual = (0, _defaultFilterCallback.defaultFilterCallback)(options, filter);
+    expect(actual).toEqual(expected);
+  });
 });

package/build/cjs/__tests__/helper/is-reorder-down-disabled.test.js

@@ -4,35 +4,74 @@ var _isReorderDownDisabled = require("../../transfer/is-reorder-down-disabled.js
 describe('Transfer - isReorderDownDisabled', () => {
   const selected = ['foo', 'bar', 'baz'];
   it('should return true when there are no highlighted picked options', () => {
-    const highlightedPickedOptions = [];
     const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: [],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return true when there are multiple highlighted picked options', () => {
-    const highlightedPickedOptions = ['bar', 'foo'];
+  it('should return true if the last picked option is the only highlighted one', () => {
     const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['baz'],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return true if the last picked option is highlighted', () => {
-    const highlightedPickedOptions = ['baz'];
+  it('should return false when one picked option is highlighted which is not the last one', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['bar'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should return false for a contiguous multi-select not flush to the bottom', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['foo', 'bar'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should return true for a contiguous multi-select flush to the bottom', () => {
     const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['bar', 'baz'],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return false when one picked option is highlighted which is not the last one', () => {
-    const highlightedPickedOptions = ['bar'];
+  it('should return true when all items are highlighted', () => {
     const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['foo', 'bar', 'baz'],
+      selected
+    });
+    expect(actual).toBe(true);
+  });
+  it('should return false for a non-contiguous selection containing the last item', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['foo', 'baz'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['ghost', 'foo'],
       selected
     });
     expect(actual).toBe(false);
   });
+  it('should return true when all highlighted values are missing from selected', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['ghost'],
+      selected
+    });
+    expect(actual).toBe(true);
+  });
+  it('should return true when a filter is active on the picked side', () => {
+    const actual = (0, _isReorderDownDisabled.isReorderDownDisabled)({
+      highlightedPickedOptions: ['foo'],
+      selected,
+      filterActivePicked: true
+    });
+    expect(actual).toBe(true);
+  });
 });

package/build/cjs/__tests__/helper/is-reorder-up-disabled.test.js

@@ -4,35 +4,74 @@ var _isReorderUpDisabled = require("../../transfer/is-reorder-up-disabled.js");
 describe('Transfer - isReorderUpDisabled', () => {
   const selected = ['foo', 'bar', 'baz'];
   it('should return true when there are no highlighted picked options', () => {
-    const highlightedPickedOptions = [];
     const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: [],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return true when there are multiple highlighted picked options', () => {
-    const highlightedPickedOptions = ['bar', 'baz'];
+  it('should return true if the first picked option is the only highlighted one', () => {
     const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['foo'],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return true if the first picked option is highlighted', () => {
-    const highlightedPickedOptions = ['foo'];
+  it('should return false when one picked option is highlighted which is not the first one', () => {
     const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['baz'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should return false for a contiguous multi-select not flush to the top', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['bar', 'baz'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should return true for a contiguous multi-select flush to the top', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['foo', 'bar'],
+      selected
+    });
+    expect(actual).toBe(true);
+  });
+  it('should return true when all items are highlighted', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['foo', 'bar', 'baz'],
       selected
     });
     expect(actual).toBe(true);
   });
-  it('should return false when one picked option is highlighted which is not the last one', () => {
-    const highlightedPickedOptions = ['baz'];
+  it('should return false for a non-contiguous selection containing the first item', () => {
     const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
-      highlightedPickedOptions,
+      highlightedPickedOptions: ['foo', 'baz'],
       selected
     });
     expect(actual).toBe(false);
   });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['ghost', 'baz'],
+      selected
+    });
+    expect(actual).toBe(false);
+  });
+  it('should return true when all highlighted values are missing from selected', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['ghost'],
+      selected
+    });
+    expect(actual).toBe(true);
+  });
+  it('should return true when a filter is active on the picked side', () => {
+    const actual = (0, _isReorderUpDisabled.isReorderUpDisabled)({
+      highlightedPickedOptions: ['baz'],
+      selected,
+      filterActivePicked: true
+    });
+    expect(actual).toBe(true);
+  });
 });

package/build/cjs/__tests__/helper/move-highlighted-picked-option-down.test.js

@@ -3,15 +3,13 @@
 var _moveHighlightedPickedOptionDown = require("../../transfer/move-highlighted-picked-option-down.js");
 describe('Transfer - moveHighlightedPickedOptionDown', () => {
   const onChange = jest.fn();
-  const selected = ['foo', 'bar', 'baz'];
   afterEach(() => {
     onChange.mockClear();
   });
-  it('should move the highlighted option down', () => {
-    const highlighted = ['bar'];
+  it('should move a single highlighted option down', () => {
     (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['bar'],
       onChange
     });
     expect(onChange).toHaveBeenCalledWith({
@@ -19,21 +17,77 @@ describe('Transfer - moveHighlightedPickedOptionDown', () => {
     });
   });
   it('should do nothing when trying to move down the last option', () => {
-    const highlighted = ['baz'];
     (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['baz'],
       onChange
     });
     expect(onChange).toHaveBeenCalledTimes(0);
   });
   it('should do nothing when trying to move down a non-existing option', () => {
-    const highlighted = ['foobar'];
     (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['ghost'],
       onChange
     });
     expect(onChange).toHaveBeenCalledTimes(0);
   });
+  it('should shift a contiguous block of highlighted options down as a group', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'd', 'b', 'c', 'e']
+    });
+  });
+  it('should collapse and shift a non-contiguous selection down in one call', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'e', 'b', 'd']
+    });
+  });
+  it('should preserve the relative order of highlighted items regardless of input order', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['d', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'e', 'b', 'd']
+    });
+  });
+  it('should collapse a non-contiguous selection containing the last item without shifting past the end', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['a', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'a', 'c']
+    });
+  });
+  it('should do nothing when the highlighted block is already flush to the bottom', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['c', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    (0, _moveHighlightedPickedOptionDown.moveHighlightedPickedOptionDown)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost', 'a'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'a', 'c']
+    });
+  });
 });

package/build/cjs/__tests__/helper/move-highlighted-picked-option-to-bottom.test.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _moveHighlightedPickedOptionToBottom = require("../../transfer/move-highlighted-picked-option-to-bottom.js");
+describe('Transfer - moveHighlightedPickedOptionToBottom', () => {
+  const onChange = jest.fn();
+  afterEach(() => {
+    onChange.mockClear();
+  });
+  it('should move a single highlighted option to the bottom', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'd', 'b']
+    });
+  });
+  it('should move a contiguous block to the bottom as a group', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'd', 'e', 'b', 'c']
+    });
+  });
+  it('should collapse a non-contiguous selection to the bottom preserving relative order', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'e', 'b', 'd']
+    });
+  });
+  it('should preserve relative order regardless of highlight input order', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['d', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'e', 'b', 'd']
+    });
+  });
+  it('should do nothing when the highlighted block is already flush to the bottom', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['c', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should still run when the selection includes the bottom item but has a gap', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['b', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'b', 'd']
+    });
+  });
+  it('should do nothing when no highlighted options exist in selected', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    (0, _moveHighlightedPickedOptionToBottom.moveHighlightedPickedOptionToBottom)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost', 'a'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'c', 'a']
+    });
+  });
+});

package/build/cjs/__tests__/helper/move-highlighted-picked-option-to-top.test.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _moveHighlightedPickedOptionToTop = require("../../transfer/move-highlighted-picked-option-to-top.js");
+describe('Transfer - moveHighlightedPickedOptionToTop', () => {
+  const onChange = jest.fn();
+  afterEach(() => {
+    onChange.mockClear();
+  });
+  it('should move a single highlighted option to the top', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['c', 'a', 'b', 'd']
+    });
+  });
+  it('should move a contiguous block to the top as a group', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['c', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['c', 'd', 'a', 'b', 'e']
+    });
+  });
+  it('should collapse a non-contiguous selection to the top preserving relative order', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'd', 'a', 'c', 'e']
+    });
+  });
+  it('should preserve relative order regardless of highlight input order', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['d', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'd', 'a', 'c', 'e']
+    });
+  });
+  it('should do nothing when the highlighted block is already flush to the top', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['a', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should still run when the selection includes the top item but has a gap', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['a', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'b', 'd']
+    });
+  });
+  it('should do nothing when no highlighted options exist in selected', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    (0, _moveHighlightedPickedOptionToTop.moveHighlightedPickedOptionToTop)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['c', 'a', 'b']
+    });
+  });
+});

package/build/cjs/__tests__/helper/move-highlighted-picked-option-up.test.js

@@ -3,15 +3,13 @@
 var _moveHighlightedPickedOptionUp = require("../../transfer/move-highlighted-picked-option-up.js");
 describe('Transfer - moveHighlightedPickedOptionUp', () => {
   const onChange = jest.fn();
-  const selected = ['foo', 'bar', 'baz'];
   afterEach(() => {
     onChange.mockClear();
   });
-  it('should move the highlighted option up', () => {
-    const highlighted = ['bar'];
+  it('should move a single highlighted option up', () => {
     (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['bar'],
       onChange
     });
     expect(onChange).toHaveBeenCalledWith({
@@ -19,21 +17,77 @@ describe('Transfer - moveHighlightedPickedOptionUp', () => {
     });
   });
   it('should do nothing when trying to move up the first option', () => {
-    const highlighted = ['foo'];
     (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['foo'],
       onChange
     });
     expect(onChange).toHaveBeenCalledTimes(0);
   });
   it('should do nothing when trying to move up a non-existing option', () => {
-    const highlighted = ['foobar'];
     (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
-      selected,
-      highlightedPickedOptions: highlighted,
+      selected: ['foo', 'bar', 'baz'],
+      highlightedPickedOptions: ['ghost'],
       onChange
     });
     expect(onChange).toHaveBeenCalledTimes(0);
   });
+  it('should shift a contiguous block of highlighted options up as a group', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['c', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'd', 'b', 'e']
+    });
+  });
+  it('should collapse and shift a non-contiguous selection up in one call', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['b', 'd'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'd', 'a', 'c', 'e']
+    });
+  });
+  it('should preserve the relative order of highlighted items regardless of input order', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c', 'd', 'e'],
+      highlightedPickedOptions: ['d', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['b', 'd', 'a', 'c', 'e']
+    });
+  });
+  it('should collapse a non-contiguous selection containing the first item without shifting past index 0', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['a', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'b']
+    });
+  });
+  it('should do nothing when the highlighted block is already flush to the top', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c', 'd'],
+      highlightedPickedOptions: ['a', 'b'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+  it('should ignore highlighted values that do not exist in selected', () => {
+    (0, _moveHighlightedPickedOptionUp.moveHighlightedPickedOptionUp)({
+      selected: ['a', 'b', 'c'],
+      highlightedPickedOptions: ['ghost', 'c'],
+      onChange
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      selected: ['a', 'c', 'b']
+    });
+  });
 });