diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx index 79e7793421..9d32454899 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx @@ -25,7 +25,6 @@ import { Provider } from 'react-redux'; import '@testing-library/jest-dom/extend-expect'; import thunk from 'redux-thunk'; import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import { table, initialState, @@ -59,7 +58,7 @@ fetchMock.get('glob:*/superset/tables/**', { }); describe('Left Panel Expansion', () => { - it('is valid', () => { + test('is valid', () => { expect( React.isValidElement( @@ -69,61 +68,66 @@ describe('Left Panel Expansion', () => { ).toBe(true); }); - it('renders a TableElement', () => { - const { queryAllByTestId } = render( - - - - - , - ); - expect(queryAllByTestId('table-element').length).toBeGreaterThanOrEqual(1); + test('renders a TableElement', async () => { + render(, { + useRedux: true, + initialState, + }); + + expect( + await screen.findByText(/select database or type database name/i), + ).toBeInTheDocument(); + expect( + screen.queryAllByTestId('table-element').length, + ).toBeGreaterThanOrEqual(1); }); - describe('Left Panel Expansion', () => { - it('table should be visible when expanded is true', () => { - const { container } = render( - - - - - , - ); - const dbSelect = screen.getByRole('combobox', { - name: 'Select database or type database name', - }); - const schemaSelect = screen.getByRole('combobox', { - name: 'Select schema or type schema name', - }); - const dropdown = screen.getByText(/Select table or type table name/i); - const abUser = screen.getByText(/ab_user/i); - expect(dbSelect).toBeInTheDocument(); - expect(schemaSelect).toBeInTheDocument(); - expect(dropdown).toBeInTheDocument(); - expect(abUser).toBeInTheDocument(); - expect( - container.querySelector('.ant-collapse-content-active'), - ).toBeInTheDocument(); + test('table should be visible when expanded is true', async () => { + const { container } = render(, { + useRedux: true, + initialState, }); - it('should toggle the table when the header is clicked', async () => { - const collapseMock = jest.fn(); - render( - - - - - , - ); - const header = screen.getByText(/ab_user/); - userEvent.click(header); - expect(collapseMock).toHaveBeenCalled(); + const dbSelect = screen.getByRole('combobox', { + name: 'Select database or type database name', }); + const schemaSelect = screen.getByRole('combobox', { + name: 'Select schema or type schema name', + }); + const dropdown = screen.getByText(/Select table or type table name/i); + const abUser = screen.getByText(/ab_user/i); + + expect( + await screen.findByText(/select database or type database name/i), + ).toBeInTheDocument(); + expect(dbSelect).toBeInTheDocument(); + expect(schemaSelect).toBeInTheDocument(); + expect(dropdown).toBeInTheDocument(); + expect(abUser).toBeInTheDocument(); + expect( + container.querySelector('.ant-collapse-content-active'), + ).toBeInTheDocument(); + }); + + test('should toggle the table when the header is clicked', async () => { + const collapseMock = jest.fn(); + render( + , + { + useRedux: true, + initialState, + }, + ); + + expect(await screen.findByText(/ab_user/)).toBeInTheDocument(); + const header = screen.getByText(/ab_user/); + userEvent.click(header); + expect(collapseMock).toHaveBeenCalled(); }); });