refactor(frontend): migrate 6 tests from Enzyme to RTL (apache#30151)

Signed-off-by: hainenber <[email protected]>
Co-authored-by: JUST.in DO IT <[email protected]>

superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipFrame.test.tsx

@@ -17,27 +17,28 @@
  * under the License.
  */
 
-import { shallow } from 'enzyme';
+import '@testing-library/jest-dom';
 import { TooltipFrame } from '@superset-ui/core';
+import { render, screen } from '@testing-library/react';
 
 describe('TooltipFrame', () => {
   it('sets className', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <TooltipFrame className="test-class">
         <span>Hi!</span>
       </TooltipFrame>,
     );
-    expect(wrapper.hasClass('test-class')).toEqual(true);
+    expect(screen.getByText('Hi!')).toBeInTheDocument();
+    expect(container.querySelector('.test-class')).toBeInTheDocument();
   });
 
   it('renders', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <TooltipFrame>
         <span>Hi!</span>
       </TooltipFrame>,
     );
-    const span = wrapper.find('span');
-    expect(span).toHaveLength(1);
-    expect(span.text()).toEqual('Hi!');
+    expect(container.querySelectorAll('span')).toHaveLength(1);
+    expect(container.querySelector('span')).toHaveTextContent('Hi!');
   });
 });

superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx

@@ -17,49 +17,53 @@
  * under the License.
  */
 
-import { shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { screen, render } from '@testing-library/react';
 import { TooltipTable } from '@superset-ui/core';
+import { CSSProperties } from 'react';
 
 describe('TooltipTable', () => {
   it('sets className', () => {
-    const wrapper = shallow(<TooltipTable className="test-class" />);
-    expect(wrapper.render().hasClass('test-class')).toEqual(true);
+    const { container } = render(<TooltipTable className="test-class" />);
+    expect(container.querySelector('[class="test-class"]')).toBeInTheDocument();
   });
 
   it('renders empty table', () => {
-    const wrapper = shallow(<TooltipTable />);
-    expect(wrapper.find('tbody')).toHaveLength(1);
-    expect(wrapper.find('tr')).toHaveLength(0);
+    const { container } = render(<TooltipTable />);
+    expect(container.querySelector('tbody')).toBeInTheDocument();
+    expect(container.querySelector('tr')).not.toBeInTheDocument();
   });
 
-  it('renders table with content', () => {
-    const wrapper = shallow(
-      <TooltipTable
-        data={[
-          {
-            key: 'Cersei',
-            keyColumn: 'Cersei',
-            keyStyle: { padding: '10' },
-            valueColumn: 2,
-            valueStyle: { textAlign: 'right' },
-          },
-          {
-            key: 'Jaime',
-            keyColumn: 'Jaime',
-            keyStyle: { padding: '10' },
-            valueColumn: 1,
-            valueStyle: { textAlign: 'right' },
-          },
-          {
-            key: 'Tyrion',
-            keyStyle: { padding: '10' },
-            valueColumn: 2,
-          },
-        ]}
-      />,
-    );
-    expect(wrapper.find('tbody')).toHaveLength(1);
-    expect(wrapper.find('tr')).toHaveLength(3);
-    expect(wrapper.find('tr > td').first().text()).toEqual('Cersei');
+  it('renders table with content', async () => {
+    const data = [
+      {
+        key: 'Cersei',
+        keyColumn: 'Cersei',
+        keyStyle: { padding: '10' },
+        valueColumn: 2,
+        valueStyle: { textAlign: 'right' } as CSSProperties,
+      },
+      {
+        key: 'Jaime',
+        keyColumn: 'Jaime',
+        keyStyle: { padding: '10' },
+        valueColumn: 1,
+        valueStyle: { textAlign: 'right' } as CSSProperties,
+      },
+      {
+        key: 'Tyrion',
+        keyStyle: { padding: '10' },
+        valueColumn: 2,
+      },
+    ];
+
+    render(<TooltipTable data={data} />);
+
+    for await (const { key, valueColumn } of data) {
+      const keyCell = await screen.findByText(key);
+      const valueCell = keyCell?.nextSibling as HTMLElement;
+      expect(keyCell).toBeInTheDocument();
+      expect(valueCell?.textContent).toEqual(String(valueColumn));
+    }
   });
 });

superset-frontend/plugins/legacy-plugin-chart-partition/package.json

@@ -30,8 +30,10 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "enzyme": "*",
-    "react": "^16.13.1"
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx

@@ -16,9 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow } from 'enzyme';
-
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import '@testing-library/jest-dom';
+import { screen, render, fireEvent, act } from '@testing-library/react';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import OptionDescription from '../src/OptionDescription';
 
 const defaultProps = {
@@ -28,20 +28,41 @@ const defaultProps = {
   },
 };
 
-describe('OptionDescription', () => {
-  let wrapper;
-  let props;
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
 
+describe('OptionDescription', () => {
   beforeEach(() => {
-    props = { option: { ...defaultProps.option } };
-    wrapper = shallow(<OptionDescription {...props} />);
+    const props = { option: { ...defaultProps.option } };
+    render(
+      <ThemeProvider theme={supersetTheme}>
+        <OptionDescription {...props} />
+      </ThemeProvider>,
+    );
   });
 
   it('renders an InfoTooltipWithTrigger', () => {
-    expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1);
+    const tooltipTrigger = screen.getByLabelText('Show info tooltip');
+    expect(tooltipTrigger).toBeInTheDocument();
+
+    // Perform delayed mouse hovering so tooltip could pop out
+    fireEvent.mouseOver(tooltipTrigger);
+    act(() => jest.runAllTimers());
+    fireEvent.mouseOut(tooltipTrigger);
+
+    const tooltip = screen.getByRole('tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('Description for some option');
   });
 
   it('renders a span with the label', () => {
-    expect(wrapper.find('.option-label').text()).toBe('Some option');
+    expect(
+      screen.getByText('Some option', { selector: 'span' }),
+    ).toBeInTheDocument();
   });
 });

superset-frontend/plugins/plugin-chart-table/package.json

@@ -26,7 +26,6 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "@types/d3-array": "^2.9.0",
-    "@types/enzyme": "^3.10.18",
     "@types/react-table": "^7.7.20",
     "classnames": "^2.5.1",
     "d3-array": "^2.4.0",

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CommonWrapper } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import TableChart from '../src/TableChart';
 import transformProps from '../src/transformProps';
 import DateWithFormatter from '../src/utils/DateWithFormatter';
 import testData from './testData';
-import { mount, ProviderWrapper } from './enzyme';
+import { ProviderWrapper } from './testHelpers';
 
 describe('plugin-chart-table', () => {
   describe('transformProps', () => {
@@ -178,39 +178,42 @@ describe('plugin-chart-table', () => {
   });
 
   describe('TableChart', () => {
-    let wrap: CommonWrapper; // the ReactDataTable wrapper
-    let tree: Cheerio;
-
     it('render basic data', () => {
-      wrap = mount(
-        <TableChart {...transformProps(testData.basic)} sticky={false} />,
+      render(
+        <ThemeProvider theme={supersetTheme}>
+          <TableChart {...transformProps(testData.basic)} sticky={false} />,
+        </ThemeProvider>,
       );
 
-      tree = wrap.render(); // returns a CheerioWrapper with jQuery-like API
-      const cells = tree.find('td');
+      const firstDataRow = screen.getAllByRole('rowgroup')[1];
+      const cells = firstDataRow.querySelectorAll('td');
       expect(cells).toHaveLength(12);
-      expect(cells.eq(0).text()).toEqual('2020-01-01 12:34:56');
-      expect(cells.eq(1).text()).toEqual('Michael');
+      expect(cells[0]).toHaveTextContent('2020-01-01 12:34:56');
+      expect(cells[1]).toHaveTextContent('Michael');
       // number is not in `metrics` list, so it should output raw value
       // (in real world Superset, this would mean the column is used in GROUP BY)
-      expect(cells.eq(2).text()).toEqual('2467063');
+      expect(cells[2]).toHaveTextContent('2467063');
       // should not render column with `.` in name as `undefined`
-      expect(cells.eq(3).text()).toEqual('foo');
-      expect(cells.eq(6).text()).toEqual('2467');
-      expect(cells.eq(8).text()).toEqual('N/A');
+      expect(cells[3]).toHaveTextContent('foo');
+      expect(cells[6]).toHaveTextContent('2467');
+      expect(cells[8]).toHaveTextContent('N/A');
     });
 
     it('render advanced data', () => {
-      wrap = mount(
-        <TableChart {...transformProps(testData.advanced)} sticky={false} />,
+      render(
+        <ThemeProvider theme={supersetTheme}>
+          <TableChart {...transformProps(testData.advanced)} sticky={false} />,
+        </ThemeProvider>,
       );
-      tree = wrap.render();
-      // should successful rerender with new props
-      const cells = tree.find('td');
-      expect(tree.find('th').eq(1).text()).toEqual('Sum of Num');
-      expect(cells.eq(0).text()).toEqual('Michael');
-      expect(cells.eq(2).text()).toEqual('12.346%');
-      expect(cells.eq(4).text()).toEqual('2.47k');
+      const secondColumnHeader = screen.getByText('Sum of Num');
+      expect(secondColumnHeader).toBeInTheDocument();
+      expect(secondColumnHeader?.getAttribute('data-column-name')).toEqual('1');
+
+      const firstDataRow = screen.getAllByRole('rowgroup')[1];
+      const cells = firstDataRow.querySelectorAll('td');
+      expect(cells[0]).toHaveTextContent('Michael');
+      expect(cells[2]).toHaveTextContent('12.346%');
+      expect(cells[4]).toHaveTextContent('2.47k');
     });
 
     it('render advanced data with currencies', () => {
@@ -318,9 +321,12 @@ describe('plugin-chart-table', () => {
     });
 
     it('render empty data', () => {
-      wrap.setProps({ ...transformProps(testData.empty), sticky: false });
-      tree = wrap.render();
-      expect(tree.text()).toContain('No records found');
+      render(
+        <ThemeProvider theme={supersetTheme}>
+          <TableChart {...transformProps(testData.empty)} sticky={false} />,
+        </ThemeProvider>,
+      );
+      expect(screen.getByText('No records found')).toBeInTheDocument();
     });
 
     it('render color with column color formatter', () => {

superset-frontend/plugins/plugin-chart-table/test/enzyme.tsx → superset-frontend/plugins/plugin-chart-table/test/testHelpers.tsx

@@ -16,8 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
-import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
 import {
   EmotionCacheProvider,
   createEmotionCache,
@@ -29,12 +27,6 @@ const emotionCache = createEmotionCache({
   key: 'test',
 });
 
-type optionsType = {
-  wrappingComponentProps?: any;
-  wrappingComponent?: ReactElement;
-  context?: any;
-};
-
 export function ProviderWrapper(props: any) {
   const { children, theme = supersetTheme } = props;
   return (
@@ -43,25 +35,3 @@ export function ProviderWrapper(props: any) {
     </EmotionCacheProvider>
   );
 }
-
-export function mount(component: ReactElement, options: optionsType = {}) {
-  return enzymeMount(component, {
-    ...options,
-    wrappingComponent: ProviderWrapper,
-    wrappingComponentProps: {
-      theme: supersetTheme,
-      ...options?.wrappingComponentProps,
-    },
-  });
-}
-
-export function shallow(component: ReactElement, options: optionsType = {}) {
-  return enzymeShallow(component, {
-    ...options,
-    wrappingComponent: ProviderWrapper,
-    wrappingComponentProps: {
-      theme: supersetTheme,
-      ...options?.wrappingComponentProps,
-    },
-  }).dive();
-}