@zohodesk/components
Version:
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
256 lines (217 loc) • 9.96 kB
JavaScript
;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../Button"));
var _react2 = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
require("@testing-library/jest-dom");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
afterEach(function () {
(0, _react2.cleanup)();
});
describe('Button component', function () {
test('Should be render with the basic set of default props', function () {
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null)),
asFragment = _render.asFragment;
expect(asFragment()).toMatchSnapshot();
});
var palette = ['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled'];
test.each(palette)('Should render palette of buttons - %s', function (palette) {
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
palette: palette
})),
asFragment = _render2.asFragment;
expect(asFragment()).toMatchSnapshot();
});
var size = ['small', 'medium', 'large', 'xlarge'];
test.each(size)('Should render Sizes of buttons - %s', function (size) {
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
size: size
})),
asFragment = _render3.asFragment;
expect(asFragment()).toMatchSnapshot();
});
var status = ['loading', 'success', 'none'];
test.each(status)('Should render Status of buttons - %s', function (status) {
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
status: status
})),
asFragment = _render4.asFragment;
expect(asFragment()).toMatchSnapshot();
});
var customStatus = ['loading', 'success'];
test.each(customStatus)('Should render CustomStatusclassname of buttons - %s', function (customStatus) {
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
status: customStatus,
customClass: {
customStatus: "customStautusClassName"
}
})),
asFragment = _render5.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set of default props with disabled is true', function () {
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
disabled: true
})),
asFragment = _render6.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set of default props with isBold is false', function () {
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
isBold: false
})),
asFragment = _render7.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set of default props with rounded is true', function () {
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
rounded: true
})),
asFragment = _render8.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set of default props with needAppearance is false', function () {
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
needAppearance: false
})),
asFragment = _render9.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set customButtonclass with buttonClass ', function () {
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
customClass: {
customButton: "customButtonClass"
}
})),
asFragment = _render10.asFragment;
expect(asFragment()).toMatchSnapshot();
});
test('Should be render with the basic set customstatusSize props with buttonClass ', function () {
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
customClass: {
customStatusSize: "customButtonClass"
}
})),
asFragment = _render11.asFragment;
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', function () {
test('Should render with text prop', function () {
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
text: "Click Me"
})),
getByText = _render12.getByText;
expect(getByText('Click Me')).toBeInTheDocument();
});
test('Should render with children prop', function () {
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Click Me")),
getByText = _render13.getByText;
expect(getByText('Click Me')).toBeInTheDocument();
});
test('Should apply custom styles from customStyle prop', function () {
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
customStyle: {
bold: 'customBoldClass'
}
})),
getByRole = _render14.getByRole; // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
expect(getByRole('button')).toHaveClass('customBoldClass');
});
test('Should apply custom classes from customClass prop', function () {
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
customClass: {
customButton: 'customButtonClass'
}
})),
getByRole = _render15.getByRole;
expect(getByRole('button')).toHaveClass('customButtonClass');
});
test('Should be disabled when disabled prop is true', function () {
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
disabled: true
})),
getByRole = _render16.getByRole;
expect(getByRole('button')).toBeDisabled();
});
test('Should expose element with getRef prop', function () {
var getRef = jest.fn();
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
getRef: getRef
})),
getByRole = _render17.getByRole;
expect(getRef).toHaveBeenCalledWith(getByRole('button'));
});
test('Should trigger onClick function', function () {
var onClick = jest.fn();
var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
onClick: onClick
})),
getByRole = _render18.getByRole; // fireEvent.click(getByRole('button'));
_userEvent["default"].click(getByRole('button'));
expect(onClick).toHaveBeenCalled();
});
test('Should not trigger onClick when disabled', function () {
var onClick = jest.fn();
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
disabled: true,
onClick: onClick
})),
getByRole = _render19.getByRole;
_userEvent["default"].click(getByRole('button'));
expect(onClick).not.toHaveBeenCalled();
});
test('Should render with correct data-id attribute', function () {
var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
dataId: "testButton"
})),
getByRole = _render20.getByRole;
expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
});
test('Should render with correct data-selector-id attribute', function () {
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
dataSelectorId: "testSelector"
})),
getByRole = _render21.getByRole;
expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
});
test('Should render with correct title attribute', function () {
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
title: "Test Title"
})),
getByRole = _render22.getByRole;
expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
});
test('Should render with correct id attribute', function () {
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
id: "buttonElement"
})),
getByRole = _render23.getByRole;
expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
});
test('Should apply a11y props correctly', function () {
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
a11y: {
'aria-label': 'test'
}
})),
getByRole = _render24.getByRole;
expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
});
test('Should apply customProps correctly', function () {
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
customProps: {
'data-custom-attr': 'true'
}
})),
getByRole = _render25.getByRole;
expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
});
});