@dhis2-ui/transfer 10.16.2 → 10.16.3

package/src/features/display-order/index.js

@@ -0,0 +1,205 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { extractOptionFromElement } from '../common/index.js'
+
+Given('none of the supplied options have been selected', () => {
+    cy.visitStory('Transfer Display Order', 'No Selection')
+})
+
+Given('some of the supplied options have been selected', () => {
+    cy.visitStory('Transfer Display Order', 'Some Selected')
+})
+
+Given('some selectable options are selectable', () => {
+    cy.visitStory('Transfer Display Order', 'Some Selected')
+})
+
+When('the user deselects one selected option', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}').first().click()
+    cy.get('{transfer-pickedoptions}')
+        .find('.highlighted')
+        .then(($el) => $el.toArray().map(extractOptionFromElement))
+        .as('deselectedOptions')
+    cy.get('{transfer-actions-removeindividual}').click()
+})
+
+When('the user deselects multiple selected options', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        // should take third, then first item
+        .then(($options) => {
+            const $arr = $options.toArray()
+            return [$arr[2], $arr[0]]
+        })
+        .each(($option) => cy.wrap($option).clickWith('cmd'))
+        .then(($options) =>
+            cy
+                .wrap($options.toArray().map(extractOptionFromElement))
+                .as('deselectedOptions')
+        )
+
+    cy.get('{transfer-actions-removeindividual}').click()
+})
+
+When('the user selects one option', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}').first().click()
+    cy.get('{transfer-sourceoptions}')
+        .find('.highlighted')
+        .then(($el) => $el.toArray().map(extractOptionFromElement))
+        .as('selectedOptions')
+    cy.get('{transfer-actions-addindividual}').click()
+})
+
+When('the user selects multiple options', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        // should take fifth, then first item
+        .then(($options) => {
+            const $arr = $options.toArray()
+            return [$arr[4], $arr[0]]
+        })
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+        .then(($options) => {
+            cy.wrap($options.toArray().map(extractOptionFromElement)).as(
+                'selectedOptions'
+            )
+        })
+
+    cy.get('{transfer-actions-addindividual}').click()
+})
+
+Then(
+    'the order of the selectable options should match the order of the supplied options',
+    () => {
+        cy.all(
+            () => cy.window(),
+            () => cy.get('{transfer-sourceoptions} {transferoption}')
+        ).should(([win, $options]) => {
+            const { options } = win
+            const selectableSourceOptions = $options
+                .toArray()
+                .map(extractOptionFromElement)
+
+            expect(selectableSourceOptions).to.eql(options)
+        })
+    }
+)
+
+Then(
+    'the order of the remaining selectable options should match the order of the supplied options',
+    () => {
+        cy.all(
+            () => cy.window(),
+            () => cy.get('{transfer-sourceoptions} {transferoption}')
+        ).should(([win, $options]) => {
+            const selectableSourceOptions = $options
+                .toArray()
+                .map(extractOptionFromElement)
+
+            const options = win.options.filter((option) =>
+                selectableSourceOptions.find(
+                    ({ label, value }) =>
+                        label === option.label && value === option.value
+                )
+            )
+
+            expect(selectableSourceOptions).to.eql(options)
+        })
+    }
+)
+
+Then(
+    'it should be positioned according to the order of the supplied options',
+    () => {
+        cy.all(
+            () => cy.window(),
+            () => cy.get('{transfer-sourceoptions} {transferoption}'),
+            () => cy.get('@deselectedOptions')
+        ).should(([win, $selectableSourceOptions, deselectedOptions]) => {
+            // filter out non-selectable options and compare with selectable options
+            // this confirms that the order is correct
+            const selectableSourceOptions = $selectableSourceOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const originalOptions = win.options.filter((option) =>
+                selectableSourceOptions.find(
+                    ({ label, value }) =>
+                        label === option.label && value === option.value
+                )
+            )
+            expect(selectableSourceOptions).to.eql(originalOptions)
+
+            // and confirm that the deselected option is in the selectable options list
+            const [deselectedOption] = deselectedOptions
+            const hasOption = !!selectableSourceOptions.find(
+                ({ label, value }) =>
+                    label === deselectedOption.label &&
+                    value === deselectedOption.value
+            )
+            expect(hasOption).to.equal(true)
+        })
+    }
+)
+
+Then(
+    'all should take the position according to the order of the supplied options',
+    () => {
+        cy.all(
+            () => cy.window(),
+            () => cy.get('{transfer-sourceoptions} {transferoption}'),
+            () => cy.get('@deselectedOptions')
+        ).should(([win, $selectableSourceOptions, deselectedOptions]) => {
+            const selectableSourceOptions = $selectableSourceOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const options = win.options.filter((option) =>
+                selectableSourceOptions.find(
+                    ({ label, value }) =>
+                        label === option.label && value === option.value
+                )
+            )
+            expect(selectableSourceOptions).to.eql(options)
+
+            const hasAllOptions = deselectedOptions.every(
+                (deselectedOption) => {
+                    const result = !!selectableSourceOptions.find(
+                        ({ label, value }) =>
+                            label === deselectedOption.label &&
+                            value === deselectedOption.value
+                    )
+
+                    return result
+                }
+            )
+            expect(hasAllOptions).to.equal(true)
+        })
+    }
+)
+
+Then('it should be added to the end of the selected options list', () => {
+    cy.all(
+        () => cy.get('@selectedOptions'),
+        () => cy.get('{transfer-pickedoptions} {transferoption}')
+    ).should(([transferredOptions, $selectedOptions]) => {
+        const lastSelectedOptions = $selectedOptions
+            .toArray()
+            .slice(transferredOptions.length * -1)
+            .map(extractOptionFromElement)
+
+        expect(transferredOptions).to.eql(lastSelectedOptions)
+    })
+})
+
+Then(
+    'they should be added to the end of the selected options list in the order they have been highlighted',
+    () => {
+        cy.all(
+            () => cy.get('@selectedOptions'),
+            () => cy.get('{transfer-pickedoptions} {transferoption}')
+        ).should(([transferredOptions, $selectedOptions]) => {
+            const lastSelectedOptions = $selectedOptions
+                .toArray()
+                .slice(transferredOptions.length * -1)
+                .map(extractOptionFromElement)
+
+            expect(transferredOptions).to.eql(lastSelectedOptions)
+        })
+    }
+)

package/src/features/display-order.feature

@@ -0,0 +1,30 @@
+@component-transfer @display-ordering
+Feature: Display order of items in lists
+
+    Scenario: All supplied options are rendered in the options-side
+        Given none of the supplied options have been selected
+        Then the order of the selectable options should match the order of the supplied options
+
+    Scenario: Some of the supplied options have been selected
+        Given some of the supplied options have been selected
+        Then the order of the remaining selectable options should match the order of the supplied options
+
+    Scenario: A single selected options is deselected
+        Given some of the supplied options have been selected
+        When the user deselects one selected option
+        Then it should be positioned according to the order of the supplied options
+
+    Scenario: Multiple selected options are deselected
+        Given some of the supplied options have been selected
+        When the user deselects multiple selected options
+        Then all should take the position according to the order of the supplied options
+
+    Scenario: An selectable option gets selected
+        Given some selectable options are selectable
+        When the user selects one option
+        Then it should be added to the end of the selected options list
+
+    Scenario: Multiple selectable options get selected
+        Given some selectable options are selectable
+        When the user selects multiple options
+        Then they should be added to the end of the selected options list in the order they have been highlighted

package/src/features/filter-options-list/index.js

@@ -0,0 +1,133 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { extractOptionFromElement } from '../common/index.js'
+
+Given('filtering is enabled', () => {
+    // no op
+})
+
+Given('the options list is being filtered', () => {
+    // no op
+})
+
+Given('the result is not empty', () => {
+    cy.visitStory('Transfer filtering', 'Some Results')
+})
+
+Given('the result is empty', () => {
+    cy.visitStory('Transfer filtering', 'Empty Result')
+})
+
+Given('a no-result message has been provided', () => {
+    // no op
+})
+
+Given(
+    'the options are being search with a {string} search term',
+    (firstCase) => {
+        if (firstCase === 'uppercase') {
+            cy.visitStory('Transfer filtering', 'Uppercase Search')
+        } else if (firstCase === 'lowercase') {
+            cy.visitStory('Transfer filtering', 'Lowercase Search')
+        }
+
+        cy.get('{transfer-filter} input')
+            .then(($input) => $input.val())
+            .as('firstCaseTerm')
+    }
+)
+
+Given('some options are listed', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        .should('have.length.of.at.least', 1)
+        .as('firstCaseOptions')
+})
+
+Given('the filter function only returns ANC options', () => {
+    cy.visitStory('Transfer filtering', 'Anc Custom Filter')
+})
+
+Given("the filter value is controlled by the component's consumer", () => {
+    cy.visitStory('Transfer filtering', 'Controlled Filter')
+})
+
+When('the user uses the same search term but {string}', (secondCase) => {
+    cy.all(
+        () => cy.get('@firstCaseTerm'),
+        () => cy.get('{transfer-filter} input')
+    ).then(([firstCaseTerm, $filterInput]) => {
+        let secondCaseTerm
+
+        if (secondCase === 'uppercase') {
+            secondCaseTerm = firstCaseTerm.toUpperCase()
+        } else if (secondCase === 'lowercase') {
+            secondCaseTerm = firstCaseTerm.toLowerCase()
+        }
+
+        cy.wrap($filterInput).clear().type(secondCaseTerm)
+    })
+})
+
+When('searching for "s"', () => {
+    cy.get('{transfer-filter} input').type('s')
+})
+
+When('the filter value changes', () => {
+    cy.get('{transfer-filter} input')
+        .then(($input) => console.log('$input', $input) || $input)
+        .type('ANC')
+})
+
+Then('all the matching items should be shown in the options list', () => {
+    cy.all(
+        () => cy.get('{transfer-filter}'),
+        () => cy.get('{transferoption}')
+    ).should(([$filter, $options]) => {
+        const searchTerm = $filter.val()
+
+        expect($options).to.have.length.of.at.least(1)
+        $options.each((index, option) => {
+            const text = Cypress.$(option).text()
+            expect(text).to.match(new RegExp(searchTerm))
+        })
+    })
+})
+
+Then('no items should be shown in the options list', () => {
+    cy.get('{transferoption}').should('not.exist')
+})
+
+Then('information should be displayed that no items matched the filter', () => {
+    cy.get('{no-results}', { prefix: '' }).should('exist')
+})
+
+Then('the same options should be shown', () => {
+    cy.all(
+        () => cy.get('@firstCaseOptions'),
+        () => cy.get('{transfer-sourceoptions} {transferoption}')
+    ).should(([$firstCaseOptions, $secondCaseOptions]) => {
+        const firstCaseOptions = $firstCaseOptions
+            .toArray()
+            .map(extractOptionFromElement)
+        const secondCaseOptions = $secondCaseOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        expect(firstCaseOptions).to.eql(secondCaseOptions)
+    })
+})
+
+Then('only the results including the word "ANC" are included', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}').each(($option) =>
+        expect($option.text()).to.match(/ANC/)
+    )
+})
+
+Then('the onFilterChange callback will be called with the new value', () => {
+    cy.window().should((win) => {
+        expect(win.customFilterCallback.callCount).to.equal(4)
+        expect(win.customFilterCallback.getCall(0).args[1]).to.equal('')
+        expect(win.customFilterCallback.getCall(1).args[1]).to.equal('A')
+        expect(win.customFilterCallback.getCall(2).args[1]).to.equal('AN')
+        expect(win.customFilterCallback.getCall(3).args[1]).to.equal('ANC')
+    })
+})

package/src/features/filter-options-list.feature

@@ -0,0 +1,40 @@
+@component-transfer @filtering
+Feature: Filter options list
+
+    Background:
+        Given filtering is enabled
+        And the options list is being filtered
+
+    Scenario: Filtering with results
+        Given the result is not empty
+        Then all the matching items should be shown in the options list
+
+    Scenario: Filtering without results
+        Given the result is empty
+        Then no items should be shown in the options list
+
+    Scenario: Displaying no-result message
+        Given the result is empty
+        And a no-result message has been provided
+        Then information should be displayed that no items matched the filter
+
+    Scenario Outline: Filter shows result regardless of uppercase and lowercase
+        Given the options are being search with a "<firstCase>" search term
+        And some options are listed
+        When the user uses the same search term but "<secondCase>"
+        Then the same options should be shown
+
+        Examples:
+            | firstCase | secondCase |
+            | uppercase | lowercase  |
+            | lowercase | uppercase  |
+
+    Scenario: The app defines a custom filtering method
+        Given the filter function only returns ANC options
+        When searching for "s"
+        Then only the results including the word "ANC" are included
+
+    Scenario: The filter value can be controlled by the app
+        Given the filter value is controlled by the component's consumer
+        When the filter value changes
+        Then the onFilterChange callback will be called with the new value