@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/HiSelect/HiSelect.test.js

@@ -0,0 +1,998 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import { foldAccents } from '../utils/helpers';
+import HiSelect from './HiSelect';
+import HiSelectInput from './HiSelectInput';
+import HiSelectableList from '../HiSelectableList';
+import HiCheckbox from '../HiCheckbox';
+import HiInput from '../HiForm/HiInput';
+import HiSelectableListItem from '../HiSelectableList/HiSelectableListItem';
+import Popper from '@mui/material/Popper';
+import ListItem from '@mui/material/ListItem';
+
+
+describe('<HiSelect />', () => {
+    let shallow;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    // const playerNumberItem = { id: 2, label: 'n°12' };
+
+    const playerNumberList = [
+        { id: 0, label: 'aaa', status: 'in' },
+        { id: 1, label: 'bbb', status: 'out' },
+        { id: 2, label: 'AAA', status: 'in' },
+    ];
+
+    // const filteredPlayerNumberList = [
+    //     { id: 0, label: 'n°1O' },
+    //     { id: 2, label: 'n°12' },
+    // ];
+
+    it('should render a functional simple select', () => {
+        const handler = spy();
+
+        const wrapper = shallow(
+            <HiSelect
+                name={'playerNumber'}
+                onChange={handler}
+                options={playerNumberList}
+                value={0}
+                multiple={false}
+                searchable
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        assert.strictEqual(wrapper.state().open, false, 'should be close on mount');
+        wrapper
+            .find(HiSelectInput)
+            .dive()
+            .props()
+            .onClick();
+        assert.strictEqual(wrapper.state().open, true, 'should be open after select input click');
+
+        wrapper.update(); // open popper
+
+        assert.strictEqual(
+            wrapper.state().suggestions.length,
+            3,
+            'should have complete options as suggestions',
+        );
+
+        // wrapper
+        //     .find(HiSearchField)
+        //     .dive()
+        //     .props()
+        //     .onFilteredList(filteredPlayerNumberList);
+        // assert.strictEqual(
+        //     wrapper.state().suggestions.length,
+        //     2,
+        //     'should have filtered options as suggestions',
+        // );
+        //
+        // wrapper
+        //     .find(HiSelectableList)
+        //     .dive()
+        //     .props()
+        //     .onSelect(undefined, playerNumberItem);
+        // assert.strictEqual(handler.calledOnce, true, 'should onChange callback be called once');
+        // assert.strictEqual(
+        //     handler.calledWith(undefined, playerNumberItem.id),
+        //     true,
+        //     'should onChange callback be called with selected item',
+        // );
+        //
+        // wrapper.setProps({ value: [0, 1] });
+        // assert.strictEqual(
+        //     wrapper
+        //         .find(HiSelectInput)
+        //         .dive()
+        //         .props().value,
+        //     '2 items selected',
+        //     'should display 2 items selected',
+        // );
+        //
+        // wrapper.setProps({ value: [0, 1, 2] });
+        // assert.strictEqual(
+        //     wrapper
+        //         .find(HiSelectInput)
+        //         .dive()
+        //         .props().value,
+        //     '3 items selected',
+        //     'should display "3 items selected"',
+        // );
+    });
+
+    it('should render a functional custom select', () => {
+        const myFilter = function(item, search) {
+            return search === '' ||
+                foldAccents(
+                    item.label
+                        .toString()
+                        .toLowerCase())
+                        .search(foldAccents(search.toLowerCase())) !== -1 ||
+                foldAccents(
+                    item.status
+                        .toString()
+                        .toLowerCase())
+                        .search(foldAccents(search.toLowerCase())) !== -1;
+        };
+        const handler = spy();
+
+        const wrapper = shallow(
+            <HiSelect
+                name={'playerNumber'}
+                onChange={handler}
+                options={playerNumberList}
+                value={0}
+                multiple={false}
+                searchable
+                filterFunc={myFilter}
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        assert.strictEqual(wrapper.state().open, false, 'should be close on mount');
+
+        wrapper
+            .find(HiSelectInput)
+            .dive()
+            .props()
+            .onClick();
+        assert.strictEqual(wrapper.state().open, true, 'should be open after select input click');
+
+        wrapper.update(); // open popper
+
+        assert.strictEqual(
+            wrapper.state().suggestions.length,
+            3,
+            'should have complete options as suggestions',
+        );
+
+        // test custom search function
+        const wrapper2 = mount(
+            <HiSelect
+                id="select"
+                hideCheckbox
+                hiSelectableListProps={{ hideCheckbox: true, lazy: false }}
+                name={'playerNumber'}
+                onChange={handler}
+                options={playerNumberList}
+                value={0}
+                multiple={false}
+                searchable
+                filterFunc={myFilter}
+            />,
+        );
+
+        wrapper2.find(HiSelectInput).simulate('click');
+
+        assert.strictEqual(wrapper2.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper2.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper2.find(HiInput).length, 1, 'should have 1 HiInput');
+
+        wrapper2.find('input[type="text"]').simulate('change', { target: { value: 'in' } });
+        assert.strictEqual(wrapper2.find(HiSelectableListItem).length, 2, 'should have 2 HiSelectableListItem');
+        assert.strictEqual(wrapper2.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper2.find(HiSelectableListItem).at(1).text(), 'AAA');
+    });
+
+    it('tests to mount simple HiSelect', () => {
+        const handleChange = spy();
+        const handleSubmit = spy();
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={playerNumberList}
+                value={0}
+                onChange={handleChange}
+                onSubmit={handleSubmit}
+                multiple={false}
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiInput).length, 0, 'should not have HiInput');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 3, 'should have 3 HiCheckbox');
+        assert.strictEqual(wrapper.find(HiInput).length, 0, 'should not have HiInput');
+
+        // Click on HiSelectInput => close
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem');
+
+        // Click on ListItem => change and close
+        wrapper.find(ListItem).at(2).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on change and close with click');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 1);
+        assert.strictEqual(handleChange.args[0][1], 2);
+        assert.strictEqual(handleChange.args[0][2], playerNumberList[2]);
+    });
+
+    it('tests to mount HiSelect multiple with hasAll and search', () => {
+        const handleChange = spy();
+        const handleSubmit = spy();
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={playerNumberList}
+                value={[0]}
+                onChange={handleChange}
+                onSubmit={handleSubmit}
+                multiple
+                searchable
+                hasAll
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiInput).length, 0, 'should not have HiInput');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 4, 'should have 4 ListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 4, 'should have 4 HiCheckbox');
+        assert.strictEqual(wrapper.find(HiInput).length, 1, 'should have 1 HiInput');
+
+        // Click on HiSelectInput => close
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Press "enter" on HiSelectInput => onSubmit
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have HiSelectableListItem');
+        assert.strictEqual(
+            handleSubmit.callCount,
+            1,
+            'should have been called once handleSubmit',
+        );
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 4, 'should have 4 HiCheckbox');
+        assert.strictEqual(wrapper.find(ListItem).length, 4, 'should have 4 ListItem');
+
+        // Click on ListItem => change and not close (because multiple)
+        wrapper.find(ListItem).at(3).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 1);
+        assert.strictEqual(handleChange.args[0][1].length, 2);
+        assert.strictEqual(handleChange.args[0][1][0], 0);
+        assert.strictEqual(handleChange.args[0][1][1], 2);
+        assert.strictEqual(handleChange.args[0][2], playerNumberList[2]);
+
+        // Press "space" on ListItem => change and not close (because multiple)
+        wrapper.find(ListItem).at(2).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 2);
+        assert.strictEqual(JSON.stringify(handleChange.args[1][1]), JSON.stringify([0, 1]));
+        assert.strictEqual(JSON.stringify(handleChange.args[1][2]), JSON.stringify(playerNumberList[1]));
+        // assert.strictEqual(handleChange.args[1][2], playerNumberList[1]);
+
+        // Press "enter" on ListItem => close and no change (because multiple)
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 4 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 2);
+
+        // Press "arrow up" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 38 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 4, 'should have 4 ListItem');
+
+        // Press "enter" on ListItem => close and no change (because multiple)
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 4 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 2);
+
+        // Press "arrow down" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 40 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 4, 'should have 4 ListItem');
+
+        // Click on ListItem '_all' => change and not close (because multiple)
+        wrapper.find(ListItem).at(0).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 4, 'should have 4 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 3);
+        assert.strictEqual(JSON.stringify(handleChange.args[2][1]), JSON.stringify([0, 1, 2]));
+        assert.strictEqual(JSON.stringify(handleChange.args[2][2]), JSON.stringify({ id: '_all', label: 'All' }));
+    });
+
+    it('tests unsorted select', () => {
+        const handleChange = spy();
+        const unsortList = [
+            { id: 0, label: 'aaa' },
+            { id: 1, label: 'bbb' },
+            { id: 2, label: 'AAA' },
+            { id: 3, label: 'Abc' },
+            { id: 4, label: '123' },
+            { id: 5, label: 'été' },
+            { id: 6, label: 'avion' },
+            { id: 7, label: 'BalLON' },
+            { id: 8, label: 'evier' },
+            { id: 9, label: 'zigzag' },
+            { id: 10, label: 'éolienne' },
+        ];
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={unsortList}
+                value={0}
+                onChange={handleChange}
+                hiSelectableListProps={{ hideCheckbox: true, lazy: false }}
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 11, 'should have 11 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 0, 'should not have HiCheckbox');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'bbb');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), '123');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(6).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(7).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(8).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(9).text(), 'zigzag');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(10).text(), 'éolienne');
+    });
+
+    it('tests sorted select', () => {
+        const handleChange = spy();
+        const unsortList = [
+            { id: 0, label: 'aaa' },
+            { id: 1, label: 'bbb' },
+            { id: 2, label: 'AAA' },
+            { id: 3, label: 'Abc' },
+            { id: 4, label: '123' },
+            { id: 5, label: 'été' },
+            { id: 6, label: 'avion' },
+            { id: 7, label: 'BalLON' },
+            { id: 8, label: 'evier' },
+            { id: 9, label: 'zigzag' },
+            { id: 10, label: 'éolienne' },
+        ];
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={unsortList}
+                value={0}
+                onChange={handleChange}
+                hiSelectableListProps={{ hideCheckbox: true, sort: true, lazy: false }}
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 11, 'should have 11 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 0, 'should not have HiCheckbox');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), '123');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(6).text(), 'bbb');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(7).text(), 'éolienne');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(8).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(9).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(10).text(), 'zigzag');
+    });
+
+    it('tests search on unsorted select', () => {
+        const handleChange = spy();
+        const unsortList = [
+            { id: 0, label: 'aaa' },
+            { id: 1, label: 'bbb' },
+            { id: 2, label: 'AAA' },
+            { id: 3, label: 'Abc' },
+            { id: 4, label: '123' },
+            { id: 5, label: 'été' },
+            { id: 6, label: 'avion' },
+            { id: 7, label: 'BalLON' },
+            { id: 8, label: 'evier' },
+            { id: 9, label: 'zigzag' },
+            { id: 10, label: 'éolienne' },
+        ];
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={unsortList}
+                value={0}
+                onChange={handleChange}
+                hiSelectableListProps={{ hideCheckbox: true, lazy: false }}
+                searchable
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiInput).length, 0, 'should not have HiInput');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 11, 'should have 11 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 0, 'should not have HiCheckbox');
+        assert.strictEqual(wrapper.find(HiInput).length, 1, 'should have 1 HiInput');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'bbb');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), '123');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(6).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(7).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(8).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(9).text(), 'zigzag');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(10).text(), 'éolienne');
+
+        wrapper.find('input').simulate('change', { target: { value: 'a' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 6, 'should have 6 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'zigzag');
+
+        wrapper.find('input').simulate('change', { target: { value: 'Aa' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 2, 'should have 2 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+
+        wrapper.find('input').simulate('change', { target: { value: 'e' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'éolienne');
+    });
+
+    it('tests search on sorted select', () => {
+        const handleChange = spy();
+        const unsortList = [
+            { id: 0, label: 'aaa' },
+            { id: 1, label: 'bbb' },
+            { id: 2, label: 'AAA' },
+            { id: 3, label: 'Abc' },
+            { id: 4, label: '123' },
+            { id: 5, label: 'été' },
+            { id: 6, label: 'avion' },
+            { id: 7, label: 'BalLON' },
+            { id: 8, label: 'evier' },
+            { id: 9, label: 'zigzag' },
+            { id: 10, label: 'éolienne' },
+        ];
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={unsortList}
+                value={0}
+                onChange={handleChange}
+                hiSelectableListProps={{ hideCheckbox: true, sort: true, lazy: false }}
+                searchable
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 11, 'should have 11 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 0, 'should not have HiCheckbox');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), '123');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(6).text(), 'bbb');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(7).text(), 'éolienne');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(8).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(9).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(10).text(), 'zigzag');
+
+        wrapper.find('input').simulate('change', { target: { value: 'a' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 6, 'should have 6 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'zigzag');
+
+        wrapper.find('input').simulate('change', { target: { value: 'Aa' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 2, 'should have 2 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+
+        wrapper.find('input').simulate('change', { target: { value: 'e' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'éolienne');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'evier');
+    });
+
+    it('other tests search on sorted select', () => {
+        const handleChange = spy();
+        const unsortList = [
+            { id: 0, label: 'aaa' },
+            { id: 1, label: 'bbb' },
+            { id: 2, label: 'AAA' },
+            { id: 3, label: 'Abc' },
+            { id: 4, label: '123' },
+            { id: 5, label: 'été' },
+            { id: 6, label: 'avion' },
+            { id: 7, label: 'BalLON' },
+            { id: 8, label: 'evier' },
+            { id: 9, label: 'zigzag' },
+            { id: 10, label: 'éolienne' },
+        ];
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={unsortList}
+                value={0}
+                onChange={handleChange}
+                hiSelectableListProps={{ hideCheckbox: true, sort: true, lazy: false }}
+                searchable
+            />,
+        );
+
+        // Check components when it is closed
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Click on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('click');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 11, 'should have 11 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiCheckbox).length, 0, 'should not have HiCheckbox');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), '123');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(6).text(), 'bbb');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(7).text(), 'éolienne');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(8).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(9).text(), 'evier');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(10).text(), 'zigzag');
+
+        wrapper.find('input').simulate('change', { target: { value: 'a' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 6, 'should have 6 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'Abc');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(3).text(), 'avion');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(4).text(), 'BalLON');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(5).text(), 'zigzag');
+
+        wrapper.find('input').simulate('change', { target: { value: 'Aa' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 2, 'should have 2 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'aaa');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'AAA');
+
+        wrapper.find('input').simulate('change', { target: { value: 'e' } });
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(0).text(), 'éolienne');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(1).text(), 'été');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).at(2).text(), 'evier');
+    });
+
+    it('should handle keyboard on HiSelect simple', () => {
+        const handleChange = spy();
+        const handleSubmit = spy();
+
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={playerNumberList}
+                value={0}
+                onChange={handleChange}
+                onSubmit={handleSubmit}
+                multiple={false}
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList on open with space');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem on open with space');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem on open with space');
+
+        // Press "space" on ListItem => change and close
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on change and close with space');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 3 HiSelectableListItem on change and close with space');
+        assert.strictEqual(handleChange.callCount, 1);
+        assert.strictEqual(handleChange.args[0][1], 1);
+        assert.strictEqual(handleChange.args[0][2], playerNumberList[1]);
+
+        // Press "arrow down" => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 40 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList on open with arrow down');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem on open with arrow down');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem on open with arrow down');
+
+        // Press "enter" on ListItem => close
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on close with enter');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 3 HiSelectableListItem on close with enter');
+
+        // Press "arrow up" => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 38 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList on open with arrow up');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem on open with arrow up');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem on open with arrow up');
+
+        // Press "tab" on ListItem => close
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 9 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on close with tab');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 3 HiSelectableListItem on close with tab');
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+
+        // Press "escape" => close
+        wrapper.find(ListItem).at(1).simulate('keydown', { keyCode: 27 });
+        assert.strictEqual(wrapper.find(HiSelectInput).length, 1, 'should have HiSelectInput');
+        assert.strictEqual(wrapper.find(Popper).length, 1, 'should have Popper');
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList');
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+
+        // Press "enter" on ListItem => change and close
+        wrapper.find(ListItem).at(0).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on change and close with enter');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have 3 HiSelectableListItem');
+        assert.strictEqual(handleChange.callCount, 3);
+        assert.strictEqual(handleChange.args[2][1], 0);
+        assert.strictEqual(handleChange.args[2][2], playerNumberList[0]);
+
+        // Press "enter" on HiSelectInput => onSubmit
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 0, 'should not have HiSelectableList on submit with enter');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 0, 'should not have HiSelectableListItem on submit with enter');
+        assert.strictEqual(
+            handleSubmit.callCount,
+            1,
+            'should have been called once handleSubmit',
+        );
+    });
+
+    it('should handle keyboard on HiSelect multiple', () => {
+        let valueMultiple = [0];
+        let handleCallCount = 0;
+        const handleChange = (event, value) => {
+            valueMultiple = value;
+            handleCallCount += 1;
+        };
+        const handleSubmit = spy();
+        const wrapper = mount(
+            <HiSelect
+                id="select"
+                name={'playerNumber'}
+                options={playerNumberList}
+                value={valueMultiple}
+                onChange={handleChange}
+                onSubmit={handleSubmit}
+                multiple
+                hiSelectableListProps={{ lazy: false }}
+            />,
+        );
+
+        // Press "space" on HiSelectInput => open
+        wrapper.find(HiSelectInput).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(wrapper.find(ListItem).length, 3, 'should have 3 ListItem');
+
+        // Press "space" on ListItem => change and do not close
+        wrapper.find(ListItem).at(2).simulate('keydown', { keyCode: 32 });
+        assert.strictEqual(wrapper.find(HiSelectableList).length, 1, 'should have HiSelectableList on change with space');
+        assert.strictEqual(wrapper.find(HiSelectableListItem).length, 3, 'should have 3 HiSelectableListItem');
+        assert.strictEqual(handleCallCount, 1);
+        assert.deepEqual(valueMultiple, [0, 2]);
+    });
+
+    // it('should render a functional simple select with "all" item', () => {
+    //     const handler = spy();
+    //
+    //     const wrapper = shallow(
+    //         <HiSelect
+    //             name={'playerNumber'}
+    //             onChange={handler}
+    //             options={playerNumberList}
+    //             value={0}
+    //             multiple={false}
+    //             searchable
+    //             hasAll
+    //         />,
+    //     );
+    //
+    //     assert.strictEqual(wrapper.state().open, false, 'should be close on mount');
+    //     wrapper
+    //         .find(HiSelectInput)
+    //         .dive()
+    //         .props()
+    //         .onClick();
+    //     assert.strictEqual(wrapper.state().open, true, 'should be open after select input click');
+    //
+    //     wrapper.update(); // open popper
+    //
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         3,
+    //         'should have complete options as suggestions',
+    //     );
+    //     wrapper
+    //         .find(HiSearchField)
+    //         .dive()
+    //         .props()
+    //         .onFilteredList(filteredPlayerNumberList);
+    //
+    //     // wrapper.update();
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         2,
+    //         'should have filtered options as suggestions',
+    //     );
+    //
+    //     wrapper
+    //         .find(HiSelectableList)
+    //         .dive()
+    //         .props()
+    //         .onSelect(undefined, playerNumberItem);
+    //     assert.strictEqual(handler.calledOnce, true, 'should onChange callback be called once');
+    //     assert.strictEqual(
+    //         handler.calledWith(undefined, playerNumberItem.id),
+    //         true,
+    //         'should onChange callback be called with selected item',
+    //     );
+    //
+    //     wrapper.setProps({ value: [0, 1, 2] });
+    //     assert.strictEqual(
+    //         wrapper
+    //             .find(HiSelectInput)
+    //             .dive()
+    //             .props().value,
+    //         'All',
+    //         'should display all label',
+    //     );
+    // });
+    //
+    // it('should render a functional multi select', () => {
+    //     const handler = spy();
+    //
+    //     const wrapper = shallow(
+    //         <HiSelect
+    //             name={'playerNumber'}
+    //             onChange={handler}
+    //             options={playerNumberList}
+    //             value={[0, 1]}
+    //             multiple
+    //             searchable
+    //             checkbox
+    //             hasAll
+    //         />,
+    //     );
+    //
+    //     assert.strictEqual(wrapper.state().open, false, 'should be close on mount');
+    //     wrapper
+    //         .find(HiSelectInput)
+    //         .dive()
+    //         .props()
+    //         .onClick();
+    //     assert.strictEqual(wrapper.state().open, true, 'should be open after select input click');
+    //
+    //     wrapper.update(); // open popper
+    //
+    //     // Handle suggestions
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         4,
+    //         "should have complete options with 'all' as suggestions",
+    //     );
+    //     wrapper
+    //         .find(HiSearchField)
+    //         .dive()
+    //         .props()
+    //         .onFilteredList(filteredPlayerNumberList);
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         2,
+    //         "should have filtered options without 'all' as suggestions",
+    //     );
+    //
+    //     // Select item
+    //     wrapper
+    //         .find(HiSelectableList)
+    //         .dive()
+    //         .props()
+    //         .onSelect(undefined, playerNumberItem);
+    //     assert.strictEqual(handler.calledOnce, true, 'should onChange callback be called once');
+    //     assert.strictEqual(
+    //         handler.calledWith(undefined, [0, 1, 2]),
+    //         true,
+    //         'should onChange callback be called with new selected item',
+    //     );
+    //
+    //     // Deselect item
+    //     wrapper
+    //         .find(HiSelectableList)
+    //         .dive()
+    //         .props()
+    //         .onSelect(undefined, { id: 0, label: 'n°10' });
+    //     assert.strictEqual(handler.calledTwice, true, 'should onChange callback be called twice');
+    //     assert.strictEqual(
+    //         handler.calledWith(undefined, [1, 2]),
+    //         true,
+    //         'should onChange callback be called without deselected item',
+    //     );
+    // });
+    //
+    // it('should render add _all and _no_result option', () => {
+    //     const handler = spy();
+    //
+    //     const wrapper = shallow(
+    //         <HiSelect
+    //             name={'playerNumber'}
+    //             onChange={handler}
+    //             options={playerNumberList}
+    //             value={[0, 1]}
+    //             multiple
+    //             searchable
+    //             checkbox
+    //             hasAll
+    //         />,
+    //     );
+    //
+    //     wrapper
+    //         .find(HiSelectInput)
+    //         .dive()
+    //         .props()
+    //         .onClick();
+    //     wrapper.update(); // open popper
+    //
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         4,
+    //         "should have complete options with 'all' as suggestions",
+    //     );
+    //     wrapper
+    //         .find(HiSearchField)
+    //         .dive()
+    //         .props()
+    //         .onFilteredList([]);
+    //     assert.strictEqual(
+    //         wrapper.state().suggestions.length,
+    //         1,
+    //         "should have '_no_result' as suggestions",
+    //     );
+    //
+    //     wrapper.setProps({ value: [0, 1, 2] });
+    //     assert.strictEqual(
+    //         wrapper
+    //             .find(HiSelectInput)
+    //             .dive()
+    //             .props().value,
+    //         'All',
+    //         'should display all label if all options are selected',
+    //     );
+    //
+    //     // Click on _all (deselect / select)
+    //     wrapper
+    //         .find(HiSelectableList)
+    //         .dive()
+    //         .props()
+    //         .onSelect(undefined, { id: '_all', label: 'All' });
+    //     assert.strictEqual(
+    //         handler.calledWith(undefined, []),
+    //         true,
+    //         'should onChange callback be called with all options id',
+    //     );
+    //
+    //     wrapper.setProps({ value: [] });
+    //     wrapper.update();
+    //
+    //     assert.strictEqual(
+    //         wrapper
+    //             .find(HiSelectInput)
+    //             .dive()
+    //             .props().value,
+    //         '',
+    //         'should display blank label if none options are selected',
+    //     );
+    //     wrapper
+    //         .find(HiSelectableList)
+    //         .dive()
+    //         .props()
+    //         .onSelect(undefined, { id: '_all', label: 'All' });
+    //     assert.strictEqual(
+    //         handler.calledWith(undefined, [0, 1, 2]),
+    //         true,
+    //         'should onChange callback be called with all options id',
+    //     );
+    //
+    //     wrapper.setProps({ value: [0, 1, 2] });
+    // });
+});