test: Fix async tests in SaveDatasetModal and complete overwrite screen test (#21020)

* initial push

* SaveDatasetModal test fix

* Remove arbitrary async declarations

Co-authored-by: AAfghahi <arash.afghahi@gmail.com>

superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx

@@ -18,13 +18,7 @@
  */
 import React from 'react';
 import * as reactRedux from 'react-redux';
-import {
-  render,
-  screen,
-  waitFor,
-  within,
-  cleanup,
-} from 'spec/helpers/testing-library';
+import { render, screen, cleanup, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
@@ -43,6 +37,8 @@ fetchMock.get('glob:*/api/v1/dataset?*', {
   dataset_count: 3,
 });
 
+jest.useFakeTimers();
+
 // Mock the user
 const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
 beforeEach(() => {
@@ -51,7 +47,7 @@ beforeEach(() => {
 });
 
 describe('SaveDatasetModal', () => {
-  it('renders a "Save as new" field', async () => {
+  it('renders a "Save as new" field', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     const saveRadioBtn = screen.getByRole('radio', {
@@ -68,7 +64,7 @@ describe('SaveDatasetModal', () => {
     expect(inputFieldText).toBeVisible();
   });
 
-  it('renders an "Overwrite existing" field', async () => {
+  it('renders an "Overwrite existing" field', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     const overwriteRadioBtn = screen.getByRole('radio', {
@@ -84,20 +80,20 @@ describe('SaveDatasetModal', () => {
     expect(placeholderText).toBeVisible();
   });
 
-  it('renders a close button', async () => {
+  it('renders a close button', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     expect(screen.getByRole('button', { name: /close/i })).toBeVisible();
   });
 
-  it('renders a save button when "Save as new" is selected', async () => {
+  it('renders a save button when "Save as new" is selected', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     // "Save as new" is selected when the modal opens by default
     expect(screen.getByRole('button', { name: /save/i })).toBeVisible();
   });
 
-  it('renders an overwrite button when "Overwrite existing" is selected', async () => {
+  it('renders an overwrite button when "Overwrite existing" is selected', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     // Click the overwrite radio button to reveal the overwrite confirmation and back buttons
@@ -109,7 +105,7 @@ describe('SaveDatasetModal', () => {
     expect(screen.getByRole('button', { name: /overwrite/i })).toBeVisible();
   });
 
-  it('renders the overwrite button as disabled until an existing dataset is selected, confirms overwrite', async () => {
+  it('renders the overwrite button as disabled until an existing dataset is selected', async () => {
     useSelectorMock.mockReturnValue({ ...user });
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
@@ -117,9 +113,7 @@ describe('SaveDatasetModal', () => {
     const overwriteRadioBtn = screen.getByRole('radio', {
       name: /overwrite existing/i,
     });
-    await waitFor(async () => {
-      userEvent.click(overwriteRadioBtn);
-    });
+    userEvent.click(overwriteRadioBtn);
 
     // Overwrite confirmation button should be disabled at this point
     const overwriteConfirmationBtn = screen.getByRole('button', {
@@ -127,21 +121,57 @@ describe('SaveDatasetModal', () => {
     });
     expect(overwriteConfirmationBtn).toBeDisabled();
 
-    // Click the select component
+    // Click the overwrite select component
     const select = screen.getByRole('combobox', { name: /existing dataset/i })!;
-    await waitFor(async () => userEvent.click(select));
+    userEvent.click(select);
+
+    await waitFor(() =>
+      expect(screen.queryByText('Loading...')).not.toBeVisible(),
+    );
 
     // Select the first "existing dataset" from the listbox
-    const option = within(
-      document.querySelector('.rc-virtual-list')!,
-    ).getByText('coolest table 0')!;
+    const option = screen.getAllByText('coolest table 0')[1];
     userEvent.click(option);
 
     // Overwrite button should now be enabled
     expect(overwriteConfirmationBtn).toBeEnabled();
+  });
 
-    // Check Overwrite confirmation functionality
+  it('renders a confirm overwrite screen when overwrite is clicked', async () => {
+    useSelectorMock.mockReturnValue({ ...user });
+    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+
+    // Click the overwrite radio button
+    const overwriteRadioBtn = screen.getByRole('radio', {
+      name: /overwrite existing/i,
+    });
+    userEvent.click(overwriteRadioBtn);
+
+    // Click the overwrite select component
+    const select = screen.getByRole('combobox', { name: /existing dataset/i });
+    userEvent.click(select);
+
+    await waitFor(() =>
+      expect(screen.queryByText('Loading...')).not.toBeVisible(),
+    );
+
+    // Select the first "existing dataset" from the listbox
+    const option = screen.getAllByText('coolest table 0')[1];
+    userEvent.click(option);
+
+    // Click the overwrite button to access the confirmation screen
+    const overwriteConfirmationBtn = screen.getByRole('button', {
+      name: /overwrite/i,
+    });
     userEvent.click(overwriteConfirmationBtn);
+
+    // Overwrite screen text
+    expect(screen.getByText(/save or overwrite dataset/i)).toBeVisible();
+    expect(
+      screen.getByText(/are you sure you want to overwrite this dataset\?/i),
+    ).toBeVisible();
+    // Overwrite screen buttons
+    expect(screen.getByRole('button', { name: /close/i })).toBeVisible();
     expect(screen.getByRole('button', { name: /back/i })).toBeVisible();
     expect(screen.getByRole('button', { name: /overwrite/i })).toBeVisible();
   });