import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';
import Button from '..';
import { getThemeVariant } from '../Button';
describe('Button', () => {
it('renders button text', () => {
const { getByText } = renderWithTheme();
expect(getByText('A button')).toBeInTheDocument();
});
it('renders no icon by default', () => {
const { container } = renderWithTheme();
expect(container.querySelectorAll('i')).toHaveLength(0);
});
it('renders icon', () => {
const { container } = renderWithTheme(
);
expect(container.querySelectorAll('i')).toHaveLength(1);
});
it('renders right icon', () => {
const { container } = renderWithTheme(
);
expect(container.querySelectorAll('i')).toHaveLength(1);
});
it('renders loading icon', () => {
const { container } = renderWithTheme();
expect(container.querySelectorAll('i')).toHaveLength(1);
});
describe('interaction', () => {
describe('button is disabled', () => {
it('NOT allows to click on', () => {
const onClick = jest.fn();
const { getByText } = renderWithTheme(
);
fireEvent.click(getByText('A button'));
expect(onClick).not.toHaveBeenCalled();
});
});
describe('button is enabled', () => {
it('allows to click on', () => {
const onClick = jest.fn();
const { getByText } = renderWithTheme(
);
fireEvent.click(getByText('A button'));
expect(onClick).toHaveBeenCalledTimes(1);
});
it('allows to blur', () => {
const onBlur = jest.fn();
const { getByText } = renderWithTheme(
);
fireEvent.focus(getByText('A button'));
fireEvent.blur(getByText('A button'));
expect(onBlur).toHaveBeenCalledTimes(1);
});
});
});
});
describe('getThemeVariant', () => {
it.each`
variant | intent | themeVariant
${'basic'} | ${'primary'} | ${'basic'}
${'basic-transparent'} | ${'primary'} | ${'basic-transparent'}
${'filled'} | ${'primary'} | ${'filled-primary'}
${'filled'} | ${'success'} | ${'filled-success'}
${'filled'} | ${'danger'} | ${'filled-danger'}
${'filled'} | ${'warning'} | ${'filled-warning'}
${'filled'} | ${'error'} | ${'filled-error'}
${'outlined'} | ${'primary'} | ${'outlined-primary'}
${'outlined'} | ${'success'} | ${'outlined-success'}
${'outlined'} | ${'danger'} | ${'outlined-danger'}
${'outlined'} | ${'warning'} | ${'outlined-warning'}
${'outlined'} | ${'error'} | ${'outlined-error'}
${'text'} | ${'primary'} | ${'text-primary'}
${'text'} | ${'success'} | ${'text-success'}
${'text'} | ${'danger'} | ${'text-danger'}
${'text'} | ${'warning'} | ${'text-warning'}
${'text'} | ${'error'} | ${'text-error'}
${'filled-reversed'} | ${'primary'} | ${'filled-reversed-primary'}
${'filled-reversed'} | ${'success'} | ${'filled-reversed-success'}
${'filled-reversed'} | ${'danger'} | ${'filled-reversed-danger'}
${'filled-reversed'} | ${'warning'} | ${'filled-reversed-warning'}
${'filled-reversed'} | ${'error'} | ${'filled-reversed-error'}
`('returns $themeVariant', ({ variant, intent, themeVariant }) => {
expect(getThemeVariant(variant, intent)).toBe(themeVariant);
});
});