@zohodesk/components 1.6.24 → 1.6.26

package/es/v1/Button/__tests__/Button.spec.js

@@ -1,12 +1,16 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Button from "../Button";
+import Button from "../index";
 import '@testing-library/jest-dom';
+import { PALETTE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
+import { BRAND_GHOST, BRAND_TEXT_ONLY, BRAND_TINTED_OUTLINE, SUCCESS_GHOST, SUCCESS_TEXT_ONLY, SUCCESS_TINTED_OUTLINE, SECONDARY_GHOST_BRAND_TINTED_ONSELECT, SECONDARY_GHOST_CANCEL, BLACK_TEXT_BRAND_ONHOVER, BRAND_BG_ONSELECT, BRAND_TEXT_TINTED_HOVER, BRAND_TEXT_TINTED_DANGER_HOVER } from "../constants/presets";
 afterEach(() => {
   cleanup();
 });
-describe('Button - Component', () => {
+describe('Button', () => {
   test('Should render with the basic set of default props', () => {
     const {
       asFragment
@@ -19,8 +23,7 @@ describe('Button - Component', () => {
     } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
     expect(asFragment()).toMatchSnapshot();
   });
-  const palette = ['default', 'primary', 'secondary', 'danger', 'success'];
-  test.each(palette)('Should render palette of buttons - %s', palette => {
+  test.each(Object.values(PALETTE))('Should render palette of buttons - %s', palette => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -28,26 +31,46 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const bgAppearance = ['default', 'onHover', 'none'];
-  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
+  const appearanceCombos = [{
+    bg: true,
+    text: 'black'
+  }, {
+    border: true
+  }, {
+    text: true
+  }, {
+    bg: false,
+    border: true
+  }, {}];
+  test.each(appearanceCombos.map(combo => [combo]))('Should render appearance of buttons - %o', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      bgAppearance: bg
+      palette: PALETTE.BRAND,
+      appearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const borderAppearance = ['default', 'onHover', 'none'];
-  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
+  test.each(appearanceCombos.map(combo => [combo]))('Should render hoverAppearance of buttons - %o', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      borderAppearance: border
+      palette: PALETTE.BRAND,
+      hoverAppearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const variant = ['text', 'icon', 'iconWithText'];
-  test.each(variant)('Should render variant of buttons - %s', variant => {
+  test.each(appearanceCombos.map(combo => [combo]))('Should render selectedAppearance of buttons - %o', appearance => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      palette: PALETTE.BRAND,
+      isSelected: true,
+      selectedAppearance: appearance
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(Object.values(VARIANT))('Should render variant of buttons - %s', variant => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -55,8 +78,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const size = ['small', 'medium', 'large', 'full'];
-  test.each(size)('Should render Sizes of buttons - %s', size => {
+  test.each(Object.values(SIZE))('Should render Sizes of buttons - %s', size => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -64,8 +86,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const status = ['default', 'loading', 'success'];
-  test.each(status)('Should render Status of buttons - %s', status => {
+  test.each(Object.values(STATUS))('Should render Status of buttons - %s', status => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -73,8 +94,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const loaderPlacement = ['start', 'end', 'overlay'];
-  test.each(loaderPlacement)('Should render loaderPlacement of buttons - %s', loaderPlacement => {
+  test.each(Object.values(LOADER_PLACEMENT))('Should render loaderPlacement of buttons - %s', loaderPlacement => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -83,7 +103,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with iconName and iconSize ', () => {
+  test('Should render with iconName and iconSize', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -93,13 +113,13 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with iconPlacement ', () => {
+  test('Should render with iconPlacement', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
       variant: "iconWithText",
       iconName: "ZD-plus",
-      iconPlacement: "right"
+      iconPlacement: "end"
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();
   });
@@ -139,8 +159,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const type = ['button', 'submit', 'reset'];
-  test.each(type)('Should render type of buttons - %s', type => {
+  test.each(Object.values(BUTTON_TYPE))('Should render type of buttons - %s', type => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -166,14 +185,6 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with readOnly style when isReadOnly prop is true', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      isReadOnly: true
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
   test('Should render with selected style when isSelected prop is true', () => {
     const {
       asFragment
@@ -182,8 +193,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const shape = ['pill', 'rectangle', 'roundedRectangle'];
-  test.each(shape)('Should render shape of buttons - %s', shape => {
+  test.each(Object.values(SHAPE))('Should render shape of buttons - %s', shape => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -191,17 +201,7 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const paletteShade = ['default', 'lighter'];
-  test.each(paletteShade)('Should render paletteShade of buttons - %s', shade => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      paletteShade: shade
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  const disabledAppearance = ['none', 'dull', 'strike'];
-  test.each(disabledAppearance)('Should render disabledAppearance of buttons - %s', style => {
+  test.each(Object.values(DISABLED_APPEARANCE))('Should render disabledAppearance of buttons - %s', style => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
@@ -239,9 +239,6 @@ describe('Button - Component', () => {
       variant: "iconWithText",
       iconName: "check",
       customProps: {
-        wrapper: {
-          'data-wrapper': 'wrapperProps'
-        },
         text: {
           'data-text': 'textProps'
         },
@@ -252,6 +249,21 @@ describe('Button - Component', () => {
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should apply customAttributes to button elements', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customAttributes: {
+        button: {
+          'data-wrapper': 'wrapperAttr'
+        },
+        text: {
+          'data-text': 'textAttr'
+        }
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should render with customId and testId', () => {
     const {
       asFragment
@@ -272,4 +284,83 @@ describe('Button - Component', () => {
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render renderBefore slot content in DOM', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      renderBefore: () => /*#__PURE__*/React.createElement("span", null, "BeforeSlot")
+    }, "Button"));
+    expect(getByText('BeforeSlot')).toBeInTheDocument();
+  });
+  test('Should render renderAfter slot content in DOM', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      renderAfter: () => /*#__PURE__*/React.createElement("span", null, "AfterSlot")
+    }, "Button"));
+    expect(getByText('AfterSlot')).toBeInTheDocument();
+  });
+  test('Should render renderIcon slot content in DOM', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "icon",
+      renderIcon: () => /*#__PURE__*/React.createElement("span", null, "IconSlot")
+    }));
+    expect(getByText('IconSlot')).toBeInTheDocument();
+  });
+  test('Should not call onClick when button is disabled', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isDisabled: true,
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render loader overlay when status is loading and loaderPlacement is overlay', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "loading",
+      loaderPlacement: "overlay"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render success overlay when status is success and loaderPlacement is overlay', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "success",
+      loaderPlacement: "overlay"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataSelectorId: "selectorId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  describe('Presets', () => {
+    const presets = [['BRAND_GHOST', BRAND_GHOST], ['BRAND_TEXT_ONLY', BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['SECONDARY_GHOST_CANCEL', SECONDARY_GHOST_CANCEL], ['BLACK_TEXT_BRAND_ONHOVER', BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', BRAND_TEXT_TINTED_DANGER_HOVER]];
+    test.each(presets)('Should render preset %s', (_name, preset) => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Button, preset, "Button"));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test.each(presets)('Should render preset %s in selected state', (_name, preset) => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Button, _extends({}, preset, {
+        isSelected: true
+      }), "Button"));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });