Created section to set default date interval for visits

test/utils/dates/DateIntervalDropdownItems.test.tsx

@@ -0,0 +1,39 @@
+import { DropdownItem } from 'reactstrap';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
+import { DATE_INTERVALS } from '../../../src/utils/dates/types';
+
+describe('<DateIntervalDropdownItems />', () => {
+  let wrapper: ShallowWrapper;
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    wrapper = shallow(<DateIntervalDropdownItems active="last180days" onChange={onChange} />);
+  });
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  test('expected amount of items is rendered', () => {
+    const items = wrapper.find(DropdownItem);
+
+    expect(items).toHaveLength(DATE_INTERVALS.length);
+  });
+
+  test('expected item is active', () => {
+    const items = wrapper.find(DropdownItem);
+    const EXPECTED_ACTIVE_INDEX = 5;
+
+    expect.assertions(DATE_INTERVALS.length);
+    items.forEach((item, index) => expect(item.prop('active')).toEqual(index === EXPECTED_ACTIVE_INDEX));
+  });
+
+  test('selecting an element triggers onChange callback', () => {
+    const items = wrapper.find(DropdownItem);
+
+    items.at(2).simulate('click');
+    items.at(4).simulate('click');
+    items.at(1).simulate('click');
+    expect(onChange).toHaveBeenCalledTimes(3);
+  });
+});

test/utils/dates/DateRangeSelector.test.tsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { Mock } from 'ts-mockery';
 import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
 import { DateInterval } from '../../../src/utils/dates/types';
+import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
 
 describe('<DateRangeSelector />', () => {
   let wrapper: ShallowWrapper;
@@ -20,39 +21,49 @@ describe('<DateRangeSelector />', () => {
   test('proper amount of items is rendered', () => {
     const wrapper = createWrapper();
     const items = wrapper.find(DropdownItem);
+    const dateIntervalItems = wrapper.find(DateIntervalDropdownItems);
 
-    expect(items).toHaveLength(12);
+    expect(items).toHaveLength(5);
+    expect(dateIntervalItems).toHaveLength(1);
     expect(items.filter('[divider]')).toHaveLength(2);
     expect(items.filter('[header]')).toHaveLength(1);
     expect(items.filter('[text]')).toHaveLength(1);
-    expect(items.filter('[active]')).toHaveLength(8);
+    expect(items.filter('[active]')).toHaveLength(1);
   });
 
   test.each([
-    [ undefined, 0 ],
-    [ 'today' as DateInterval, 1 ],
-    [ 'yesterday' as DateInterval, 2 ],
-    [ 'last7Days' as DateInterval, 3 ],
-    [ 'last30Days' as DateInterval, 4 ],
-    [ 'last90Days' as DateInterval, 5 ],
-    [ 'last180days' as DateInterval, 6 ],
-    [ 'last365Days' as DateInterval, 7 ],
-    [{ startDate: moment() }, 8 ],
-  ])('proper element is active based on provided date range', (initialDateRange, expectedActiveIndex) => {
+    [ undefined, 1, 0 ],
+    [ 'today' as DateInterval, 0, 1 ],
+    [ 'yesterday' as DateInterval, 0, 1 ],
+    [ 'last7Days' as DateInterval, 0, 1 ],
+    [ 'last30Days' as DateInterval, 0, 1 ],
+    [ 'last90Days' as DateInterval, 0, 1 ],
+    [ 'last180days' as DateInterval, 0, 1 ],
+    [ 'last365Days' as DateInterval, 0, 1 ],
+    [{ startDate: moment() }, 0, 0 ],
+  ])('proper element is active based on provided date range', (
+    initialDateRange,
+    expectedActiveItems,
+    expectedActiveIntervalItems,
+  ) => {
     const wrapper = createWrapper({ initialDateRange });
-    const items = wrapper.find(DropdownItem).filter('[active]');
+    const items = wrapper.find(DropdownItem).filterWhere((item) => item.prop('active') === true);
+    const dateIntervalItems = wrapper.find(DateIntervalDropdownItems).filterWhere(
+      (item) => item.prop('active') !== undefined,
+    );
 
-    expect.assertions(8);
-    items.forEach((item, index) => expect(item.prop('active')).toEqual(index === expectedActiveIndex));
+    expect(items).toHaveLength(expectedActiveItems);
+    expect(dateIntervalItems).toHaveLength(expectedActiveIntervalItems);
   });
 
   test('selecting an element triggers onDatesChange callback', () => {
     const wrapper = createWrapper();
-    const items = wrapper.find(DropdownItem).filter('[active]');
+    const item = wrapper.find(DropdownItem).at(0);
+    const dateIntervalItems = wrapper.find(DateIntervalDropdownItems);
 
-    items.at(2).simulate('click');
-    items.at(4).simulate('click');
-    items.at(1).simulate('click');
+    item.simulate('click');
+    item.simulate('click');
+    dateIntervalItems.simulate('change');
     expect(onDatesChange).toHaveBeenCalledTimes(3);
   });
 });