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

package/src/multi-select/__tests__/selection-list.test.js

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { MultiSelectOption } from '../../multi-select-option/index.js'
+import { SelectionList } from '../selection-list.js'
+import '@testing-library/jest-dom'
+
+describe('<SelectionList />', () => {
+    const env = process.env
+
+    beforeEach(() => {
+        // Ensure process.env is also reset for cached modules
+        jest.resetModules()
+        process.env = { ...env }
+
+        // Allow spying on console.error and silence rendering errors
+        jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        // Restore process.env to original state
+        process.env = env
+
+        // Restore all mocks back to original values
+        jest.restoreAllMocks()
+    })
+
+    describe('production', () => {
+        it('should not throw an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            expect(() => {
+                render(
+                    <SelectionList
+                        selected={selected}
+                        options={options}
+                        disabled={false}
+                        onChange={() => {}}
+                    />
+                )
+            }).not.toThrow()
+        })
+
+        it('should show the selection for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            const { getByText } = render(
+                <SelectionList
+                    selected={selected}
+                    options={options}
+                    disabled={false}
+                    onChange={() => {}}
+                />
+            )
+
+            expect(getByText(selected)).toBeInTheDocument()
+        })
+
+        it('log an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            render(
+                <SelectionList
+                    selected={selected}
+                    options={options}
+                    disabled={false}
+                    onChange={() => {}}
+                />
+            )
+
+            expect(console.error).toHaveBeenCalledWith(
+                'There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.'
+            )
+        })
+    })
+
+    describe('not production', () => {
+        it('should throw an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'development'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            expect(() => {
+                render(
+                    <SelectionList
+                        selected={selected}
+                        options={options}
+                        disabled={false}
+                        onChange={() => {}}
+                    />
+                )
+            }).toThrow(
+                'There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.'
+            )
+        })
+    })
+})

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

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with onBlur handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With on blur')
+})
+
+Then('the onBlur handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onBlur).to.be.calledOnce
+        expect(win.onBlur).to.be.calledWith({
+            selected: [],
+        })
+    })
+})

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

@@ -0,0 +1,8 @@
+Feature: Calls onBlur cb when blurred
+
+    Scenario: Blurring a MultiSelect through clicking away
+        Given a MultiSelect with onBlur handler is rendered
+        And the MultiSelect input is clicked
+        And the MultiSelect has focus
+        When the user clicks the backdrop layer
+        Then the onBlur handler is called

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

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with onFocus handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With on focus')
+})
+
+Then('the onFocus handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onFocus).to.be.calledOnce
+        expect(win.onFocus).to.be.calledWith({
+            selected: [],
+        })
+    })
+})

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

@@ -0,0 +1,6 @@
+Feature: Calls onFocus cb when focused
+
+    Scenario: Focusing a MultiSelect through clicking
+        Given a MultiSelect with onFocus handler is rendered
+        When the MultiSelect input is clicked
+        Then the onFocus handler is called

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

@@ -0,0 +1,5 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with initial focus is rendered', () => {
+    cy.visitStory('MultiSelect', 'With initial focus')
+})

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

@@ -0,0 +1,5 @@
+Feature: Focusing the MultiSelect on mount
+
+    Scenario: The MultiSelect renders with focus
+        Given a MultiSelect with initial focus is rendered
+        Then the MultiSelect has focus

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')
+})