Skip to content

Commit db70c79

Browse files
hainenberhainenber
authored
chore(fe): migrate 4 Enzyme-based tests to RTL (#31634)
Signed-off-by: hainenber <[email protected]>
1 parent 3160607 commit db70c79

File tree

4 files changed

+72
-82
lines changed

4 files changed

+72
-82
lines changed

‎superset-frontend/packages/superset-ui-core/test/chart-composition/legend/WithLegend.test.tsx

+27-27
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
* under the License.
1818
*/
1919

20-
import { mount, shallow } from 'enzyme';
2120
import { triggerResizeObserver } from 'resize-observer-polyfill';
2221
import { promiseTimeout, WithLegend } from '@superset-ui/core';
22+
import { render } from '@testing-library/react';
2323

2424
let renderChart = jest.fn();
2525
let renderLegend = jest.fn();
@@ -32,18 +32,18 @@ describe.skip('WithLegend', () => {
3232
});
3333

3434
it('sets className', () => {
35-
const wrapper = shallow(
35+
const { container } = render(
3636
<WithLegend
3737
className="test-class"
3838
renderChart={renderChart}
3939
renderLegend={renderLegend}
4040
/>,
4141
);
42-
expect(wrapper.hasClass('test-class')).toEqual(true);
42+
expect(container.querySelectorAll('.test-class')).toHaveLength(1);
4343
});
4444

4545
it('renders when renderLegend is not set', () => {
46-
const wrapper = mount(
46+
const { container } = render(
4747
<WithLegend
4848
debounceTime={1}
4949
width={500}
@@ -56,13 +56,13 @@ describe.skip('WithLegend', () => {
5656
// Have to delay more than debounceTime (1ms)
5757
return promiseTimeout(() => {
5858
expect(renderChart).toHaveBeenCalledTimes(1);
59-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
60-
expect(wrapper.render().find('div.legend')).toHaveLength(0);
59+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
60+
expect(container.querySelectorAll('div.legend')).toHaveLength(0);
6161
}, 100);
6262
});
6363

6464
it('renders', () => {
65-
const wrapper = mount(
65+
const { container } = render(
6666
<WithLegend
6767
debounceTime={1}
6868
width={500}
@@ -77,13 +77,13 @@ describe.skip('WithLegend', () => {
7777
return promiseTimeout(() => {
7878
expect(renderChart).toHaveBeenCalledTimes(1);
7979
expect(renderLegend).toHaveBeenCalledTimes(1);
80-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
81-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
80+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
81+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
8282
}, 100);
8383
});
8484

8585
it('renders without width or height', () => {
86-
const wrapper = mount(
86+
const { container } = render(
8787
<WithLegend
8888
debounceTime={1}
8989
renderChart={renderChart}
@@ -96,13 +96,13 @@ describe.skip('WithLegend', () => {
9696
return promiseTimeout(() => {
9797
expect(renderChart).toHaveBeenCalledTimes(1);
9898
expect(renderLegend).toHaveBeenCalledTimes(1);
99-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
100-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
99+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
100+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
101101
}, 100);
102102
});
103103

104104
it('renders legend on the left', () => {
105-
const wrapper = mount(
105+
const { container } = render(
106106
<WithLegend
107107
debounceTime={1}
108108
position="left"
@@ -116,13 +116,13 @@ describe.skip('WithLegend', () => {
116116
return promiseTimeout(() => {
117117
expect(renderChart).toHaveBeenCalledTimes(1);
118118
expect(renderLegend).toHaveBeenCalledTimes(1);
119-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
120-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
119+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
120+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
121121
}, 100);
122122
});
123123

124124
it('renders legend on the right', () => {
125-
const wrapper = mount(
125+
const { container } = render(
126126
<WithLegend
127127
debounceTime={1}
128128
position="right"
@@ -136,13 +136,13 @@ describe.skip('WithLegend', () => {
136136
return promiseTimeout(() => {
137137
expect(renderChart).toHaveBeenCalledTimes(1);
138138
expect(renderLegend).toHaveBeenCalledTimes(1);
139-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
140-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
139+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
140+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
141141
}, 100);
142142
});
143143

144144
it('renders legend on the top', () => {
145-
const wrapper = mount(
145+
const { container } = render(
146146
<WithLegend
147147
debounceTime={1}
148148
position="top"
@@ -156,13 +156,13 @@ describe.skip('WithLegend', () => {
156156
return promiseTimeout(() => {
157157
expect(renderChart).toHaveBeenCalledTimes(1);
158158
expect(renderLegend).toHaveBeenCalledTimes(1);
159-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
160-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
159+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
160+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
161161
}, 100);
162162
});
163163

164164
it('renders legend on the bottom', () => {
165-
const wrapper = mount(
165+
const { container } = render(
166166
<WithLegend
167167
debounceTime={1}
168168
position="bottom"
@@ -176,13 +176,13 @@ describe.skip('WithLegend', () => {
176176
return promiseTimeout(() => {
177177
expect(renderChart).toHaveBeenCalledTimes(1);
178178
expect(renderLegend).toHaveBeenCalledTimes(1);
179-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
180-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
179+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
180+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
181181
}, 100);
182182
});
183183

184184
it('renders legend with justifyContent set', () => {
185-
const wrapper = mount(
185+
const { container } = render(
186186
<WithLegend
187187
debounceTime={1}
188188
position="right"
@@ -197,8 +197,8 @@ describe.skip('WithLegend', () => {
197197
return promiseTimeout(() => {
198198
expect(renderChart).toHaveBeenCalledTimes(1);
199199
expect(renderLegend).toHaveBeenCalledTimes(1);
200-
expect(wrapper.render().find('div.chart')).toHaveLength(1);
201-
expect(wrapper.render().find('div.legend')).toHaveLength(1);
200+
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
201+
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
202202
}, 100);
203203
});
204204
});

‎superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx

+15-9
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@
1717
* under the License.
1818
*/
1919

20+
import '@testing-library/jest-dom';
2021
import PropTypes from 'prop-types';
2122
import { PureComponent } from 'react';
22-
import { mount } from 'enzyme';
2323
import { reactify } from '@superset-ui/core';
24+
import { render, screen } from '@testing-library/react';
2425
import { RenderFuncType } from '../../../src/chart/components/reactify';
2526

2627
describe('reactify(renderFn)', () => {
@@ -78,14 +79,18 @@ describe('reactify(renderFn)', () => {
7879

7980
it('returns a React component class', () =>
8081
new Promise(done => {
81-
const wrapper = mount(<TestComponent />);
82+
render(<TestComponent />);
8283

8384
expect(renderFn).toHaveBeenCalledTimes(1);
84-
expect(wrapper.html()).toEqual('<div id="test"><b>abc</b></div>');
85+
expect(screen.getByText('abc')).toBeInTheDocument();
86+
expect(screen.getByText('abc').parentNode).toHaveAttribute('id', 'test');
8587
setTimeout(() => {
8688
expect(renderFn).toHaveBeenCalledTimes(2);
87-
expect(wrapper.html()).toEqual('<div id="test"><b>def</b></div>');
88-
wrapper.unmount();
89+
expect(screen.getByText('def')).toBeInTheDocument();
90+
expect(screen.getByText('def').parentNode).toHaveAttribute(
91+
'id',
92+
'test',
93+
);
8994
done(undefined);
9095
}, 20);
9196
}));
@@ -119,8 +124,9 @@ describe('reactify(renderFn)', () => {
119124
describe('defaultProps', () => {
120125
it('has defaultProps if renderFn.defaultProps is defined', () => {
121126
expect(TheChart.defaultProps).toBe(renderFn.defaultProps);
122-
const wrapper = mount(<TheChart id="test" />);
123-
expect(wrapper.html()).toEqual('<div id="test"><b>ghi</b></div>');
127+
render(<TheChart id="test" />);
128+
expect(screen.getByText('ghi')).toBeInTheDocument();
129+
expect(screen.getByText('ghi').parentNode).toHaveAttribute('id', 'test');
124130
});
125131
it('does not have defaultProps if renderFn.defaultProps is not defined', () => {
126132
const AnotherChart = reactify(() => {});
@@ -136,9 +142,9 @@ describe('reactify(renderFn)', () => {
136142
});
137143
it('calls willUnmount hook when it is provided', () =>
138144
new Promise(done => {
139-
const wrapper = mount(<AnotherTestComponent />);
145+
const { unmount } = render(<AnotherTestComponent />);
140146
setTimeout(() => {
141-
wrapper.unmount();
147+
unmount();
142148
expect(willUnmountCb).toHaveBeenCalledTimes(1);
143149
done(undefined);
144150
}, 20);

‎superset-frontend/src/features/home/EmptyState.test.tsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
import { styledMount as mount } from 'spec/helpers/theming';
2019
import { TableTab } from 'src/views/CRUD/types';
20+
import { render, screen } from 'spec/helpers/testing-library';
2121
import EmptyState, { EmptyStateProps } from './EmptyState';
2222
import { WelcomeTable } from './types';
2323

@@ -65,29 +65,30 @@ describe('EmptyState', () => {
6565

6666
variants.forEach(variant => {
6767
it(`renders an ${variant.tab} ${variant.tableName} empty state`, () => {
68-
const wrapper = mount(<EmptyState {...variant} />);
69-
expect(wrapper).toExist();
68+
const { container } = render(<EmptyState {...variant} />);
7069

7170
// Select the first description node
72-
const textContainer = wrapper.find('.ant-empty-description').at(0);
73-
expect(textContainer.text()).toEqual('Nothing here yet');
74-
expect(wrapper.find('button')).toHaveLength(1);
71+
expect(
72+
container.querySelector('.ant-empty-description'),
73+
).toHaveTextContent('Nothing here yet');
74+
expect(screen.getAllByRole('button')).toHaveLength(1);
7575
});
7676
});
7777

7878
recents.forEach(recent => {
7979
it(`renders a ${recent.tab} ${recent.tableName} empty state`, () => {
80-
const wrapper = mount(<EmptyState {...recent} />);
81-
expect(wrapper).toExist();
80+
const { container } = render(<EmptyState {...recent} />);
8281

8382
// Select the first description node
84-
const textContainer = wrapper.find('.ant-empty-description').at(0);
83+
// Check the correct text is displayed
84+
expect(
85+
container.querySelector('.ant-empty-description'),
86+
).toHaveTextContent('Nothing here yet');
8587

8688
// Validate the image
87-
expect(wrapper.find('.ant-empty-image').children()).toHaveLength(1);
88-
89-
// Check the correct text is displayed
90-
expect(textContainer.text()).toContain(`Nothing here yet`);
89+
expect(
90+
container.querySelector('.ant-empty-image')?.children,
91+
).toHaveLength(1);
9192
});
9293
});
9394
});

‎superset-frontend/src/pages/ExecutionLogList/ExecutionLogList.test.jsx ‎superset-frontend/src/pages/ExecutionLogList/ExecutionLogList.test.tsx

+16-33
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,15 @@
1717
* under the License.
1818
*/
1919
import fetchMock from 'fetch-mock';
20-
import { Provider } from 'react-redux';
21-
import configureStore from 'redux-mock-store';
22-
import thunk from 'redux-thunk';
23-
import { styledMount as mount } from 'spec/helpers/theming';
24-
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
25-
import ListView from 'src/components/ListView';
2620
import ExecutionLog from 'src/pages/ExecutionLogList';
27-
28-
// store needed for withToasts(ExecutionLog)
29-
const mockStore = configureStore([thunk]);
30-
const store = mockStore({});
21+
import { render, screen } from 'spec/helpers/testing-library';
3122

3223
const executionLogsEndpoint = 'glob:*/api/v1/report/*/log*';
3324
const reportEndpoint = 'glob:*/api/v1/report/*';
3425

3526
fetchMock.delete(executionLogsEndpoint, {});
3627

37-
const mockannotations = [...new Array(3)].map((_, i) => ({
28+
const mockAnnotations = [...new Array(3)].map((_, i) => ({
3829
end_dttm: new Date().toISOString,
3930
error_message: `report ${i} error message`,
4031
id: i,
@@ -47,7 +38,7 @@ const mockannotations = [...new Array(3)].map((_, i) => ({
4738

4839
fetchMock.get(executionLogsEndpoint, {
4940
ids: [2, 0, 1],
50-
result: mockannotations,
41+
result: mockAnnotations,
5142
count: 3,
5243
});
5344

@@ -61,30 +52,22 @@ jest.mock('react-router-dom', () => ({
6152
useParams: () => ({ alertId: '1' }),
6253
}));
6354

64-
async function mountAndWait(props) {
65-
const mounted = mount(
66-
<Provider store={store}>
67-
<ExecutionLog {...props} />
68-
</Provider>,
69-
);
70-
await waitForComponentToPaint(mounted);
71-
72-
return mounted;
73-
}
74-
75-
describe('ExecutionLog', () => {
76-
let wrapper;
77-
78-
beforeAll(async () => {
79-
wrapper = await mountAndWait();
55+
const renderAndWait = (props = {}) =>
56+
render(<ExecutionLog {...props} />, {
57+
useRedux: true,
58+
useQueryParams: true,
59+
useRouter: true,
8060
});
8161

82-
it('renders', () => {
83-
expect(wrapper.find(ExecutionLog)).toExist();
84-
});
62+
describe('ExecutionLog', () => {
63+
beforeAll(() => renderAndWait());
8564

86-
it('renders a ListView', () => {
87-
expect(wrapper.find(ListView)).toExist();
65+
it('renders with a ListView', () => {
66+
expect(screen.getByText('Back to all')).toHaveAttribute(
67+
'href',
68+
'/alert/list/',
69+
);
70+
expect(screen.getByTestId('execution-log-list-view')).toBeVisible();
8871
});
8972

9073
it('fetches report/alert', () => {

0 commit comments

Comments
 (0)