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