[sql lab] fix position of 'save query' Popover (#3999)

* [sql lab] fix position of 'save query' Popover

The "Save Query" popover renders on the upper left corner as opposed to
where it should (relative to the Save Query button). After a bit of
research, it seems like Popover won't render in the right place when
parents are absolute.

I'm guessing this stopped working properly when I added the resizable
panes.

Anyhow, the solution here is to use a modal instead.

* Fixing tests
This commit is contained in:
Maxime Beauchemin
2017-12-05 11:37:13 -08:00
committed by Grace Guo
parent 823f306f24
commit defe6789c0
2 changed files with 71 additions and 77 deletions

View File

@@ -1,9 +1,10 @@
import React from 'react';
import { Overlay, Popover, FormControl } from 'react-bootstrap';
import { FormControl } from 'react-bootstrap';
import { shallow } from 'enzyme';
import { describe, it } from 'mocha';
import { expect } from 'chai';
import SaveQuery from '../../../javascripts/SqlLab/components/SaveQuery';
import ModalTrigger from '../../../javascripts/components/ModalTrigger';
describe('SavedQuery', () => {
const mockedProps = {
@@ -23,25 +24,18 @@ describe('SavedQuery', () => {
React.isValidElement(<SaveQuery {...mockedProps} />),
).to.equal(true);
});
it('has an Overlay and a Popover', () => {
it('has a ModalTrigger', () => {
const wrapper = shallow(<SaveQuery {...mockedProps} />);
expect(wrapper.find(Overlay)).to.have.length(1);
expect(wrapper.find(Popover)).to.have.length(1);
});
it('pops and hides', () => {
const wrapper = shallow(<SaveQuery {...mockedProps} />);
expect(wrapper.state().showSave).to.equal(false);
wrapper.find('.toggleSave').simulate('click', { target: { value: 'test' } });
expect(wrapper.state().showSave).to.equal(true);
wrapper.find('.toggleSave').simulate('click', { target: { value: 'test' } });
expect(wrapper.state().showSave).to.equal(false);
expect(wrapper.find(ModalTrigger)).to.have.length(1);
});
it('has a cancel button', () => {
const wrapper = shallow(<SaveQuery {...mockedProps} />);
expect(wrapper.find('.cancelQuery')).to.have.length(1);
const modal = shallow(wrapper.instance().renderModalBody());
expect(modal.find('.cancelQuery')).to.have.length(1);
});
it('has 2 FormControls', () => {
const wrapper = shallow(<SaveQuery {...mockedProps} />);
expect(wrapper.find(FormControl)).to.have.length(2);
const modal = shallow(wrapper.instance().renderModalBody());
expect(modal.find(FormControl)).to.have.length(2);
});
});