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(); });