This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch replace-jest-enzyme in repository https://gitbox.apache.org/repos/asf/superset.git
commit 427139f4ccebc63f13867c4158188a59eed0e35e Author: Evan Rusackas <[email protected]> AuthorDate: Fri Feb 7 13:54:36 2025 -0700 more fixes... --- .../FiltersConfigModal/FiltersConfigModal.test.tsx | 728 ++++++++++----------- .../EditDataset/UsageTab/UsageTab.test.tsx | 65 +- 2 files changed, 386 insertions(+), 407 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx index 9749fc69f0..91bfe6c282 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx @@ -36,7 +36,6 @@ import { TimeFilterPlugin, TimeGrainFilterPlugin, } from 'src/filters/components'; -import { cleanup } from '@testing-library/react'; import FiltersConfigModal, { FiltersConfigModalProps, } from './FiltersConfigModal'; @@ -157,439 +156,430 @@ afterEach(() => { jest.restoreAllMocks(); }); -// Add cleanup after each test -afterEach(async () => { - cleanup(); - jest.restoreAllMocks(); - // Wait for any pending effects to complete - await new Promise(resolve => setTimeout(resolve, 0)); -}); +function defaultRender(initialState: any = defaultState(), modalProps = props) { + return render(<FiltersConfigModal {...modalProps} />, { + initialState, + useDnd: true, + useRedux: true, + }); +} -describe('FiltersConfigModal', () => { - // Increase the global timeout - jest.setTimeout(30000); +function getCheckbox(name: RegExp) { + return screen.getByRole('checkbox', { name }); +} - test('renders a value filter type', () => { - defaultRender(); +function queryCheckbox(name: RegExp) { + return screen.queryByRole('checkbox', { name }); +} - userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); +test('renders a value filter type', () => { + defaultRender(); - expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); - expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); - expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); - expect(screen.getByText(COLUMN_REGEX)).toBeInTheDocument(); + userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); - expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); - expect(getCheckbox(REQUIRED_REGEX)).not.toBeChecked(); - expect(queryCheckbox(DEPENDENCIES_REGEX)).not.toBeInTheDocument(); - expect(getCheckbox(FIRST_VALUE_REGEX)).not.toBeChecked(); - expect(getCheckbox(INVERSE_SELECTION_REGEX)).not.toBeChecked(); - expect(getCheckbox(SEARCH_ALL_REGEX)).not.toBeChecked(); - expect(getCheckbox(PRE_FILTER_REGEX)).not.toBeChecked(); - expect(getCheckbox(SORT_REGEX)).not.toBeChecked(); + expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); + expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); + expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); + expect(screen.getByText(COLUMN_REGEX)).toBeInTheDocument(); - expect(getCheckbox(MULTIPLE_REGEX)).toBeChecked(); - }); + expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); + expect(getCheckbox(REQUIRED_REGEX)).not.toBeChecked(); + expect(queryCheckbox(DEPENDENCIES_REGEX)).not.toBeInTheDocument(); + expect(getCheckbox(FIRST_VALUE_REGEX)).not.toBeChecked(); + expect(getCheckbox(INVERSE_SELECTION_REGEX)).not.toBeChecked(); + expect(getCheckbox(SEARCH_ALL_REGEX)).not.toBeChecked(); + expect(getCheckbox(PRE_FILTER_REGEX)).not.toBeChecked(); + expect(getCheckbox(SORT_REGEX)).not.toBeChecked(); - test('renders a numerical range filter type', async () => { - defaultRender(); + expect(getCheckbox(MULTIPLE_REGEX)).toBeChecked(); +}); - userEvent.click(screen.getByText(VALUE_REGEX)); +test('renders a numerical range filter type', async () => { + defaultRender(); - await waitFor(() => - userEvent.click(screen.getByText(NUMERICAL_RANGE_REGEX)), - ); + userEvent.click(screen.getByText(VALUE_REGEX)); - userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); + await waitFor(() => userEvent.click(screen.getByText(NUMERICAL_RANGE_REGEX))); - expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); - expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); - expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); - expect(screen.getByText(COLUMN_REGEX)).toBeInTheDocument(); - expect(screen.getByText(REQUIRED_REGEX)).toBeInTheDocument(); + userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); - expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); - expect(getCheckbox(PRE_FILTER_REGEX)).not.toBeChecked(); + expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); + expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); + expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); + expect(screen.getByText(COLUMN_REGEX)).toBeInTheDocument(); + expect(screen.getByText(REQUIRED_REGEX)).toBeInTheDocument(); - expect(queryCheckbox(MULTIPLE_REGEX)).not.toBeInTheDocument(); - expect(queryCheckbox(DEPENDENCIES_REGEX)).not.toBeInTheDocument(); - expect(queryCheckbox(FIRST_VALUE_REGEX)).not.toBeInTheDocument(); - expect(queryCheckbox(INVERSE_SELECTION_REGEX)).not.toBeInTheDocument(); - expect(queryCheckbox(SEARCH_ALL_REGEX)).not.toBeInTheDocument(); - expect(queryCheckbox(SORT_REGEX)).not.toBeInTheDocument(); - }); + expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); + expect(getCheckbox(PRE_FILTER_REGEX)).not.toBeChecked(); - test('renders a time range filter type', async () => { - defaultRender(); + expect(queryCheckbox(MULTIPLE_REGEX)).not.toBeInTheDocument(); + expect(queryCheckbox(DEPENDENCIES_REGEX)).not.toBeInTheDocument(); + expect(queryCheckbox(FIRST_VALUE_REGEX)).not.toBeInTheDocument(); + expect(queryCheckbox(INVERSE_SELECTION_REGEX)).not.toBeInTheDocument(); + expect(queryCheckbox(SEARCH_ALL_REGEX)).not.toBeInTheDocument(); + expect(queryCheckbox(SORT_REGEX)).not.toBeInTheDocument(); +}); - userEvent.click(screen.getByText(VALUE_REGEX)); +test('renders a time range filter type', async () => { + defaultRender(); - await waitFor(() => userEvent.click(screen.getByText(TIME_RANGE_REGEX))); + userEvent.click(screen.getByText(VALUE_REGEX)); - expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); - expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); - expect(screen.queryByText(DATASET_REGEX)).not.toBeInTheDocument(); - expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); + await waitFor(() => userEvent.click(screen.getByText(TIME_RANGE_REGEX))); - expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); - }); + expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); + expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); + expect(screen.queryByText(DATASET_REGEX)).not.toBeInTheDocument(); + expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); - test('renders a time column filter type', async () => { - defaultRender(); + expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); +}); - userEvent.click(screen.getByText(VALUE_REGEX)); +test('renders a time column filter type', async () => { + defaultRender(); - await waitFor(() => userEvent.click(screen.getByText(TIME_COLUMN_REGEX))); + userEvent.click(screen.getByText(VALUE_REGEX)); - expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); - expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); - expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); - expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); + await waitFor(() => userEvent.click(screen.getByText(TIME_COLUMN_REGEX))); - expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); - }); + expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); + expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); + expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); + expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); - test('renders a time grain filter type', async () => { - defaultRender(); + expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); +}); - userEvent.click(screen.getByText(VALUE_REGEX)); +test('renders a time grain filter type', async () => { + defaultRender(); - await waitFor(() => userEvent.click(screen.getByText(TIME_GRAIN_REGEX))); + userEvent.click(screen.getByText(VALUE_REGEX)); - expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); - expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); - expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); - expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); + await waitFor(() => userEvent.click(screen.getByText(TIME_GRAIN_REGEX))); - expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); - }); + expect(screen.getByText(FILTER_TYPE_REGEX)).toBeInTheDocument(); + expect(screen.getByText(FILTER_NAME_REGEX)).toBeInTheDocument(); + expect(screen.getByText(DATASET_REGEX)).toBeInTheDocument(); + expect(screen.queryByText(COLUMN_REGEX)).not.toBeInTheDocument(); - test('render time filter types as disabled if there are no temporal columns in the dataset', async () => { - defaultRender(noTemporalColumnsState()); + expect(getCheckbox(DEFAULT_VALUE_REGEX)).not.toBeChecked(); +}); - userEvent.click(screen.getByText(VALUE_REGEX)); +test('render time filter types as disabled if there are no temporal columns in the dataset', async () => { + defaultRender(noTemporalColumnsState()); - const timeRange = await screen.findByText(TIME_RANGE_REGEX); - const timeGrain = await screen.findByText(TIME_GRAIN_REGEX); - const timeColumn = await screen.findByText(TIME_COLUMN_REGEX); - const disabledClass = '.ant-select-item-option-disabled'; + userEvent.click(screen.getByText(VALUE_REGEX)); - expect(timeRange.closest(disabledClass)).toBeInTheDocument(); - expect(timeGrain.closest(disabledClass)).toBeInTheDocument(); - expect(timeColumn.closest(disabledClass)).toBeInTheDocument(); - }); + const timeRange = await screen.findByText(TIME_RANGE_REGEX); + const timeGrain = await screen.findByText(TIME_GRAIN_REGEX); + const timeColumn = await screen.findByText(TIME_COLUMN_REGEX); + const disabledClass = '.ant-select-item-option-disabled'; - test('validates the name', async () => { - defaultRender(); - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - expect(await screen.findByText(NAME_REQUIRED_REGEX)).toBeInTheDocument(); - }); + expect(timeRange.closest(disabledClass)).toBeInTheDocument(); + expect(timeGrain.closest(disabledClass)).toBeInTheDocument(); + expect(timeColumn.closest(disabledClass)).toBeInTheDocument(); +}); - test('validates the column', async () => { - defaultRender(); - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - expect(await screen.findByText(COLUMN_REQUIRED_REGEX)).toBeInTheDocument(); - }); +test('validates the name', async () => { + defaultRender(); + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + expect(await screen.findByText(NAME_REQUIRED_REGEX)).toBeInTheDocument(); +}); - // eslint-disable-next-line jest/no-disabled-tests - test.skip('validates the default value', async () => { - defaultRender(noTemporalColumnsState()); - expect(await screen.findByText('birth_names')).toBeInTheDocument(); - userEvent.type(screen.getByRole('combobox'), `Column A{Enter}`); - userEvent.click(getCheckbox(DEFAULT_VALUE_REGEX)); - await waitFor(() => { - expect( - screen.queryByText(FILL_REQUIRED_FIELDS_REGEX), - ).not.toBeInTheDocument(); - }); +test('validates the column', async () => { + defaultRender(); + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + expect(await screen.findByText(COLUMN_REQUIRED_REGEX)).toBeInTheDocument(); +}); + +// eslint-disable-next-line jest/no-disabled-tests +test.skip('validates the default value', async () => { + defaultRender(noTemporalColumnsState()); + expect(await screen.findByText('birth_names')).toBeInTheDocument(); + userEvent.type(screen.getByRole('combobox'), `Column A{Enter}`); + userEvent.click(getCheckbox(DEFAULT_VALUE_REGEX)); + await waitFor(() => { expect( - await screen.findByText(DEFAULT_VALUE_REQUIRED_REGEX), - ).toBeInTheDocument(); + screen.queryByText(FILL_REQUIRED_FIELDS_REGEX), + ).not.toBeInTheDocument(); }); + expect( + await screen.findByText(DEFAULT_VALUE_REQUIRED_REGEX), + ).toBeInTheDocument(); +}); - test('validates the pre-filter value', async () => { - defaultRender(); - await waitFor(() => { - expect(screen.getByText(FILTER_SETTINGS_REGEX)).toBeInTheDocument(); - }); - - userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); - await waitFor(() => { - expect(getCheckbox(PRE_FILTER_REGEX)).toBeInTheDocument(); - }); - - userEvent.click(getCheckbox(PRE_FILTER_REGEX)); - await waitFor( - () => { - expect(screen.getByText(PRE_FILTER_REQUIRED_REGEX)).toBeInTheDocument(); - }, - { timeout: 20000 }, - ); - }, 30000); // Set individual test timeout to 30 seconds - - // eslint-disable-next-line jest/no-disabled-tests - test.skip("doesn't render time range pre-filter if there are no temporal columns in datasource", async () => { - defaultRender(noTemporalColumnsState()); - userEvent.click(screen.getByText(DATASET_REGEX)); - await waitFor(() => { - expect(screen.queryByLabelText('Loading')).not.toBeInTheDocument(); - userEvent.click(screen.getByText('birth_names')); - }); - userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); - userEvent.click(getCheckbox(PRE_FILTER_REGEX)); - await waitFor(() => - expect( - screen.queryByText(TIME_RANGE_PREFILTER_REGEX), - ).not.toBeInTheDocument(), - ); +test('validates the pre-filter value', async () => { + defaultRender(); + userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); + userEvent.click(getCheckbox(PRE_FILTER_REGEX)); + expect( + await screen.findByText(PRE_FILTER_REQUIRED_REGEX), + ).toBeInTheDocument(); + // longer timeout to decrease flakiness +}, 10000); + +// eslint-disable-next-line jest/no-disabled-tests +test.skip("doesn't render time range pre-filter if there are no temporal columns in datasource", async () => { + defaultRender(noTemporalColumnsState()); + userEvent.click(screen.getByText(DATASET_REGEX)); + await waitFor(() => { + expect(screen.queryByLabelText('Loading')).not.toBeInTheDocument(); + userEvent.click(screen.getByText('birth_names')); }); + userEvent.click(screen.getByText(FILTER_SETTINGS_REGEX)); + userEvent.click(getCheckbox(PRE_FILTER_REGEX)); + await waitFor(() => + expect( + screen.queryByText(TIME_RANGE_PREFILTER_REGEX), + ).not.toBeInTheDocument(), + ); +}); - test('filters are draggable', async () => { - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - buildNativeFilter('NATIVE_FILTER-3', 'product', []), - ]; - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; - defaultRender(state, { ...props, createNewOnOpen: false }); - const draggables = document.querySelectorAll('div[draggable=true]'); - expect(draggables.length).toBe(3); - }); +test('filters are draggable', async () => { + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + buildNativeFilter('NATIVE_FILTER-3', 'product', []), + ]; + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; + defaultRender(state, { ...props, createNewOnOpen: false }); + const draggables = document.querySelectorAll('div[draggable=true]'); + expect(draggables.length).toBe(3); +}); - /* - TODO - adds a new value filter type with all fields filled - adds a new numerical range filter type with all fields filled - adds a new time range filter type with all fields filled - adds a new time column filter type with all fields filled - adds a new time grain filter type with all fields filled - collapsible controls opens by default when it is checked - advanced section opens by default when it has an option checked - disables the default value when default to first item is checked - changes the default value options when the column changes - switches to configuration tab when validation fails - displays cancel message when there are pending operations - do not displays cancel message when there are no pending operations - */ - - test('deletes a filter', async () => { - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - buildNativeFilter('NATIVE_FILTER-3', 'product', []), - ]; - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; - const onSave = jest.fn(); - - defaultRender(state, { - ...props, - createNewOnOpen: false, - onSave, - }); - const removeButtons = screen.getAllByRole('img', { name: 'trash' }); - userEvent.click(removeButtons[2]); - - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - - await waitFor(() => - expect(onSave).toHaveBeenCalledWith( - expect.objectContaining({ - deleted: expect.arrayContaining(['NATIVE_FILTER-3']), - modified: expect.arrayContaining([]), - reordered: expect.arrayContaining([]), - }), - ), - ); - }); +/* + TODO + adds a new value filter type with all fields filled + adds a new numerical range filter type with all fields filled + adds a new time range filter type with all fields filled + adds a new time column filter type with all fields filled + adds a new time grain filter type with all fields filled + collapsible controls opens by default when it is checked + advanced section opens by default when it has an option checked + disables the default value when default to first item is checked + changes the default value options when the column changes + switches to configuration tab when validation fails + displays cancel message when there are pending operations + do not displays cancel message when there are no pending operations +*/ + +test('deletes a filter', async () => { + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + buildNativeFilter('NATIVE_FILTER-3', 'product', []), + ]; + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; + const onSave = jest.fn(); - test('deletes a filter including dependencies', async () => { - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - buildNativeFilter('NATIVE_FILTER-3', 'product', []), - ]; - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; - const onSave = jest.fn(); - defaultRender(state, { - ...props, - createNewOnOpen: false, - onSave, - }); - const removeButtons = screen.getAllByRole('img', { name: 'trash' }); - userEvent.click(removeButtons[1]); - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - await waitFor(() => - expect(onSave).toHaveBeenCalledWith( - expect.objectContaining({ - deleted: ['NATIVE_FILTER-2'], - modified: expect.arrayContaining([ - expect.objectContaining({ - id: 'NATIVE_FILTER-1', - }), - ]), - reordered: [], - }), - ), - ); + defaultRender(state, { + ...props, + createNewOnOpen: false, + onSave, }); + const removeButtons = screen.getAllByRole('img', { name: 'trash' }); + userEvent.click(removeButtons[2]); + + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + + await waitFor(() => + expect(onSave).toHaveBeenCalledWith( + expect.objectContaining({ + deleted: expect.arrayContaining(['NATIVE_FILTER-3']), + modified: expect.arrayContaining([]), + reordered: expect.arrayContaining([]), + }), + ), + ); +}); - test('switches the order between two filters', async () => { - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', []), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - ]; +test('deletes a filter including dependencies', async () => { + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', ['NATIVE_FILTER-2']), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + buildNativeFilter('NATIVE_FILTER-3', 'product', []), + ]; + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; + const onSave = jest.fn(); + defaultRender(state, { + ...props, + createNewOnOpen: false, + onSave, + }); + const removeButtons = screen.getAllByRole('img', { name: 'trash' }); + userEvent.click(removeButtons[1]); + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + await waitFor(() => + expect(onSave).toHaveBeenCalledWith( + expect.objectContaining({ + deleted: ['NATIVE_FILTER-2'], + modified: expect.arrayContaining([ + expect.objectContaining({ + id: 'NATIVE_FILTER-1', + }), + ]), + reordered: [], + }), + ), + ); +}); - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; +test('switches the order between two filters', async () => { + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', []), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + ]; - const onSave = jest.fn(); + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; - defaultRender(state, { - ...props, - createNewOnOpen: false, - onSave, - }); + const onSave = jest.fn(); - const draggableFilters = screen.getAllByRole('tab'); + defaultRender(state, { + ...props, + createNewOnOpen: false, + onSave, + }); - fireEvent.dragStart(draggableFilters[0]); + const draggableFilters = screen.getAllByRole('tab'); - fireEvent.dragOver(draggableFilters[1]); + fireEvent.dragStart(draggableFilters[0]); - fireEvent.drop(draggableFilters[1]); + fireEvent.dragOver(draggableFilters[1]); - fireEvent.dragEnd(draggableFilters[0]); + fireEvent.drop(draggableFilters[1]); - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + fireEvent.dragEnd(draggableFilters[0]); - await waitFor(() => - expect(onSave).toHaveBeenCalledWith( - expect.objectContaining({ - deleted: [], - modified: [], - reordered: expect.arrayContaining([ - 'NATIVE_FILTER-2', - 'NATIVE_FILTER-1', - ]), - }), - ), - ); - }); + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - test('rearranges three filters and deletes one of them', async () => { - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', []), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - buildNativeFilter('NATIVE_FILTER-3', 'product', []), - ]; - - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; + await waitFor(() => + expect(onSave).toHaveBeenCalledWith( + expect.objectContaining({ + deleted: [], + modified: [], + reordered: expect.arrayContaining([ + 'NATIVE_FILTER-2', + 'NATIVE_FILTER-1', + ]), + }), + ), + ); +}); - const onSave = jest.fn(); +test('rearranges three filters and deletes one of them', async () => { + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', []), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + buildNativeFilter('NATIVE_FILTER-3', 'product', []), + ]; + + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; - defaultRender(state, { - ...props, - createNewOnOpen: false, - onSave, - }); + const onSave = jest.fn(); - const draggableFilters = screen.getAllByRole('tab'); - const deleteButtons = screen.getAllByRole('img', { name: 'trash' }); - userEvent.click(deleteButtons[1]); - - fireEvent.dragStart(draggableFilters[0]); - fireEvent.dragOver(draggableFilters[2]); - fireEvent.drop(draggableFilters[2]); - fireEvent.dragEnd(draggableFilters[0]); - - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - - await waitFor(() => - expect(onSave).toHaveBeenCalledWith( - expect.objectContaining({ - modified: [], - deleted: ['NATIVE_FILTER-2'], - reordered: expect.arrayContaining([ - 'NATIVE_FILTER-2', - 'NATIVE_FILTER-3', - 'NATIVE_FILTER-1', - ]), - }), - ), - ); + defaultRender(state, { + ...props, + createNewOnOpen: false, + onSave, }); - test('modifies the name of a filter', async () => { - jest.useFakeTimers(); - const nativeFilterState = [ - buildNativeFilter('NATIVE_FILTER-1', 'state', []), - buildNativeFilter('NATIVE_FILTER-2', 'country', []), - ]; - - const state = { - ...defaultState(), - dashboardInfo: { - metadata: { native_filter_configuration: nativeFilterState }, - }, - dashboardLayout, - }; + const draggableFilters = screen.getAllByRole('tab'); + const deleteButtons = screen.getAllByRole('img', { name: 'trash' }); + userEvent.click(deleteButtons[1]); + + fireEvent.dragStart(draggableFilters[0]); + fireEvent.dragOver(draggableFilters[2]); + fireEvent.drop(draggableFilters[2]); + fireEvent.dragEnd(draggableFilters[0]); + + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + + await waitFor(() => + expect(onSave).toHaveBeenCalledWith( + expect.objectContaining({ + modified: [], + deleted: ['NATIVE_FILTER-2'], + reordered: expect.arrayContaining([ + 'NATIVE_FILTER-2', + 'NATIVE_FILTER-3', + 'NATIVE_FILTER-1', + ]), + }), + ), + ); +}); - const onSave = jest.fn(); +test('modifies the name of a filter', async () => { + jest.useFakeTimers(); + const nativeFilterState = [ + buildNativeFilter('NATIVE_FILTER-1', 'state', []), + buildNativeFilter('NATIVE_FILTER-2', 'country', []), + ]; + + const state = { + ...defaultState(), + dashboardInfo: { + metadata: { native_filter_configuration: nativeFilterState }, + }, + dashboardLayout, + }; - defaultRender(state, { - ...props, - createNewOnOpen: false, - onSave, - }); + const onSave = jest.fn(); - const filterNameInput = screen.getByRole('textbox', { - name: FILTER_NAME_REGEX, - }); + defaultRender(state, { + ...props, + createNewOnOpen: false, + onSave, + }); + + const filterNameInput = screen.getByRole('textbox', { + name: FILTER_NAME_REGEX, + }); - userEvent.clear(filterNameInput); - userEvent.type(filterNameInput, 'New Filter Name'); + userEvent.clear(filterNameInput); + userEvent.type(filterNameInput, 'New Filter Name'); - jest.runAllTimers(); + jest.runAllTimers(); - userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); + userEvent.click(screen.getByRole('button', { name: SAVE_REGEX })); - await waitFor(() => - expect(onSave).toHaveBeenCalledWith( - expect.objectContaining({ - modified: expect.arrayContaining([ - expect.objectContaining({ name: 'New Filter Name' }), - ]), - }), - ), - ); - }); + await waitFor(() => + expect(onSave).toHaveBeenCalledWith( + expect.objectContaining({ + modified: expect.arrayContaining([ + expect.objectContaining({ name: 'New Filter Name' }), + ]), + }), + ), + ); }); diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx index 105f3b6891..bcc2cf6f76 100644 --- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/UsageTab.test.tsx @@ -98,15 +98,11 @@ test('shows loading state', async () => { renderDatasetUsage(); - await waitFor( - () => { - const loadingIndicator = screen.getByRole('status', { - name: /loading/i, - }); - expect(loadingIndicator).toBeInTheDocument(); - }, - { timeout: 10000 }, - ); + const loadingIndicator = await screen.findByRole('status', { + name: /loading/i, + }); + + expect(loadingIndicator).toBeVisible(); }); test('shows error state', async () => { @@ -367,24 +363,8 @@ test('paginates', async () => { mockChartsFetch(getChartResponse(charts)); renderDatasetUsage(); - // Wait for loading state to appear and disappear - await waitFor(() => { - expect( - screen.getByRole('status', { name: /loading/i }), - ).toBeInTheDocument(); - }); - - await waitFor( - () => { - expect( - screen.queryByRole('status', { name: /loading/i }), - ).not.toBeInTheDocument(); - }, - { timeout: 10000 }, - ); - // First page - const chartNameValues = await screen.findAllByRole('cell', { + let chartNameValues = await screen.findAllByRole('cell', { name: /sample chart/i, }); @@ -393,23 +373,32 @@ test('paginates', async () => { expect(chartNameValues[24]).toHaveTextContent('Sample chart 25'); // Second page - const nextButton = screen.getByRole('button', { name: /right/i }); - await userEvent.click(nextButton); + userEvent.click( + screen.getByRole('button', { + name: /right/i, + }), + ); - const secondPageValues = await screen.findAllByRole('cell', { + chartNameValues = await screen.findAllByRole('cell', { name: /sample chart/i, }); - expect(secondPageValues).toHaveLength(25); - expect(secondPageValues[0]).toHaveTextContent('Sample chart 26'); - expect(secondPageValues[24]).toHaveTextContent('Sample chart 50'); + + expect(chartNameValues).toHaveLength(25); + expect(chartNameValues[0]).toHaveTextContent('Sample chart 26'); + expect(chartNameValues[24]).toHaveTextContent('Sample chart 50'); // Third page - await userEvent.click(nextButton); + userEvent.click( + screen.getByRole('button', { + name: /right/i, + }), + ); - const thirdPageValues = await screen.findAllByRole('cell', { + chartNameValues = await screen.findAllByRole('cell', { name: /sample chart/i, }); - expect(thirdPageValues).toHaveLength(15); - expect(thirdPageValues[0]).toHaveTextContent('Sample chart 51'); - expect(thirdPageValues[14]).toHaveTextContent('Sample chart 65'); -}, 20000); // Increase timeout for the entire test + + expect(chartNameValues).toHaveLength(15); + expect(chartNameValues[0]).toHaveTextContent('Sample chart 51'); + expect(chartNameValues[14]).toHaveTextContent('Sample chart 65'); +});
