@dhis2-ui/transfer 10.16.2 → 10.16.3

package/src/__tests__/common.test.js

@@ -0,0 +1,131 @@
+import {
+    ADD_MODE,
+    RANGE_MODE,
+    REPLACE_MODE,
+    findOptionIndex,
+    getModeByModifierKey,
+    isOption,
+    toggleValue,
+} from '../common/index.js'
+
+describe('Transfer - isOption', () => {
+    it('should return true when the options are the same', () => {
+        const option1 = { label: 'foo', value: 'bar' }
+        const option2 = { label: 'foo', value: 'bar' }
+        const actual = isOption(option1, option2)
+        const expected = true
+
+        expect(actual).toBe(expected)
+    })
+
+    it('should return false when the labels do not match', () => {
+        const option1 = { label: 'foo', value: 'bar' }
+        const option2 = { label: 'baz', value: 'bar' }
+        const actual = isOption(option1, option2)
+        const expected = false
+
+        expect(actual).toBe(expected)
+    })
+
+    it('should return false when the values do not match', () => {
+        const option1 = { label: 'foo', value: 'bar' }
+        const option2 = { label: 'foo', value: 'baz' }
+        const actual = isOption(option1, option2)
+        const expected = false
+
+        expect(actual).toBe(expected)
+    })
+})
+
+describe('Transfer - findOptionIndex', () => {
+    it('should return index 1', () => {
+        const options = [
+            { label: 'foo', value: 'bar' },
+            { label: 'foo', value: 'baz' },
+        ]
+        const option = { label: 'foo', value: 'baz' }
+        const actual = findOptionIndex(options, option)
+        const expected = 1
+
+        expect(actual).toBe(expected)
+    })
+
+    it('should return -1 when the option is not included', () => {
+        const options = [
+            { label: 'foo', value: 'bar' },
+            { label: 'foo', value: 'baz' },
+        ]
+        const option = { label: 'baz', value: 'baz' }
+        const actual = findOptionIndex(options, option)
+        const expected = -1
+
+        expect(actual).toBe(expected)
+    })
+})
+
+describe('Transfer - toggleValue', () => {
+    it('should remove the last value from the array when value inside array', () => {
+        const values = ['foo', 'bar', 'baz']
+        const value = 'baz'
+        const expected = ['foo', 'bar']
+        const actual = toggleValue(values, value)
+
+        expect(actual).toEqual(expected)
+    })
+
+    it('should remove the first value from the array when value inside array', () => {
+        const values = ['foo', 'bar', 'baz']
+        const value = 'foo'
+        const expected = ['bar', 'baz']
+        const actual = toggleValue(values, value)
+
+        expect(actual).toEqual(expected)
+    })
+
+    it('should add the value if not inside the array', () => {
+        const values = ['foo', 'bar']
+        const value = 'baz'
+        const expected = ['foo', 'bar', 'baz']
+        const actual = toggleValue(values, value)
+
+        expect(actual).toEqual(expected)
+    })
+})
+
+describe('Transfer - getModeByModifierKey', () => {
+    it('should return REPLACE_MODE when more than one key is pressed', () => {
+        const expected = REPLACE_MODE
+        const actual = getModeByModifierKey({ altKey: true, ctrlKey: true })
+        expect(actual).toBe(expected)
+    })
+
+    it('should return ADD_MODE if alt key is pressed', () => {
+        const expected = ADD_MODE
+        const actual = getModeByModifierKey({ altKey: true })
+        expect(actual).toBe(expected)
+    })
+
+    it('should return ADD_MODE if ctrl key is pressed', () => {
+        const expected = ADD_MODE
+        const actual = getModeByModifierKey({ ctrlKey: true })
+        expect(actual).toBe(expected)
+    })
+
+    it('should return ADD_MODE if meta key is pressed', () => {
+        const expected = ADD_MODE
+        const actual = getModeByModifierKey({ metaKey: true })
+        expect(actual).toBe(expected)
+    })
+
+    it('should return RANGE_MODE if shift key is pressed', () => {
+        const expected = RANGE_MODE
+        const actual = getModeByModifierKey({ shiftKey: true })
+        expect(actual).toBe(expected)
+    })
+
+    it('should return REPLACE_MODE if no key is pressed', () => {
+        const expected = REPLACE_MODE
+        const actual = getModeByModifierKey({})
+        expect(actual).toBe(expected)
+    })
+})

package/src/__tests__/helper/add-all-selectable-source-options.test.js

@@ -0,0 +1,46 @@
+import { addAllSelectableSourceOptions } from '../../transfer/add-all-selectable-source-options.js'
+
+describe('Transfer - addAllSelectableSourceOptions', () => {
+    const onChange = jest.fn()
+    const setHighlightedSourceOptions = jest.fn()
+
+    const sourceOptions = [
+        { label: 'Foo', value: 'foo' },
+        { label: 'Bar', value: 'bar' },
+        { label: 'Baz', value: 'baz' },
+        { label: 'Foobar', value: 'foobar' },
+        { label: 'Foobaz', value: 'foobaz' },
+    ]
+
+    afterEach(() => {
+        onChange.mockClear()
+        setHighlightedSourceOptions.mockClear()
+    })
+
+    it('should add all selectable source options to the selected array', () => {
+        const selected = ['barfoo']
+        const expected = {
+            selected: ['barfoo', 'foo', 'bar', 'baz', 'foobar', 'foobaz'],
+        }
+
+        addAllSelectableSourceOptions({
+            sourceOptions,
+            selected,
+            onChange,
+            setHighlightedSourceOptions,
+        })
+
+        expect(onChange).toHaveBeenCalledWith(expected)
+    })
+
+    it('should reset all highlighted source options', () => {
+        addAllSelectableSourceOptions({
+            sourceOptions,
+            selected: ['barfoo'],
+            onChange,
+            setHighlightedSourceOptions,
+        })
+
+        expect(setHighlightedSourceOptions).toHaveBeenCalledWith([])
+    })
+})

package/src/__tests__/helper/add-individual-source-options.test.js

@@ -0,0 +1,80 @@
+import { addIndividualSourceOptions } from '../../transfer/add-individual-source-options.js'
+
+describe('Transfer - addIndividualSourceOptions', () => {
+    const onChange = jest.fn()
+    const setHighlightedSourceOptions = jest.fn()
+
+    const sourceOptions = [
+        { label: 'Foo', value: 'foo' },
+        { label: 'Foobar', value: 'foobar' },
+        { label: 'Foobaz', value: 'foobaz' },
+    ]
+
+    const highlightedSourceOptions = ['foobaz', 'bar']
+    const selected = ['barfoo']
+
+    afterEach(() => {
+        onChange.mockClear()
+        setHighlightedSourceOptions.mockClear()
+    })
+
+    it('should add the highlighted source options to the selected array', () => {
+        addIndividualSourceOptions({
+            highlightedSourceOptions,
+            maxSelections: Infinity,
+            onChange,
+            selected,
+            setHighlightedSourceOptions,
+        })
+
+        expect(onChange).toHaveBeenCalledWith({
+            selected: ['barfoo', 'foobaz', 'bar'],
+        })
+    })
+
+    it('should reset the highlighted source options', () => {
+        addIndividualSourceOptions({
+            highlightedSourceOptions,
+            maxSelections: Infinity,
+            onChange,
+            selected,
+            setHighlightedSourceOptions,
+        })
+
+        expect(setHighlightedSourceOptions).toHaveBeenCalledWith([])
+    })
+
+    it('should only select the filtered source options', () => {
+        addIndividualSourceOptions({
+            filterable: true,
+            filter: 'oo',
+            sourceOptions,
+            highlightedSourceOptions,
+            maxSelections: Infinity,
+            onChange,
+            selected,
+            setHighlightedSourceOptions,
+        })
+
+        expect(onChange).toHaveBeenCalledWith({
+            selected: ['barfoo', 'foobaz'],
+        })
+    })
+
+    it('should only call onChange with the max selection amount', () => {
+        addIndividualSourceOptions({
+            filterable: true,
+            filter: 'oo',
+            sourceOptions,
+            highlightedSourceOptions: highlightedSourceOptions.slice(0, 1),
+            maxSelections: 1,
+            onChange,
+            selected: selected,
+            setHighlightedSourceOptions,
+        })
+
+        expect(onChange).toHaveBeenCalledWith({
+            selected: ['foobaz'],
+        })
+    })
+})

package/src/__tests__/helper/default-filter-callback.test.js

@@ -0,0 +1,45 @@
+import { defaultFilterCallback } from '../../transfer/default-filter-callback.js'
+
+describe('Transfer - defaultFilterCallback', () => {
+    const options = [
+        { label: 'Foo', value: 'foo' },
+        { label: 'FOO', value: 'fOO' },
+        { label: 'Bar', value: 'bar' },
+        { label: 'BAR', value: 'bAR' },
+    ]
+
+    it('should returl all options when the filter is empty', () => {
+        const filter = ''
+        const expected = options
+        const actual = defaultFilterCallback(options, filter)
+
+        expect(actual).toEqual(expected)
+    })
+
+    it('should return options matching the filter, regardless of case-sensitvity', () => {
+        const filter = 'Fo'
+        const expected = [
+            { label: 'Foo', value: 'foo' },
+            { label: 'FOO', value: 'fOO' },
+        ]
+        const actual = defaultFilterCallback(options, filter)
+
+        expect(actual).toEqual(expected)
+    })
+
+    it('should return an empty array when there are no matches', () => {
+        const filter = 'Baz'
+        const expected = []
+        const actual = 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 = defaultFilterCallback(options, filter)
+
+        expect(actual).toEqual(expected)
+    })
+})

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

@@ -0,0 +1,96 @@
+import { isReorderDownDisabled } from '../../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 actual = isReorderDownDisabled({
+            highlightedPickedOptions: [],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true if the last picked option is the only highlighted one', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['baz'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return false when one picked option is highlighted which is not the last one', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['bar'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return false for a contiguous multi-select not flush to the bottom', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo', 'bar'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true for a contiguous multi-select flush to the bottom', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when all items are highlighted', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo', 'bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return false for a non-contiguous selection containing the last item', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should ignore highlighted values that do not exist in selected', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['ghost', 'foo'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true when all highlighted values are missing from selected', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['ghost'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when a filter is active on the picked side', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo'],
+            selected,
+            filterActivePicked: true,
+        })
+
+        expect(actual).toBe(true)
+    })
+})

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

@@ -0,0 +1,96 @@
+import { isReorderUpDisabled } from '../../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 actual = isReorderUpDisabled({
+            highlightedPickedOptions: [],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true if the first picked option is the only highlighted one', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return false when one picked option is highlighted which is not the first one', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return false for a contiguous multi-select not flush to the top', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true for a contiguous multi-select flush to the top', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo', 'bar'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when all items are highlighted', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo', 'bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return false for a non-contiguous selection containing the first item', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should ignore highlighted values that do not exist in selected', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['ghost', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true when all highlighted values are missing from selected', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['ghost'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when a filter is active on the picked side', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['baz'],
+            selected,
+            filterActivePicked: true,
+        })
+
+        expect(actual).toBe(true)
+    })
+})

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

@@ -0,0 +1,111 @@
+import { moveHighlightedPickedOptionDown } from '../../transfer/move-highlighted-picked-option-down.js'
+
+describe('Transfer - moveHighlightedPickedOptionDown', () => {
+    const onChange = jest.fn()
+
+    afterEach(() => {
+        onChange.mockClear()
+    })
+
+    it('should move a single highlighted option down', () => {
+        moveHighlightedPickedOptionDown({
+            selected: ['foo', 'bar', 'baz'],
+            highlightedPickedOptions: ['bar'],
+            onChange,
+        })
+
+        expect(onChange).toHaveBeenCalledWith({
+            selected: ['foo', 'baz', 'bar'],
+        })
+    })
+
+    it('should do nothing when trying to move down the last option', () => {
+        moveHighlightedPickedOptionDown({
+            selected: ['foo', 'bar', 'baz'],
+            highlightedPickedOptions: ['baz'],
+            onChange,
+        })
+
+        expect(onChange).toHaveBeenCalledTimes(0)
+    })
+
+    it('should do nothing when trying to move down a non-existing option', () => {
+        moveHighlightedPickedOptionDown({
+            selected: ['foo', 'bar', 'baz'],
+            highlightedPickedOptions: ['ghost'],
+            onChange,
+        })
+
+        expect(onChange).toHaveBeenCalledTimes(0)
+    })
+
+    it('should shift a contiguous block of highlighted options down as a group', () => {
+        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', () => {
+        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', () => {
+        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', () => {
+        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', () => {
+        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', () => {
+        moveHighlightedPickedOptionDown({
+            selected: ['a', 'b', 'c'],
+            highlightedPickedOptions: ['ghost', 'a'],
+            onChange,
+        })
+
+        expect(onChange).toHaveBeenCalledWith({
+            selected: ['b', 'a', 'c'],
+        })
+    })
+})