fix: update the time filter for 'Last Year' option in explore

superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx

@@ -18,14 +18,21 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
+import { OverlayTrigger, Popover, Tab, Tabs, Radio } from 'react-bootstrap';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
-import Button from 'src/components/Button';
 
 import Label from 'src/components/Label';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 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 = {
   animation: false,
   name: 'date',
@@ -41,40 +48,94 @@ describe('DateFilterControl', () => {
     wrapper = mount(<DateFilterControl {...defaultProps} />);
   });
 
+  it('renders', () => {
+    expect(wrapper.find(DateFilterControl)).toExist();
+  });
+
   it('renders a ControlHeader', () => {
     const controlHeader = wrapper.find(ControlHeader);
     expect(controlHeader).toHaveLength(1);
   });
-  it('renders 3 Buttons', () => {
-    const label = wrapper.find(Label).first();
-    label.simulate('click');
-    setTimeout(() => {
-      expect(wrapper.find(Button)).toHaveLength(3);
-    }, 10);
+
+  it('renders an OverlayTrigger', () => {
+    expect(wrapper.find(OverlayTrigger)).toExist();
   });
-  it('loads the right state', () => {
-    const label = wrapper.find(Label).first();
-    label.simulate('click');
-    setTimeout(() => {
-      expect(wrapper.state().num).toBe('90');
-    }, 10);
+
+  it('renders a popover', () => {
+    const { overlay } = wrapper.find(OverlayTrigger).first().props();
+    const overlayWrapper = mount(overlay);
+
+    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');
-    setTimeout(() => {
-      expect(wrapper.find(Button)).toHaveLength(3);
-    }, 10);
-  });
-  it('opens and closes', () => {
-    const label = wrapper.find(Label).first();
+    expect(open).toBeCalled();
+    expect(close).not.toBeCalled();
     label.simulate('click');
-    setTimeout(() => {
-      expect(wrapper.find('.popover')).toExist();
-      expect(wrapper.find('.ok')).first().simulate('click');
-      setTimeout(() => {
-        expect(wrapper.find('.popover')).not.toExist();
-      }, 10);
-    }, 10);
+    expect(close).toBeCalled();
+  });
+
+  it('renders two tabs in popover', () => {
+    const { overlay } = wrapper.find(OverlayTrigger).first().props();
+    const overlayWrapper = mount(overlay);
+    const popover = overlayWrapper.find(Popover).first();
+
+    expect(popover.find(Tabs)).toExist();
+    expect(popover.find(Tab)).toHaveLength(2);
+  });
+
+  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],
+      );
+    });
   });
 });

superset-frontend/src/explore/components/controls/DateFilterControl.jsx

@@ -128,22 +128,23 @@ function getStateFromSeparator(value) {
 
 function getStateFromCommonTimeFrame(value) {
   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 {
     tab: TABS.DEFAULTS,
     type: TYPES.DEFAULTS,
     common: value,
-    since:
-      value === 'No filter'
-        ? ''
-        : moment()
-            .utc()
-            .startOf('day')
-            .subtract(1, units)
-            .format(MOMENT_FORMAT),
+    since: sinceMoment === '' ? '' : sinceMoment.format(MOMENT_FORMAT),
     until:
-      value === 'No filter'
-        ? ''
-        : moment().utc().startOf('day').format(MOMENT_FORMAT),
+      sinceMoment === '' ? '' : sinceMoment.add(1, units).format(MOMENT_FORMAT),
   };
 }
 
@@ -396,7 +397,6 @@ class DateFilterControl extends React.Component {
     ));
     const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => {
       const nextState = getStateFromCommonTimeFrame(timeFrame);
-
       const timeRange = buildTimeRangeString(nextState.since, nextState.until);
 
       return (