@dhis2-ui/transfer 10.16.1 → 10.16.3-alpha.1

package/src/features/highlight-range-of-options/index.js

@@ -0,0 +1,336 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { extractOptionFromElement } from '../common/index.js'
+
+Given('the option list has one or more items', () => {
+    cy.visitStory('Transfer highlight range of options', 'Has Options')
+    cy.get('{transfer-sourceoptions}')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 1)
+})
+
+Given('the selected list has one or more items', () => {
+    cy.visitStory('Transfer highlight range of options', 'Has Selected')
+    cy.get('{transfer-pickedoptions}')
+        .as('list')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 1)
+})
+
+Given('the option list has three or more items', () => {
+    cy.visitStory('Transfer highlight range of options', 'Has Options')
+    cy.get('{transfer-sourceoptions}')
+        .as('list')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 3)
+})
+
+Given('the selected list has three or more items', () => {
+    cy.visitStory('Transfer highlight range of options', 'Has Selected')
+    cy.get('{transfer-pickedoptions}')
+        .as('list')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 3)
+})
+
+Given('the option list has many items', () => {
+    cy.visitStory('Transfer highlight range of options', 'Has Options')
+    cy.get('{transfer-sourceoptions}')
+        .as('list')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 5)
+})
+
+Given('the selected list has many items', () => {
+    cy.visitStory('Transfer highlight range of options', 'All Selected')
+    cy.get('{transfer-pickedoptions}')
+        .as('list')
+        .as('list')
+        .find('{transferoption}')
+        .should('have.length.of.at.least', 5)
+})
+
+Given('no item is highlighted', () => {
+    cy.get('@list').find('.highlighted').should('not.exist')
+})
+
+Given('one item is highlighted', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .first()
+        .as('initiallyHighlighted')
+        .click()
+        .should('have.class', 'highlighted')
+})
+
+Given('there are at least two options following the highlighted option', () => {
+    cy.get('@initiallyHighlighted')
+        .next()
+        .should('exist')
+        .as('firstBelowInitiallyHighlighted')
+        .next()
+        .should('exist')
+        .as('secondBelowInitiallyHighlighted')
+})
+
+Given('several options are highlighted', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .then(($option) => $option.eq(0).add($option.eq(4)).add($option.eq(6)))
+        .as('initiallyHighlightedMultiple')
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+})
+
+Given(
+    'there are at least two options following the last highlighted option',
+    () => {
+        cy.get('@initiallyHighlightedMultiple')
+            .last('last')
+            .next()
+            .should('exist')
+            .as('firstBelowInitiallyHighlighted')
+            .next()
+            .should('exist')
+            .as('secondBelowInitiallyHighlighted')
+    }
+)
+
+When('the user clicks an item with the SHIFT modifier key', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .first()
+        .clickWith('ctrl')
+        .as('initiallyHighlighted')
+})
+
+When('the user clicks the highlighted item with the SHIFT modifier key', () => {
+    cy.get('@initiallyHighlighted').clickWith('shift').as('hiddenHighlighted')
+})
+
+When(
+    'the user highlightes the second options following the highlighted option with the SHIFT key modifier',
+    () => {
+        cy.get('@secondBelowInitiallyHighlighted').clickWith('shift')
+    }
+)
+
+When(
+    'the user highlightes the second options following the last highlighted option',
+    () => {
+        cy.get('@initiallyHighlightedMultiple')
+            // last highlighted option
+            .last()
+
+            // next sibling
+            .next()
+            .as('firstBelowLastHighlighted')
+
+            // second next sibling
+            .next()
+            .as('secondBelowLastHighlighted')
+            .clickWith('shift')
+    }
+)
+
+When('the user {string} clicks a highlighted option', (modifierKey) => {
+    cy.get('@initiallyHighlightedMultiple')
+        .eq(0)
+        .clickWith(modifierKey)
+        .as('controlClicked')
+})
+
+When('the user changed the filter to exclude the last clicked option', () => {
+    cy.get('{transfer-filter} input').type('ARI')
+})
+
+When('the user SHIFT-clicks a non-highlighted option', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .invoke('eq', 4)
+        .clickWith('shift')
+        .as('firstShiftClicked')
+})
+
+When('the user SHIFT-clicks an option', () => {
+    cy.get('@list').find('{transferoption}').eq(0).clickWith('shift')
+
+    cy.wrap(0).as('firstClickedIndexWithShift')
+})
+
+When('the user SHIFT-clicks another option', () => {
+    cy.get('@list').find('{transferoption}').eq(5).clickWith('shift')
+
+    cy.wrap(5).as('secondClickedIndexWithShift')
+})
+
+Then('the clicked option should be highlighted', () => {
+    cy.get('@initiallyHighlighted').should('have.class', 'highlighted')
+})
+
+Then('the option is not highlighted', () => {
+    cy.all(
+        () => cy.get('@hiddenHighlighted'),
+        () => cy.get('{transfer-sourceoptions} {transferoption}')
+    ).should(([hiddenHighlighted, $options]) => {
+        const $hiddenHighlighted = $options.filter((index, optionEl) => {
+            const option = extractOptionFromElement(optionEl)
+
+            return (
+                option.label === hiddenHighlighted.label &&
+                option.value === hiddenHighlighted.value
+            )
+        })
+
+        $hiddenHighlighted.each((_index, option) => {
+            cy.wrap(option).should('not.have.class', 'highlighted')
+        })
+    })
+})
+
+Then('the clicked options should be highlighted', () => {
+    cy.all(
+        () => cy.get('@initiallyHighlighted'),
+        () => cy.get('@secondBelowInitiallyHighlighted')
+    ).should(([$initiallyHighlighted, $secondBelowInitiallyHighlighted]) => {
+        expect($initiallyHighlighted).to.have.class('highlighted')
+        expect($secondBelowInitiallyHighlighted).to.have.class('highlighted')
+    })
+})
+
+Then(
+    'all options between the initially highlighted option and the clicked option are highlighted',
+    () => {
+        cy.get('@firstBelowInitiallyHighlighted').should(
+            'have.class',
+            'highlighted'
+        )
+    }
+)
+
+Then(
+    'the option highlighted most recently without SHIFT should be highlighted',
+    () => {
+        cy.get('@initiallyHighlightedMultiple')
+            .last()
+            .should('have.class', 'highlighted')
+    }
+)
+
+Then('the option clicked with SHIFT should be highlighted', () => {
+    cy.get('@secondBelowInitiallyHighlighted').should(
+        'have.class',
+        'highlighted'
+    )
+})
+
+Then(
+    'all options between the option highlighted most recently without SHIFT and the clicked option are highlighted',
+    () => {
+        cy.get('@firstBelowInitiallyHighlighted').should(
+            'have.class',
+            'highlighted'
+        )
+    }
+)
+
+Then(
+    'all other previously highlighted options are not highlighted anymore',
+    () => {
+        cy.all(
+            () =>
+                cy.get('@initiallyHighlightedMultiple').last().invoke('index'),
+            () => cy.get('@initiallyHighlightedMultiple')
+        ).should(
+            ([
+                lastInitiallyHighlightedIndex,
+                $initiallyHighlightedMultiple,
+            ]) => {
+                $initiallyHighlightedMultiple
+                    .filter((_, el) => {
+                        const $el = Cypress.$(el)
+                        return $el.index() !== lastInitiallyHighlightedIndex
+                    })
+                    .each((_, el) => {
+                        const $el = Cypress.$(el)
+                        expect($el).to.not.have.class('highlighted')
+                    })
+            }
+        )
+    }
+)
+
+Then(
+    'the range from the visually first highlighted option to the SHIFT-clicked option is highlighted',
+    () => {
+        cy.all(
+            () => cy.get('@initiallyHighlightedMultiple'),
+            () => cy.get('@firstShiftClicked'),
+            () => cy.get('@list').find('{transferoption}')
+        ).should(
+            ([$initiallyHighlightedMultiple, $firstShiftClicked, $all]) => {
+                const firstVisibleHighlightedIndex =
+                    $initiallyHighlightedMultiple
+                        .filter(':visible')
+                        .eq(0)
+                        .index()
+                const shiftIndex = $firstShiftClicked.index()
+                const from = Math.min(firstVisibleHighlightedIndex, shiftIndex)
+                const to = Math.max(firstVisibleHighlightedIndex, shiftIndex)
+                const $insideRange = $all.slice(from, to + 1)
+                const $outsideRange = $all
+                    .slice(0, from)
+                    .add($all.slice(to + 1))
+
+                $insideRange.each((index, option) => {
+                    expect(Cypress.$(option)).to.have.class('highlighted')
+                })
+
+                $outsideRange.each((index, option) =>
+                    expect(Cypress.$(option)).to.not.have.class('highlighted')
+                )
+            }
+        )
+    }
+)
+
+Then(
+    'the range from the first clicked option to the second clicked option is highlighted',
+    () => {
+        cy.all(
+            () => cy.get('@firstClickedIndexWithShift'),
+            () => cy.get('@secondClickedIndexWithShift'),
+            () => cy.get('@list').find('{transferoption}')
+        ).should(
+            ([
+                firstClickedIndexWithShift,
+                secondClickedIndexWithShift,
+                $all,
+            ]) => {
+                const from = Math.min(
+                    firstClickedIndexWithShift,
+                    secondClickedIndexWithShift
+                )
+                const to = Math.max(
+                    firstClickedIndexWithShift,
+                    secondClickedIndexWithShift
+                )
+                const $insideRange = $all.slice(from, to + 1)
+                const $outsideRange = $all
+                    .slice(0, from)
+                    .add($all.slice(to + 1))
+
+                $insideRange.each((index, option) => {
+                    expect(Cypress.$(option)).to.have.class('highlighted')
+                })
+
+                $outsideRange.each((index, option) =>
+                    expect(Cypress.$(option)).to.not.have.class('highlighted')
+                )
+            }
+        )
+    }
+)

package/src/features/highlight-range-of-options.feature

@@ -0,0 +1,70 @@
+Feature: Highlight a range of options
+
+    Scenario: The user highlights an option with the SHIFT modifier key
+        Given the option list has one or more items
+        And no item is highlighted
+        When the user clicks an item with the SHIFT modifier key
+        Then the clicked option should be highlighted
+
+    Scenario: The user un-highlights an option with the SHIFT modifier key
+        Given the option list has one or more items
+        And one item is highlighted
+        When the user clicks the highlighted item with the SHIFT modifier key
+        Then the option is not highlighted
+
+    Scenario Outline: The user highlights a range of options with the SHIFT modifier key
+        Given the <type> list has three or more items
+        And one item is highlighted
+        And there are at least two options following the highlighted option
+        When the user highlightes the second options following the highlighted option with the SHIFT key modifier
+        Then the clicked options should be highlighted
+        Then all options between the initially highlighted option and the clicked option are highlighted
+
+        Examples:
+            | type     |
+            | option   |
+            | selected |
+
+    Scenario Outline: The user highlights a range of options with the SHIFT modifier key while multiple are highlighted
+        Given the <type> list has three or more items
+        And several options are highlighted
+        And there are at least two options following the last highlighted option
+        When the user highlightes the second options following the last highlighted option
+        Then the option highlighted most recently without SHIFT should be highlighted
+        And the option clicked with SHIFT should be highlighted
+        And all options between the option highlighted most recently without SHIFT and the clicked option are highlighted
+        And all other previously highlighted options are not highlighted anymore
+
+        Examples:
+            | type     |
+            | option   |
+            | selected |
+
+    Scenario Outline: The user highlights hides the last-without-SHIFT clicked option and selects a range
+        Given the option list has many items
+        And several options are highlighted
+        When the user "<mod>" clicks a highlighted option
+        And the user changed the filter to exclude the last clicked option
+        And the user SHIFT-clicks a non-highlighted option
+        Then the range from the visually first highlighted option to the SHIFT-clicked option is highlighted
+
+        Examples:
+            | mod  |
+            | ctrl |
+            | cmd  |
+            | alt  |
+
+    Scenario Outline: The user highlights highlights the first option with SHIFT, then highlights a range with SHIFT
+        Given the <type> list has many items
+        When the user SHIFT-clicks an option
+        And the user SHIFT-clicks another option
+        Then the range from the first clicked option to the second clicked option is highlighted
+
+        Examples:
+            | type     | mod  |
+            | option   | ctrl |
+            | option   | cmd  |
+            | option   | alt  |
+            | selected | ctrl |
+            | selected | cmd  |
+            | selected | alt  |

package/src/features/loading_lists/index.js

@@ -0,0 +1,43 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the source list is loading', () => {
+    cy.visitStory('Transfer Loading Lists', 'Loading Source')
+    cy.wrap('source').as('listType')
+})
+
+Given('the picked list is loading', () => {
+    cy.visitStory('Transfer Loading Lists', 'Loading Picked')
+    cy.wrap('picked').as('listType')
+})
+
+Given('the source list is not loading', () => {
+    cy.visitStory('Transfer Loading Lists', 'Not Loading Source')
+    cy.wrap('source').as('listType')
+})
+
+Given('the picked list is not loading', () => {
+    cy.visitStory('Transfer Loading Lists', 'Not Loading Picked')
+    cy.wrap('picked').as('listType')
+})
+
+Then('the loading indicator should be shown', () => {
+    cy.get('@listType').then((listType) => {
+        const listSelector =
+            listType === 'source'
+                ? '{transfer-leftside}'
+                : '{transfer-rightside}'
+
+        cy.get(`${listSelector} .loading`).should('exist')
+    })
+})
+
+Then('the loading indicator should not be shown', () => {
+    cy.get('@listType').then((listType) => {
+        const listSelector =
+            listType === 'source'
+                ? '{transfer-leftside}'
+                : '{transfer-rightside}'
+
+        cy.get(`${listSelector} .loading`).should('not.exist')
+    })
+})

package/src/features/loading_lists.feature

@@ -0,0 +1,19 @@
+Feature: The source and picked lists can have a loading state
+
+    Scenario Outline: A list is loading
+        Given the <type> list is loading
+        Then the loading indicator should be shown
+
+        Examples:
+            | type   |
+            | source |
+            | picked |
+
+    Scenario Outline: A list is not loading
+        Given the <type> list is not loading
+        Then the loading indicator should not be shown
+
+        Examples:
+            | type   |
+            | source |
+            | picked |

package/src/features/notify_at_end_of_list/index.js

@@ -0,0 +1,125 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'the Transfer has enough items to fill the source list completely',
+    () => {
+        cy.visitStory('Transfer End Of List', 'Full Source List')
+        cy.wrap('source').as('listType')
+    }
+)
+
+Given(
+    'the Transfer has enough items to fill the picked list completely',
+    () => {
+        cy.visitStory('Transfer End Of List', 'Full Picked List')
+        cy.wrap('picked').as('listType')
+    }
+)
+
+Given(
+    'the Transfer does not have enough items to fill the source list completely',
+    () => {
+        cy.visitStory('Transfer End Of List', 'Partial Source List')
+        cy.wrap('source').as('listType')
+    }
+)
+
+Given(
+    'the Transfer source options list does not fill the list completely',
+    () => {
+        cy.visitStory('Transfer End Of List', 'Option Changes For Short List')
+        cy.wrap('source').as('listType')
+    }
+)
+
+Given(
+    'the Transfer does not have enough items to fill the picked list completely',
+    () => {
+        cy.visitStory('Transfer End Of List', 'Partial Picked List')
+        cy.wrap('picked').as('listType')
+    }
+)
+
+When('the user scroll to the end of the list', () => {
+    cy.get('@listType').then((listType) => {
+        const listSelector =
+            listType === 'source'
+                ? 'transfer-sourceoptions'
+                : 'transfer-pickedoptions'
+
+        cy.get(`{${listSelector}-endintersectiondetector}`).scrollIntoView()
+    })
+})
+
+When('the user adds an item by clicking the button', () => {
+    cy.contains('Increment options lists').click()
+})
+
+Then('the last list item should be fully visible', () => {
+    cy.contains('ARI treated with antibiotics (pneumonia) new').should(
+        'be.visible'
+    )
+})
+
+Then('the callback for reaching the end should not be called', () => {
+    cy.all(
+        () => cy.window(),
+        () => cy.get('@listType')
+    ).should(([win, listType]) => {
+        const callback =
+            listType === 'source' ? win.onEndReached : win.onEndReachedPicked
+
+        expect(callback).to.not.be.called
+    })
+})
+
+Then('the callback for reaching the end should be called', () => {
+    cy.all(
+        () => cy.window(),
+        () => cy.get('@listType')
+    ).should(([win, listType]) => {
+        const callback =
+            listType === 'source' ? win.onEndReached : win.onEndReachedPicked
+
+        expect(callback).to.be.calledOnce
+    })
+})
+When('the user scrolls down to the source list end', () => {
+    cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]')
+        .find('[data-test="dhis2-uicore-intersectiondetector"]')
+        .scrollIntoView()
+})
+Then('the list end indicator of the source list should be visible', () => {
+    cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]')
+        .find('[data-test="dhis2-uicore-intersectiondetector"]')
+        .should('be.visible')
+})
+Then('the list end indicator of the source list should not be visible', () => {
+    cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]')
+        .find('[data-test="dhis2-uicore-intersectiondetector"]')
+        .should('not.be.visible')
+})
+Then(
+    'the callback for reaching the end of the source list should be called {int} times',
+    function (int) {
+        cy.window().should((win) => {
+            expect(win.onEndReached).to.have.callCount(int)
+        })
+    }
+)
+Then('the selected item is being displayed in the picked list', () => {
+    cy.get('[data-test="dhis2-uicore-transfer-pickedoptions"]')
+        .contains('Option nr. 9')
+        .should('be.visible')
+})
+When('the user selects option nr. {}', function (int) {
+    cy.contains(`Option nr. ${int}`).dblclick()
+})
+Then(
+    'the callback for reaching the end of the picked list should be called {int} times',
+    function (int) {
+        cy.window().should((win) => {
+            expect(win.onEndReachedPicked).to.have.callCount(int)
+        })
+    }
+)

package/src/features/notify_at_end_of_list.feature

@@ -0,0 +1,64 @@
+Feature: The source and picked option lists notify the consumer when the end has been reached
+
+    Scenario Outline: The list is displayed initially and the end is not visible
+        Given the Transfer has enough items to fill the <type> list completely
+        Then the callback for reaching the end should not be called
+
+        Examples:
+            | type   |
+            | source |
+            | picked |
+
+    Scenario Outline: The list is displayed initially and the end is visible
+        Given the Transfer does not have enough items to fill the <type> list completely
+        Then the callback for reaching the end should be called
+
+        Examples:
+            | type   |
+            | source |
+            | picked |
+
+    Scenario Outline: The user scrolls down the list to the end
+        Given the Transfer has enough items to fill the <type> list completely
+        When the user scroll to the end of the list
+        Then the callback for reaching the end should be called
+
+        Examples:
+            | type   |
+            | source |
+            | picked |
+
+    Scenario: The list is short and items are added within the list container
+        Given the Transfer source options list does not fill the list completely
+        # Initial state: the list has 7 items and the list ends well above the container bottom
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 1 times
+        Then the callback for reaching the end of the picked list should be called 1 times
+        # Selected item is not in the options array but is present in the `selectedOptionsLookup`
+        Then the selected item is being displayed in the picked list
+        When the user adds an item by clicking the button
+        # The indicator is still just in view
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 2 times
+        When the user adds an item by clicking the button
+        # This adds val-9, which is a selected item so it gets added to picked options
+        # not source options, but the callback is still called
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 3 times
+        # The picked list callback does not get called because the picked item was already present
+        Then the callback for reaching the end of the picked list should be called 1 times
+        When the user adds an item by clicking the button
+        # The indicator is still in view but only just
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 4 times
+        When the user adds an item by clicking the button
+        # The indicator now is out of view, no more calls
+        Then the list end indicator of the source list should not be visible
+        Then the callback for reaching the end of the source list should be called 4 times
+        # But scrolling down does trigger a call
+        When the user scrolls down to the source list end
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 5 times
+        # And selecting an item triggers a call in the picked list
+        When the user selects option nr. 11
+        Then the callback for reaching the end of the picked list should be called 2 times