@dhis2-ui/transfer 10.16.2 → 10.16.3

package/src/features/reorder-with-buttons/index.js

@@ -0,0 +1,181 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('reordering of items is enabled', () => {
+    // no op
+})
+
+Given('the selected list has three items', () => {
+    cy.visitStory('Transfer Reorder Buttons', 'Has Three Selected')
+})
+
+Given('the selected list has some items', () => {
+    cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected')
+})
+
+Given('the {int}. item is highlighted', (previousPosition) => {
+    const index = previousPosition - 1
+    console.log('> index', index)
+
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .eq(index)
+        .invoke('attr', 'data-value')
+        .as('previousValue', { type: 'static' })
+
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .eq(index)
+        .as('previous')
+        .click()
+})
+
+Given('no items are highlighted in the list', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}.highlighted').should(
+        'not.exist'
+    )
+})
+
+Given('more than one item is highlighted in the list', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .filter((index) => index < 2)
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+})
+
+When("the user clicks the 'move up' button", () => {
+    // force, so we click disabled buttons
+    cy.get('{transfer-reorderingactions-buttonmoveup}').click({ force: true })
+})
+
+When("the user clicks the 'move down' button", () => {
+    // force, so we click disabled buttons
+    cy.get('{transfer-reorderingactions-buttonmovedown}').click({ force: true })
+})
+
+When("the user clicks the 'move to top' button", () => {
+    // force, so we click disabled buttons
+    cy.get('{transfer-reorderingactions-buttonmovetotop}').click({
+        force: true,
+    })
+})
+
+When("the user clicks the 'move to bottom' button", () => {
+    // force, so we click disabled buttons
+    cy.get('{transfer-reorderingactions-buttonmovetobottom}').click({
+        force: true,
+    })
+})
+
+Then('the highlighted item should be moved to the {int}. place', (next) => {
+    const index = next - 1
+
+    cy.get('@previousValue')
+        .then((previousValue) => cy.get(`[data-value="${previousValue}"]`))
+        .invoke('index')
+        .should('equal', index)
+})
+
+Then('all four reorder buttons should be disabled', () => {
+    cy.get('{transfer-reorderingactions-buttonmovetotop}').should(
+        'have.attr',
+        'disabled'
+    )
+    cy.get('{transfer-reorderingactions-buttonmoveup}').should(
+        'have.attr',
+        'disabled'
+    )
+    cy.get('{transfer-reorderingactions-buttonmovedown}').should(
+        'have.attr',
+        'disabled'
+    )
+    cy.get('{transfer-reorderingactions-buttonmovetobottom}').should(
+        'have.attr',
+        'disabled'
+    )
+})
+
+// --- Multi-select ---
+
+Given('the selected list has eight items', () => {
+    cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected')
+    cy.get('{transfer-pickedoptions} {transferoption}').should('have.length', 8)
+})
+
+const highlightPositionWithCtrl = (position) =>
+    cy
+        .get('{transfer-pickedoptions} {transferoption}')
+        .eq(position - 1)
+        .then(($option) =>
+            cy.get('@highlightedValues').then((values) => {
+                values.push($option.attr('data-value'))
+                return $option
+            })
+        )
+        .clickWith('ctrl')
+
+When(
+    'the user highlights the items at positions {int} and {int}',
+    (first, second) => {
+        cy.wrap([]).as('highlightedValues')
+        highlightPositionWithCtrl(first)
+        highlightPositionWithCtrl(second)
+    }
+)
+
+When('the user highlights every item in the selected list', () => {
+    cy.wrap([]).as('highlightedValues')
+    cy.get('{transfer-pickedoptions} {transferoption}').each(($option) => {
+        cy.get('@highlightedValues').then((values) => {
+            values.push($option.attr('data-value'))
+        })
+        cy.wrap($option).clickWith('ctrl')
+    })
+})
+
+Then('those items should be at positions {int} and {int}', (first, second) => {
+    cy.get('@highlightedValues').then((values) => {
+        const targetIndices = [first - 1, second - 1]
+        values.forEach((value, i) => {
+            cy.get(`[data-value="${value}"]`)
+                .invoke('index')
+                .should('equal', targetIndices[i])
+        })
+    })
+})
+
+Then('those items should still be highlighted', () => {
+    cy.get('@highlightedValues').then((values) => {
+        values.forEach((value) => {
+            cy.get(`{transfer-pickedoptions} [data-value="${value}"]`).should(
+                'have.class',
+                'highlighted'
+            )
+        })
+    })
+})
+
+const reorderButtonSelectors = {
+    'move up': '{transfer-reorderingactions-buttonmoveup}',
+    'move down': '{transfer-reorderingactions-buttonmovedown}',
+    'move to top': '{transfer-reorderingactions-buttonmovetotop}',
+    'move to bottom': '{transfer-reorderingactions-buttonmovetobottom}',
+}
+
+Then(
+    'the {string} and {string} buttons should be disabled',
+    (first, second) => {
+        cy.get(reorderButtonSelectors[first]).should('have.attr', 'disabled')
+        cy.get(reorderButtonSelectors[second]).should('have.attr', 'disabled')
+    }
+)
+
+Then(
+    'the {string} and {string} buttons should not be disabled',
+    (first, second) => {
+        cy.get(reorderButtonSelectors[first]).should(
+            'not.have.attr',
+            'disabled'
+        )
+        cy.get(reorderButtonSelectors[second]).should(
+            'not.have.attr',
+            'disabled'
+        )
+    }
+)

package/src/features/reorder-with-buttons.feature

@@ -0,0 +1,138 @@
+@component-transfer @reordering
+Feature: Reorder items in the selected list using buttons
+
+    Background:
+        Given reordering of items is enabled
+
+    # I created two scenarios for up and down reordering because I wanted to
+    # incorporate a check for 'is first' or 'is last' and it seemed overly
+    # ambiguous to write this in a single scenario. Or, is it enough that I
+    # have included the 'Disable move buttons' scenarios at the bottom of this
+    # file, so that doesn't need to be handled in the basic scenarios at the
+    # top?
+
+    Scenario Outline: The user clicks the 'move up' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move up' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 1    |
+            | 2        | 1    |
+            | 3        | 2    |
+
+    Scenario Outline: The user clicks the 'move down' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move down' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 2    |
+            | 2        | 3    |
+            | 3        | 3    |
+
+    Scenario Outline: The user clicks the 'move to top' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to top' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 1    |
+            | 2        | 1    |
+            | 3        | 1    |
+
+    Scenario Outline: The user clicks the 'move to bottom' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to bottom' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 3    |
+            | 2        | 3    |
+            | 3        | 3    |
+
+    Scenario: Disable reorder buttons when no items are highlighted
+        Given the selected list has some items
+        And no items are highlighted in the list
+        Then all four reorder buttons should be disabled
+
+    # --- Multi-select ---
+    #
+    # All four buttons act on the highlighted picked items as a group,
+    # preserving the group's relative order. Non-contiguous selections
+    # collapse into a contiguous block before landing at the target edge.
+
+    Scenario: 'move up' shifts a contiguous block of highlighted items up by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 2 and 3
+        And those items should still be highlighted
+
+    Scenario: 'move up' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move down' shifts a contiguous block of highlighted items down by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 3
+        And the user clicks the 'move down' button
+        Then those items should be at positions 3 and 4
+
+    Scenario: 'move down' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move down' button
+        Then those items should be at positions 4 and 5
+
+    Scenario: 'move to top' collapses a non-contiguous selection flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 5
+        And the user clicks the 'move to top' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move to bottom' collapses a non-contiguous selection flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move to bottom' button
+        Then those items should be at positions 7 and 8
+
+    Scenario: The highlighted group stays highlighted after moving, allowing chained presses
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+        And those items should still be highlighted
+
+    Scenario: Both up-side buttons are disabled when the highlighted block is flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 2
+        Then the 'move up' and 'move to top' buttons should be disabled
+        And the 'move down' and 'move to bottom' buttons should not be disabled
+
+    Scenario: Both down-side buttons are disabled when the highlighted block is flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 7 and 8
+        Then the 'move down' and 'move to bottom' buttons should be disabled
+        And the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: Up-side buttons remain enabled when a non-contiguous selection contains the top item
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 3
+        Then the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: All four reorder buttons are disabled when every picked item is highlighted
+        Given the selected list has eight items
+        When the user highlights every item in the selected list
+        Then all four reorder buttons should be disabled

package/src/features/set_unset-highlighted-option/index.js

@@ -0,0 +1,121 @@
+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 set & unset higlighted options', 'Has Options')
+    cy.get('{transfer-sourceoptions}').as('list')
+})
+
+Given('the selected list has one or more items', () => {
+    cy.visitStory('Transfer set & unset higlighted options', 'Has Selected')
+    cy.get('{transfer-pickedoptions}').as('list')
+})
+
+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('the highlighted item is not visible due to a set filter', () => {
+    // store hidden option because dom reference will be lost
+    cy.get('@initiallyHighlighted')
+        .then(($initiallyHighlighted) =>
+            extractOptionFromElement($initiallyHighlighted)
+        )
+        .as('hiddenHighlighted')
+
+    cy.get('{transfer-filter} input').type('No result search term')
+
+    cy.get('{transfer-sourceoptions} {transferoption}').should('not.exist')
+})
+
+When('the user clicks an item in the list that is not highlighted', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .first()
+        .invoke('next')
+        .as('nextHighlighted')
+        .click()
+})
+
+When('the user clicks an item in the list that is highlighted', () => {
+    cy.get('@initiallyHighlighted').wait(500).click()
+})
+
+When('the user selects the visible, highlighted options', () => {
+    cy.get('{transfer-actions-addindividual}').click()
+})
+
+When('the users changes the filter to include the hidden option', () => {
+    cy.get('{transfer-filter} input').clear()
+})
+
+Then('the clicked item should be highlighted', () => {
+    cy.get('@nextHighlighted').should('have.class', 'highlighted')
+})
+
+Then('the previously highlighted item should no longer be highlighted', () => {
+    cy.get('@initiallyHighlighted').should('have.not.class', 'highlighted')
+})
+
+Then('the option is visible', () => {
+    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
+            )
+        })
+
+        expect($hiddenHighlighted).to.be.visible
+    })
+})
+
+Then('the option is 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
+            )
+        })
+
+        expect($hiddenHighlighted).to.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
+            )
+        })
+
+        expect($hiddenHighlighted).not.to.have.class('highlighted')
+    })
+})

package/src/features/set_unset-highlighted-option.feature

@@ -0,0 +1,42 @@
+@component-transfer @highlighting
+Feature: Set&unset the highlighted option
+
+    Scenario Outline: The user clicks an item that is not already highlighted
+        Given the <type> list has one or more items
+        And one item is highlighted
+        When the user clicks an item in the list that is not highlighted
+        Then the clicked item should be highlighted
+        And the previously highlighted item should no longer be highlighted
+
+        Examples:
+            | type     |
+            | option   |
+            | selected |
+
+    Scenario Outline: The user clicks a highlighted item
+        Given the <type> list has one or more items
+        And one item is highlighted
+        When the user clicks an item in the list that is highlighted
+        Then the previously highlighted item should no longer be highlighted
+
+        Examples:
+            | type     |
+            | option   |
+            | selected |
+
+    Scenario: The user highlights an option, changes the filter to exclude that option & then changes the filter back
+        Given the option list has one or more items
+        And one item is highlighted
+        But the highlighted item is not visible due to a set filter
+        When the users changes the filter to include the hidden option
+        Then the option is visible
+        And the option is highlighted
+
+    Scenario: The user highlights an option, changes the filter to exclude that option, selects the highlighted options & then changes the filter back
+        Given the option list has one or more items
+        And one item is highlighted
+        But the highlighted item is not visible due to a set filter
+        When the user selects the visible, highlighted options
+        And the users changes the filter to include the hidden option
+        Then the option is visible
+        And the option is not highlighted