@zohodesk/components 1.6.32 → 1.6.34

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import SelectedOptions from "../SelectedOptions";
 describe('SelectedOptions', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -37,5 +38,294 @@ describe('SelectedOptions', () => {
       renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, " SelectedOptions Custom Value")
     }));
     expect(asFragment()).toMatchSnapshot();
+  }); // highLightedSelectOptions is read for every option, so each case below supplies it
+
+  const options = [{
+    id: 1,
+    value: 'Option 1'
+  }, {
+    id: 2,
+    value: 'Option 2'
+  }, {
+    id: 3,
+    value: 'Option 3'
+  }];
+  test('Render with selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highLightedSelectOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [2],
+      selectedOptions: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit as 2', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      limit: 2
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn()
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and isReadOnly', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn(),
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onRemove: jest.fn(),
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onRemove and a disabled option', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [options[0], { ...options[1],
+        isDisabled: true
+      }, options[2]],
+      onRemove: jest.fn()
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onSelect', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      onSelect: jest.fn()
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with size as xmedium', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      size: "xmedium"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      palette: "dark"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      dataId: "selected-options-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar and highLightedSelectOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-info',
+        iconSize: '12'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon and highLightedSelectOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-agent'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with mixed option types', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1'
+      }, {
+        id: 2,
+        value: 'Option 2',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }, {
+        id: 3,
+        value: 'Option 3',
+        optionType: 'icon',
+        icon: 'ZD-GN-info'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the custom renderer receives the option state, so it prints values that would otherwise be invisible
+
+  test('Render with renderCustomSelectedValue as function receiving state', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [1],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      size: "xmedium",
+      palette: "dark",
+      renderCustomSelectedValue: ({
+        isActive,
+        isReadOnly,
+        isDisabled,
+        size,
+        palette,
+        option
+      }) => /*#__PURE__*/React.createElement("span", null, `${option.value} active:${isActive} readOnly:${isReadOnly} disabled:${isDisabled} size:${size} palette:${palette}`)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as function, isReadOnly and onRemove', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      isReadOnly: true,
+      onRemove: jest.fn(),
+      renderCustomSelectedValue: ({
+        isReadOnly,
+        onRemove
+      }) => /*#__PURE__*/React.createElement("span", null, `readOnly:${isReadOnly} onRemove:${typeof onRemove}`)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as function, isPopupOpen and isPopupReady', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      isPopupOpen: true,
+      isPopupReady: true,
+      renderCustomSelectedValue: ({
+        isPopupOpen,
+        isPopupReady
+      }) => /*#__PURE__*/React.createElement("span", null, `open:${isPopupOpen} ready:${isPopupReady}`)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderCustomSelectedValue as node', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: /*#__PURE__*/React.createElement("span", null, "Custom node")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // the custom renderer applies only to options of type custom
+
+  test('Render with renderCustomSelectedValue and default option types', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: options,
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "Custom value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,33 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import Suggestions from "../Suggestions";
+import { render, cleanup } from '@testing-library/react';
+import Suggestions from "../Suggestions"; // the real Virtualizer measures the DOM (0 in jsdom); mocked to render the first rows synchronously
+
+jest.mock('@zohodesk/virtualizer', () => {
+  const React = require('react');
+
+  return { ...jest.requireActual('@zohodesk/virtualizer'),
+    Virtualizer: function MockVirtualizer({
+      elementRenderer,
+      elementsCount,
+      dataId
+    }) {
+      const items = [];
+
+      for (let index = 0; index < Math.min(elementsCount, 3); index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index,
+          ref: () => {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 const sampleData = [{
   "id": 2,
   "value": "text2",
@@ -49,6 +76,7 @@ const sampleData = [{
   "optionType": "default"
 }];
 describe('Suggestions', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -80,4 +108,344 @@ describe('Suggestions', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const items = [{
+    id: 1,
+    value: 'Option 1'
+  }, {
+    id: 2,
+    value: 'Option 2'
+  }, {
+    id: 3,
+    value: 'Option 3'
+  }];
+  test('Render with suggestions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with activeId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      activeId: 2
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      selectedOptions: [1, 3]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with selectedOptions and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      selectedOptions: [1, 3],
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hoverOption', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      hoverOption: 1
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hoverId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      hoverId: 3
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['small', 'large'])('Render with listItemSize as %s', listItemSize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      listItemSize: listItemSize
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      palette: "dark"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        secondaryValue: 'Secondary value'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        secondaryValue: 'Secondary value'
+      }],
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a disabled suggestion', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [items[0], { ...items[1],
+        isDisabled: true
+      }, items[2]]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with listItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{ ...items[0],
+        listItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with listItemCustomProps customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{ ...items[0],
+        listItemCustomProps: {
+          customClass: {
+            customListItem: 'custom-list-item'
+          }
+        }
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as avatar and avatarPalette as secondary', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }],
+      avatarPalette: "secondary"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with optionType as icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'icon',
+        icon: 'ZD-GN-info',
+        iconSize: '12'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with mixed option types', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1'
+      }, {
+        id: 2,
+        value: 'Option 2',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }, {
+        id: 3,
+        value: 'Option 3',
+        optionType: 'icon',
+        icon: 'ZD-GN-agent'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderBeforeChildren as node', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [items[0]],
+      renderBeforeChildren: /*#__PURE__*/React.createElement("span", null, "Before children")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // renderBeforeChildren reaches only the default list item, not the avatar item
+
+  test('Render with renderBeforeChildren and optionType as avatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: [{
+        id: 1,
+        value: 'Option 1',
+        optionType: 'avatar',
+        photoURL: 'avatar.png'
+      }],
+      renderBeforeChildren: /*#__PURE__*/React.createElement("span", null, "Before children")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit not reached', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      selectedOptions: [1],
+      limit: 3
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit reached', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      selectedOptions: [1, 2],
+      limit: 2
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with limit reached and limitReachedMessage', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      selectedOptions: [1, 2],
+      limit: 2,
+      limitReachedMessage: "You can select only two"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y ariaParentRole and ariaMultiselectable', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      a11y: {
+        ariaParentRole: 'listbox',
+        ariaMultiselectable: true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      className: "custom-suggestions"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass containerClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      customClass: {
+        containerClass: 'custom-container'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      dataId: "suggestions-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      htmlId: "suggestions-htmlId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isVirtualizerEnabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      isVirtualizerEnabled: true,
+      dataId: "suggestions-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isVirtualizerEnabled and selectedOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: items,
+      isVirtualizerEnabled: true,
+      selectedOptions: [2],
+      dataId: "suggestions-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });