@zohodesk/components 1.6.31 → 1.6.34

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListItemWithIcon from "../ListItemWithIcon";
 describe('ListItemWithIcon', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -60,4 +61,305 @@ describe('ListItemWithIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const iconNames = ['ZD-GN-info', 'ZD-GN-agent'];
+  const palettes = ['primary', 'secondary', 'dark', 'danger']; // primary and danger add no class until active/highlight/autoHover, so danger would match primary here
+
+  const inertPalettes = ['primary', 'secondary', 'dark'];
+  const sizes = ['small', 'large'];
+  test.each(iconNames)('Render with iconName as %s', iconName => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconName: iconName
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // lhsAlignContent only reaches the Icon wrapper when iconName is set; the icon-less case is covered by the existing cases
+
+  test.each(['center', 'end'])('Render with iconName and lhsAlignContent as %s', lhsAlignContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconName: "ZD-GN-info",
+      lhsAlignContent: lhsAlignContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['start', 'end'])('Render with iconName and lhsJustifyContent as %s', lhsJustifyContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconName: "ZD-GN-info",
+      lhsJustifyContent: lhsJustifyContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(inertPalettes)('Render with palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with needTick and size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      needTick: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconName and iconSize', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconName: "ZD-GN-info",
+      iconSize: "14"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconName and iconClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconName: "ZD-GN-info",
+      iconClass: "custom-icon-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with iconClass without iconName', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      iconClass: "custom-icon-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      active: true,
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      title: "List item title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      isDisabled: true,
+      title: "List item title",
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      isLink: true,
+      href: "/list-item-with-icon"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink, href and target as self', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      isLink: true,
+      href: "/list-item-with-icon",
+      target: "self"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with value containing an apostrophe', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "Agent's list"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with empty value and dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "",
+      dataId: "list-item-with-icon-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      dataId: "list-item-with-icon-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and iconName', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      dataId: "list-item-with-icon-dataId",
+      iconName: "ZD-GN-info"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      dataSelectorId: "list-item-with-icon-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customValueRightPlaceholderClass without renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customValueRightPlaceholderClass: "customValueRightPlaceholderClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      a11y: {
+        role: 'menuitem',
+        ariaSelected: true,
+        ariaLabel: 'Item label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y ariaHidden=false with active and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      active: true,
+      needTick: true,
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: "custom-list-item"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListItemWithRadio from "../ListItemWithRadio";
 describe('ListItemWithRadio', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -62,4 +63,232 @@ describe('ListItemWithRadio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const palettes = ['primary', 'secondary', 'dark', 'danger']; // primary and danger add no class until active/highlight/autoHover, so danger would match primary here
+
+  const inertPalettes = ['primary', 'secondary', 'dark'];
+  const sizes = ['small', 'large'];
+  test.each(inertPalettes)('Render with palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['start', 'end'])('Render with lhsJustifyContent as %s', lhsJustifyContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      lhsJustifyContent: lhsJustifyContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with active and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      active: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // checked is observable only on the Radio child, so it is paired with the real Radio render
+
+  test('Render with checked', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      checked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with checked and active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      checked: true,
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      id: "list-item-with-radio-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      title: "List item title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title and disableTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      title: "List item title",
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and disableTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      isDisabled: true,
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with empty value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: ""
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      dataId: "list-item-with-radio-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      dataSelectorId: "list-item-with-radio-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      a11y: {
+        role: 'menuitem',
+        ariaSelected: true,
+        ariaLabel: 'Item label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customListItem', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: 'custom-list-item'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customRadio and customRadioWrap', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customRadio: 'custom-radio',
+        customRadioWrap: 'custom-radio-wrap'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });