mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix: update the time filter for 'Last Year' option in explore (#10829)
* Update explore time filter ranges * rm console statements * only update moment calculation for years * tests * add open/close test
This commit is contained in:
parent
56d001835e
commit
4aa53244c7
@ -18,14 +18,21 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint-disable no-unused-expressions */
|
/* eslint-disable no-unused-expressions */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { OverlayTrigger, Popover, Tab, Tabs, Radio } from 'react-bootstrap';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import Button from 'src/components/Button';
|
|
||||||
|
|
||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
||||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||||
|
|
||||||
|
// Mock moment.js to use a specific date
|
||||||
|
jest.mock('moment', () => {
|
||||||
|
const testDate = new Date('09/07/2020');
|
||||||
|
|
||||||
|
return () => jest.requireActual('moment')(testDate);
|
||||||
|
});
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
animation: false,
|
animation: false,
|
||||||
name: 'date',
|
name: 'date',
|
||||||
@ -41,40 +48,94 @@ describe('DateFilterControl', () => {
|
|||||||
wrapper = mount(<DateFilterControl {...defaultProps} />);
|
wrapper = mount(<DateFilterControl {...defaultProps} />);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders', () => {
|
||||||
|
expect(wrapper.find(DateFilterControl)).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
it('renders a ControlHeader', () => {
|
it('renders a ControlHeader', () => {
|
||||||
const controlHeader = wrapper.find(ControlHeader);
|
const controlHeader = wrapper.find(ControlHeader);
|
||||||
expect(controlHeader).toHaveLength(1);
|
expect(controlHeader).toHaveLength(1);
|
||||||
});
|
});
|
||||||
it('renders 3 Buttons', () => {
|
|
||||||
const label = wrapper.find(Label).first();
|
it('renders an OverlayTrigger', () => {
|
||||||
label.simulate('click');
|
expect(wrapper.find(OverlayTrigger)).toExist();
|
||||||
setTimeout(() => {
|
|
||||||
expect(wrapper.find(Button)).toHaveLength(3);
|
|
||||||
}, 10);
|
|
||||||
});
|
});
|
||||||
it('loads the right state', () => {
|
|
||||||
const label = wrapper.find(Label).first();
|
it('renders a popover', () => {
|
||||||
label.simulate('click');
|
const { overlay } = wrapper.find(OverlayTrigger).first().props();
|
||||||
setTimeout(() => {
|
const overlayWrapper = mount(overlay);
|
||||||
expect(wrapper.state().num).toBe('90');
|
|
||||||
}, 10);
|
expect(overlayWrapper.find(Popover)).toExist();
|
||||||
});
|
});
|
||||||
it('renders 2 dimmed sections', () => {
|
|
||||||
const label = wrapper.find(Label).first();
|
it('calls open/close methods on trigger click', () => {
|
||||||
|
const open = jest.fn();
|
||||||
|
const close = jest.fn();
|
||||||
|
const props = {
|
||||||
|
...defaultProps,
|
||||||
|
onOpenDateFilterControl: open,
|
||||||
|
onCloseDateFilterControl: close,
|
||||||
|
};
|
||||||
|
const testWrapper = mount(<DateFilterControl {...props} />);
|
||||||
|
const label = testWrapper.find(Label).first();
|
||||||
|
|
||||||
label.simulate('click');
|
label.simulate('click');
|
||||||
setTimeout(() => {
|
expect(open).toBeCalled();
|
||||||
expect(wrapper.find(Button)).toHaveLength(3);
|
expect(close).not.toBeCalled();
|
||||||
}, 10);
|
label.simulate('click');
|
||||||
|
expect(close).toBeCalled();
|
||||||
});
|
});
|
||||||
it('opens and closes', () => {
|
|
||||||
const label = wrapper.find(Label).first();
|
it('renders two tabs in popover', () => {
|
||||||
label.simulate('click');
|
const { overlay } = wrapper.find(OverlayTrigger).first().props();
|
||||||
setTimeout(() => {
|
const overlayWrapper = mount(overlay);
|
||||||
expect(wrapper.find('.popover')).toExist();
|
const popover = overlayWrapper.find(Popover).first();
|
||||||
expect(wrapper.find('.ok')).first().simulate('click');
|
|
||||||
setTimeout(() => {
|
expect(popover.find(Tabs)).toExist();
|
||||||
expect(wrapper.find('.popover')).not.toExist();
|
expect(popover.find(Tab)).toHaveLength(2);
|
||||||
}, 10);
|
});
|
||||||
}, 10);
|
|
||||||
|
it('renders default time options', () => {
|
||||||
|
const { overlay } = wrapper.find(OverlayTrigger).first().props();
|
||||||
|
const overlayWrapper = mount(overlay);
|
||||||
|
const defaultTab = overlayWrapper.find(Tab).first();
|
||||||
|
|
||||||
|
expect(defaultTab.find(Radio)).toExist();
|
||||||
|
expect(defaultTab.find(Radio)).toHaveLength(6);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders tooltips over timeframe options', () => {
|
||||||
|
const { overlay } = wrapper.find(OverlayTrigger).first().props();
|
||||||
|
const overlayWrapper = mount(overlay);
|
||||||
|
const defaultTab = overlayWrapper.find(Tab).first();
|
||||||
|
const radioTrigger = defaultTab.find(OverlayTrigger);
|
||||||
|
|
||||||
|
expect(radioTrigger).toExist();
|
||||||
|
expect(radioTrigger).toHaveLength(6);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the correct time range in tooltip', () => {
|
||||||
|
const { overlay } = wrapper.find(OverlayTrigger).first().props();
|
||||||
|
const overlayWrapper = mount(overlay);
|
||||||
|
const defaultTab = overlayWrapper.find(Tab).first();
|
||||||
|
const triggers = defaultTab.find(OverlayTrigger);
|
||||||
|
|
||||||
|
const expectedLabels = {
|
||||||
|
'Last day': '2020-09-06 < col < 2020-09-07',
|
||||||
|
'Last week': '2020-08-31 < col < 2020-09-07',
|
||||||
|
'Last month': '2020-08-07 < col < 2020-09-07',
|
||||||
|
'Last quarter': '2020-06-07 < col < 2020-09-07',
|
||||||
|
'Last year': '2019-01-01 < col < 2020-01-01',
|
||||||
|
'No filter': '-∞ < col < ∞',
|
||||||
|
};
|
||||||
|
|
||||||
|
triggers.forEach(trigger => {
|
||||||
|
const { props } = trigger.props().overlay;
|
||||||
|
const label = props.id.split('tooltip-')[1];
|
||||||
|
|
||||||
|
expect(trigger.props().overlay.props.children).toEqual(
|
||||||
|
expectedLabels[label],
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -128,22 +128,23 @@ function getStateFromSeparator(value) {
|
|||||||
|
|
||||||
function getStateFromCommonTimeFrame(value) {
|
function getStateFromCommonTimeFrame(value) {
|
||||||
const units = `${value.split(' ')[1]}s`;
|
const units = `${value.split(' ')[1]}s`;
|
||||||
|
let sinceMoment;
|
||||||
|
|
||||||
|
if (value === 'No filter') {
|
||||||
|
sinceMoment = '';
|
||||||
|
} else if (units === 'years') {
|
||||||
|
sinceMoment = moment().utc().startOf(units).subtract(1, units);
|
||||||
|
} else {
|
||||||
|
sinceMoment = moment().utc().startOf('day').subtract(1, units);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
tab: TABS.DEFAULTS,
|
tab: TABS.DEFAULTS,
|
||||||
type: TYPES.DEFAULTS,
|
type: TYPES.DEFAULTS,
|
||||||
common: value,
|
common: value,
|
||||||
since:
|
since: sinceMoment === '' ? '' : sinceMoment.format(MOMENT_FORMAT),
|
||||||
value === 'No filter'
|
|
||||||
? ''
|
|
||||||
: moment()
|
|
||||||
.utc()
|
|
||||||
.startOf('day')
|
|
||||||
.subtract(1, units)
|
|
||||||
.format(MOMENT_FORMAT),
|
|
||||||
until:
|
until:
|
||||||
value === 'No filter'
|
sinceMoment === '' ? '' : sinceMoment.add(1, units).format(MOMENT_FORMAT),
|
||||||
? ''
|
|
||||||
: moment().utc().startOf('day').format(MOMENT_FORMAT),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -396,7 +397,6 @@ class DateFilterControl extends React.Component {
|
|||||||
));
|
));
|
||||||
const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => {
|
const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => {
|
||||||
const nextState = getStateFromCommonTimeFrame(timeFrame);
|
const nextState = getStateFromCommonTimeFrame(timeFrame);
|
||||||
|
|
||||||
const timeRange = buildTimeRangeString(nextState.since, nextState.until);
|
const timeRange = buildTimeRangeString(nextState.since, nextState.until);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user