@zohodesk/components 1.6.7 → 1.6.11-exp-6

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

@@ -0,0 +1,272 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from "../Button";
+import '@testing-library/jest-dom';
+afterEach(() => {
+  cleanup();
+});
+describe('Button - Component', () => {
+  test('Should render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with children', () => {
+    const {
+      asFragment
+    } = 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 => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const bgAppearance = ['default', 'onHover', 'none'];
+  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      bgAppearance: bg
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const borderAppearance = ['default', 'onHover', 'none'];
+  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      borderAppearance: border
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const variant = ['text', 'icon', 'iconWithText'];
+  test.each(variant)('Should render variant of buttons - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['small', 'medium', 'large', 'full'];
+  test.each(size)('Should render Sizes of buttons - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const status = ['default', 'loading', 'success'];
+  test.each(status)('Should render Status of buttons - %s', status => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: status
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const loaderPlacement = ['start', 'end', 'overlay'];
+  test.each(loaderPlacement)('Should render loaderPlacement of buttons - %s', loaderPlacement => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "loading",
+      loaderPlacement: loaderPlacement
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconName and iconSize ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "icon",
+      iconName: "ZD-plus",
+      iconSize: 20
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconPlacement ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
+      iconPlacement: "right"
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderIcon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "icon",
+      renderIcon: () => /*#__PURE__*/React.createElement("span", null, "CustomIcon")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderBefore and renderAfter', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      renderBefore: () => /*#__PURE__*/React.createElement("span", null, "Before"),
+      renderAfter: () => /*#__PURE__*/React.createElement("span", null, "After")
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderLoader', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "loading",
+      renderLoader: () => /*#__PURE__*/React.createElement("span", null, "Loading...")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderSuccess', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "success",
+      renderSuccess: () => /*#__PURE__*/React.createElement("span", null, "Success!")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['button', 'submit', 'reset'];
+  test.each(type)('Should render type of buttons - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should trigger onClick function', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should be disabled when isDisabled prop is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isDisabled: true
+    }));
+    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
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isSelected: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const shape = ['pill', 'rectangle', 'roundedRectangle'];
+  test.each(shape)('Should render shape of buttons - %s', shape => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      shape: shape
+    }));
+    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 => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isDisabled: true,
+      disabledAppearance: style
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with title attribute', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      title: "Button test title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customClass to wrapper and text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customClass: {
+        wrapper: 'customButtonClass',
+        text: 'customTextClass'
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customProps to wrapper, text and icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "check",
+      customProps: {
+        wrapper: {
+          'data-wrapper': 'wrapperProps'
+        },
+        text: {
+          'data-text': 'textProps'
+        },
+        icon: {
+          'data-icon': 'iconProps'
+        }
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customId: "customIdValue",
+      testId: "testIdValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply a11yAttributes to the button', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      a11yAttributes: {
+        'aria-label': 'Smart Button',
+        'aria-describedby': 'button-description'
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});