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

package/es/HiSelect/HiSelect.test.js

@@ -1,1092 +0,0 @@
-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] });
-  // });
-});