@zohodesk/components 1.6.32 → 1.6.34

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,6 +1,87 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+exports[`Heading Render with a11y 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with className 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset custom-heading-class"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with dataId 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset"
+    data-id="customHeading"
+    data-test-id="customHeading"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with dataTitle overriding title 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset"
+    data-title="Custom Data Title"
+  >
+    Heading Title
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`Heading Render with default props 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with tagName as h2 1`] = `
+<DocumentFragment>
+  <h2
+    class="reset"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with tagName as h3 1`] = `
+<DocumentFragment>
+  <h3
+    class="reset"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with tagName as span 1`] = `
+<DocumentFragment>
+  <span
+    class="reset"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Render with title 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset"
+    data-title="Heading Title"
+  >
+    Heading Title
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`Heading Render with whiteSpace as break-spaces 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_breakSpaces"
@@ -9,7 +90,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+exports[`Heading Render with whiteSpace as normal 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_normal"
@@ -18,7 +99,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+exports[`Heading Render with whiteSpace as nowrap 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_nowrap"
@@ -27,7 +108,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+exports[`Heading Render with whiteSpace as pre 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_pre"
@@ -36,7 +117,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+exports[`Heading Render with whiteSpace as pre-line 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_preLine"
@@ -45,7 +126,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+exports[`Heading Render with whiteSpace as pre-wrap 1`] = `
 <DocumentFragment>
   <h1
     class="reset whiteSpace_preWrap"
@@ -53,11 +134,3 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
   />
 </DocumentFragment>
 `;
-
-exports[`Heading rendering the defult props 1`] = `
-<DocumentFragment>
-  <h1
-    class="reset"
-  />
-</DocumentFragment>
-`;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import ListContainer from "../ListContainer";
 describe('ListContainer', () => {
+  afterEach(() => cleanup());
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -16,4 +17,230 @@ describe('ListContainer', () => {
     }));
     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'];
+  const aligns = ['horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'];
+  test.each(inertPalettes)('Render with palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(aligns)('Render with align as %s', align => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      align: align
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with active and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      active: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with highlight and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      highlight: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palettes)('Render with autoHover and palette as %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      autoHover: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(sizes)('Render with needTick and size as %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      needTick: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      active: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with active and needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      active: true,
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      highlight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with autoHover', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      autoHover: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with highlight, autoHover and isDisabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      highlight: true,
+      autoHover: true,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needTick', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      needTick: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      title: "List container title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled and disableTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      isDisabled: true,
+      title: "List container title",
+      disableTitle: "Disabled title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink and href', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      isLink: true,
+      href: "/list-container"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isLink, href and target as self', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      isLink: true,
+      href: "/list-container",
+      target: "self"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      customClass: "custom-list-container"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      dataId: "list-container-dataId",
+      dataSelectorId: "list-container-dataSelectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaSelected and ariaLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: {
+        role: 'option',
+        ariaSelected: true,
+        ariaLabel: 'List container label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y insetFocus=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: {
+        insetFocus: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y extra attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: {
+        'aria-describedby': 'list-container-description'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, null, /*#__PURE__*/React.createElement("span", null, "List container content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });