refactor(frontend): migrate 6 Enzyme-based tests to RTL, part 2 (#30281)

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx

@@ -16,24 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import sinon from 'sinon';
 import configureStore from 'redux-mock-store';
-import { mount, shallow } from 'enzyme';
+import { DatasourceType } from '@superset-ui/core';
 import {
-  supersetTheme,
-  ThemeProvider,
-  DatasourceType,
-} from '@superset-ui/core';
-import { Menu } from 'src/components/Menu';
-import {
-  DatasourceModal,
-  ChangeDatasourceModal,
-} from 'src/components/Datasource';
+  fireEvent,
+  waitFor,
+  screen,
+  render,
+} from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
 import DatasourceControl, {
   getDatasourceTitle,
 } from 'src/explore/components/controls/DatasourceControl';
-import Icons from 'src/components/Icons';
-import { Tooltip } from 'src/components/Tooltip';
 
 const defaultProps = {
   name: 'datasource',
@@ -54,9 +48,9 @@ const defaultProps = {
     health_check_message: 'Warning message!',
   },
   actions: {
-    setDatasource: sinon.spy(),
+    setDatasource: jest.fn(),
   },
-  onChange: sinon.spy(),
+  onChange: jest.fn(),
   user: {
     createdOn: '2021-04-27T18:12:38.952304',
     email: 'admin',
@@ -71,59 +65,74 @@ const defaultProps = {
 };
 
 describe('DatasourceControl', () => {
-  function setup(overrideProps) {
+  const setup = (overrideProps = {}) => {
     const mockStore = configureStore([]);
     const store = mockStore({});
     const props = {
       ...defaultProps,
       ...overrideProps,
     };
-    return mount(<DatasourceControl {...props} />, {
-      context: { store },
-      wrappingComponent: ThemeProvider,
-      wrappingComponentProps: { theme: supersetTheme },
-    });
-  }
+    return {
+      rendered: render(<DatasourceControl {...props} />, {
+        useRedux: true,
+        useRouter: true,
+        store,
+      }),
+      store,
+      props,
+    };
+  };
 
   it('should not render Modal', () => {
-    const wrapper = setup();
-    expect(wrapper.find(DatasourceModal)).toHaveLength(0);
+    setup();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 
   it('should not render ChangeDatasourceModal', () => {
-    const wrapper = setup();
-    expect(wrapper.find(ChangeDatasourceModal)).toHaveLength(0);
+    setup();
+    expect(screen.queryByTestId('Swap dataset-modal')).not.toBeInTheDocument();
   });
 
-  it('show or hide Edit Datasource option', () => {
-    let wrapper = setup();
-    expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
-    let menuWrapper = shallow(
-      <div>
-        {wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
-      </div>,
-    );
-    expect(menuWrapper.find(Menu.Item)).toHaveLength(3);
-
-    wrapper = setup({
-      isEditable: false,
+  it('show or hide Edit Datasource option', async () => {
+    const {
+      rendered: { container, rerender },
+      store,
+      props,
+    } = setup();
+    expect(
+      container.querySelector('[data-test="datasource-menu-trigger"]'),
+    ).toBeInTheDocument();
+    userEvent.click(screen.getByLabelText('more-vert'));
+    await waitFor(() => {
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(3);
+    });
+
+    rerender(<DatasourceControl {...{ ...props, isEditable: false }} />, {
+      useRedux: true,
+      useRouter: true,
+      store,
+    });
+    expect(
+      container.querySelector('[data-test="datasource-menu-trigger"]'),
+    ).toBeInTheDocument();
+    userEvent.click(screen.getByLabelText('more-vert'));
+    await waitFor(() => {
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(2);
     });
-    expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
-    menuWrapper = shallow(
-      <div>
-        {wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
-      </div>,
-    );
-    expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
   });
 
-  it('should render health check message', () => {
-    const wrapper = setup();
-    expect(wrapper.find(Icons.AlertSolid)).toExist();
-    const tooltip = wrapper.find(Tooltip).at(0);
-    expect(tooltip.prop('title')).toBe(
-      defaultProps.datasource.health_check_message,
-    );
+  it('should render health check message', async () => {
+    setup();
+    const modalTrigger = screen.getByLabelText('alert-solid');
+    expect(modalTrigger).toBeInTheDocument();
+
+    // Hover the modal so healthcheck message can show up
+    fireEvent.mouseOver(modalTrigger);
+    await waitFor(() => {
+      expect(
+        screen.getByText(defaultProps.datasource.health_check_message),
+      ).toBeInTheDocument();
+    });
   });
 
   it('Gets Datasource Title', () => {