From 3f245a757e9c70174e47f49ad8f1f6df6f460f14 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 14 Dec 2020 23:15:06 +0100
Subject: [PATCH] Created DateRangeSelector test

---
 src/utils/dates/DateRangeSelector.tsx       |  2 +-
 test/utils/dates/DateRangeSelector.test.tsx | 57 +++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 test/utils/dates/DateRangeSelector.test.tsx

diff --git a/src/utils/dates/DateRangeSelector.tsx b/src/utils/dates/DateRangeSelector.tsx
index a71d792d..3cb80c3b 100644
--- a/src/utils/dates/DateRangeSelector.tsx
+++ b/src/utils/dates/DateRangeSelector.tsx
@@ -12,7 +12,7 @@ import {
 import DateRangeRow from './DateRangeRow';
 import './DateRangeSelector.scss';
 
-interface DateRangeSelectorProps {
+export interface DateRangeSelectorProps {
   initialDateRange?: DateInterval | DateRange;
   disabled?: boolean;
   onDatesChange: (dateRange: DateRange) => void;
diff --git a/test/utils/dates/DateRangeSelector.test.tsx b/test/utils/dates/DateRangeSelector.test.tsx
new file mode 100644
index 00000000..7daadeb1
--- /dev/null
+++ b/test/utils/dates/DateRangeSelector.test.tsx
@@ -0,0 +1,57 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DropdownItem } from 'reactstrap';
+import moment from 'moment';
+import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
+import { DateInterval } from '../../../src/utils/dates/types';
+
+describe('<DateRangeSelector />', () => {
+  let wrapper: ShallowWrapper;
+  const onDatesChange = jest.fn();
+  const createWrapper = (props: Partial<DateRangeSelectorProps> = {}) => {
+    wrapper = shallow(<DateRangeSelector {...props} onDatesChange={onDatesChange} />);
+
+    return wrapper;
+  };
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  test('proper amount of items is rendered', () => {
+    const wrapper = createWrapper();
+    const items = wrapper.find(DropdownItem);
+
+    expect(items).toHaveLength(12);
+    expect(items.filter('[divider]')).toHaveLength(2);
+    expect(items.filter('[header]')).toHaveLength(1);
+    expect(items.filter('[text]')).toHaveLength(1);
+    expect(items.filter('[active]')).toHaveLength(8);
+  });
+
+  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) => {
+    const wrapper = createWrapper({ initialDateRange });
+    const items = wrapper.find(DropdownItem).filter('[active]');
+
+    expect.assertions(8);
+    items.forEach((item, index) => expect(item.prop('active')).toEqual(index === expectedActiveIndex));
+  });
+
+  test('selecting an element triggers onDatesChange callback', () => {
+    const wrapper = createWrapper();
+    const items = wrapper.find(DropdownItem).filter('[active]');
+
+    items.at(2).simulate('click');
+    items.at(4).simulate('click');
+    items.at(1).simulate('click');
+    expect(onDatesChange).toHaveBeenCalledTimes(3);
+  });
+});