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.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';
+
+const defaultProps = {
+  onClick: () => {},
+  cachedTimestamp: '2017-01-01',
+};
+
+const setup = (props: CacheLabelProps) => <CachedLabel {...props} />;
 
 describe('CachedLabel', () => {
-  const defaultProps = {
-    onClick: () => {},
-    cachedTimestamp: '2017-01-01',
-  };
-
   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.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.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);
   });
 });

superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx

@@ -1,80 +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 { mount } from 'enzyme';
-
-import ModalTrigger from 'src/components/ModalTrigger';
-import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
-import Alert from 'src/components/Alert';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
-
-const getMountWrapper = props =>
-  mount(<RefreshIntervalModal {...props} />, {
-    wrappingComponent: ThemeProvider,
-    wrappingComponentProps: {
-      theme: supersetTheme,
-    },
-  });
-
-describe('RefreshIntervalModal', () => {
-  const mockedProps = {
-    triggerNode: <i className="fa fa-edit" />,
-    refreshFrequency: 10,
-    onChange: jest.fn(),
-    editMode: true,
-  };
-  it('is valid', () => {
-    expect(
-      React.isValidElement(<RefreshIntervalModal {...mockedProps} />),
-    ).toBe(true);
-  });
-  it('renders the trigger node', () => {
-    const wrapper = getMountWrapper(mockedProps);
-    expect(wrapper.find('.fa-edit')).toExist();
-  });
-  it('should render a interval seconds', () => {
-    const wrapper = getMountWrapper(mockedProps);
-    expect(wrapper.prop('refreshFrequency')).toEqual(10);
-  });
-  it('should change refreshFrequency with edit mode', () => {
-    const wrapper = getMountWrapper(mockedProps);
-    wrapper.instance().handleFrequencyChange(30);
-    wrapper.instance().onSave();
-    expect(mockedProps.onChange).toHaveBeenCalled();
-    expect(mockedProps.onChange).toHaveBeenCalledWith(30, mockedProps.editMode);
-  });
-  it('should show warning message', () => {
-    const props = {
-      ...mockedProps,
-      refreshLimit: 3600,
-      refreshWarning: 'Show warning',
-    };
-
-    const wrapper = getMountWrapper(props);
-    wrapper.find('span[role="button"]').simulate('click');
-
-    wrapper.instance().handleFrequencyChange(30);
-    wrapper.update();
-    expect(wrapper.find(ModalTrigger).find(Alert)).toExist();
-
-    wrapper.instance().handleFrequencyChange(3601);
-    wrapper.update();
-    expect(wrapper.find(ModalTrigger).find(Alert)).not.toExist();
-  });
-});

superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.tsx

@@ -0,0 +1,237 @@
+/**
+ * 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 { mount } from 'enzyme';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+
+import ModalTrigger from 'src/components/ModalTrigger';
+import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
+import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown';
+import Alert from 'src/components/Alert';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+
+describe('RefreshIntervalModal - Enzyme', () => {
+  const getMountWrapper = (props: any) =>
+    mount(<RefreshIntervalModal {...props} />, {
+      wrappingComponent: ThemeProvider,
+      wrappingComponentProps: {
+        theme: supersetTheme,
+      },
+    });
+  const mockedProps = {
+    triggerNode: <i className="fa fa-edit" />,
+    refreshFrequency: 10,
+    onChange: jest.fn(),
+    editMode: true,
+  };
+  it('should show warning message', () => {
+    const props = {
+      ...mockedProps,
+      refreshLimit: 3600,
+      refreshWarning: 'Show warning',
+    };
+
+    const wrapper = getMountWrapper(props);
+    wrapper.find('span[role="button"]').simulate('click');
+
+    // @ts-ignore (for handleFrequencyChange)
+    wrapper.instance().handleFrequencyChange(30);
+    wrapper.update();
+    expect(wrapper.find(ModalTrigger).find(Alert)).toExist();
+
+    // @ts-ignore (for handleFrequencyChange)
+    wrapper.instance().handleFrequencyChange(3601);
+    wrapper.update();
+    expect(wrapper.find(ModalTrigger).find(Alert)).not.toExist();
+    wrapper.unmount();
+  });
+});
+
+const createProps = () => ({
+  addSuccessToast: jest.fn(),
+  addDangerToast: jest.fn(),
+  customCss: '#save-dash-split-button{margin-left: 100px;}',
+  dashboardId: 1,
+  dashboardInfo: {
+    id: 1,
+    dash_edit_perm: true,
+    dash_save_perm: true,
+    userId: '1',
+    metadata: {},
+    common: {
+      conf: {},
+    },
+  },
+  dashboardTitle: 'Title',
+  editMode: false,
+  expandedSlices: {},
+  forceRefreshAllCharts: jest.fn(),
+  hasUnsavedChanges: false,
+  isLoading: false,
+  layout: {},
+  dataMask: {},
+  onChange: jest.fn(),
+  onSave: jest.fn(),
+  refreshFrequency: 0,
+  setRefreshFrequency: jest.fn(),
+  shouldPersistRefreshFrequency: false,
+  showPropertiesModal: jest.fn(),
+  startPeriodicRender: jest.fn(),
+  updateCss: jest.fn(),
+  userCanEdit: false,
+  userCanSave: false,
+  userCanShare: false,
+  lastModifiedTime: 0,
+});
+
+const editModeOnProps = {
+  ...createProps(),
+  editMode: true,
+};
+
+const setup = (overrides?: any) => (
+  <div className="dashboard-header">
+    <HeaderActionsDropdown {...editModeOnProps} {...overrides} />
+  </div>
+);
+
+fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {});
+
+const openRefreshIntervalModal = async () => {
+  const headerActionsButton = screen.getByRole('img', { name: 'more-horiz' });
+  userEvent.click(headerActionsButton);
+
+  const autoRefreshOption = screen.getByText('Set auto-refresh interval');
+  userEvent.click(autoRefreshOption);
+};
+
+const displayOptions = async () => {
+  // Click default refresh interval option to display other options
+  userEvent.click(screen.getByText(/don't refresh/i));
+};
+
+const defaultRefreshIntervalModalProps = {
+  triggerNode: <i className="fa fa-edit" />,
+  refreshFrequency: 0,
+  onChange: jest.fn(),
+  editMode: true,
+};
+
+describe('RefreshIntervalModal - RTL', () => {
+  it('is valid', () => {
+    expect(
+      React.isValidElement(
+        <RefreshIntervalModal {...defaultRefreshIntervalModalProps} />,
+      ),
+    ).toBe(true);
+  });
+
+  it('renders refresh interval modal', async () => {
+    render(setup(editModeOnProps));
+    await openRefreshIntervalModal();
+
+    // Assert that modal exists by checking for the modal title
+    expect(screen.getByText('Refresh interval')).toBeVisible();
+  });
+
+  it('renders refresh interval options', async () => {
+    render(setup(editModeOnProps));
+    await openRefreshIntervalModal();
+    await displayOptions();
+
+    // Assert that both "Don't refresh" instances exist
+    // - There will be two at this point, the default option and the dropdown option
+    const dontRefreshInstances = screen.getAllByText(/don't refresh/i);
+    expect(dontRefreshInstances).toHaveLength(2);
+    dontRefreshInstances.forEach(option => {
+      expect(option).toBeInTheDocument();
+    });
+
+    // Assert that all the other options exist
+    const options = [
+      screen.getByText(/10 seconds/i),
+      screen.getByText(/30 seconds/i),
+      screen.getByText(/1 minute/i),
+      screen.getByText(/5 minutes/i),
+      screen.getByText(/30 minutes/i),
+      screen.getByText(/1 hour/i),
+      screen.getByText(/6 hours/i),
+      screen.getByText(/12 hours/i),
+      screen.getByText(/24 hours/i),
+    ];
+    options.forEach(option => {
+      expect(option).toBeInTheDocument();
+    });
+  });
+
+  it('should change selected value', async () => {
+    render(setup(editModeOnProps));
+    await openRefreshIntervalModal();
+
+    // Initial selected value should be "Don't refresh"
+    const selectedValue = screen.getByText(/don't refresh/i);
+    expect(selectedValue.title).toMatch(/don't refresh/i);
+
+    // Display options and select "10 seconds"
+    await displayOptions();
+    userEvent.click(screen.getByText(/10 seconds/i));
+
+    // Selected value should now be "10 seconds"
+    expect(selectedValue.title).toMatch(/10 seconds/i);
+    expect(selectedValue.title).not.toMatch(/don't refresh/i);
+  });
+
+  it('should save a newly-selected value', async () => {
+    render(setup(editModeOnProps));
+    await openRefreshIntervalModal();
+    await displayOptions();
+
+    screen.logTestingPlaygroundURL();
+    // Select a new interval and click save
+    userEvent.click(screen.getByText(/10 seconds/i));
+    userEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalled();
+    expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalledWith(
+      10,
+      editModeOnProps.editMode,
+    );
+  });
+
+  it('should show warning message', async () => {
+    // TODO (lyndsiWilliams): This test is incomplete
+    const warningProps = {
+      ...editModeOnProps,
+      refreshLimit: 3600,
+      refreshWarning: 'Show warning',
+    };
+
+    render(setup(warningProps));
+    await openRefreshIntervalModal();
+    await displayOptions();
+
+    userEvent.click(screen.getByText(/30 seconds/i));
+    userEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    // screen.debug(screen.getByRole('alert'));
+    expect.anything();
+  });
+});

superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.tsx

@@ -17,13 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 
 import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
 
 describe('HoverMenu', () => {
-  it('should render a div.hover-menu', () => {
-    const wrapper = shallow(<HoverMenu />);
-    expect(wrapper.find('.hover-menu')).toExist();
+  it('should render a hover menu', () => {
+    const rendered = render(<HoverMenu />);
+    const hoverMenu = rendered.container.querySelector('.hover-menu');
+    expect(hoverMenu).toBeVisible();
   });
 });

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 */

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;',
+    );
+  });
+});

superset-frontend/src/components/CachedLabel/index.tsx

@@ -22,13 +22,13 @@ import Label from 'src/components/Label';
 import { Tooltip } from 'src/components/Tooltip';
 import { TooltipContent } from './TooltipContent';
 
-interface Props {
+export interface CacheLabelProps {
   onClick?: React.MouseEventHandler<HTMLElement>;
   cachedTimestamp?: string;
   className?: string;
 }
 
-const CacheLabel: React.FC<Props> = ({
+const CacheLabel: React.FC<CacheLabelProps> = ({
   className,
   onClick,
   cachedTimestamp,

superset-frontend/src/profile/components/UserInfo.tsx

@@ -60,8 +60,8 @@ export default function UserInfo({ user }: UserInfoProps) {
         </div>
         <hr />
         <p>
-          <i className="fa fa-clock-o" /> {t('joined')}{' '}
-          {moment(user.createdOn, 'YYYYMMDD').fromNow()}
+          <i className="fa fa-clock-o" data-test="clock-icon-test" />{' '}
+          {t('joined')} {moment(user.createdOn, 'YYYYMMDD').fromNow()}
         </p>
         <p className="email">
           <i className="fa fa-envelope-o" /> {user.email}