Skip to content

Commit

Permalink
[EuiButtonIcon] Convert Enzyme tests to RTL
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Jun 20, 2023
1 parent 5799190 commit a691211
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 43 deletions.
4 changes: 2 additions & 2 deletions src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
exports[`EuiButtonIcon props color ghost is rendered 1`] = `
<button
aria-label="button"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
type="button"
>
<span
Expand Down Expand Up @@ -257,7 +257,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color:#07C currentcolor currentcolor currentcolor"
style="border-color: #07c currentcolor currentcolor currentcolor;"
/>
</button>
`;
Expand Down
83 changes: 42 additions & 41 deletions src/components/button/button_icon/button_icon.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,47 @@
*/

import React from 'react';
import { render, mount } from 'enzyme';
import { fireEvent } from '@testing-library/dom';
import { render } from '../../../test/rtl';
import { requiredProps } from '../../../test/required_props';
import { shouldRenderCustomStyles } from '../../../test/internal';

import { EuiButtonIcon, DISPLAYS, SIZES } from './button_icon';
import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins';

describe('EuiButtonIcon', () => {
shouldRenderCustomStyles(
<EuiButtonIcon iconType="user" {...requiredProps} />
);

test('is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" {...requiredProps} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

shouldRenderCustomStyles(
<EuiButtonIcon iconType="user" {...requiredProps} />
);

describe('props', () => {
describe('isDisabled', () => {
it('is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" isDisabled />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

it('or disabled is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" disabled />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

it('renders a button even when href is defined', () => {
const component = render(
const { container } = render(
<EuiButtonIcon
iconType="user"
aria-label="button"
Expand All @@ -55,93 +56,93 @@ describe('EuiButtonIcon', () => {
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('iconType', () => {
it('is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon aria-label="button" iconType="user" />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('color', () => {
BUTTON_COLORS.forEach((color) => {
test(`${color} is rendered`, () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" color={color} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

test('ghost is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" color={'ghost'} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('display', () => {
DISPLAYS.forEach((display) => {
test(`${display} is rendered`, () => {
const component = render(
const { container } = render(
<EuiButtonIcon
iconType="user"
aria-label="button"
display={display}
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});

describe('size', () => {
SIZES.forEach((size) => {
test(`${size} is rendered`, () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" size={size} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});

describe('isSelected', () => {
it('is rendered as true', () => {
const component = render(
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="button" isSelected />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

it('is rendered as false', () => {
const component = render(
const { container } = render(
<EuiButtonIcon
iconType="user"
aria-label="button"
isSelected={false}
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('href', () => {
it('secures the rel attribute when the target is _blank', () => {
const component = render(
const { container } = render(
<EuiButtonIcon
iconType="user"
aria-label="button"
Expand All @@ -150,42 +151,42 @@ describe('EuiButtonIcon', () => {
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('onClick', () => {
it('supports onClick and href', () => {
const handler = jest.fn();
const component = mount(
const onClick = jest.fn();
const { container } = render(
<EuiButtonIcon
iconType="user"
aria-label="hoi"
href="#"
onClick={handler}
onClick={onClick}
/>
);
component.find('a').simulate('click');
expect(handler.mock.calls.length).toEqual(1);
fireEvent.click(container.querySelector('a')!);
expect(onClick).toHaveBeenCalledTimes(1);
});

it('supports onClick as a button', () => {
const handler = jest.fn();
const component = mount(
<EuiButtonIcon iconType="user" aria-label="hoi" onClick={handler} />
const onClick = jest.fn();
const { container } = render(
<EuiButtonIcon iconType="user" aria-label="hoi" onClick={onClick} />
);
component.find('button').simulate('click');
expect(handler.mock.calls.length).toEqual(1);
fireEvent.click(container.querySelector('button')!);
expect(onClick).toHaveBeenCalledTimes(1);
});
});

describe('isLoading', () => {
it('is rendered', () => {
const component = render(
const { container } = render(
<EuiButtonIcon aria-label="button" iconType="user" isLoading />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});
Expand Down

0 comments on commit a691211

Please sign in to comment.