@zohodesk/components 1.6.31 → 1.6.34

package/es/MultiSelect/MultiSelect.module.css

@@ -181,11 +181,10 @@
 }
 
 .more {
-  composes: d-cursor-pointer from global;
+  composes: d-cursor-pointer d-font-normal from global;
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
   margin-block-start: var(--zd_size5) ;
-  font-weight: var(--zd-fw-normal);
   margin-inline-end:var(--zd_size3) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -1,7 +1,10 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import AdvancedGroupMultiSelect from "../AdvancedGroupMultiSelect";
 describe('AdvancedGroupMultiSelect', () => {
+  afterEach(() => cleanup());
   const options = [{
     id: 'Group1',
     name: 'Group 1',
@@ -50,5 +53,672 @@ describe('AdvancedGroupMultiSelect', () => {
       isDisabled: true
     }));
     expect(asFragment()).toMatchSnapshot();
+  }); // the existing cases pass `options`; the component reads `groupedOptions`
+
+  const oneSelected = [{
+    groupId: 'Group1',
+    id: 'group11'
+  }]; // groupedOptions, selectedGroupOptions, onChange and emptyMessage are required without defaults
+
+  const getRequiredProps = () => ({
+    emptyMessage: 'No options',
+    onChange: jest.fn(),
+    groupedOptions: options,
+    selectedGroupOptions: []
+  });
+
+  const getSearchInput = container => container.querySelector('input[role="combobox"]'); // selected options and clear icon
+
+
+  test('Render with selectedGroupOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: oneSelected
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with two selectedGroupOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedGroupOptions not in groupedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'unknown'
+      }]
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedGroupOptions not in groupedOptions and allowValueFallback=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'unknown'
+      }],
+      allowValueFallback: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptionDetails', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'remote1'
+      }],
+      selectedOptionDetails: {
+        Group1: [{
+          id: 'remote1',
+          value: 'Remote option'
+        }]
+      },
+      allowValueFallback: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit as 1 and two selectedGroupOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions,
+      limit: 1
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions,
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: oneSelected,
+      isDisabled: true,
+      title: "Disabled title"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // appearance
+
+  test('Render with size as xmedium', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: oneSelected,
+      size: "xmedium"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'xmedium'])('Render with textBoxSize as %s', textBoxSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      textBoxSize: textBoxSize
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['primary', 'secondary'])('Render with variant as %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      variant: variant
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with borderColor as transparent', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      borderColor: "transparent"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      needBorder: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isFocus: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isFocus and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isFocus: true,
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needEffect=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      needEffect: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions,
+      palette: "dark"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      customClass: "custom-container"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with placeHolder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      placeHolder: "Select options"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the placeholder is hidden once an option is selected
+
+  test('Render with placeHolder and selectedGroupOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: oneSelected,
+      placeHolder: "Select options"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoComplete', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      autoComplete: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // children replace the textbox UI
+
+  test('Render with children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, getRequiredProps(), /*#__PURE__*/React.createElement("span", null, "Custom trigger")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children and customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      customClass: "custom-trigger"
+    }), /*#__PURE__*/React.createElement("span", null, "Custom trigger")));
+    expect(asFragment()).toMatchSnapshot();
+  }); // identification and accessibility
+
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "group-dataId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "group-dataId",
+      isDisabled: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      dataId: "group-dataId",
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      dataSelectorId: "group-selector"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      htmlId: "group-htmlId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y clearLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions,
+      a11y: {
+        clearLabel: 'Clear selected'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys clearText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      selectedGroupOptions: selectedGroupOptions,
+      i18nKeys: {
+        clearText: 'Remove all'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // open menu
+
+  test('Render with isPopupOpen and isPopupReady', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDisabled: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isReadOnly: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and selectedGroupOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedGroupOptions: selectedGroupOptions
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and a group without name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      groupedOptions: [{ ...options[0],
+        name: undefined
+      }]
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and group valueField and textField', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      groupedOptions: [{
+        id: 'Group3',
+        name: 'Group 3',
+        options: [{
+          key: 'k1',
+          label: 'Label 1'
+        }],
+        valueField: 'key',
+        textField: 'label'
+      }]
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and group secondaryField', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      groupedOptions: [{
+        id: 'Group3',
+        name: 'Group 3',
+        options: [{
+          id: 'k1',
+          text: 'Option 1',
+          secondary: 'Secondary 1'
+        }],
+        valueField: 'id',
+        textField: 'text',
+        secondaryField: 'secondary'
+      }]
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'medium'])('Render with isPopupOpen, isPopupReady and listItemSize as %s', listItemSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      listItemSize: listItemSize
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and customProps SuggestionsProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      customProps: {
+        SuggestionsProps: {
+          needBorder: false
+        }
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and needSelectAll', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and selectAllText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      selectAllText: "Select every option"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // select all is hidden once a limit is set
+
+  test('Render with isPopupOpen, isPopupReady, needSelectAll and limit', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needSelectAll: true,
+      limit: 3
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and limit reached', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedGroupOptions: oneSelected,
+      limit: 1
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, limit reached and i18nKeys limitReachedMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      selectedGroupOptions: oneSelected,
+      limit: 1,
+      i18nKeys: {
+        limitReachedMessage: 'Only one allowed'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isDataLoaded=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDataLoaded: false
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isNextOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isNextOptions: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and getFooter', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      getFooter: () => /*#__PURE__*/React.createElement("span", null, "Footer content")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the footer is replaced by a loader while data is loading
+
+  test('Render with isPopupOpen, isPopupReady, getFooter and isDataLoaded=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isDataLoaded: false,
+      getFooter: () => /*#__PURE__*/React.createElement("span", null, "Footer content")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // empty states
+
+  test('Render with isPopupOpen, isPopupReady and no groupedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      groupedOptions: [],
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no groupedOptions and emptyMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      groupedOptions: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      emptyMessage: "Nothing to select"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no groupedOptions and i18nKeys emptyText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      groupedOptions: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      i18nKeys: {
+        emptyText: 'Empty from i18n'
+      }
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, no groupedOptions and renderCustomEmptyState', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      groupedOptions: [],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomEmptyState: () => /*#__PURE__*/React.createElement("span", null, "Custom empty state")
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  }); // typed search
+
+  test('Render with isPopupOpen, isPopupReady and search text matching an option', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'Group2 Option 1'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and search text matching no option', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text matching no option and searchEmptyMessage', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      searchEmptyMessage: "No matches found"
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady, search text and needLocalSearch=false', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      needLocalSearch: false
+    })));
+    fireEvent.change(getSearchInput(container), {
+      target: {
+        value: 'zzz'
+      }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  }); // drop box
+
+  test.each(['medium', 'large'])('Render with isPopupOpen, isPopupReady and dropBoxSize as %s', dropBoxSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dropBoxSize: dropBoxSize
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      palette: "dark"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and isPadding', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      isPadding: true
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and animationStyle as default', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      animationStyle: "default"
+    })));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isPopupOpen, isPopupReady and dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, _extends({}, getRequiredProps(), {
+      isPopupOpen: true,
+      isPopupReady: true,
+      dataId: "group-dataId"
+    })));
+    expect(asFragment()).toMatchSnapshot();
   });
 });