@zohodesk/components/es/Button/__tests__/Button.spec.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import Button from "../Button";
import { render, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
afterEach(() => {
  cleanup();
});
describe('Button component', () => {
  test('Should be render with the basic set of default props', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, null));
    expect(asFragment()).toMatchSnapshot();
  });
  const palette = ['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled'];
  test.each(palette)('Should render palette of buttons - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      palette: palette
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const size = ['small', 'medium', 'large', 'xlarge'];
  test.each(size)('Should render Sizes of buttons - %s', size => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      size: size
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const status = ['loading', 'success', 'none'];
  test.each(status)('Should render Status of buttons - %s', status => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      status: status
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const customStatus = ['loading', 'success'];
  test.each(customStatus)('Should render CustomStatusclassname of buttons - %s', customStatus => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      status: customStatus,
      customClass: {
        customStatus: "customStautusClassName"
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set of default props with disabled is true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      disabled: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set of default props with isBold is false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      isBold: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set of default props with rounded is true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      rounded: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set of default props with needAppearance is false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      needAppearance: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set customButtonclass with buttonClass ', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      customClass: {
        customButton: "customButtonClass"
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render with the basic set customstatusSize props with buttonClass ', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Button, {
      customClass: {
        customStatusSize: "customButtonClass"
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  }); // test('Should be render with the basic set customstyle ', () => {
  //     const { asFragment } = render(<Button customStyle={{bold: "buttonBold"}} />);
  //     expect(asFragment()).toMatchSnapshot();
  // });
  // test('Should be render with the customstyle with medium ', () => {
  //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
  //     expect(asFragment()).toMatchSnapshot();
  // });
});
describe('Button - Unit Testing', () => {
  test('Should render with text prop', () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(Button, {
      text: "Click Me"
    }));
    expect(getByText('Click Me')).toBeInTheDocument();
  });
  test('Should render with children prop', () => {
    const {
      getByText
    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
    expect(getByText('Click Me')).toBeInTheDocument();
  });
  test('Should apply custom styles from customStyle prop', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      customStyle: {
        bold: 'customBoldClass'
      }
    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');

    expect(getByRole('button')).toHaveClass('customBoldClass');
  });
  test('Should apply custom classes from customClass prop', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      customClass: {
        customButton: 'customButtonClass'
      }
    }));
    expect(getByRole('button')).toHaveClass('customButtonClass');
  });
  test('Should be disabled when disabled prop is true', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      disabled: true
    }));
    expect(getByRole('button')).toBeDisabled();
  });
  test('Should expose element with getRef prop', () => {
    const getRef = jest.fn();
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      getRef: getRef
    }));
    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
  });
  test('Should trigger onClick function', () => {
    const onClick = jest.fn();
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      onClick: onClick
    })); // fireEvent.click(getByRole('button'));

    userEvent.click(getByRole('button'));
    expect(onClick).toHaveBeenCalled();
  });
  test('Should not trigger onClick when disabled', () => {
    const onClick = jest.fn();
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      disabled: true,
      onClick: onClick
    }));
    userEvent.click(getByRole('button'));
    expect(onClick).not.toHaveBeenCalled();
  });
  test('Should render with correct data-id attribute', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      dataId: "testButton"
    }));
    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
  });
  test('Should render with correct data-selector-id attribute', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      dataSelectorId: "testSelector"
    }));
    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
  });
  test('Should render with correct title attribute', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      title: "Test Title"
    }));
    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
  });
  test('Should render with correct id attribute', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      id: "buttonElement"
    }));
    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
  });
  test('Should apply a11y props correctly', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      a11y: {
        'aria-label': 'test'
      }
    }));
    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
  });
  test('Should apply customProps correctly', () => {
    const {
      getByRole
    } = render( /*#__PURE__*/React.createElement(Button, {
      customProps: {
        'data-custom-attr': 'true'
      }
    }));
    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
  });
});