diff --git a/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts b/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts index 56724e6e9edf..f4b37bb5545e 100644 --- a/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts +++ b/superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts @@ -80,11 +80,7 @@ describe('SqlLab query tabs', () => { // configure some editor settings cy.get(editorInput).type('some random query string', { force: true }); cy.get(queryLimitSelector).parent().click({ force: true }); - cy.get('.ant-dropdown-menu') - .last() - .find('.ant-dropdown-menu-item') - .first() - .click({ force: true }); + cy.get('.selectLimitDropdown').click({ force: true }); // open a new tab by a button cy.get('[data-test="add-tab-icon"]:visible:last').click({ force: true }); diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx index bbaa76720b00..6ae3a8d70951 100644 --- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx +++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx @@ -20,12 +20,7 @@ import configureStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import { Store } from 'redux'; -import { - fireEvent, - render, - userEvent, - waitFor, -} from 'spec/helpers/testing-library'; +import { render, screen } from 'spec/helpers/testing-library'; import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures'; import QueryLimitSelect, { QueryLimitSelectProps, @@ -104,94 +99,46 @@ describe('QueryLimitSelect', () => { expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument(); }); - it('renders dropdown select', async () => { - const { baseElement, getAllByRole, getByRole } = setup( - { maxRow: 50000 }, - mockStore(initialState), - ); - const dropdown = baseElement.getElementsByClassName( - 'ant-dropdown-trigger', - )[0]; - - userEvent.click(dropdown); - await waitFor(() => expect(getByRole('menu')).toBeInTheDocument()); - - const expectedLabels = [10, 100, 1000, 10000, 50000].map(i => - convertToNumWithSpaces(i), - ); - const actualLabels = getAllByRole('menuitem').map(elem => - elem.textContent?.trim(), - ); + it('renders the Select component', () => { + setup({ maxRow: 50000 }, mockStore(initialState)); - expect(actualLabels).toEqual(expectedLabels); + expect(screen.getByRole('button', { name: /LIMIT:/i })).toBeInTheDocument(); + expect(screen.getByText(/100/i)).toBeInTheDocument(); }); it('renders dropdown select correctly when maxRow is less than 10', async () => { - const { baseElement, getAllByRole, getByRole } = setup( + const queryLimit = 5; + const { getByText } = setup( { maxRow: 5 }, - mockStore(initialState), - ); - const dropdown = baseElement.getElementsByClassName( - 'ant-dropdown-trigger', - )[0]; - - userEvent.click(dropdown); - await waitFor(() => expect(getByRole('menu')).toBeInTheDocument()); - - const expectedLabels = [5].map(i => convertToNumWithSpaces(i)); - const actualLabels = getAllByRole('menuitem').map(elem => - elem.textContent?.trim(), + mockStore({ + ...initialState, + sqlLab: { + ...initialState.sqlLab, + unsavedQueryEditor: { + id: defaultQueryEditor.id, + queryLimit, + }, + }, + }), ); - - expect(actualLabels).toEqual(expectedLabels); + expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument(); }); it('renders dropdown select correctly when maxRow is a multiple of 10', async () => { - const { baseElement, getAllByRole, getByRole } = setup( + const queryLimit = 10000; + const { getByText } = setup( { maxRow: 10000 }, - mockStore(initialState), - ); - const dropdown = baseElement.getElementsByClassName( - 'ant-dropdown-trigger', - )[0]; - - userEvent.click(dropdown); - await waitFor(() => expect(getByRole('menu')).toBeInTheDocument()); - - const expectedLabels = [10, 100, 1000, 10000].map(i => - convertToNumWithSpaces(i), - ); - const actualLabels = getAllByRole('menuitem').map(elem => - elem.textContent?.trim(), - ); - - expect(actualLabels).toEqual(expectedLabels); - }); - - it('dispatches QUERY_EDITOR_SET_QUERY_LIMIT action on dropdown menu click', async () => { - const store = mockStore(initialState); - const expectedIndex = 1; - const { baseElement, getAllByRole, getByRole } = setup({}, store); - const dropdown = baseElement.getElementsByClassName( - 'ant-dropdown-trigger', - )[0]; - - userEvent.click(dropdown); - await waitFor(() => expect(getByRole('menu')).toBeInTheDocument()); - - const menu = getAllByRole('menuitem')[expectedIndex]; - expect(store.getActions()).toEqual([]); - fireEvent.click(menu); - await waitFor(() => - expect(store.getActions()).toEqual([ - { - type: 'QUERY_EDITOR_SET_QUERY_LIMIT', - queryLimit: 100, - queryEditor: { + mockStore({ + ...initialState, + sqlLab: { + ...initialState.sqlLab, + unsavedQueryEditor: { id: defaultQueryEditor.id, + queryLimit, }, }, - ]), + }), ); + expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument(); }); }); diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx index 802862cb6b32..44fad2bfb9b9 100644 --- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx @@ -18,8 +18,7 @@ */ import { useDispatch } from 'react-redux'; import { t } from '@superset-ui/core'; -import { Dropdown, Button } from '@superset-ui/core/components'; -import { Menu } from '@superset-ui/core/components/Menu'; +import { Dropdown, Button, Select } from '@superset-ui/core/components'; import { Icons } from '@superset-ui/core/components/Icons'; import { queryEditorSetQueryLimit } from 'src/SqlLab/actions/sqlLab'; import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor'; @@ -42,17 +41,28 @@ function renderQueryLimit( // Construct limit dropdown as increasing powers of ten until we reach SQL_MAX_ROW for (let i = 10; i < maxRow; i *= 10) { - limitDropdown.push(i); + limitDropdown.push({ + value: i, + }); } - limitDropdown.push(maxRow); + limitDropdown.push({ + value: maxRow, + }); return ( - ({ - key: `${limit}`, - onClick: () => setQueryLimit(limit), - label: `${convertToNumWithSpaces(limit)} `, - }))} +