[superset] 01/01: SaveDatasetModal test fix

[ly...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

lyndsi pushed a commit to branch lyndsi/fix-sdm-test
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 33c4087fa94364b6913df59ce41f01c2d7fb32c5
Author: lyndsiWilliams <kc...@gmail.com>
AuthorDate: Mon Aug 8 13:41:22 2022 -0500

    SaveDatasetModal test fix
---
 .../SaveDatasetModal/SaveDatasetModal.test.tsx     | 74 ++++++++++------------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
index 8c05f702bc..9b25c6544c 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
@@ -18,14 +18,7 @@
  */
 import React from 'react';
 import * as reactRedux from 'react-redux';
-import {
-  render,
-  screen,
-  waitFor,
-  within,
-  cleanup,
-  act,
-} 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';
@@ -44,6 +37,8 @@ fetchMock.get('glob:*/api/v1/dataset?*', {
   dataset_count: 3,
 });
 
+jest.useFakeTimers();
+
 // Mock the user
 const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
 beforeEach(() => {
@@ -110,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', () => {
+  it('renders the overwrite button as disabled until an existing dataset is selected', async () => {
     useSelectorMock.mockReturnValue({ ...user });
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
@@ -118,9 +113,7 @@ describe('SaveDatasetModal', () => {
     const overwriteRadioBtn = screen.getByRole('radio', {
       name: /overwrite existing/i,
     });
-    act(() => {
-      userEvent.click(overwriteRadioBtn);
-    });
+    userEvent.click(overwriteRadioBtn);
 
     // Overwrite confirmation button should be disabled at this point
     const overwriteConfirmationBtn = screen.getByRole('button', {
@@ -128,26 +121,23 @@ describe('SaveDatasetModal', () => {
     });
     expect(overwriteConfirmationBtn).toBeDisabled();
 
-    // Click the select component
+    // Click the overwrite select component
     const select = screen.getByRole('combobox', { name: /existing dataset/i })!;
-    act(() => 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
-    userEvent.click(overwriteConfirmationBtn);
-    expect(screen.getByRole('button', { name: /back/i })).toBeVisible();
-    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 a confirm overwrite screen when overwrite is clicked', async () => {
     useSelectorMock.mockReturnValue({ ...user });
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
@@ -155,31 +145,33 @@ describe('SaveDatasetModal', () => {
     const overwriteRadioBtn = screen.getByRole('radio', {
       name: /overwrite existing/i,
     });
-    act(() => {
-      userEvent.click(overwriteRadioBtn);
-    });
+    userEvent.click(overwriteRadioBtn);
 
-    // Overwrite confirmation button should be disabled at this point
-    const overwriteConfirmationBtn = screen.getByRole('button', {
-      name: /overwrite/i,
-    });
-    expect(overwriteConfirmationBtn).toBeDisabled();
+    // Click the overwrite select component
+    const select = screen.getByRole('combobox', { name: /existing dataset/i });
+    userEvent.click(select);
 
-    // Click the select component
-    const select = screen.getByRole('combobox', { name: /existing dataset/i })!;
-    act(() => userEvent.click(select));
+    await waitFor(() =>
+      expect(screen.queryByText('Loading...')).not.toBeVisible(),
+    );
 
     // Select the first "existing dataset" from the listbox
-
-    const list = await within(document.querySelector('.rc-virtual-list')!);
-    const option = await list.findByText('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
+    // 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();
   });