Skip to content

Commit

Permalink
chore(fe): migrate 2 Enzyme-based tests to RTL
Browse files Browse the repository at this point in the history 
Signed-off-by: hainenber <[email protected]>
  • Loading branch information
@hainenber
hainenber committed Dec 27, 2024
1 parent a193d79 commit a90dc21
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 36 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 @@ -31,18 +31,18 @@ describe('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 @@ -55,13 +55,13 @@ describe('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 @@ -76,13 +76,13 @@ describe('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 @@ -95,13 +95,13 @@ describe('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 @@ -115,13 +115,13 @@ describe('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 @@ -135,13 +135,13 @@ describe('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 @@ -155,13 +155,13 @@ describe('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 @@ -175,13 +175,13 @@ describe('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 @@ -196,8 +196,8 @@ describe('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

0 comments on commit a90dc21

Please sign in to comment.