@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
275 lines • 8.79 kB
JavaScript
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, text and icon', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Button, {
variant: "iconWithText",
iconName: "ZD-plus",
customClass: {
wrapper: 'customButtonClass',
text: 'customTextClass',
icon: 'customIconClass'
}
}, "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();
});
});