test: RTL overhaul - hackathon (#16626)

* CachedLabel_spec fully converted to RTL

* ColumnTypeLabel_spec fully converted to RTL

* MissingChart_spec fully converted to RTL

* RefreshIntervalModal_spec mostly converted to RTL

* HoverMenu_spec mostly converted to RTL

* ResizableContainer_spec fully converted to RTL

* ResizableHandle_spec fully converted to RTL

* AggregateOption_spec fully converted to RTL

* CheckboxControl_spec fully converted to RTL

* ColorPickerControl_spec to RTL

* Finished converting ColorPickerControl_spec to RTL/TS, also converted RefreshIntervalModal_spec to TS

* Added unknown type to ColumnTypeLabelProps

* Fixed ColumnTypeLabel_spec

superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx → superset-frontend/spec/javascripts/components/CachedLabel_spec.tsx

@@ -17,22 +17,26 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from 'spec/helpers/testing-library';
 
-import Label from 'src/components/Label';
-import CachedLabel from 'src/components/CachedLabel';
+import CachedLabel, { CacheLabelProps } from 'src/components/CachedLabel';
 
-describe('CachedLabel', () => {
-  const defaultProps = {
-    onClick: () => {},
-    cachedTimestamp: '2017-01-01',
-  };
+const defaultProps = {
+  onClick: () => {},
+  cachedTimestamp: '2017-01-01',
+};
+
+const setup = (props: CacheLabelProps) => <CachedLabel {...props} />;
 
+describe('CachedLabel', () => {
   it('is valid', () => {
     expect(React.isValidElement(<CachedLabel {...defaultProps} />)).toBe(true);
   });
+
   it('renders', () => {
-    const wrapper = shallow(<CachedLabel {...defaultProps} />);
-    expect(wrapper.find(Label)).toExist();
+    render(setup(defaultProps));
+
+    const label = screen.getByText(/cached/i);
+    expect(label).toBeVisible();
   });
 });

superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.jsx → superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.tsx

@@ -17,61 +17,71 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
 
-import { ColumnTypeLabel } from '@superset-ui/chart-controls';
+import {
+  ColumnTypeLabel,
+  ColumnTypeLabelProps,
+} from '@superset-ui/chart-controls';
 import { GenericDataType } from '@superset-ui/core';
 
-describe('ColumnOption', () => {
-  const defaultProps = {
-    type: GenericDataType.STRING,
-  };
+const defaultProps = {
+  type: GenericDataType.STRING,
+};
 
-  const props = { ...defaultProps };
-
-  function getWrapper(overrides) {
-    const wrapper = shallow(<ColumnTypeLabel {...props} {...overrides} />);
-    return wrapper;
-  }
+const setup = (overrides?: ColumnTypeLabelProps) => (
+  <div className="type-label">
+    <ColumnTypeLabel {...defaultProps} {...overrides} />
+  </div>
+);
 
+describe('ColumnOption RTL', () => {
+  afterEach(cleanup);
   it('is a valid element', () => {
     expect(React.isValidElement(<ColumnTypeLabel {...defaultProps} />)).toBe(
       true,
     );
   });
+
   it('string type shows ABC icon', () => {
-    const lbl = getWrapper({}).find('.type-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('ABC');
+    render(setup(defaultProps));
+
+    const labelIcon = screen.getByText(/abc/i);
+    expect(labelIcon.innerHTML).toMatch(/abc/i);
   });
+
   it('int type shows # icon', () => {
-    const lbl = getWrapper({
-      type: GenericDataType.NUMERIC,
-    }).find('.type-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('#');
+    render(setup({ type: GenericDataType.NUMERIC }));
+
+    const labelIcon = screen.getByText(/#/i);
+    expect(labelIcon.innerHTML).toMatch(/#/i);
   });
+
   it('bool type shows T/F icon', () => {
-    const lbl = getWrapper({
-      type: GenericDataType.BOOLEAN,
-    }).find('.type-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('T/F');
+    render(setup({ type: GenericDataType.BOOLEAN }));
+
+    const labelIcon = screen.getByText(/t\/f/i);
+    expect(labelIcon.innerHTML).toMatch(/t\/f/i);
   });
+
   it('expression type shows function icon', () => {
-    const lbl = getWrapper({ type: 'expression' }).find('.type-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('ƒ');
+    render(setup({ type: 'expression' }));
+
+    const labelIcon = screen.getByText('ƒ');
+    expect(labelIcon.innerHTML).toMatch('ƒ');
   });
+
   it('unknown type shows question mark', () => {
-    const lbl = getWrapper({ type: 'unknown' }).find('.type-label');
-    expect(lbl).toHaveLength(1);
-    expect(lbl.first().text()).toBe('?');
+    render(setup({ type: undefined }));
+
+    const labelIcon = screen.getByText('?');
+    expect(labelIcon.innerHTML).toMatch('?');
   });
+
   it('datetime type displays', () => {
-    const lbl = getWrapper({
-      type: GenericDataType.TEMPORAL,
-    }).find('.fa-clock-o');
-    expect(lbl).toHaveLength(1);
+    const rendered = render(setup({ type: GenericDataType.TEMPORAL }));
+
+    const clockIcon = rendered.container.querySelector('.fa-clock-o');
+    expect(clockIcon).toBeVisible();
   });
 });

superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.jsx → superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.tsx

@@ -17,23 +17,38 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 
 import MissingChart from 'src/dashboard/components/MissingChart';
 
-describe('MissingChart', () => {
-  function setup(overrideProps) {
-    const wrapper = shallow(<MissingChart height={100} {...overrideProps} />);
-    return wrapper;
-  }
+type MissingChartProps = {
+  height: number;
+};
+
+const setup = (overrides?: MissingChartProps) => (
+  <MissingChart height={100} {...overrides} />
+);
 
+describe('MissingChart', () => {
   it('renders a .missing-chart-container', () => {
-    const wrapper = setup();
-    expect(wrapper.find('.missing-chart-container')).toExist();
+    const rendered = render(setup());
+
+    const missingChartContainer = rendered.container.querySelector(
+      '.missing-chart-container',
+    );
+    expect(missingChartContainer).toBeVisible();
   });
 
   it('renders a .missing-chart-body', () => {
-    const wrapper = setup();
-    expect(wrapper.find('.missing-chart-body')).toExist();
+    const rendered = render(setup());
+
+    const missingChartBody = rendered.container.querySelector(
+      '.missing-chart-body',
+    );
+    const bodyText =
+      'There is no chart definition associated with this component, could it have been deleted?<br><br>Delete this container and save to remove this message.';
+
+    expect(missingChartBody).toBeVisible();
+    expect(missingChartBody?.innerHTML).toMatch(bodyText);
   });
 });