diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx index 395b943dc61cf..2657e5429531a 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx @@ -23,54 +23,102 @@ import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; -import ColumnSelectPopover from 'src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover'; +import ColumnSelectPopover, { + ColumnSelectPopoverProps, +} from 'src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover'; const middlewares = [thunk]; const mockStore = configureMockStore(middlewares); -describe('ColumnSelectPopover - onTabChange function', () => { - it('updates adhocColumn when switching to sqlExpression tab with custom label', () => { - const mockColumns = [{ column_name: 'year' }]; - const mockOnClose = jest.fn(); - const mockOnChange = jest.fn(); - const mockGetCurrentTab = jest.fn(); - const mockSetDatasetModal = jest.fn(); - const mockSetLabel = jest.fn(); +const renderPopover = ( + props: Pick< + ColumnSelectPopoverProps, + 'columns' | 'editedColumn' | 'getCurrentTab' | 'onChange' + >, +) => { + const store = mockStore({ explore: { datasource: { type: 'table' } } }); - const store = mockStore({ explore: { datasource: { type: 'table' } } }); + return render( + + + + + , + ); +}; - const { container, getByText } = render( - - - - - , - ); +test('updates adhocColumn when switching to sqlExpression tab with custom label', () => { + const mockColumns = [{ column_name: 'year' }]; + const mockOnChange = jest.fn(); + const mockGetCurrentTab = jest.fn(); - const sqlExpressionTab = container.querySelector( - '#adhoc-metric-edit-tabs-tab-sqlExpression', - ); - expect(sqlExpressionTab).not.toBeNull(); - fireEvent.click(sqlExpressionTab!); - expect(mockGetCurrentTab).toHaveBeenCalledWith('sqlExpression'); + const { container, getByText } = renderPopover({ + columns: mockColumns, + editedColumn: mockColumns[0], + getCurrentTab: mockGetCurrentTab, + onChange: mockOnChange, + }); + + const sqlExpressionTab = container.querySelector( + '#adhoc-metric-edit-tabs-tab-sqlExpression', + ); + expect(sqlExpressionTab).not.toBeNull(); + fireEvent.click(sqlExpressionTab!); + expect(mockGetCurrentTab).toHaveBeenCalledWith('sqlExpression'); + + const saveButton = getByText('Save'); + fireEvent.click(saveButton); + expect(mockOnChange).toHaveBeenCalledWith({ + label: 'Custom Label', + sqlExpression: 'year', + expressionType: 'SQL', + }); +}); + +test('open with Simple tab selected when there is no column selected', () => { + const { getByText } = renderPopover({ + columns: [{ column_name: 'year' }], + editedColumn: undefined, + getCurrentTab: jest.fn(), + onChange: jest.fn(), + }); + expect(getByText('Saved')).toHaveAttribute('aria-selected', 'false'); + expect(getByText('Simple')).toHaveAttribute('aria-selected', 'true'); + expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'false'); +}); + +test('open with Saved tab selected when there is a saved column selected', () => { + const { getByText } = renderPopover({ + columns: [{ column_name: 'year' }], + editedColumn: { column_name: 'year', expression: 'year - 1' }, + getCurrentTab: jest.fn(), + onChange: jest.fn(), + }); + expect(getByText('Saved')).toHaveAttribute('aria-selected', 'true'); + expect(getByText('Simple')).toHaveAttribute('aria-selected', 'false'); + expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'false'); +}); - const saveButton = getByText('Save'); - fireEvent.click(saveButton); - expect(mockOnChange).toHaveBeenCalledWith({ - label: 'Custom Label', - sqlExpression: 'year', - expressionType: 'SQL', - }); +test('open with Custom SQL tab selected when there is a custom SQL selected', () => { + const { getByText } = renderPopover({ + columns: [{ column_name: 'year' }], + editedColumn: { + column_name: 'year', + label: 'Custom SQL', + sqlExpression: 'year - 1', + }, + getCurrentTab: jest.fn(), + onChange: jest.fn(), }); + expect(getByText('Saved')).toHaveAttribute('aria-selected', 'false'); + expect(getByText('Simple')).toHaveAttribute('aria-selected', 'false'); + expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'true'); }); diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx index fd50f038a6f04..711cad392de2f 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx @@ -65,7 +65,7 @@ const StyledSelect = styled(Select)` } `; -interface ColumnSelectPopoverProps { +export interface ColumnSelectPopoverProps { columns: ColumnMeta[]; editedColumn?: ColumnMeta | AdhocColumn; onChange: (column: ColumnMeta | AdhocColumn) => void; @@ -189,9 +189,9 @@ const ColumnSelectPopover = ({ const defaultActiveTabKey = initialAdhocColumn ? 'sqlExpression' - : initialSimpleColumn || calculatedColumns.length === 0 - ? 'simple' - : 'saved'; + : selectedCalculatedColumn + ? 'saved' + : 'simple'; useEffect(() => { getCurrentTab(defaultActiveTabKey);