@zohodesk/components 1.6.31 → 1.6.34

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListItem from "../ListItem";
 describe('ListItem', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -34,5 +35,362 @@ describe('ListItem', () => {
       }
     }));
     expect(asFragment()).toMatchSnapshot();
+  }); // value is required without a default, so every case below supplies it
+
+  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('Render with value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with value containing an apostrophe', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "Agent's list"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with value and children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item"
+    }, "Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderBeforeChildren as function', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      renderBeforeChildren: () => /*#__PURE__*/React.createElement("span", null, "Before children")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderValueRightPlaceholderNode as node', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      renderValueRightPlaceholderNode: /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with all content slots', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      secondaryValue: "Secondary value",
+      renderBeforeChildren: /*#__PURE__*/React.createElement("span", null, "Before children"),
+      renderValueRightPlaceholderNode: /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }, "Content"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(inertPalettes)('Render with palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with needTick and size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needTick: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with active, needTick and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      active: true,
+      needTick: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['center', 'end'])('Render with lhsAlignContent as %s', lhsAlignContent => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      lhsAlignContent: lhsAlignContent
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      active: true,
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      title: "List item title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and disableTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      isDisabled: true,
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      isLink: true,
+      href: "/list-item"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink, href and target as self', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      isLink: true,
+      href: "/list-item",
+      target: "self"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with secondaryValue and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      secondaryValue: "Secondary value",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needMultiLineText: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needMultiLineText and secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needMultiLineText: true,
+      secondaryValue: "Secondary value"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      dataId: "list-item-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      dataSelectorId: "list-item-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      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(ListItem, {
+      value: "List item",
+      active: true,
+      needTick: true,
+      a11y: {
+        ariaHidden: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customListItem and customTitleBox', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      customClass: {
+        customListItem: 'custom-list-item',
+        customTitleBox: 'custom-title-box'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customTickIcon with active and needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      active: true,
+      needTick: true,
+      customClass: {
+        customTickIcon: 'custom-tick-icon'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customTickIcon without active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      needTick: true,
+      customClass: {
+        customTickIcon: 'custom-tick-icon'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass customValueRightPlaceholder without renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      customClass: {
+        customValueRightPlaceholder: 'customValueRightPlaceholderClass'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ListItemProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      customProps: {
+        ListItemProps: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps ContainerProps align as baseline', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      value: "List item",
+      customProps: {
+        ContainerProps: {
+          align: 'baseline'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });