mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
fix: data column in SQL lab left panel open by default (#13624)
* fix table expand * Left Panel Expand * added tests Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>
This commit is contained in:
parent
7e6beb5ebf
commit
df9352f2b4
@ -18,32 +18,36 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
|
import fetchMock from 'fetch-mock';
|
||||||
import { shallow } from 'enzyme';
|
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 thunk from 'redux-thunk';
|
||||||
import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
|
import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
|
||||||
import TableElement from 'src/SqlLab/components/TableElement';
|
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,
|
||||||
describe('SqlEditorLeftBar', () => {
|
|
||||||
const mockedProps = {
|
|
||||||
actions: {
|
|
||||||
queryEditorSetSchema: sinon.stub(),
|
|
||||||
queryEditorSetDb: sinon.stub(),
|
|
||||||
setDatabases: sinon.stub(),
|
|
||||||
addTable: sinon.stub(),
|
|
||||||
addDangerToast: sinon.stub(),
|
|
||||||
},
|
|
||||||
tables: [table],
|
tables: [table],
|
||||||
queryEditor: defaultQueryEditor,
|
queryEditor: defaultQueryEditor,
|
||||||
database: {},
|
database: databases,
|
||||||
height: 0,
|
height: 0,
|
||||||
};
|
};
|
||||||
const middlewares = [thunk];
|
const middlewares = [thunk];
|
||||||
const mockStore = configureStore(middlewares);
|
const mockStore = configureStore(middlewares);
|
||||||
const store = mockStore(initialState);
|
const store = mockStore(initialState);
|
||||||
|
const DATABASE_ENDPOINT = 'glob:*/api/v1/database/?*';
|
||||||
|
fetchMock.get(DATABASE_ENDPOINT, []);
|
||||||
|
describe('SqlEditorLeftBar', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
@ -62,3 +66,28 @@ describe('SqlEditorLeftBar', () => {
|
|||||||
expect(wrapper.find(TableElement)).toExist();
|
expect(wrapper.find(TableElement)).toExist();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('Left Panel Expansion', () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await act(async () => {
|
||||||
|
render(
|
||||||
|
<ThemeProvider theme={supersetTheme}>
|
||||||
|
<Provider store={store}>
|
||||||
|
<SqlEditorLeftBar {...mockedProps} />
|
||||||
|
</Provider>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
@ -172,6 +172,7 @@ export const table = {
|
|||||||
],
|
],
|
||||||
expanded: true,
|
expanded: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultQueryEditor = {
|
export const defaultQueryEditor = {
|
||||||
id: 'dfsadfs',
|
id: 'dfsadfs',
|
||||||
autorun: false,
|
autorun: false,
|
||||||
|
@ -153,6 +153,7 @@ describe('sqlLabReducer', () => {
|
|||||||
it('should add a table', () => {
|
it('should add a table', () => {
|
||||||
// Testing that beforeEach actually added the table
|
// Testing that beforeEach actually added the table
|
||||||
expect(newState.tables).toHaveLength(1);
|
expect(newState.tables).toHaveLength(1);
|
||||||
|
expect(newState.tables[0].expanded).toBe(true);
|
||||||
});
|
});
|
||||||
it('should merge the table attributes', () => {
|
it('should merge the table attributes', () => {
|
||||||
// Merging the extra attribute
|
// Merging the extra attribute
|
||||||
|
@ -1068,7 +1068,7 @@ export function addTable(query, tableName, schemaName) {
|
|||||||
...table,
|
...table,
|
||||||
isMetadataLoading: true,
|
isMetadataLoading: true,
|
||||||
isExtraMetadataLoading: true,
|
isExtraMetadataLoading: true,
|
||||||
expanded: false,
|
expanded: true,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -147,8 +147,9 @@ export default class SqlEditorLeftBar extends React.PureComponent {
|
|||||||
<StyledScrollbarContainer>
|
<StyledScrollbarContainer>
|
||||||
<StyledScrollbarContent contentHeight={tableMetaDataHeight}>
|
<StyledScrollbarContent contentHeight={tableMetaDataHeight}>
|
||||||
<Collapse
|
<Collapse
|
||||||
ghost
|
activeKey={this.props.tables
|
||||||
expandIconPosition="right"
|
.filter(({ expanded }) => expanded)
|
||||||
|
.map(({ id }) => id)}
|
||||||
css={theme => css`
|
css={theme => css`
|
||||||
.ant-collapse-item {
|
.ant-collapse-item {
|
||||||
margin-bottom: ${theme.gridUnit * 3}px;
|
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 => (
|
{this.props.tables.map(table => (
|
||||||
<TableElement
|
<TableElement
|
||||||
table={table}
|
table={table}
|
||||||
key={table.id}
|
key={table.id}
|
||||||
actions={this.props.actions}
|
actions={this.props.actions}
|
||||||
|
onClick={this.toggleTable}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Collapse>
|
</Collapse>
|
||||||
|
@ -283,6 +283,7 @@ class TableElement extends React.PureComponent {
|
|||||||
{...this.props}
|
{...this.props}
|
||||||
header={this.renderHeader()}
|
header={this.renderHeader()}
|
||||||
className="TableElement"
|
className="TableElement"
|
||||||
|
forceRender="true"
|
||||||
>
|
>
|
||||||
{this.renderBody()}
|
{this.renderBody()}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
|
Loading…
Reference in New Issue
Block a user