@dhis2-ui/select 10.16.2 → 10.16.3-alpha.1

package/src/multi-select/features/accepts_loading/index.js

@@ -0,0 +1,22 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options and a loading flag is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and loading')
+})
+
+Given(
+    'a MultiSelect with options, a loading flag and a loading text is rendered',
+    () => {
+        cy.visitStory('MultiSelect', 'With options, loading and loading text')
+    }
+)
+
+Then('the loading spinner is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-circularloader"]').should('be.visible')
+})
+
+Then('the loading text is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-loading"]')
+        .contains('Loading options')
+        .should('be.visible')
+})

package/src/multi-select/features/accepts_loading.feature

@@ -0,0 +1,14 @@
+Feature: Loading status
+
+    Scenario: The user opens a loading MultiSelect
+        Given a MultiSelect with options and a loading flag is rendered
+        When the MultiSelect input is clicked
+        Then the loading spinner is displayed
+        And the options are displayed
+
+    Scenario: The user opens a loading MultiSelect with a loading text
+        Given a MultiSelect with options, a loading flag and a loading text is rendered
+        When the MultiSelect input is clicked
+        Then the loading spinner is displayed
+        And the loading text is displayed
+        And the options are displayed

package/src/multi-select/features/accepts_max_height/index.js

@@ -0,0 +1,31 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with more than ten options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With more than ten options')
+})
+
+Given(
+    'a MultiSelect with more than three options and a 100px max-height is rendered',
+    () => {
+        cy.visitStory(
+            'MultiSelect',
+            'With more than three options and a 100 px max-height'
+        )
+    }
+)
+
+Then('has the default max-height', () => {
+    cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should(
+        'have.css',
+        'max-height',
+        '280px'
+    )
+})
+
+Then('has a max-height of 100px', () => {
+    cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should(
+        'have.css',
+        'max-height',
+        '100px'
+    )
+})

package/src/multi-select/features/accepts_max_height.feature

@@ -0,0 +1,11 @@
+Feature: Setting a max-height
+
+    Scenario: The MultiSelect does not have an explicit max-height set
+        Given a MultiSelect with more than ten options is rendered
+        And the MultiSelect is open
+        Then has the default max-height
+
+    Scenario: The MultiSelect a max-height of 100px set
+        Given a MultiSelect with more than three options and a 100px max-height is rendered
+        And the MultiSelect is open
+        Then has a max-height of 100px

package/src/multi-select/features/accepts_placeholder/index.js

@@ -0,0 +1,25 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with a placeholder and no selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With placeholder')
+})
+
+Given('a MultiSelect with a placeholder and a selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With placeholder and selection')
+})
+
+Then('the placeholder is shown', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-placeholder"]')
+        .contains('Placeholder text')
+        .should('be.visible')
+})
+
+Then('the placeholder is not rendered', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-placeholder"]').should(
+        'not.exist'
+    )
+})
+
+Then('the selection is displayed', () => {
+    cy.contains('option one').should('be.visible')
+})

package/src/multi-select/features/accepts_placeholder.feature

@@ -0,0 +1,10 @@
+Feature: Placeholder text
+
+    Scenario: A placeholder text with no selection
+        Given a MultiSelect with a placeholder and no selection is rendered
+        Then the placeholder is shown
+
+    Scenario: A placeholder text with a selection
+        Given a MultiSelect with a placeholder and a selection is rendered
+        Then the placeholder is not rendered
+        And the selection is displayed

package/src/multi-select/features/accepts_prefix/index.js

@@ -0,0 +1,19 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with a prefix and no selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With prefix')
+})
+
+Given('a MultiSelect with a prefix and a selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With prefix and selection')
+})
+
+Then('the prefix is shown', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-prefix"]')
+        .contains('Prefix text')
+        .should('be.visible')
+})
+
+Then('the selection is shown', () => {
+    cy.contains('option one').should('be.visible')
+})

package/src/multi-select/features/accepts_prefix.feature

@@ -0,0 +1,10 @@
+Feature: Placeholder text
+
+    Scenario: A prefix text with no selection
+        Given a MultiSelect with a prefix and no selection is rendered
+        Then the prefix is shown
+
+    Scenario: A prefix text with a selection
+        Given a MultiSelect with a prefix and a selection is rendered
+        Then the prefix is shown
+        And the selection is shown

package/src/multi-select/features/allows_invalid_options/index.js

@@ -0,0 +1,27 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with invalid options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With invalid options')
+})
+
+Given('a MultiSelect with invalid filterable options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With invalid filterable options')
+})
+
+When('the user enters a filter string', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-filterinput"] input').type(
+        'invalid'
+    )
+})
+
+Then('the invalid options are displayed', () => {
+    cy.contains('invalid one').should('be.visible')
+    cy.contains('invalid two').should('be.visible')
+    cy.contains('invalid three').should('be.visible')
+})
+
+Then('the invalid options are not rendered', () => {
+    cy.contains('invalid one').should('not.exist')
+    cy.contains('invalid two').should('not.exist')
+    cy.contains('invalid three').should('not.exist')
+})

package/src/multi-select/features/allows_invalid_options.feature

@@ -0,0 +1,12 @@
+Feature: Invalid MultiSelect options
+
+    Scenario: Rendering a MultiSelect with invalid options
+        Given a MultiSelect with invalid options is rendered
+        And the MultiSelect is open
+        Then the invalid options are displayed
+
+    Scenario: Rendering a MultiSelect with invalid filterable options
+        Given a MultiSelect with invalid filterable options is rendered
+        And the MultiSelect is open
+        When the user enters a filter string
+        Then the invalid options are not rendered

package/src/multi-select/features/allows_selecting/index.js

@@ -0,0 +1,81 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a MultiSelect with a disabled option and onChange handler is rendered',
+    () => {
+        cy.visitStory('MultiSelect', 'With disabled option and on change')
+    }
+)
+
+Given(
+    'a MultiSelect with custom options and onChange handler is rendered',
+    () => {
+        cy.visitStory('MultiSelect', 'With custom options and on change')
+    }
+)
+
+When('an option is clicked', () => {
+    cy.contains('option one').click()
+})
+
+When('the selected option is clicked', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-multiselectoption"]:contains("option one")'
+    ).click()
+})
+
+When('another option is clicked', () => {
+    cy.contains('option two').click()
+})
+
+When("the chip's X is clicked", () => {
+    cy.get('[data-test="dhis2-uicore-chip-remove"]').click()
+})
+
+When('the disabled option is clicked', () => {
+    cy.contains('disabled option').click()
+})
+
+When('the selected option is clicked again', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-multiselectoption"]:contains("option one")'
+    ).click()
+})
+
+Then('the clicked option is selected', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledOnce
+        expect(win.onChange).to.be.calledWith({
+            selected: ['1'],
+        })
+    })
+})
+
+Then('the clicked option is selected as well', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledOnce
+        expect(win.onChange).to.be.calledWith({
+            selected: ['1', '2'],
+        })
+    })
+})
+
+Then('the selected option is deselected', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledOnce
+        expect(win.onChange).to.be.calledWith({ selected: [] })
+    })
+})
+
+Then('the onchange handler is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.not.be.called
+    })
+})
+
+Then('the previously selected option is deselected', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledTwice
+        expect(win.onChange).to.be.calledWith({ selected: [] })
+    })
+})

package/src/multi-select/features/allows_selecting.feature

@@ -0,0 +1,44 @@
+Feature: Selecting options
+
+    Scenario: The user clicks an option to select it
+        Given a MultiSelect with options and onChange handler is rendered
+        And the MultiSelect is open
+        When an option is clicked
+        Then the clicked option is selected
+
+    Scenario: The user clicks a custom option to select it
+        Given a MultiSelect with custom options and onChange handler is rendered
+        And the MultiSelect is open
+        When an option is clicked
+        Then the clicked option is selected
+
+    Scenario: The user clicks another option to select it
+        Given a MultiSelect with options, a selection and onChange handler is rendered
+        And the MultiSelect is open
+        When another option is clicked
+        Then the clicked option is selected as well
+
+    Scenario: The user clicks an option to deselect it
+        Given a MultiSelect with options, a selection and onChange handler is rendered
+        And the MultiSelect is open
+        When the selected option is clicked
+        Then the selected option is deselected
+
+    Scenario: The user clicks a chip's X to deselect it
+        Given a MultiSelect with options, a selection and onChange handler is rendered
+        When the chip's X is clicked
+        Then the selected option is deselected
+
+    Scenario: The user clicks a disabled option
+        Given a MultiSelect with a disabled option and onChange handler is rendered
+        And the MultiSelect is open
+        When the disabled option is clicked
+        Then the onchange handler is not called
+
+    Scenario: The user clicks an option twice to select and deselect it
+        Given a MultiSelect is rendered to which options can be added
+        And the MultiSelect is open
+        When an option is clicked
+        Then the clicked option is selected
+        When the selected option is clicked again
+        Then the previously selected option is deselected

package/src/multi-select/features/can_be_cleared/index.js

@@ -0,0 +1,22 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a clearable MultiSelect with a selection and onchange handler is rendered',
+    () => {
+        cy.visitStory(
+            'MultiSelect',
+            'With clear button, selection and on change'
+        )
+    }
+)
+
+When('the clear button is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-clear"]').click()
+})
+
+Then('the MultiSelect is cleared', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledOnce
+        expect(win.onChange).to.be.calledWith({ selected: [] })
+    })
+})

package/src/multi-select/features/can_be_cleared.feature

@@ -0,0 +1,6 @@
+Feature: Clearing the MultiSelect
+
+    Scenario: The user clicks the clear button to clear the MultiSelect
+        Given a clearable MultiSelect with a selection and onchange handler is rendered
+        When the clear button is clicked
+        Then the MultiSelect is cleared

package/src/multi-select/features/can_be_disabled/index.js

@@ -0,0 +1,36 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a disabled MultiSelect with options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and disabled')
+})
+
+Given('a disabled MultiSelect with options and a selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options, a selection and disabled')
+})
+
+Given('the MultiSelect is closed', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Given('the MultiSelect is focused', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').focus()
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})
+
+When('the down arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{downarrow}')
+})
+
+When('the spacebar is pressed on the focused element', () => {
+    cy.focused().type(' ')
+})
+
+When('the up arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{uparrow}')
+})
+
+Then('the selection is displayed', () => {
+    cy.contains('option one').should('be.visible')
+})

package/src/multi-select/features/can_be_disabled.feature

@@ -0,0 +1,32 @@
+Feature: Disabled MultiSelect
+
+    Scenario: The disabled singleselect has a selection
+        Given a disabled MultiSelect with options and a selection is rendered
+        Then the selection is displayed
+
+    Scenario: The user clicks a disabled MultiSelect
+        Given a disabled MultiSelect with options is rendered
+        And the MultiSelect is closed
+        When the MultiSelect input is clicked
+        Then the options are not rendered
+
+    Scenario: The user presses the down arrowkey
+        Given a disabled MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the down arrowkey is pressed on the focused element
+        Then the options are not rendered
+
+    Scenario: The user presses the up arrowkey
+        Given a disabled MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the up arrowkey is pressed on the focused element
+        Then the options are not rendered
+
+    Scenario: The user presses the spacebar
+        Given a disabled MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the spacebar is pressed on the focused element
+        Then the options are not rendered

package/src/multi-select/features/can_be_empty/index.js

@@ -0,0 +1,28 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an empty MultiSelect is rendered', () => {
+    cy.visitStory('MultiSelect', 'Empty')
+})
+
+Given('an empty MultiSelect with custom empty text is rendered', () => {
+    cy.visitStory('MultiSelect', 'Empty with empty text')
+})
+
+Given('an empty MultiSelect with custom empty component is rendered', () => {
+    cy.visitStory('MultiSelect', 'Empty with empty component')
+})
+
+Then('an empty menu is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').should('exist')
+})
+
+Then('the custom empty text is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-empty"]')
+        .contains('Custom empty text')
+        .should('be.visible')
+})
+
+Then('the custom empty component is displayed', () => {
+    cy.contains('Custom empty component').should('be.visible')
+    cy.get('.custom-empty').should('exist')
+})

package/src/multi-select/features/can_be_empty.feature

@@ -0,0 +1,16 @@
+Feature: Loading status
+
+    Scenario: The user opens an empty MultiSelect
+        Given an empty MultiSelect is rendered
+        When the MultiSelect input is clicked
+        Then an empty menu is displayed
+
+    Scenario: The user opens an empty MultiSelect with custom empty text
+        Given an empty MultiSelect with custom empty text is rendered
+        When the MultiSelect input is clicked
+        Then the custom empty text is displayed
+
+    Scenario: The user opens an empty MultiSelect with a custom empty component
+        Given an empty MultiSelect with custom empty component is rendered
+        When the MultiSelect input is clicked
+        Then the custom empty component is displayed

package/src/multi-select/features/can_be_filtered/index.js

@@ -0,0 +1,23 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable MultiSelect with options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With filter field')
+})
+
+When('the user enters a filter string', () => {
+    cy.focused().type('one')
+})
+
+When("the user enters a filter string that doesn't match any options", () => {
+    cy.focused().type('does not exist')
+})
+
+Then('the matching options are displayed', () => {
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Then('the no match text is displayed', () => {
+    cy.contains('No match found').should('be.visible')
+})

package/src/multi-select/features/can_be_filtered.feature

@@ -0,0 +1,14 @@
+Feature: Filtering the MultiSelect options
+
+    Scenario: The user enters a filter string to filter the options
+        Given a filterable MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user enters a filter string
+        Then the matching options are displayed
+
+    Scenario: The user enters a filter string that doesn't match any options
+        Given a filterable MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user enters a filter string that doesn't match any options
+        Then the no match text is displayed
+        And the options are not rendered

package/src/multi-select/features/can_be_opened_and_closed/index.js

@@ -0,0 +1,32 @@
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options')
+})
+
+Given('the MultiSelect is closed', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Given('the MultiSelect is focused', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').focus()
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})
+
+When('the down arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{downarrow}')
+})
+
+When('the spacebar is pressed on the focused element', () => {
+    cy.focused().type(' ')
+})
+
+When('the up arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{uparrow}')
+})
+
+When('the escape key is pressed on the focused element', () => {
+    cy.focused().type('{esc}')
+})

package/src/multi-select/features/can_be_opened_and_closed.feature

@@ -0,0 +1,41 @@
+Feature: Opening and closing the MultiSelect
+
+    Scenario: The user clicks the MultiSelect input to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        When the MultiSelect input is clicked
+        Then the options are displayed
+
+    Scenario: The user presses the down arrowkey to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the down arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the up arrowkey to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the up arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the spacebar to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the spacebar is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user clicks the backdrop layer to hide the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user clicks the backdrop layer
+        Then the options are not rendered
+
+    Scenario: The user presses the escape key to hide the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is open
+        And the MultiSelect is focused
+        When the escape key is pressed on the focused element
+        Then the options are not rendered

package/src/multi-select/features/common/index.js

@@ -0,0 +1,49 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options and onChange handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and on change')
+})
+
+Given(
+    'a MultiSelect with options, a selection and onChange handler is rendered',
+    () => {
+        cy.visitStory('MultiSelect', 'With options, a selection and on change')
+    }
+)
+
+Given('a MultiSelect is rendered to which options can be added', () => {
+    cy.visitStory('MultiSelect', 'With options that can be added to the input')
+    cy.get('[data-test="dhis2-uicore-multiselect"]').should('exist')
+})
+
+Given('the MultiSelect is open', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('be.visible')
+    cy.contains('option three').should('be.visible')
+})
+
+When('the MultiSelect input is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+When('the user clicks the backdrop layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
+})
+
+Then('the options are not rendered', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Then('the options are displayed', () => {
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('be.visible')
+    cy.contains('option three').should('be.visible')
+})
+
+Then('the MultiSelect has focus', () => {
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})

package/src/multi-select/features/duplicate_option_values/index.js

@@ -0,0 +1,21 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a MultiSelect with options with a duplicate value and this value is selected',
+    () => {
+        cy.visitStory('MultiSelect', 'With duplicate selected option values')
+    }
+)
+Then(
+    'the first option with the selected value is displayed in the input',
+    () => {
+        cy.get('[data-test="dhis2-uicore-select-input"]').should(
+            'contain',
+            'option one'
+        )
+    }
+)
+Then('both options are highlighted in the dropdown', () => {
+    cy.get('input[name="option one"]').should('have.attr', 'checked')
+    cy.get('input[name="option one a"]').should('have.attr', 'checked')
+})

package/src/multi-select/features/duplicate_option_values.feature

@@ -0,0 +1,7 @@
+Feature: Duplicate option values result in a conflict between the input and dropdown UI
+
+    Scenario: The MultiSelect has options with a duplicate value and this value is selected
+        Given a MultiSelect with options with a duplicate value and this value is selected
+        And the MultiSelect is open
+        Then the first option with the selected value is displayed in the input
+        But both options are highlighted in the dropdown