diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
index 7e838a44e..f707998d1 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
+++ b/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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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();
});