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/dashboard/components/resizable/ResizableContainer_spec.tsx

@@ -17,20 +17,46 @@
  * under the License.
  */
 import React from 'react';
-import { Resizable } from 're-resizable';
-import { shallow } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 
 import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';
 
+interface ResizableContainerProps {
+  id: string;
+  children?: object;
+  adjustableWidth?: boolean;
+  adjustableHeight?: boolean;
+  gutterWidth?: number;
+  widthStep?: number;
+  heightStep?: number;
+  widthMultiple?: number;
+  heightMultiple?: number;
+  minWidthMultiple?: number;
+  maxWidthMultiple?: number;
+  minHeightMultiple?: number;
+  maxHeightMultiple?: number;
+  staticHeight?: number;
+  staticHeightMultiple?: number;
+  staticWidth?: number;
+  staticWidthMultiple?: number;
+  onResizeStop?: () => {};
+  onResize?: () => {};
+  onResizeStart?: () => {};
+  editMode: boolean;
+}
+
 describe('ResizableContainer', () => {
   const props = { editMode: false, id: 'id' };
 
-  function setup(propOverrides) {
-    return shallow(<ResizableContainer {...props} {...propOverrides} />);
-  }
+  const setup = (overrides?: ResizableContainerProps) => (
+    <ResizableContainer {...props} {...overrides} />
+  );
 
-  it('should render a Resizable', () => {
-    const wrapper = setup();
-    expect(wrapper.find(Resizable)).toExist();
+  it('should render a Resizable container', () => {
+    const rendered = render(setup());
+    const resizableContainer = rendered.container.querySelector(
+      '.resizable-container',
+    );
+    expect(resizableContainer).toBeVisible();
   });
 });

superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.tsx

@@ -17,29 +17,33 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 
 import ResizableHandle from 'src/dashboard/components/resizable/ResizableHandle';
 
 /* eslint-disable react/jsx-pascal-case */
 describe('ResizableHandle', () => {
   it('should render a right resize handle', () => {
-    const wrapper = shallow(<ResizableHandle.right />);
-    expect(wrapper.find('.resize-handle.resize-handle--right')).toExist();
+    const rendered = render(<ResizableHandle.right />);
+    expect(
+      rendered.container.querySelector('.resize-handle.resize-handle--right'),
+    ).toBeVisible();
   });
 
   it('should render a bottom resize handle', () => {
-    const wrapper = shallow(<ResizableHandle.bottom />);
-    expect(wrapper.find('.resize-handle.resize-handle--bottom')).toHaveLength(
-      1,
-    );
+    const rendered = render(<ResizableHandle.bottom />);
+    expect(
+      rendered.container.querySelector('.resize-handle.resize-handle--bottom'),
+    ).toBeVisible();
   });
 
   it('should render a bottomRight resize handle', () => {
-    const wrapper = shallow(<ResizableHandle.bottomRight />);
+    const rendered = render(<ResizableHandle.bottomRight />);
     expect(
-      wrapper.find('.resize-handle.resize-handle--bottom-right'),
-    ).toHaveLength(1);
+      rendered.container.querySelector(
+        '.resize-handle.resize-handle--bottom-right',
+      ),
+    ).toBeVisible();
   });
 });
 /* eslint-enable react/jsx-pascal-case */