Skip to content

Commit c049771

Browse files
justinparkjustinpark
authored
chore(chart-controls): migrate enzyme to RTL (#26257)
1 parent 1a1548d commit c049771

File tree

3 files changed

+228
-165
lines changed

3 files changed

+228
-165
lines changed

‎superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx‎

Lines changed: 85 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -16,87 +16,98 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import { isValidElement } from 'react';
20-
import { shallow, ShallowWrapper } from 'enzyme';
21-
import { GenericDataType } from '@superset-ui/core';
19+
import '@testing-library/jest-dom';
20+
import { render } from '@testing-library/react';
21+
import {
22+
ThemeProvider,
23+
supersetTheme,
24+
GenericDataType,
25+
} from '@superset-ui/core';
2226

23-
import { ColumnOption, ColumnOptionProps, ColumnTypeLabel } from '../../src';
24-
import { SQLPopover } from '../../src/components/SQLPopover';
27+
import { ColumnOption, ColumnOptionProps } from '../../src';
2528

26-
describe('ColumnOption', () => {
27-
const defaultProps: ColumnOptionProps = {
29+
jest.mock('../../src/components/SQLPopover', () => ({
30+
SQLPopover: () => <div data-test="mock-sql-popover" />,
31+
}));
32+
jest.mock('../../src/components/ColumnTypeLabel/ColumnTypeLabel', () => ({
33+
ColumnTypeLabel: ({ type }: { type: string }) => (
34+
<div data-test="mock-column-type-label">{type}</div>
35+
),
36+
}));
37+
38+
const defaultProps: ColumnOptionProps = {
39+
column: {
40+
column_name: 'foo',
41+
verbose_name: 'Foo',
42+
expression: 'SUM(foo)',
43+
description: 'Foo is the greatest column of all',
44+
},
45+
showType: false,
46+
};
47+
48+
const setup = (props: Partial<ColumnOptionProps> = {}) =>
49+
render(
50+
<ThemeProvider theme={supersetTheme}>
51+
<ColumnOption {...defaultProps} {...props} />
52+
</ThemeProvider>,
53+
);
54+
test('shows a label with verbose_name', () => {
55+
const { container } = setup();
56+
const lbl = container.getElementsByClassName('option-label');
57+
expect(lbl).toHaveLength(1);
58+
expect(`${lbl[0].textContent}`).toEqual(defaultProps.column.verbose_name);
59+
});
60+
test('shows SQL Popover trigger', () => {
61+
const { getByTestId } = setup();
62+
expect(getByTestId('mock-sql-popover')).toBeInTheDocument();
63+
});
64+
test('shows a label with column_name when no verbose_name', () => {
65+
const { getByText } = setup({
2866
column: {
29-
column_name: 'foo',
30-
verbose_name: 'Foo',
31-
expression: 'SUM(foo)',
32-
description: 'Foo is the greatest column of all',
67+
...defaultProps.column,
68+
verbose_name: undefined,
3369
},
34-
showType: false,
35-
};
36-
37-
let wrapper: ShallowWrapper;
38-
let props: ColumnOptionProps;
39-
const factory = (o: ColumnOptionProps) => <ColumnOption {...o} />;
40-
beforeEach(() => {
41-
wrapper = shallow(factory(defaultProps));
42-
props = { ...defaultProps };
4370
});
44-
it('is a valid element', () => {
45-
expect(isValidElement(<ColumnOption {...defaultProps} />)).toBe(true);
46-
});
47-
it('shows a label with verbose_name', () => {
48-
const lbl = wrapper.find('.option-label');
49-
expect(lbl).toHaveLength(1);
50-
expect(lbl.first().text()).toBe('Foo');
51-
});
52-
it('shows SQL Popover trigger', () => {
53-
expect(wrapper.find(SQLPopover)).toHaveLength(1);
54-
});
55-
it('shows a label with column_name when no verbose_name', () => {
56-
delete props.column.verbose_name;
57-
wrapper = shallow(factory(props));
58-
expect(wrapper.find('.option-label').first().text()).toBe('foo');
59-
});
60-
it('shows a column type label when showType is true', () => {
61-
wrapper = shallow(
62-
factory({
63-
...props,
64-
showType: true,
65-
column: {
66-
column_name: 'foo',
67-
type: 'VARCHAR',
68-
type_generic: GenericDataType.String,
69-
},
70-
}),
71-
);
72-
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
71+
expect(getByText(defaultProps.column.column_name)).toBeInTheDocument();
72+
});
73+
test('shows a column type label when showType is true', () => {
74+
const { getByTestId } = setup({
75+
showType: true,
76+
column: {
77+
column_name: 'foo',
78+
type: 'VARCHAR',
79+
type_generic: GenericDataType.String,
80+
},
7381
});
74-
it('column with expression has correct column label if showType is true', () => {
75-
props.showType = true;
76-
wrapper = shallow(factory(props));
77-
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
78-
expect(wrapper.find(ColumnTypeLabel).props().type).toBe('expression');
82+
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
83+
});
84+
test('column with expression has correct column label if showType is true', () => {
85+
const { getByTestId } = setup({
86+
showType: true,
7987
});
80-
it('shows no column type label when type is null', () => {
81-
wrapper = shallow(
82-
factory({
83-
...props,
84-
showType: true,
85-
column: {
86-
column_name: 'foo',
87-
},
88-
}),
89-
);
90-
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(0);
88+
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
89+
expect(getByTestId('mock-column-type-label')).toHaveTextContent('expression');
90+
});
91+
test('shows no column type label when type is null', () => {
92+
const { queryByTestId } = setup({
93+
showType: true,
94+
column: {
95+
column_name: 'foo',
96+
},
9197
});
92-
it('dttm column has correct column label if showType is true', () => {
93-
props.showType = true;
94-
props.column.expression = undefined;
95-
props.column.type_generic = GenericDataType.Temporal;
96-
wrapper = shallow(factory(props));
97-
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
98-
expect(wrapper.find(ColumnTypeLabel).props().type).toBe(
99-
GenericDataType.Temporal,
100-
);
98+
expect(queryByTestId('mock-column-type-label')).not.toBeInTheDocument();
99+
});
100+
test('dttm column has correct column label if showType is true', () => {
101+
const { getByTestId } = setup({
102+
showType: true,
103+
column: {
104+
...defaultProps.column,
105+
expression: undefined,
106+
type_generic: GenericDataType.Temporal,
107+
},
101108
});
109+
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
110+
expect(getByTestId('mock-column-type-label')).toHaveTextContent(
111+
String(GenericDataType.Temporal),
112+
);
102113
});

‎superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx‎

Lines changed: 58 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,42 +16,69 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import { shallow } from 'enzyme';
20-
import { Tooltip } from '../../src/components/Tooltip';
21-
import { InfoTooltipWithTrigger } from '../../src';
19+
import '@testing-library/jest-dom';
20+
import { fireEvent, render } from '@testing-library/react';
21+
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
22+
import { InfoTooltipWithTrigger, InfoTooltipWithTriggerProps } from '../../src';
2223

23-
describe('InfoTooltipWithTrigger', () => {
24-
it('renders a tooltip', () => {
25-
const wrapper = shallow(
26-
<InfoTooltipWithTrigger label="test" tooltip="this is a test" />,
27-
);
28-
expect(wrapper.find(Tooltip)).toHaveLength(1);
29-
});
24+
jest.mock('../../src/components/Tooltip', () => ({
25+
Tooltip: ({ children }: { children: React.ReactNode }) => (
26+
<div data-test="mock-tooltip">{children}</div>
27+
),
28+
}));
29+
30+
const defaultProps = {};
31+
32+
const setup = (props: Partial<InfoTooltipWithTriggerProps> = {}) =>
33+
render(
34+
<ThemeProvider theme={supersetTheme}>
35+
<InfoTooltipWithTrigger {...defaultProps} {...props} />
36+
</ThemeProvider>,
37+
);
3038

31-
it('renders an info icon', () => {
32-
const wrapper = shallow(<InfoTooltipWithTrigger />);
33-
expect(wrapper.find('.fa-info-circle')).toHaveLength(1);
39+
test('renders a tooltip', () => {
40+
const { getAllByTestId } = setup({
41+
label: 'test',
42+
tooltip: 'this is a test',
3443
});
44+
expect(getAllByTestId('mock-tooltip').length).toEqual(1);
45+
});
46+
47+
test('renders an info icon', () => {
48+
const { container } = setup();
49+
expect(container.getElementsByClassName('fa-info-circle')).toHaveLength(1);
50+
});
3551

36-
it('responds to keypresses', () => {
37-
const clickHandler = jest.fn();
38-
const wrapper = shallow(
39-
<InfoTooltipWithTrigger
40-
label="test"
41-
tooltip="this is a test"
42-
onClick={clickHandler}
43-
/>,
44-
);
45-
wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Tab' });
46-
expect(clickHandler).toHaveBeenCalledTimes(0);
47-
wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Enter' });
48-
expect(clickHandler).toHaveBeenCalledTimes(1);
49-
wrapper.find('.fa-info-circle').simulate('keypress', { key: ' ' });
50-
expect(clickHandler).toHaveBeenCalledTimes(2);
52+
test('responds to keypresses', () => {
53+
const clickHandler = jest.fn();
54+
const { getByRole } = setup({
55+
label: 'test',
56+
tooltip: 'this is a test',
57+
onClick: clickHandler,
58+
});
59+
fireEvent.keyPress(getByRole('button'), {
60+
key: 'Tab',
61+
code: 9,
62+
charCode: 9,
63+
});
64+
expect(clickHandler).toHaveBeenCalledTimes(0);
65+
fireEvent.keyPress(getByRole('button'), {
66+
key: 'Enter',
67+
code: 13,
68+
charCode: 13,
5169
});
70+
expect(clickHandler).toHaveBeenCalledTimes(1);
71+
fireEvent.keyPress(getByRole('button'), {
72+
key: ' ',
73+
code: 32,
74+
charCode: 32,
75+
});
76+
expect(clickHandler).toHaveBeenCalledTimes(2);
77+
});
5278

53-
it('has a bsStyle', () => {
54-
const wrapper = shallow(<InfoTooltipWithTrigger bsStyle="something" />);
55-
expect(wrapper.find('.text-something')).toHaveLength(1);
79+
test('has a bsStyle', () => {
80+
const { container } = setup({
81+
bsStyle: 'something',
5682
});
83+
expect(container.getElementsByClassName('text-something')).toHaveLength(1);
5784
});

0 commit comments

Comments
 (0)