This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch replace-jest-enzyme
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/replace-jest-enzyme by this
push:
new 0325642b94 SuperChartCore tests to RTL
0325642b94 is described below
commit 0325642b947c5b9346be4f98ef993b5fa049ae4d
Author: Evan Rusackas <[email protected]>
AuthorDate: Fri Feb 7 20:25:25 2025 -0700
SuperChartCore tests to RTL
---
.../test/chart/components/SuperChartCore.test.tsx | 166 ++++++++++-----------
1 file changed, 79 insertions(+), 87 deletions(-)
diff --git
a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
index 00e58f5cc2..9d6db54043 100644
---
a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
+++
b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
@@ -17,17 +17,11 @@
* under the License.
*/
-import { ReactElement, ReactNode } from 'react';
-import { mount } from 'enzyme';
+import '@testing-library/jest-dom';
+import { ReactElement } from 'react';
import mockConsole, { RestoreConsole } from 'jest-mock-console';
-import {
- ChartProps,
- promiseTimeout,
- supersetTheme,
- SupersetTheme,
- ThemeProvider,
-} from '@superset-ui/core';
-import { cleanup } from '@testing-library/react';
+import { ChartProps, supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { render, screen, waitFor } from '@testing-library/react';
import SuperChartCore from '../../../src/chart/components/SuperChartCore';
import {
ChartKeys,
@@ -36,21 +30,8 @@ import {
SlowChartPlugin,
} from './MockChartPlugins';
-const Wrapper = ({
- theme,
- children,
-}: {
- theme: SupersetTheme;
- children: ReactNode;
-}) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-
-const styledMount = (component: ReactElement) =>
- mount(component, {
- wrappingComponent: Wrapper,
- wrappingComponentProps: {
- theme: supersetTheme,
- },
- });
+const renderWithTheme = (component: ReactElement) =>
+ render(<ThemeProvider theme={supersetTheme}>{component}</ThemeProvider>);
describe('SuperChartCore', () => {
const chartProps = new ChartProps();
@@ -79,85 +60,88 @@ describe('SuperChartCore', () => {
restoreConsole = mockConsole();
});
- afterEach(async () => {
- cleanup();
+ afterEach(() => {
restoreConsole();
- // Wait for any pending effects to complete
- await new Promise(resolve => setTimeout(resolve, 0));
});
describe('registered charts', () => {
it('renders registered chart', async () => {
- const wrapper = styledMount(
+ const { container } = renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
chartProps={chartProps}
/>,
);
- await promiseTimeout(() => {
- expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+ await waitFor(() => {
+ expect(container.querySelector('.test-component')).toBeInTheDocument();
});
- wrapper.unmount();
});
- // Update other test cases similarly
it('renders registered chart with lazy loading', async () => {
- const wrapper = styledMount(
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.LAZY} />,
);
- await promiseTimeout(() => {
- expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+ await waitFor(() => {
+ expect(container.querySelector('.test-component')).toBeInTheDocument();
});
- wrapper.unmount();
});
- it('does not render if chartType is not set', () => {
- // Suppress warning
+ it('does not render if chartType is not set', async () => {
// @ts-ignore chartType is required
- const wrapper = styledMount(<SuperChartCore />);
+ const { container } = renderWithTheme(<SuperChartCore />);
- return promiseTimeout(() => {
- expect(wrapper.render().children()).toHaveLength(0);
- }, 5);
+ await waitFor(() => {
+ const testComponent = container.querySelector('.test-component');
+ expect(testComponent).not.toBeInTheDocument();
+ });
});
- it('adds id to container if specified', () => {
- const wrapper = styledMount(
+
+ it('adds id to container if specified', async () => {
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} id="the-chart" />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().attr('id')).toEqual('the-chart');
+ await waitFor(() => {
+ const element = container.querySelector('#the-chart');
+ expect(element).toBeInTheDocument();
+ expect(element).toHaveAttribute('id', 'the-chart');
});
});
- it('adds class to container if specified', () => {
- const wrapper = styledMount(
+
+ it('adds class to container if specified', async () => {
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} className="the-chart"
/>,
);
- return promiseTimeout(() => {
- expect(wrapper.hasClass('the-chart')).toBeTruthy();
- }, 0);
+ await waitFor(() => {
+ const element = container.querySelector('.the-chart');
+ expect(element).toBeInTheDocument();
+ expect(element).toHaveClass('the-chart');
+ });
});
- it('uses overrideTransformProps when specified', () => {
- const wrapper = styledMount(
+
+ it('uses overrideTransformProps when specified', async () => {
+ renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
overrideTransformProps={() => ({ message: 'hulk' })}
/>,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('.message').text()).toEqual('hulk');
+ await waitFor(() => {
+ expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
- it('uses preTransformProps when specified', () => {
+
+ it('uses preTransformProps when specified', async () => {
const chartPropsWithPayload = new ChartProps({
queriesData: [{ message: 'hulk' }],
theme: supersetTheme,
});
- const wrapper = styledMount(
+
+ renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
preTransformProps={() => chartPropsWithPayload}
@@ -165,69 +149,77 @@ describe('SuperChartCore', () => {
/>,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('.message').text()).toEqual('hulk');
+ await waitFor(() => {
+ expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
- it('uses postTransformProps when specified', () => {
- const wrapper = styledMount(
+
+ it('uses postTransformProps when specified', async () => {
+ renderWithTheme(
<SuperChartCore
chartType={ChartKeys.DILIGENT}
postTransformProps={() => ({ message: 'hulk' })}
/>,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('.message').text()).toEqual('hulk');
+ await waitFor(() => {
+ expect(screen.getByText('hulk')).toBeInTheDocument();
});
});
- it('renders if chartProps is not specified', () => {
- const wrapper = styledMount(
+
+ it('renders if chartProps is not specified', async () => {
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+ await waitFor(() => {
+ expect(container.querySelector('.test-component')).toBeInTheDocument();
});
});
+
it('does not render anything while waiting for Chart code to load', () => {
- const wrapper = styledMount(
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.SLOW} />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().children()).toHaveLength(0);
- });
+ const testComponent = container.querySelector('.test-component');
+ expect(testComponent).not.toBeInTheDocument();
});
- it('eventually renders after Chart is loaded', () => {
- // Suppress warning
- const wrapper = styledMount(
+
+ it('eventually renders after Chart is loaded', async () => {
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.SLOW} />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('div.test-component')).toHaveLength(1);
- }, 1500);
+ await waitFor(
+ () => {
+ expect(
+ container.querySelector('.test-component'),
+ ).toBeInTheDocument();
+ },
+ { timeout: 2000 },
+ );
});
- it('does not render if chartProps is null', () => {
- const wrapper = styledMount(
+
+ it('does not render if chartProps is null', async () => {
+ const { container } = renderWithTheme(
<SuperChartCore chartType={ChartKeys.DILIGENT} chartProps={null} />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('div.test-component')).toHaveLength(0);
+ await waitFor(() => {
+ expect(container).toBeEmptyDOMElement();
});
});
});
describe('unregistered charts', () => {
- it('renders error message', () => {
- const wrapper = styledMount(
+ it('renders error message', async () => {
+ renderWithTheme(
<SuperChartCore chartType="4d-pie-chart" chartProps={chartProps} />,
);
- return promiseTimeout(() => {
- expect(wrapper.render().find('.alert')).toHaveLength(1);
+ await waitFor(() => {
+ expect(screen.getByRole('alert')).toBeInTheDocument();
});
});
});
