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/explore/components/AggregateOption_spec.tsx

@@ -16,17 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/* eslint-disable no-unused-expressions */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from 'spec/helpers/testing-library';
 
 import AggregateOption from 'src/explore/components/controls/MetricControl/AggregateOption';
 
 describe('AggregateOption', () => {
   it('renders the aggregate', () => {
-    const wrapper = shallow(
-      <AggregateOption aggregate={{ aggregate_name: 'SUM' }} />,
-    );
-    expect(wrapper.text()).toBe('SUM');
+    render(<AggregateOption aggregate={{ aggregate_name: 'SUM' }} />);
+
+    const aggregateOption = screen.getByText(/sum/i);
+    expect(aggregateOption).toBeVisible();
   });
 });

superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.tsx

@@ -18,45 +18,40 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import sinon from 'sinon';
-import { mount } from 'enzyme';
+import { render, screen } from 'spec/helpers/testing-library';
 import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
-import ControlHeader from 'src/explore/components/ControlHeader';
-import Checkbox from 'src/components/Checkbox';
+import userEvent from '@testing-library/user-event';
 
 const defaultProps = {
   name: 'show_legend',
-  onChange: sinon.spy(),
+  onChange: jest.fn(),
   value: false,
   label: 'checkbox label',
 };
 
+const setup = (overrides = {}) => (
+  <ThemeProvider theme={supersetTheme}>
+    <CheckboxControl {...defaultProps} {...overrides} />;
+  </ThemeProvider>
+);
+
 describe('CheckboxControl', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(
-      <ThemeProvider theme={supersetTheme}>
-        <CheckboxControl {...defaultProps} />
-      </ThemeProvider>,
-    );
-  });
-
   it('renders a Checkbox', () => {
-    const controlHeader = wrapper.childAt(0).find(ControlHeader);
-    expect(controlHeader).toHaveLength(1);
-    expect(controlHeader.find(Checkbox)).toHaveLength(1);
+    render(setup());
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeVisible();
+    expect(checkbox).not.toBeChecked();
   });
 
   it('Checks the box when the label is clicked', () => {
-    const fullComponent = wrapper.childAt(0);
-    const spy = sinon.spy(fullComponent.instance(), 'onChange');
+    render(setup());
+    const label = screen.getByRole('button', {
+      name: /checkbox label/i,
+    });
 
-    fullComponent.instance().forceUpdate();
-
-    fullComponent.find('label span').last().simulate('click');
-
-    expect(spy.calledOnce).toBe(true);
+    userEvent.click(label);
+    expect(defaultProps.onChange).toHaveBeenCalled();
   });
 });

superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.jsx

@@ -1,61 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import { SketchPicker } from 'react-color';
-import {
-  CategoricalScheme,
-  getCategoricalSchemeRegistry,
-} from '@superset-ui/core';
-import Popover from 'src/components/Popover';
-import ColorPickerControl from 'src/explore/components/controls/ColorPickerControl';
-import ControlHeader from 'src/explore/components/ControlHeader';
-
-const defaultProps = {
-  value: {},
-};
-
-describe('ColorPickerControl', () => {
-  let wrapper;
-  let inst;
-  beforeAll(() => {
-    getCategoricalSchemeRegistry()
-      .registerValue(
-        'test',
-        new CategoricalScheme({
-          id: 'test',
-          colors: ['red', 'green', 'blue'],
-        }),
-      )
-      .setDefaultKey('test');
-    wrapper = shallow(<ColorPickerControl {...defaultProps} />);
-    inst = wrapper.instance();
-  });
-
-  it('renders a OverlayTrigger', () => {
-    const controlHeader = wrapper.find(ControlHeader);
-    expect(controlHeader).toHaveLength(1);
-    expect(wrapper.find(Popover)).toExist();
-  });
-
-  it('renders a Popover with a SketchPicker', () => {
-    const popOver = shallow(inst.renderPopover());
-    expect(popOver.find(SketchPicker)).toHaveLength(1);
-  });
-});

superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.tsx

@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render } from 'spec/helpers/testing-library';
+import {
+  CategoricalScheme,
+  getCategoricalSchemeRegistry,
+} from '@superset-ui/core';
+import ColorPickerControl from 'src/explore/components/controls/ColorPickerControl';
+
+const defaultProps = {
+  value: {},
+};
+
+describe('ColorPickerControl', () => {
+  beforeAll(() => {
+    getCategoricalSchemeRegistry()
+      .registerValue(
+        'test',
+        new CategoricalScheme({
+          id: 'test',
+          colors: ['red', 'green', 'blue'],
+        }),
+      )
+      .setDefaultKey('test');
+    render(<ColorPickerControl {...defaultProps} />);
+  });
+
+  it('renders an OverlayTrigger', () => {
+    const rendered = render(<ColorPickerControl {...defaultProps} />);
+
+    // This is the div wrapping the OverlayTrigger and SketchPicker
+    const controlWrapper = rendered.container.querySelectorAll('div')[1];
+    expect(controlWrapper.childElementCount).toBe(2);
+
+    // This is the div containing the OverlayTrigger
+    const overlayTrigger = rendered.container.querySelectorAll('div')[2];
+    expect(overlayTrigger).toHaveStyle(
+      'position: absolute; width: 50px; height: 20px; top: 0px; left: 0px; right: 0px; bottom: 0px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) center;',
+    );
+  });
+
+  it('renders a Popover with a SketchPicker', () => {
+    const rendered = render(<ColorPickerControl {...defaultProps} />);
+
+    // This is the div wrapping the OverlayTrigger and SketchPicker
+    const controlWrapper = rendered.container.querySelectorAll('div')[1];
+    expect(controlWrapper.childElementCount).toBe(2);
+
+    // This is the div containing the SketchPicker
+    const sketchPicker = rendered.container.querySelectorAll('div')[3];
+    expect(sketchPicker).toHaveStyle(
+      'position: absolute; width: 50px; height: 20px; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 2px;',
+    );
+  });
+});