refactor: Replace usages of Popover from react-bootstrap with Antd (#11163)

* New popover component

* LimitControl

* Moar components migrated

* TimeSeriesColumnControl

* Hotkeys

* ColorPicker

* FilterBoxItemCOntrol

* AdhocFilterEditPopover

* AdhocMetric

* AnnotationLayerControl

* DateFilterControl

* Tests fix

* Fix linting issue

* Fix tests

* Bug fix

* Test fix

* Remove Antd global stylesheet

* Fix linting

* Fix test

* Fix test

* Fix test

* Fix test

* Fix test
This commit is contained in:
Kamil Gabryjelski
2020-10-20 05:42:33 +02:00
committed by GitHub
parent 4208ca76e0
commit 901a42b1df
39 changed files with 942 additions and 874 deletions

View File

@@ -17,11 +17,13 @@
* under the License.
*/
import React from 'react';
import { shallow } from 'enzyme';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { shallow, mount } from 'enzyme';
import Label from 'src/components/Label';
import LimitControl from 'src/SqlLab/components/LimitControl';
import ControlHeader from 'src/explore/components/ControlHeader';
import Popover from 'src/common/components/Popover';
describe('LimitControl', () => {
const defaultProps = {
@@ -48,44 +50,71 @@ describe('LimitControl', () => {
wrapper = shallow(factory({ ...defaultProps, value }));
expect(wrapper.state().textValue).toEqual(value.toString());
wrapper.find(Label).first().simulate('click');
expect(wrapper.state().showOverlay).toBe(true);
expect(wrapper.find(ControlHeader).props().validationErrors).toHaveLength(
0,
);
expect(wrapper.find(Popover).props().visible).toBe(true);
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
expect(
popoverContentWrapper.find(ControlHeader).props().validationErrors,
).toHaveLength(0);
});
it('handles invalid value', () => {
wrapper.find(Label).first().simulate('click');
wrapper.setState({ textValue: 'invalid' });
expect(wrapper.find(ControlHeader).props().validationErrors).toHaveLength(
1,
);
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
expect(
popoverContentWrapper.find(ControlHeader).props().validationErrors,
).toHaveLength(1);
});
it('handles negative value', () => {
wrapper.find(Label).first().simulate('click');
wrapper.setState({ textValue: '-1' });
expect(wrapper.find(ControlHeader).props().validationErrors).toHaveLength(
1,
);
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
expect(
popoverContentWrapper.find(ControlHeader).props().validationErrors,
).toHaveLength(1);
});
it('handles value above max row', () => {
wrapper.find(Label).first().simulate('click');
wrapper.setState({ textValue: (defaultProps.maxRow + 1).toString() });
expect(wrapper.find(ControlHeader).props().validationErrors).toHaveLength(
1,
);
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
expect(
popoverContentWrapper.find(ControlHeader).props().validationErrors,
).toHaveLength(1);
});
it('opens and closes', () => {
wrapper.find(Label).first().simulate('click');
expect(wrapper.state().showOverlay).toBe(true);
wrapper.find('.ok').first().simulate('click');
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
popoverContentWrapper.find('.ok').first().simulate('click');
expect(wrapper.state().showOverlay).toBe(false);
});
it('resets and closes', () => {
const value = 100;
wrapper = shallow(factory({ ...defaultProps, value }));
wrapper = mount(factory({ ...defaultProps, value }), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
wrapper.find(Label).first().simulate('click');
expect(wrapper.state().textValue).toEqual(value.toString());
wrapper.find('.reset').simulate('click');
const popoverContentWrapper = mount(wrapper.instance().renderPopover(), {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
popoverContentWrapper.find('.reset').first().simulate('click');
expect(wrapper.state().textValue).toEqual(
defaultProps.defaultQueryLimit.toString(),
);