@vimeo/iris
Version:
Vimeo Design System
179 lines (174 loc) • 9.73 kB
JavaScript
;
var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var react_esm = require('../../react.esm-d9b3c6bd.js');
var React = require('react');
var styled = require('styled-components');
var themes_index = require('../../themes/index.js');
var components_Button_Button = require('./Button.js');
var polished = require('polished');
var icons_ui_Pencil = require('../../icons/ui/Pencil.js');
require('../../es.typed-array.set-5ee45ede.js');
require('os');
require('tty');
require('react-dom');
require('util');
require('../../color/colors.js');
require('./Button.style.js');
require('./Button.config.js');
require('./FeaturedIcon.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
require('../LoaderCircular/LoaderCircular.js');
require('../LoaderCircular/LoaderCircular.style.js');
require('../../utils/HOCs/withIris.js');
require('../../utils/hooks/useDeprecate.js');
require('../../utils/general/mergeReactRefs.js');
require('../../utils/css.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Provider = function (_a) {
var children = _a.children;
return (React__default["default"].createElement(styled.ThemeProvider, { theme: themes_index.themes['light'] }, children));
};
var renderWithThemeProvider = function (ui, options) { return react_esm.render(ui, tslib_es6.__assign({ wrapper: Provider }, options)); };
describe('Button', function () {
it('Renders button', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, null));
var button = react_esm.screen.getByRole('button');
expect(button).toBeInTheDocument();
});
it('Calls onClick handler when clicked', function () {
var handleClick = jest.fn();
var getByText = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { onClick: handleClick }, "Click me")).getByText;
var buttonElement = getByText('Click me');
react_esm.fireEvent.click(buttonElement);
expect(handleClick).toHaveBeenCalledTimes(1);
});
it('Renders button with text child', function () {
var text = 'Click me';
var getByText = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, null, text)).getByText;
var buttonElement = getByText(text);
expect(buttonElement).toBeInTheDocument();
});
it('Renders button with icon', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { icon: React__default["default"].createElement(icons_ui_Pencil.Pencil, null) }));
var button = react_esm.screen.getByRole('button');
expect(button.innerHTML).toContain('svg');
});
it('Renders button with icon on the right', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { icon: React__default["default"].createElement(icons_ui_Pencil.Pencil, null), iconPosition: "right" }, "Hello"));
var button = react_esm.screen.getByRole('button');
expect(button.children[0].tagName.toLocaleLowerCase()).toBe('span');
});
it('Renders loader', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { loading: true }));
var button = react_esm.screen.getByRole('button');
expect(button.innerHTML).toContain('Loader');
});
it('Sets color of a button', function () {
var color = '#CCCCCC';
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { color: color }));
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({ background: color });
});
it('Changes size of a button', function () {
var rerender = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { size: "sm" })).rerender;
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({ fontSize: '0.875rem' });
rerender(React__default["default"].createElement(components_Button_Button.Button, { size: "md" }));
expect(button).toHaveStyle({ fontSize: '0.875rem' });
rerender(React__default["default"].createElement(components_Button_Button.Button, { size: "xs" }));
expect(button).toHaveStyle({ fontSize: '0.75rem' });
rerender(React__default["default"].createElement(components_Button_Button.Button, { size: "lg" }));
expect(button).toHaveStyle({ fontSize: '1rem' });
rerender(React__default["default"].createElement(components_Button_Button.Button, { size: "xl" }));
expect(button).toHaveStyle({ fontSize: '1.125rem' });
});
it('Changes status of a button', function () {
var rerender = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { status: "positive" })).rerender;
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({
background: '#28A878',
});
rerender(React__default["default"].createElement(components_Button_Button.Button, { status: "negative" }));
expect(button).toHaveStyle({ background: '#E22B12' });
});
it('Changes format of a button', function () {
var rerender = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { format: "secondary" })).rerender;
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({
background: '#efefef',
});
rerender(React__default["default"].createElement(components_Button_Button.Button, { format: "soft" }));
expect(button).toHaveStyle({ background: '#23313b' });
});
it('Changes variant of a button', function () {
var rerender = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { variant: "dashed" })).rerender;
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({
borderStyle: 'dashed',
});
rerender(React__default["default"].createElement(components_Button_Button.Button, { variant: "hyperminimal" }));
expect(button).toHaveStyle({ borderColor: 'transparent' });
});
it('Changes element of a button', function () {
var _a = renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { element: "a" })), rerender = _a.rerender, container = _a.container;
var buttonAnchor = container.querySelector('a');
expect(buttonAnchor).toBeInTheDocument();
rerender(React__default["default"].createElement(components_Button_Button.Button, { element: "span" }));
var buttonSpan = container.querySelector('span');
expect(buttonSpan).toBeInTheDocument();
var button = container.querySelector('button');
expect(button).not.toBeInTheDocument();
});
it('Renders pill button', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { pill: true }, "Hello"));
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({
borderRadius: '2rem',
});
});
it('Renders disabled button', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { disabled: true }, "Hello"));
var button = react_esm.screen.getByRole('button');
expect(button).toHaveAttribute('disabled');
});
it('Renders active button', function () {
renderWithThemeProvider(React__default["default"].createElement(components_Button_Button.Button, { active: true }, "Hello"));
var button = react_esm.screen.getByRole('button');
expect(button).toHaveStyle({
backgroundColor: polished.shade(0.15, '#00adef'),
});
});
});