@hipay/hipay-material-ui 2.3.1-rc3 → 2.3.1-rc4

package/es/HiSelect/HiSelect.test.js

@@ -0,0 +1,1092 @@
+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 '@material-ui/core/Popper';
+import ListItem from '@material-ui/core/ListItem';
+describe('<HiSelect />', function () {
+  var shallow;
+  var mount;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+  });
+  beforeEach(function () {
+    mount = createMount();
+  });
+  afterEach(function () {
+    mount.cleanUp();
+  }); // const playerNumberItem = { id: 2, label: 'n°12' };
+
+  var 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', function () {
+    var handler = spy();
+    var wrapper = shallow(React.createElement(HiSelect, {
+      name: 'playerNumber',
+      onChange: handler,
+      options: playerNumberList,
+      value: 0,
+      multiple: false,
+      searchable: true,
+      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', function () {
+    var myFilter = function myFilter(item, search) {
+      return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1 || foldAccents(item.status.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
+    };
+
+    var handler = spy();
+    var wrapper = shallow(React.createElement(HiSelect, {
+      name: 'playerNumber',
+      onChange: handler,
+      options: playerNumberList,
+      value: 0,
+      multiple: false,
+      searchable: true,
+      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
+
+    var wrapper2 = mount(React.createElement(HiSelect, {
+      id: "select",
+      hideCheckbox: true,
+      hiSelectableListProps: {
+        hideCheckbox: true,
+        lazy: false
+      },
+      name: 'playerNumber',
+      onChange: handler,
+      options: playerNumberList,
+      value: 0,
+      multiple: false,
+      searchable: true,
+      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', function () {
+    var handleChange = spy();
+    var handleSubmit = spy();
+    var wrapper = mount(React.createElement(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', function () {
+    var handleChange = spy();
+    var handleSubmit = spy();
+    var wrapper = mount(React.createElement(HiSelect, {
+      id: "select",
+      name: 'playerNumber',
+      options: playerNumberList,
+      value: [0],
+      onChange: handleChange,
+      onSubmit: handleSubmit,
+      multiple: true,
+      searchable: true,
+      hasAll: true,
+      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', function () {
+    var handleChange = spy();
+    var 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'
+    }];
+    var wrapper = mount(React.createElement(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', function () {
+    var handleChange = spy();
+    var 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'
+    }];
+    var wrapper = mount(React.createElement(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', function () {
+    var handleChange = spy();
+    var 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'
+    }];
+    var wrapper = mount(React.createElement(HiSelect, {
+      id: "select",
+      name: 'playerNumber',
+      options: unsortList,
+      value: 0,
+      onChange: handleChange,
+      hiSelectableListProps: {
+        hideCheckbox: true,
+        lazy: false
+      },
+      searchable: true
+    })); // 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', function () {
+    var handleChange = spy();
+    var 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'
+    }];
+    var wrapper = mount(React.createElement(HiSelect, {
+      id: "select",
+      name: 'playerNumber',
+      options: unsortList,
+      value: 0,
+      onChange: handleChange,
+      hiSelectableListProps: {
+        hideCheckbox: true,
+        sort: true,
+        lazy: false
+      },
+      searchable: true
+    })); // 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', function () {
+    var handleChange = spy();
+    var 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'
+    }];
+    var wrapper = mount(React.createElement(HiSelect, {
+      id: "select",
+      name: 'playerNumber',
+      options: unsortList,
+      value: 0,
+      onChange: handleChange,
+      hiSelectableListProps: {
+        hideCheckbox: true,
+        sort: true,
+        lazy: false
+      },
+      searchable: true
+    })); // 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', function () {
+    var handleChange = spy();
+    var handleSubmit = spy();
+    var wrapper = mount(React.createElement(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', function () {
+    var valueMultiple = [0];
+    var handleCallCount = 0;
+
+    var handleChange = function handleChange(event, value) {
+      valueMultiple = value;
+      handleCallCount += 1;
+    };
+
+    var handleSubmit = spy();
+    var wrapper = mount(React.createElement(HiSelect, {
+      id: "select",
+      name: 'playerNumber',
+      options: playerNumberList,
+      value: valueMultiple,
+      onChange: handleChange,
+      onSubmit: handleSubmit,
+      multiple: true,
+      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] });
+  // });
+});