Skip to content

Commit

Permalink
chore(shared components): Migrate enzyme to RTL (#26258)
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinpark
justinpark authored Aug 21, 2024
1 parent 8e2f818 commit 1a1548d
Show file tree
Hide file tree
Showing 15 changed files with 459 additions and 590 deletions.
52 changes: 20 additions & 32 deletions superset-frontend/src/components/Button/Button.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,47 +16,35 @@
* specific language governing permissions and limitations
* under the License.
*/

import { isValidElement } from 'react';
import { ReactWrapper } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming';
import { fireEvent, render } from 'spec/helpers/testing-library';
import Button from '.';
import {
ButtonGallery,
SIZES as buttonSizes,
STYLES as buttonStyles,
} from './Button.stories';

describe('Button', () => {
let wrapper: ReactWrapper;

// test the basic component
it('renders the base component', () => {
expect(isValidElement(<Button />)).toBe(true);
});

it('works with an onClick handler', () => {
const mockAction = jest.fn();
wrapper = mount(<Button onClick={mockAction} />);
wrapper.find('Button').first().simulate('click');
expect(mockAction).toHaveBeenCalled();
});
test('works with an onClick handler', () => {
const mockAction = jest.fn();
const { getByRole } = render(<Button onClick={mockAction} />);
fireEvent.click(getByRole('button'));
expect(mockAction).toHaveBeenCalled();
});

it('does not handle onClicks when disabled', () => {
const mockAction = jest.fn();
wrapper = mount(<Button onClick={mockAction} disabled />);
wrapper.find('Button').first().simulate('click');
expect(mockAction).toHaveBeenCalledTimes(0);
});
test('does not handle onClicks when disabled', () => {
const mockAction = jest.fn();
const { getByRole } = render(<Button onClick={mockAction} disabled />);
fireEvent.click(getByRole('button'));
expect(mockAction).toHaveBeenCalledTimes(0);
});

// test stories from the storybook!
it('All the sorybook gallery variants mount', () => {
wrapper = mount(<ButtonGallery />);
// test stories from the storybook!
test('All the sorybook gallery variants mount', () => {
const { getAllByRole } = render(<ButtonGallery />);

const permutationCount =
Object.values(buttonStyles.options).filter(o => o).length *
Object.values(buttonSizes.options).length;
const permutationCount =
Object.values(buttonStyles.options).filter(o => o).length *
Object.values(buttonSizes.options).length;

expect(wrapper.find(Button).length).toEqual(permutationCount);
});
expect(getAllByRole('button')).toHaveLength(permutationCount);
});
41 changes: 26 additions & 15 deletions superset-frontend/src/components/Chart/ChartRenderer.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,22 @@
* specific language governing permissions and limitations
* under the License.
*/
import { shallow } from 'enzyme';
import { SuperChart } from '@superset-ui/core';
import { render } from 'spec/helpers/testing-library';

import ChartRenderer from 'src/components/Chart/ChartRenderer';

jest.mock('@superset-ui/core', () => ({
...jest.requireActual('@superset-ui/core'),
SuperChart: ({ formData }) => (
<div data-test="mock-super-chart">{JSON.stringify(formData)}</div>
),
}));

jest.mock(
'src/components/Chart/ChartContextMenu/ChartContextMenu',
() => () => <div data-test="mock-chart-context-menu" />,
);

const requiredProps = {
chartId: 1,
datasource: {},
Expand All @@ -31,18 +42,18 @@ const requiredProps = {
vizType: 'table',
};

describe('ChartRenderer', () => {
it('should render SuperChart', () => {
const wrapper = shallow(
<ChartRenderer {...requiredProps} chartIsStale={false} />,
);
expect(wrapper.find(SuperChart)).toExist();
});
test('should render SuperChart', () => {
const { getByTestId } = render(
<ChartRenderer {...requiredProps} chartIsStale={false} />,
);
expect(getByTestId('mock-super-chart')).toBeInTheDocument();
});

it('should use latestQueryFormData instead of formData when chartIsStale is true', () => {
const wrapper = shallow(<ChartRenderer {...requiredProps} chartIsStale />);
expect(wrapper.find(SuperChart).prop('formData')).toEqual({
testControl: 'bar',
});
});
test('should use latestQueryFormData instead of formData when chartIsStale is true', () => {
const { getByTestId } = render(
<ChartRenderer {...requiredProps} chartIsStale />,
);
expect(getByTestId('mock-super-chart')).toHaveTextContent(
JSON.stringify({ testControl: 'bar' }),
);
});
84 changes: 34 additions & 50 deletions superset-frontend/src/components/Checkbox/Checkbox.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,62 +16,46 @@
* specific language governing permissions and limitations
* under the License.
*/
import { fireEvent, render } from 'spec/helpers/testing-library';

import { isValidElement } from 'react';
import { ReactWrapper } from 'enzyme';
import {
styledMount as mount,
styledShallow as shallow,
} from 'spec/helpers/theming';
import Checkbox from 'src/components/Checkbox';

import Checkbox, {
CheckboxChecked,
CheckboxUnchecked,
} from 'src/components/Checkbox';
jest.mock('src/components/Checkbox/CheckboxIcons', () => ({
CheckboxChecked: () => <div data-test="mock-CheckboxChecked" />,
CheckboxUnchecked: () => <div data-test="mock-CheckboxUnchecked" />,
}));

describe('Checkbox', () => {
let wrapper: ReactWrapper;

it('renders the base component', () => {
expect(
isValidElement(
<Checkbox style={{}} checked={false} onChange={() => true} />,
),
).toBe(true);
});

describe('when unchecked', () => {
it('renders the unchecked component', () => {
const shallowWrapper = shallow(
<Checkbox style={{}} checked={false} onChange={() => true} />,
);
expect(shallowWrapper.dive().find(CheckboxUnchecked)).toExist();
});
});

describe('when checked', () => {
it('renders the checked component', () => {
const shallowWrapper = shallow(
<Checkbox style={{}} checked onChange={() => true} />,
);
expect(shallowWrapper.dive().find(CheckboxChecked)).toExist();
});
});

it('works with an onChange handler', () => {
const mockAction = jest.fn();
wrapper = mount(
<Checkbox style={{}} checked={false} onChange={mockAction} />,
describe('when unchecked', () => {
test('renders the unchecked component', () => {
const { getByTestId } = render(
<Checkbox style={{}} checked={false} onChange={() => true} />,
);
wrapper.find('Checkbox').first().simulate('click');
expect(mockAction).toHaveBeenCalled();
expect(getByTestId('mock-CheckboxUnchecked')).toBeInTheDocument();
});
});

it('renders custom Checkbox styles without melting', () => {
wrapper = mount(
<Checkbox onChange={() => true} checked={false} style={{ opacity: 1 }} />,
describe('when checked', () => {
test('renders the checked component', () => {
const { getByTestId } = render(
<Checkbox style={{}} checked onChange={() => true} />,
);
expect(wrapper.find('Checkbox')).toExist();
expect(wrapper.find('Checkbox')).toHaveStyle({ opacity: 1 });
expect(getByTestId('mock-CheckboxChecked')).toBeInTheDocument();
});
});

test('works with an onChange handler', () => {
const mockAction = jest.fn();
const { getByRole } = render(
<Checkbox style={{}} checked={false} onChange={mockAction} />,
);
fireEvent.click(getByRole('checkbox'));
expect(mockAction).toHaveBeenCalled();
});

test('renders custom Checkbox styles without melting', () => {
const { getByRole } = render(
<Checkbox onChange={() => true} checked={false} style={{ opacity: 1 }} />,
);
expect(getByRole('checkbox')).toBeInTheDocument();
expect(getByRole('checkbox')).toHaveStyle({ opacity: 1 });
});
63 changes: 33 additions & 30 deletions superset-frontend/src/components/ConfirmStatusChange/ConfirmStatusChange.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,51 @@
* specific language governing permissions and limitations
* under the License.
*/
import { mount } from 'enzyme';
import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
import Button from 'src/components/Button';
import { act } from 'react-dom/test-utils';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import Modal from 'src/components/Modal';

describe('ConfirmStatusChange', () => {
const mockedProps = {
title: 'please confirm',
description: 'are you sure?',
onConfirm: jest.fn(),
};
const wrapper = mount(

const mockedProps = {
title: 'please confirm',
description: 'are you sure?',
onConfirm: jest.fn(),
};

test('opens a confirm modal', () => {
const { getByTestId } = render(
<ConfirmStatusChange {...mockedProps}>
{confirm => (
<>
<Button id="btn1" onClick={confirm} />
<Button data-test="btn1" onClick={confirm} />
</>
)}
</ConfirmStatusChange>,
{
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
},
);

it('opens a confirm modal', () => {
act(() => {
wrapper.find('#btn1').first().props().onClick('foo');
});
fireEvent.click(getByTestId('btn1'));

expect(getByTestId(`${mockedProps.title}-modal`)).toBeInTheDocument();
});

test('calls the function on confirm', async () => {
const { getByTestId, getByRole } = render(
<ConfirmStatusChange {...mockedProps}>
{confirm => (
<>
<Button data-test="btn1" onClick={() => confirm('foo')} />
</>
)}
</ConfirmStatusChange>,
);

wrapper.update();
fireEvent.click(getByTestId('btn1'));

expect(wrapper.find(Modal)).toExist();
});
const confirmInput = getByTestId('delete-modal-input');
fireEvent.change(confirmInput, { target: { value: 'DELETE' } });

it('calls the function on confirm', () => {
act(() => {
wrapper.find(Button).last().props().onClick();
});
const confirmButton = getByRole('button', { name: 'delete' });
fireEvent.click(confirmButton);

expect(mockedProps.onConfirm).toHaveBeenCalledWith('foo');
});
await waitFor(() => expect(mockedProps.onConfirm).toHaveBeenCalledTimes(1));
expect(mockedProps.onConfirm).toHaveBeenCalledWith('foo');
});
Loading

0 comments on commit 1a1548d

Please sign in to comment.