@zohodesk/components 1.6.32 → 1.6.34

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListItemWithAvatar from "../ListItemWithAvatar";
 describe('ListItemWithAvatar', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -61,5 +62,393 @@ describe('ListItemWithAvatar', () => {
       }
     }));
     expect(asFragment()).toMatchSnapshot();
+  }); // the avatar block renders only when name or imgSrc is set, and Avatar requires name, so avatar cases supply name
+
+  const avatarPalettes = ['secondary', 'info', 'default'];
+  const teamPalettes = ['secondary', 'info'];
+  const sizes = ['small', 'large'];
+  test('Render with name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and imgSrc', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      imgSrc: "avatar.png"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      initial: "AB"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and needAvatarTitle=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      needAvatarTitle: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(avatarPalettes)('Render with name and avatarPalette as %s', avatarPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      avatarPalette: avatarPalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      palette: "dark"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['center', 'end'])('Render with name and lhsAlignContent as %s', lhsAlignContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      lhsAlignContent: lhsAlignContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam and name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam, name and imgSrc', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      imgSrc: "team.png"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam, name and needAvatarTitle=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      needAvatarTitle: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(teamPalettes)('Render with isTeam, name and avatarPalette as %s', avatarPalette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      avatarPalette: avatarPalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam, name and palette as dark', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      palette: "dark"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and customClass customAvatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      customClass: {
+        customAvatar: 'custom-avatar'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam, name and customClass customAvatar and customAvatarTeam', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      customClass: {
+        customAvatar: 'custom-avatar',
+        customAvatarTeam: 'custom-avatar-team'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customAvatarTeam without isTeam', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      customClass: {
+        customAvatarTeam: 'custom-avatar-team'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and customProps AvatarProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      customProps: {
+        AvatarProps: {
+          shape: 'square'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps AvatarProps and no name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customProps: {
+        AvatarProps: {
+          shape: 'square'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isTeam, name and customProps AvatarTeamProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isTeam: true,
+      name: "Support Team",
+      customProps: {
+        AvatarTeamProps: {
+          isFilled: true
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with name and customProps AvatarTeamProps without isTeam', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      name: "John Doe",
+      customProps: {
+        AvatarTeamProps: {
+          isFilled: true
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with needTick and size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      needTick: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      active: true,
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      title: "List item title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      isDisabled: true,
+      title: "List item title",
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // value wins over dataId for the data-id, so dataId is only observable when value is empty
+
+  test('Render with empty value and dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "",
+      dataId: "list-item-with-avatar-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      dataSelectorId: "list-item-with-avatar-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      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(ListItemWithAvatar, {
+      active: true,
+      needTick: true,
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customListItem', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: 'custom-list-item'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListItemWithCheckBox from "../ListItemWithCheckBox";
 describe('ListItemWithCheckBox', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -62,4 +63,216 @@ describe('ListItemWithCheckBox', () => {
     }));
     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(ListItemWithCheckBox, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['start', 'end'])('Render with lhsJustifyContent as %s', lhsJustifyContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      lhsJustifyContent: lhsJustifyContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with active and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      active: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // checked is observable only on the CheckBox child, so it is paired with the real CheckBox render
+
+  test('Render with checked', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      checked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with checked and active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      checked: true,
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      title: "List item title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      isDisabled: true,
+      title: "List item title",
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with empty value and dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "",
+      dataId: "list-item-with-checkbox-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      dataId: "list-item-with-checkbox-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      dataSelectorId: "list-item-with-checkbox-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      a11y: {
+        role: 'menuitem',
+        ariaSelected: true,
+        ariaLabel: 'Item label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customListItem', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: 'custom-list-item'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customCheckBox', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customCheckBox: 'custom-check-box'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });