Fix SQL Lab window resizing layout bug (#7615)

This commit is contained in:
Erik Ritter
2019-05-30 10:37:24 -07:00
committed by Grace Guo
parent 34407e8962
commit 145d72c52b
4 changed files with 80 additions and 16 deletions

View File

@@ -20,10 +20,19 @@ import React from 'react';
import { shallow } from 'enzyme';
import { defaultQueryEditor, initialState, queries, table } from './fixtures';
import {
SQL_EDITOR_GUTTER_HEIGHT,
SQL_EDITOR_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
} from '../../../src/SqlLab/constants';
import AceEditorWrapper from '../../../src/SqlLab/components/AceEditorWrapper';
import LimitControl from '../../../src/SqlLab/components/LimitControl';
import SouthPane from '../../../src/SqlLab/components/SouthPane';
import SqlEditor from '../../../src/SqlLab/components/SqlEditor';
import SqlEditorLeftBar from '../../../src/SqlLab/components/SqlEditorLeftBar';
const MOCKED_SQL_EDITOR_HEIGHT = 500;
describe('SqlEditor', () => {
const mockedProps = {
actions: {},
@@ -40,7 +49,7 @@ describe('SqlEditor', () => {
};
beforeAll(() => {
jest.spyOn(SqlEditor.prototype, 'getSqlEditorHeight').mockImplementation(() => 500);
jest.spyOn(SqlEditor.prototype, 'getSqlEditorHeight').mockImplementation(() => MOCKED_SQL_EDITOR_HEIGHT);
});
it('is valid', () => {
@@ -52,6 +61,33 @@ describe('SqlEditor', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
expect(wrapper.find(SqlEditorLeftBar)).toHaveLength(1);
});
it('render an AceEditorWrapper', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
expect(wrapper.find(AceEditorWrapper)).toHaveLength(1);
});
it('render an SouthPane', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
expect(wrapper.find(SouthPane)).toHaveLength(1);
});
it('does not overflow the editor window', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
+ wrapper.find(SouthPane).props().height
+ SQL_TOOLBAR_HEIGHT
+ (SQL_EDITOR_GUTTER_MARGIN * 2)
+ SQL_EDITOR_GUTTER_HEIGHT;
expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
});
it('does not overflow the editor window after resizing', () => {
const wrapper = shallow(<SqlEditor {...mockedProps} />);
wrapper.setState({ height: 450 });
const totalSize = parseFloat(wrapper.find(AceEditorWrapper).props().height)
+ wrapper.find(SouthPane).props().height
+ SQL_TOOLBAR_HEIGHT
+ (SQL_EDITOR_GUTTER_MARGIN * 2)
+ SQL_EDITOR_GUTTER_HEIGHT;
expect(totalSize).toEqual(450);
});
it('render a LimitControl with default limit', () => {
const defaultQueryLimit = 101;
const updatedProps = { ...mockedProps, defaultQueryLimit };