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

package/src/simple-single-select-field/simple-single-select-field.test.js

@@ -0,0 +1,144 @@
+import '@testing-library/jest-dom'
+import { Field } from '@dhis2-ui/field'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { SimpleSingleSelect } from '../simple-single-select/simple-single-select.js'
+import { SimpleSingleSelectField } from './simple-single-select-field.js'
+
+jest.mock('../simple-single-select/simple-single-select.js', () => ({
+    SimpleSingleSelect: jest.fn(() => <div />),
+}))
+
+jest.mock('@dhis2-ui/field', () => ({
+    Field: jest.fn(({ children }) => children),
+}))
+
+describe('<SimpleSingleSelectField />', () => {
+    afterEach(() => {
+        Field.mockClear()
+        SimpleSingleSelect.mockClear()
+    })
+
+    it('should forward props to the SimpleSingleSelect component', () => {
+        const options = []
+        const optionComponent = () => null
+        const onChange = jest.fn()
+        const onBlur = () => null
+        const onEndReached = () => null
+        const onFilterChange = () => null
+        const onFocus = () => null
+
+        render(
+            <SimpleSingleSelectField
+                label="Label text"
+                // Props that'll be passed to SimpleSingleSelect
+                name="foo"
+                options={options}
+                onChange={onChange}
+                autoFocus={false}
+                className=""
+                clearText=""
+                clearable={false}
+                optionComponent={optionComponent}
+                dataTest=""
+                dense={false}
+                disabled={false}
+                empty=""
+                filterHelpText=""
+                filterLabel=""
+                filterPlaceholder=""
+                filterValue=""
+                filterable={false}
+                loading={false}
+                menuLoadingText=""
+                menuMaxHeight=""
+                noMatchText=""
+                optionUpdateStrategy="off"
+                placeholder=""
+                prefix=""
+                tabIndex=""
+                valid={true}
+                value=""
+                valueLabel=""
+                onBlur={onBlur}
+                onEndReached={onEndReached}
+                onFilterChange={onFilterChange}
+                onFocus={onFocus}
+            />
+        )
+
+        expect(SimpleSingleSelect.mock.calls[0][0].name).toBe('foo')
+        expect(SimpleSingleSelect.mock.calls[0][0].options).toBe(options)
+        SimpleSingleSelect.mock.calls[0][0].onChange({ value: 'test' })
+        expect(onChange).toHaveBeenCalledWith('test')
+        expect(SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].className).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].clearText).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].clearable).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].optionComponent).toBe(
+            optionComponent
+        )
+        expect(SimpleSingleSelect.mock.calls[0][0].dataTest).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].dense).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].disabled).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].empty).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].filterHelpText).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].filterLabel).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].filterPlaceholder).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].filterValue).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].filterable).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].labelledBy).toBe('foo-label')
+        expect(SimpleSingleSelect.mock.calls[0][0].loading).toBe(false)
+        expect(SimpleSingleSelect.mock.calls[0][0].menuLoadingText).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].menuMaxHeight).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe(
+            'off'
+        )
+        expect(SimpleSingleSelect.mock.calls[0][0].placeholder).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].prefix).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].tabIndex).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].valid).toBe(true)
+        expect(SimpleSingleSelect.mock.calls[0][0].value).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].valueLabel).toBe('')
+        expect(SimpleSingleSelect.mock.calls[0][0].onBlur).toBe(onBlur)
+        expect(SimpleSingleSelect.mock.calls[0][0].onEndReached).toBe(
+            onEndReached
+        )
+        expect(SimpleSingleSelect.mock.calls[0][0].onFilterChange).toBe(
+            onFilterChange
+        )
+        expect(SimpleSingleSelect.mock.calls[0][0].onFocus).toBe(onFocus)
+    })
+
+    it('should pass the right props to the Field component', () => {
+        render(
+            <SimpleSingleSelectField
+                label="Label text"
+                className="class name"
+                dataTest="data test"
+                disabled={true}
+                required={true}
+                helpText="Help text"
+                validationText="Validation text"
+                valid={true}
+                // Props required by SimpleSingleSelect
+                name="foo"
+                options={[]}
+                onChange={() => null}
+            />
+        )
+
+        expect(Field.mock.calls[0][0].className).toBe('class name')
+        expect(Field.mock.calls[0][0].dataTest).toBe('data test')
+        expect(Field.mock.calls[0][0].disabled).toBe(true)
+        expect(Field.mock.calls[0][0].required).toBe(true)
+        expect(Field.mock.calls[0][0].labelId).toBe('foo-label')
+        expect(Field.mock.calls[0][0].label).toBe('Label text')
+        expect(Field.mock.calls[0][0].helpText).toBe('Help text')
+        expect(Field.mock.calls[0][0].validationText).toBe('Validation text')
+        expect(Field.mock.calls[0][0].error).toBe(undefined)
+        expect(Field.mock.calls[0][0].warning).toBe(undefined)
+        expect(Field.mock.calls[0][0].valid).toBe(true)
+    })
+})

package/src/single-select/__tests__/selection.test.js

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { SingleSelectOption } from '../../single-select-option/index.js'
+import { Selection } from '../selection.js'
+import '@testing-library/jest-dom'
+
+describe('<Selection />', () => {
+    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 = <SingleSelectOption key="1" label="one" value="1" />
+            const selected = 'value'
+
+            expect(() => {
+                render(
+                    <Selection
+                        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 = <SingleSelectOption key="1" label="one" value="1" />
+            const selected = 'value'
+
+            const { getByText } = render(
+                <Selection
+                    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 = <SingleSelectOption key="1" label="one" value="1" />
+            const selected = 'value'
+
+            render(
+                <Selection
+                    selected={selected}
+                    options={options}
+                    disabled={false}
+                    onChange={() => {}}
+                />
+            )
+
+            expect(console.error).toHaveBeenCalledWith(
+                'There is no option with the value: "value". Make sure that the value passed to the selected prop matches 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 = <SingleSelectOption key="1" label="one" value="1" />
+            const selected = 'value'
+
+            expect(() => {
+                render(
+                    <Selection
+                        selected={selected}
+                        options={options}
+                        disabled={false}
+                        onChange={() => {}}
+                    />
+                )
+            }).toThrow(
+                'There is no option with the value: "value". Make sure that the value passed to the selected prop matches the value of an existing option.'
+            )
+        })
+    })
+})

package/src/single-select/__tests__/single-select.test.js

@@ -0,0 +1,23 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { SingleSelect } from '../single-select.js'
+
+describe('<SingleSelect />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(<SingleSelect placeholder="placeholder" onKeyDown={onKeyDown} />)
+
+        fireEvent.keyDown(
+            screen.getByTestId('dhis2-uicore-singleselect-placeholder'),
+            { key: 'Enter', code: 'Enter', charCode: 13 }
+        )
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { selected: '' },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

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

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with onBlur handler is rendered', () => {
+    cy.visitStory('SingleSelect', '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/single-select/features/accepts_blur_cb.feature

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

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

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with onFocus handler is rendered', () => {
+    cy.visitStory('SingleSelect', '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/single-select/features/accepts_focus_cb.feature

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with options and a loading flag is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options and loading')
+})
+
+Given(
+    'a SingleSelect with options, a loading flag and a loading text is rendered',
+    () => {
+        cy.visitStory('SingleSelect', '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-singleselect-loading"]')
+        .contains('Loading options')
+        .should('be.visible')
+})

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

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

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

@@ -0,0 +1,31 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with more than ten options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With more than ten options')
+})
+
+Given(
+    'a SingleSelect with more than three options and a 100px max-height is rendered',
+    () => {
+        cy.visitStory(
+            'SingleSelect',
+            '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/single-select/features/accepts_max_height.feature

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with invalid options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With invalid options')
+})
+
+Given('a SingleSelect with invalid filterable options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With invalid filterable options')
+})
+
+When('the user enters a filter string', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect-filterinput"]')
+        .click()
+        .focused()
+        .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/single-select/features/allows_invalid_options.feature

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

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

@@ -0,0 +1,38 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a SingleSelect with a disabled option and onChange handler is rendered',
+    () => {
+        cy.visitStory('SingleSelect', 'With disabled option and on change')
+    }
+)
+
+Given(
+    'a SingleSelect with custom options and onChange handler is rendered',
+    () => {
+        cy.visitStory('SingleSelect', 'With custom options and on change')
+    }
+)
+
+When('an option is clicked', () => {
+    cy.contains('option one').click()
+})
+
+When('the disabled option is clicked', () => {
+    cy.contains('disabled option').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 onchange handler is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.not.be.called
+    })
+})

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

@@ -0,0 +1,21 @@
+Feature: Selecting options
+
+    Scenario: The user clicks an option to select it
+        Given a SingleSelect with options and onChange handler is rendered
+        And the SingleSelect is open
+        When an option is clicked
+        Then the clicked option is selected
+        And the options are not rendered
+
+    Scenario: The user clicks a custom option to select it
+        Given a SingleSelect with custom options and onChange handler is rendered
+        And the SingleSelect is open
+        When an option is clicked
+        Then the clicked option is selected
+        And the options are not rendered
+
+    Scenario: The user clicks a disabled option
+        Given a SingleSelect with a disabled option and onChange handler is rendered
+        And the SingleSelect is open
+        When the disabled option is clicked
+        Then the onchange handler is not called

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a disabled SingleSelect with options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options and disabled')
+})
+
+Given(
+    'a disabled SingleSelect with options and a selection is rendered',
+    () => {
+        cy.visitStory('SingleSelect', 'With options, a selection and disabled')
+    }
+)
+
+Given('the SingleSelect 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 SingleSelect 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')
+})