Improved dropdown to filter visits, adding support to filter out bots

test/visits/helpers/OrphanVisitTypeDropdown.test.tsx

@@ -1,56 +0,0 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownItem } from 'reactstrap';
-import { OrphanVisitType } from '../../../src/visits/types';
-import { OrphanVisitTypeDropdown } from '../../../src/visits/helpers/OrphanVisitTypeDropdown';
-
-describe('<OrphanVisitTypeDropdown />', () => {
-  let wrapper: ShallowWrapper;
-  const onChange = jest.fn();
-  const createWrapper = (selected?: OrphanVisitType) => {
-    wrapper = shallow(<OrphanVisitTypeDropdown text="The text" selected={selected} onChange={onChange} />);
-
-    return wrapper;
-  };
-
-  beforeEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
-
-  it('has provided text', () => {
-    const wrapper = createWrapper();
-
-    expect(wrapper.prop('text')).toEqual('The text');
-  });
-
-  it.each([
-    [ 'base_url' as OrphanVisitType, 0, 1 ],
-    [ 'invalid_short_url' as OrphanVisitType, 1, 1 ],
-    [ 'regular_404' as OrphanVisitType, 2, 1 ],
-    [ undefined, -1, 0 ],
-  ])('sets expected item as active', (selected, expectedSelectedIndex, expectedActiveItems) => {
-    const wrapper = createWrapper(selected);
-    const items = wrapper.find(DropdownItem);
-    const activeItem = items.filterWhere((item) => !!item.prop('active'));
-
-    expect.assertions(expectedActiveItems + 1);
-    expect(activeItem).toHaveLength(expectedActiveItems);
-    items.forEach((item, index) => {
-      if (item.prop('active')) {
-        expect(index).toEqual(expectedSelectedIndex);
-      }
-    });
-  });
-
-  it.each([
-    [ 0, 'base_url' ],
-    [ 1, 'invalid_short_url' ],
-    [ 2, 'regular_404' ],
-    [ 4, undefined ],
-  ])('invokes onChange with proper type when an item is clicked', (index, expectedType) => {
-    const wrapper = createWrapper();
-    const itemToClick = wrapper.find(DropdownItem).at(index);
-
-    itemToClick.simulate('click');
-
-    expect(onChange).toHaveBeenCalledWith(expectedType);
-  });
-});

test/visits/helpers/VisitsFilterDropdown.test.tsx

@@ -0,0 +1,71 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DropdownItem } from 'reactstrap';
+import { OrphanVisitType } from '../../../src/visits/types';
+import { VisitsFilter, VisitsFilterDropdown } from '../../../src/visits/helpers/VisitsFilterDropdown';
+
+describe('<VisitsFilterDropdown />', () => {
+  let wrapper: ShallowWrapper;
+  const onChange = jest.fn();
+  const createWrapper = (selected: VisitsFilter = {}, isOrphanVisits = true) => {
+    wrapper = shallow(
+      <VisitsFilterDropdown isOrphanVisits={isOrphanVisits} selected={selected} onChange={onChange} />,
+    );
+
+    return wrapper;
+  };
+
+  beforeEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('has expected text', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.prop('text')).toEqual('Filters');
+  });
+
+  it.each([
+    [ false, 4, 1 ],
+    [ true, 9, 2 ],
+  ])('renders expected amount of items', (isOrphanVisits, expectedItemsAmount, expectedHeadersAmount) => {
+    const wrapper = createWrapper({}, isOrphanVisits);
+    const items = wrapper.find(DropdownItem);
+    const headers = items.filterWhere((item) => !!item.prop('header'));
+
+    expect(items).toHaveLength(expectedItemsAmount);
+    expect(headers).toHaveLength(expectedHeadersAmount);
+  });
+
+  it.each([
+    [ 'base_url' as OrphanVisitType, 4, 1 ],
+    [ 'invalid_short_url' as OrphanVisitType, 5, 1 ],
+    [ 'regular_404' as OrphanVisitType, 6, 1 ],
+    [ undefined, -1, 0 ],
+  ])('sets expected item as active', (orphanVisitsType, expectedSelectedIndex, expectedActiveItems) => {
+    const wrapper = createWrapper({ orphanVisitsType });
+    const items = wrapper.find(DropdownItem);
+    const activeItem = items.filterWhere((item) => !!item.prop('active'));
+
+    expect.assertions(expectedActiveItems + 1);
+    expect(activeItem).toHaveLength(expectedActiveItems);
+    items.forEach((item, index) => {
+      if (item.prop('active')) {
+        expect(index).toEqual(expectedSelectedIndex);
+      }
+    });
+  });
+
+  it.each([
+    [ 1, { excludeBots: true }],
+    [ 4, { orphanVisitsType: 'base_url' }],
+    [ 5, { orphanVisitsType: 'invalid_short_url' }],
+    [ 6, { orphanVisitsType: 'regular_404' }],
+    [ 8, {}],
+  ])('invokes onChange with proper selection when an item is clicked', (index, expectedSelection) => {
+    const wrapper = createWrapper();
+    const itemToClick = wrapper.find(DropdownItem).at(index);
+
+    itemToClick.simulate('click');
+
+    expect(onChange).toHaveBeenCalledWith(expectedSelection);
+  });
+});