Skip to content

Commit

Permalink
chore(fe): migrate 4 Enzyme-based tests to RTL (apache#31634)
Browse files Browse the repository at this point in the history 
Signed-off-by: hainenber <dotronghai96@gmail.com>
  • Loading branch information
@hainenber @sfirke
hainenber authored and sfirke committed Feb 12, 2025
1 parent ab44f79 commit ba3ee67
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 82 deletions.
54 changes: 27 additions & 27 deletions ...rset-frontend/packages/superset-ui-core/test/chart-composition/legend/WithLegend.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
* under the License.
*/

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

let renderChart = jest.fn();
let renderLegend = jest.fn();
Expand All @@ -32,18 +32,18 @@ describe.skip('WithLegend', () => {
});

it('sets className', () => {
const wrapper = shallow(
const { container } = render(
<WithLegend
className="test-class"
renderChart={renderChart}
renderLegend={renderLegend}
/>,
);
expect(wrapper.hasClass('test-class')).toEqual(true);
expect(container.querySelectorAll('.test-class')).toHaveLength(1);
});

it('renders when renderLegend is not set', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
width={500}
Expand All @@ -56,13 +56,13 @@ describe.skip('WithLegend', () => {
// Have to delay more than debounceTime (1ms)
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(0);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(0);
}, 100);
});

it('renders', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
width={500}
Expand All @@ -77,13 +77,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders without width or height', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
renderChart={renderChart}
Expand All @@ -96,13 +96,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders legend on the left', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
position="left"
Expand All @@ -116,13 +116,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders legend on the right', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
position="right"
Expand All @@ -136,13 +136,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders legend on the top', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
position="top"
Expand All @@ -156,13 +156,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders legend on the bottom', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
position="bottom"
Expand All @@ -176,13 +176,13 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});

it('renders legend with justifyContent set', () => {
const wrapper = mount(
const { container } = render(
<WithLegend
debounceTime={1}
position="right"
Expand All @@ -197,8 +197,8 @@ describe.skip('WithLegend', () => {
return promiseTimeout(() => {
expect(renderChart).toHaveBeenCalledTimes(1);
expect(renderLegend).toHaveBeenCalledTimes(1);
expect(wrapper.render().find('div.chart')).toHaveLength(1);
expect(wrapper.render().find('div.legend')).toHaveLength(1);
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
}, 100);
});
});
24 changes: 15 additions & 9 deletions superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@
* under the License.
*/

import '@testing-library/jest-dom';
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { mount } from 'enzyme';
import { reactify } from '@superset-ui/core';
import { render, screen } from '@testing-library/react';
import { RenderFuncType } from '../../../src/chart/components/reactify';

describe('reactify(renderFn)', () => {
Expand Down Expand Up @@ -78,14 +79,18 @@ describe('reactify(renderFn)', () => {

it('returns a React component class', () =>
new Promise(done => {
const wrapper = mount(<TestComponent />);
render(<TestComponent />);

expect(renderFn).toHaveBeenCalledTimes(1);
expect(wrapper.html()).toEqual('<div id="test"><b>abc</b></div>');
expect(screen.getByText('abc')).toBeInTheDocument();
expect(screen.getByText('abc').parentNode).toHaveAttribute('id', 'test');
setTimeout(() => {
expect(renderFn).toHaveBeenCalledTimes(2);
expect(wrapper.html()).toEqual('<div id="test"><b>def</b></div>');
wrapper.unmount();
expect(screen.getByText('def')).toBeInTheDocument();
expect(screen.getByText('def').parentNode).toHaveAttribute(
'id',
'test',
);
done(undefined);
}, 20);
}));
Expand Down Expand Up @@ -119,8 +124,9 @@ describe('reactify(renderFn)', () => {
describe('defaultProps', () => {
it('has defaultProps if renderFn.defaultProps is defined', () => {
expect(TheChart.defaultProps).toBe(renderFn.defaultProps);
const wrapper = mount(<TheChart id="test" />);
expect(wrapper.html()).toEqual('<div id="test"><b>ghi</b></div>');
render(<TheChart id="test" />);
expect(screen.getByText('ghi')).toBeInTheDocument();
expect(screen.getByText('ghi').parentNode).toHaveAttribute('id', 'test');
});
it('does not have defaultProps if renderFn.defaultProps is not defined', () => {
const AnotherChart = reactify(() => {});
Expand All @@ -136,9 +142,9 @@ describe('reactify(renderFn)', () => {
});
it('calls willUnmount hook when it is provided', () =>
new Promise(done => {
const wrapper = mount(<AnotherTestComponent />);
const { unmount } = render(<AnotherTestComponent />);
setTimeout(() => {
wrapper.unmount();
unmount();
expect(willUnmountCb).toHaveBeenCalledTimes(1);
done(undefined);
}, 20);
Expand Down
27 changes: 14 additions & 13 deletions superset-frontend/src/features/home/EmptyState.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
import { styledMount as mount } from 'spec/helpers/theming';
import { TableTab } from 'src/views/CRUD/types';
import { render, screen } from 'spec/helpers/testing-library';
import EmptyState, { EmptyStateProps } from './EmptyState';
import { WelcomeTable } from './types';

Expand Down Expand Up @@ -65,29 +65,30 @@ describe('EmptyState', () => {

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

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

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

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

// Validate the image
expect(wrapper.find('.ant-empty-image').children()).toHaveLength(1);

// Check the correct text is displayed
expect(textContainer.text()).toContain(`Nothing here yet`);
expect(
container.querySelector('.ant-empty-image')?.children,
).toHaveLength(1);
});
});
});
49 changes: 16 additions & 33 deletions ...xecutionLogList/ExecutionLogList.test.jsx → ...xecutionLogList/ExecutionLogList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,15 @@
* under the License.
*/
import fetchMock from 'fetch-mock';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { styledMount as mount } from 'spec/helpers/theming';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import ListView from 'src/components/ListView';
import ExecutionLog from 'src/pages/ExecutionLogList';

// store needed for withToasts(ExecutionLog)
const mockStore = configureStore([thunk]);
const store = mockStore({});
import { render, screen } from 'spec/helpers/testing-library';

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

fetchMock.delete(executionLogsEndpoint, {});

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

fetchMock.get(executionLogsEndpoint, {
ids: [2, 0, 1],
result: mockannotations,
result: mockAnnotations,
count: 3,
});

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

async function mountAndWait(props) {
const mounted = mount(
<Provider store={store}>
<ExecutionLog {...props} />
</Provider>,
);
await waitForComponentToPaint(mounted);

return mounted;
}

describe('ExecutionLog', () => {
let wrapper;

beforeAll(async () => {
wrapper = await mountAndWait();
const renderAndWait = (props = {}) =>
render(<ExecutionLog {...props} />, {
useRedux: true,
useQueryParams: true,
useRouter: true,
});

it('renders', () => {
expect(wrapper.find(ExecutionLog)).toExist();
});
describe('ExecutionLog', () => {
beforeAll(() => renderAndWait());

it('renders a ListView', () => {
expect(wrapper.find(ListView)).toExist();
it('renders with a ListView', () => {
expect(screen.getByText('Back to all')).toHaveAttribute(
'href',
'/alert/list/',
);
expect(screen.getByTestId('execution-log-list-view')).toBeVisible();
});

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

0 comments on commit ba3ee67

Please sign in to comment.