diff --git a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
index 84ef4a5f62942..8430baf127d93 100644
--- a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
@@ -18,32 +18,36 @@
*/
import React from 'react';
import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
import { shallow } from 'enzyme';
-import sinon from 'sinon';
+import { render, screen, act } from '@testing-library/react';
+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 TableElement from 'src/SqlLab/components/TableElement';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import {
+ table,
+ initialState,
+ databases,
+ defaultQueryEditor,
+ mockedActions,
+} from './fixtures';
-import { table, defaultQueryEditor, initialState } from './fixtures';
-
+const mockedProps = {
+ actions: mockedActions,
+ tables: [table],
+ queryEditor: defaultQueryEditor,
+ database: databases,
+ height: 0,
+};
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+const store = mockStore(initialState);
+const DATABASE_ENDPOINT = 'glob:*/api/v1/database/?*';
+fetchMock.get(DATABASE_ENDPOINT, []);
describe('SqlEditorLeftBar', () => {
- const mockedProps = {
- actions: {
- queryEditorSetSchema: sinon.stub(),
- queryEditorSetDb: sinon.stub(),
- setDatabases: sinon.stub(),
- addTable: sinon.stub(),
- addDangerToast: sinon.stub(),
- },
- tables: [table],
- queryEditor: defaultQueryEditor,
- database: {},
- height: 0,
- };
- const middlewares = [thunk];
- const mockStore = configureStore(middlewares);
- const store = mockStore(initialState);
-
let wrapper;
beforeEach(() => {
@@ -62,3 +66,28 @@ describe('SqlEditorLeftBar', () => {
expect(wrapper.find(TableElement)).toExist();
});
});
+
+describe('Left Panel Expansion', () => {
+ beforeEach(async () => {
+ await act(async () => {
+ render(
+
+
+
+
+ ,
+ );
+ });
+ });
+
+ it('table should be visible when expanded is true', async () => {
+ const dbSelect = screen.getByText(/select a database/i);
+ const schemaSelect = screen.getByText(/select a schema \(0\)/i);
+ const dropdown = screen.getByText(/Select table/i);
+ const abUser = screen.getByText(/ab_user/i);
+ expect(dbSelect).toBeInTheDocument();
+ expect(schemaSelect).toBeInTheDocument();
+ expect(dropdown).toBeInTheDocument();
+ expect(abUser).toBeInTheDocument();
+ });
+});
diff --git a/superset-frontend/spec/javascripts/sqllab/fixtures.ts b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
index 13d126d45e08b..f4ab24dd558ce 100644
--- a/superset-frontend/spec/javascripts/sqllab/fixtures.ts
+++ b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
@@ -172,6 +172,7 @@ export const table = {
],
expanded: true,
};
+
export const defaultQueryEditor = {
id: 'dfsadfs',
autorun: false,
diff --git a/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js b/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js
index 574aabbdca732..d10542e574730 100644
--- a/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js
+++ b/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js
@@ -153,6 +153,7 @@ describe('sqlLabReducer', () => {
it('should add a table', () => {
// Testing that beforeEach actually added the table
expect(newState.tables).toHaveLength(1);
+ expect(newState.tables[0].expanded).toBe(true);
});
it('should merge the table attributes', () => {
// Merging the extra attribute
diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index a1bc59eafbd2a..95216b8d06d78 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -1068,7 +1068,7 @@ export function addTable(query, tableName, schemaName) {
...table,
isMetadataLoading: true,
isExtraMetadataLoading: true,
- expanded: false,
+ expanded: true,
}),
);
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
index 3c46e4cf848df..c4751a1aeeb21 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -147,8 +147,9 @@ export default class SqlEditorLeftBar extends React.PureComponent {
expanded)
+ .map(({ id }) => id)}
css={theme => css`
.ant-collapse-item {
margin-bottom: ${theme.gridUnit * 3}px;
@@ -169,12 +170,15 @@ export default class SqlEditorLeftBar extends React.PureComponent {
}
}
`}
+ expandIconPosition="right"
+ ghost
>
{this.props.tables.map(table => (
))}
diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx
index abc9b8c7a02d8..13c106ca6fdeb 100644
--- a/superset-frontend/src/SqlLab/components/TableElement.jsx
+++ b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -283,6 +283,7 @@ class TableElement extends React.PureComponent {
{...this.props}
header={this.renderHeader()}
className="TableElement"
+ forceRender="true"
>
{this.renderBody()}