DATAP-379 remaining unit tests and final cleanup (#540)

* removed final snapshot

* removed final snapshot

* new unit tests for Pill component

* fixing test timeout issue

* move test, add tests

* Added unit tests for DateRanges

* Added functionality to restore all mocks for unit tests

* moved unit tests to same folder as component

* Removed test snapshot for DateRanges snapshot

* uncommented expected results for one unit test

* Added unit tests for DateFilter and CompanyReceivedFilter

---------

Co-authored-by: cdhenley219 <chanel.henley@cfpb.gov>
Co-authored-by: Richard Dinh <richard.dinh@cfpb.gov>

src/components/Filters/CompanyReceivedFilter.spec.js

@@ -0,0 +1,39 @@
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { merge } from '../../testUtils/functionHelpers';
+import { defaultQuery } from '../../reducers/query/query';
+import { CompanyReceivedFilter } from './CompanyReceivedFilter';
+
+const renderComponent = (newQueryState = {}) => {
+  merge(newQueryState, defaultQuery);
+
+  const data = {
+    query: newQueryState,
+  };
+
+  render(<CompanyReceivedFilter />, {
+    preloadedState: data,
+  });
+};
+
+describe('component::CompanyReceivedFilter', () => {
+  it('should render initial state', () => {
+    const query = {
+      company_received_min: new Date(2000, 0, 1),
+      company_received_max: new Date(2016, 0, 1),
+    };
+    renderComponent(query);
+    expect(screen.getByText('From')).toBeInTheDocument();
+    expect(screen.getByText('Through')).toBeInTheDocument();
+  });
+
+  it('should render initial state with errors', () => {
+    const query = {
+      company_received_max: new Date(2000, 0, 1),
+      company_received_min: new Date(2016, 0, 1),
+    };
+    renderComponent(query);
+    expect(
+      screen.getByText("'From' date must be less than 'through' date"),
+    ).toBeInTheDocument();
+  });
+});

src/components/Filters/DateFilter.spec.js

@@ -0,0 +1,46 @@
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { merge } from '../../testUtils/functionHelpers';
+import { defaultQuery } from '../../reducers/query/query';
+import { DateFilter } from './DateFilter';
+
+const renderComponent = (newQueryState = {}) => {
+  merge(newQueryState, defaultQuery);
+
+  const data = {
+    query: newQueryState,
+  };
+
+  render(<DateFilter />, {
+    preloadedState: data,
+  });
+};
+
+describe('component::DateFilter', () => {
+  it('should render initial state', () => {
+    const query = {
+      date_received_min: new Date('2017-05-05T04:00:00.000Z'),
+      date_received_max: new Date('2020-05-05T04:00:00.000Z'),
+    };
+
+    renderComponent(query);
+    expect(screen.getByText('Learn More')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'CFPB updated product and issue options in April 2017 and August 2023.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should render initial state with errors', () => {
+    const query = {
+      date_received_max: new Date('2017-05-05T04:00:00.000Z'),
+      date_received_min: new Date('2020-05-05T04:00:00.000Z'),
+    };
+
+    renderComponent(query);
+
+    expect(
+      screen.getByText("'From' date must be less than 'through' date"),
+    ).toBeInTheDocument();
+  });
+});

src/components/Filters/DateRanges.spec.js

@@ -0,0 +1,80 @@
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import userEvent from '@testing-library/user-event';
+import { merge } from '../../testUtils/functionHelpers';
+import { defaultQuery } from '../../reducers/query/query';
+import * as filtersActions from '../../actions/filter';
+import * as utils from '../../utils';
+import { DateRanges } from './DateRanges';
+
+const renderComponent = (newQueryState = {}) => {
+  merge(newQueryState, defaultQuery);
+
+  const data = {
+    query: newQueryState,
+  };
+
+  render(<DateRanges />, {
+    preloadedState: data,
+  });
+};
+
+describe('component::DateRanges', () => {
+  const user = userEvent.setup({ delay: null });
+
+  let dateRangeToggledFn, sendAnalyticsEventFn;
+
+  beforeEach(() => {
+    dateRangeToggledFn = jest.spyOn(filtersActions, 'dateRangeToggled');
+    sendAnalyticsEventFn = jest.spyOn(utils, 'sendAnalyticsEvent');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render initial state', () => {
+    const ranges = ['3m', '6m', '1y', '3y', 'All'];
+    const query = {
+      dateRange: 'All',
+      tab: 'Trends',
+    };
+
+    renderComponent(query);
+
+    expect(
+      screen.getByText('Date range (Click to modify range)'),
+    ).toBeInTheDocument();
+
+    ranges.forEach((range) => {
+      expect(screen.getByRole('button', { name: range })).toBeInTheDocument();
+    });
+  });
+
+  it('should select button and trigger toggle on newly selected range', async () => {
+    const query = {
+      dateRange: 'All',
+      tab: 'Trends',
+    };
+
+    renderComponent(query);
+
+    await user.click(screen.getByRole('button', { name: '1y' }));
+
+    expect(dateRangeToggledFn).toHaveBeenCalledWith('1y');
+    expect(sendAnalyticsEventFn).toHaveBeenCalledWith('Button', 'Trends:1y');
+  });
+
+  it('should not trigger toggle on already selected range', async () => {
+    const query = {
+      dateRange: 'All',
+      tab: 'Trends',
+    };
+
+    renderComponent(query);
+
+    await user.click(screen.getByRole('button', { name: 'All' }));
+
+    expect(dateRangeToggledFn).not.toHaveBeenCalled();
+    expect(sendAnalyticsEventFn).not.toHaveBeenCalled();
+  });
+});