Feature - TIDE Dashboard v2

__tests__/unit/app/pages/clinicworkspace/ClinicPatients.test.js

@@ -382,146 +382,139 @@ describe('ClinicPatients', ()  => {
 
         describe('filtering for patients', () => {
           afterEach(() => {
-            // Clear any persisted filter state between tests
             localStorage.clear();
           });
 
-          it('should allow filtering by sites', async () => {
+          it('maps an applied tag filter into the getPatientsForClinic query', async () => {
             render(
               <MockedProviderWrappers>
                 <ClinicPatients {...defaultProps} />
               </MockedProviderWrappers>
             );
 
-            // Open the Sites filter  dropdown and filter for 2 sites
-            await userEvent.click(screen.getByRole('button', { name: /Sites/ }));
-
-            const site1checkbox = screen.getByTestId('clinic-site-filter-option-checkbox-site-1-id');
-            const site2checkbox = screen.getByTestId('clinic-site-filter-option-checkbox-site-2-id');
-
-            expect(site1checkbox).not.toBeChecked();
-            expect(site2checkbox).not.toBeChecked();
+            // Open the Tags filter dropdown, select 2 tags, and apply
+            await userEvent.click(screen.getByRole('button', { name: /Tags/ }));
+            await userEvent.click(screen.getByTestId('tag-filter-option-checkbox-tag1'));
+            await userEvent.click(screen.getByTestId('tag-filter-option-checkbox-tag3'));
+            await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
-            await userEvent.click(site1checkbox);
-            await userEvent.click(site2checkbox);
+            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
+              'clinicID123',
+              { tags: ['tag1', 'tag3'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
+              expect.any(Function),
+            );
+          }, TEST_TIMEOUT_MS);
 
-            expect(site1checkbox).toBeChecked();
-            expect(site2checkbox).toBeChecked();
+          it('maps an applied summary period filter into the getPatientsForClinic query', async () => {
+            render(
+              <MockedProviderWrappers>
+                <ClinicPatients {...defaultProps} />
+              </MockedProviderWrappers>
+            );
 
-            // Click Apply
+            // Open the Summary Period filter dropdown, select 30 days, and apply
+            await userEvent.click(screen.getByRole('button', { name: /Filter by summary period duration/ }));
+            await userEvent.click(screen.getByRole('radio', { name: /30 days/ }));
             await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
-            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenCalledWith(
+            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
               'clinicID123',
-              { sites: ['site-1-id', 'site-2-id'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
+              { limit: 50, offset: 0, period: '30d', sortType: 'cgm', sort: '-lastData' },
               expect.any(Function),
             );
-
-            expect(defaultProps.trackMetric).toHaveBeenCalledWith(
-              'Clinic - Population Health - Clinic sites filter apply',
-              { clinicId: 'clinicID123' },
-            );
           }, TEST_TIMEOUT_MS);
 
-          it('should allow filtering by for patients with zero sites', async () => {
+          it('maps an applied site filter into the getPatientsForClinic query', async () => {
             render(
               <MockedProviderWrappers>
                 <ClinicPatients {...defaultProps} />
               </MockedProviderWrappers>
             );
 
-            // Open the Sites filter dropdown and filter for 2 sites
+            // Open the Sites filter dropdown, select 2 sites, and apply
             await userEvent.click(screen.getByRole('button', { name: /Sites/ }));
-
-            const site1checkbox = screen.getByTestId('clinic-site-filter-option-checkbox-site-1-id');
-            const site2checkbox = screen.getByTestId('clinic-site-filter-option-checkbox-site-2-id');
-            await userEvent.click(site1checkbox);
-            await userEvent.click(site2checkbox);
-            expect(site1checkbox).toBeChecked();
-            expect(site2checkbox).toBeChecked();
-
-            // Click the checkbox to filter for pwds with zero sites. Others should uncheck.
-            const zeroSiteCheckbox = screen.getByTestId('clinic-site-filter-option-checkbox-PWDS_WITH_ZERO_SITES');
-            await userEvent.click(zeroSiteCheckbox);
-            expect(site1checkbox).not.toBeChecked();
-            expect(site2checkbox).not.toBeChecked();
-
-            // Click Apply. A query of `['_']` should be made for sites.
+            await userEvent.click(screen.getByTestId('clinic-site-filter-option-checkbox-site-1-id'));
+            await userEvent.click(screen.getByTestId('clinic-site-filter-option-checkbox-site-2-id'));
             await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
-            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenCalledWith(
+            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
               'clinicID123',
-              { sites: ['_'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
+              { sites: ['site-1-id', 'site-2-id'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
               expect.any(Function),
             );
           }, TEST_TIMEOUT_MS);
 
-          it('should allow filtering by tags', async () => {
+          it('maps an applied data recency filter into the getPatientsForClinic query', async () => {
             render(
               <MockedProviderWrappers>
                 <ClinicPatients {...defaultProps} />
               </MockedProviderWrappers>
             );
 
-            // Open the Tags filter dropdown and filter for 2 sites
-            await userEvent.click(screen.getByRole('button', { name: /Tags/ }));
-
-            const tag1checkbox = screen.getByTestId('tag-filter-option-checkbox-tag1');
-            const tag3checkbox = screen.getByTestId('tag-filter-option-checkbox-tag3');
-
-            expect(tag1checkbox).not.toBeChecked();
-            expect(tag3checkbox).not.toBeChecked();
-
-            await userEvent.click(tag1checkbox);
-            await userEvent.click(tag3checkbox);
-
-            expect(tag1checkbox).toBeChecked();
-            expect(tag3checkbox).toBeChecked();
-
-            // Click Apply
+            // Open the Data Recency filter dropdown, pick a device type and window, and apply.
+            // Match the trigger via its icon label ("Data Recency" alone also matches the
+            // sortable column header of the same name).
+            await userEvent.click(screen.getByRole('button', { name: /Filter by last upload/ }));
+            await userEvent.click(screen.getByRole('radio', { name: /CGM/ }));
+            await userEvent.click(screen.getByRole('radio', { name: /Within 14 days/ }));
             await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
+            // The from/to date bounds are derived from the current date, so assert their
+            // presence and 14-day span rather than exact ISO timestamps.
             expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
               'clinicID123',
-              { tags: ['tag1', 'tag3'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
+              expect.objectContaining({
+                'cgm.lastDataFrom': expect.any(String),
+                'cgm.lastDataTo': expect.any(String),
+                limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData',
+              }),
               expect.any(Function),
             );
-
-            expect(defaultProps.trackMetric).toHaveBeenCalledWith(
-              'Clinic - Population Health - Patient tag filter apply',
-              { clinicId: 'clinicID123' },
-            );
           }, TEST_TIMEOUT_MS);
 
-          it('should allow filtering by for patients with zero tags', async () => {
+          it('maps an applied time in range filter into the getPatientsForClinic query', async () => {
             render(
               <MockedProviderWrappers>
                 <ClinicPatients {...defaultProps} />
               </MockedProviderWrappers>
             );
 
-            // Open the Tags filter dropdown and filter for 2 tags
-            await userEvent.click(screen.getByRole('button', { name: /Tags/ }));
+            // Open the % Time in Range filter dropdown, select a range, and apply.
+            await userEvent.click(screen.getByRole('button', { name: /Filter by Time in Range/ }));
+            await userEvent.click(screen.getByRole('checkbox', { name: /Not meeting TIR/ }));
+            await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
-            const tag1checkbox = screen.getByTestId('tag-filter-option-checkbox-tag1');
-            const tag2checkbox = screen.getByTestId('tag-filter-option-checkbox-tag2');
-            await userEvent.click(tag1checkbox);
-            await userEvent.click(tag2checkbox);
-            expect(tag1checkbox).toBeChecked();
-            expect(tag2checkbox).toBeChecked();
+            // Selecting ranges scopes the query to standard target ranges and maps each
+            // selected range into a `cgm.<range>` comparator threshold (fraction of time).
+            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
+              'clinicID123',
+              expect.objectContaining({
+                omitNonStandardRanges: true,
+                'cgm.timeInTargetPercent': '<=0.7',
+                limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData',
+              }),
+              expect.any(Function),
+            );
+          }, TEST_TIMEOUT_MS);
 
-            // Click the checkbox to filter for pwds with zero tags. Others should uncheck.
-            const zeroTagCheckbox = screen.getByTestId('tag-filter-option-checkbox-PWDS_WITH_ZERO_TAGS');
-            await userEvent.click(zeroTagCheckbox);
-            expect(tag1checkbox).not.toBeChecked();
-            expect(tag2checkbox).not.toBeChecked();
+          it('maps an applied cgm use filter into the getPatientsForClinic query', async () => {
+            render(
+              <MockedProviderWrappers>
+                <ClinicPatients {...defaultProps} />
+              </MockedProviderWrappers>
+            );
 
-            // Click Apply. A query of `['_']` should be made for sites.
+            // Open the % CGM Use filter dropdown, select a range, and apply.
+            await userEvent.click(screen.getByRole('button', { name: /CGM Use/ }));
+            await userEvent.click(screen.getByRole('radio', { name: /Less than 70%/ }));
             await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
 
-            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenCalledWith(
+            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
               'clinicID123',
-              { tags: ['_'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
+              expect.objectContaining({
+                'cgm.timeCGMUsePercent': '<0.7',
+                limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData',
+              }),
               expect.any(Function),
             );
           }, TEST_TIMEOUT_MS);

__tests__/unit/app/pages/clinicworkspace/clinicPatientsFilters/AppliedFiltersList.test.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import configureStore from 'redux-mock-store';
+import { thunk } from 'redux-thunk';
+import { Provider } from 'react-redux';
+import { ThemeProvider } from 'theme-ui';
+
+import theme from '@app/themes/baseTheme';
+import AppliedFiltersList from '@app/pages/clinicworkspace/clinicPatientsFilters/AppliedFiltersList';
+import { defaultFilterState, SPECIAL_FILTER_STATES } from '@app/pages/clinicworkspace/useClinicPatientsFilters';
+
+const mockStore = configureStore([thunk]);
+
+const FULLY_ACTIVE_FILTERS = {
+  ...defaultFilterState,
+  lastData: 14,
+  lastDataType: 'cgm',
+  timeInRange: ['timeInTargetPercent', 'timeInVeryLowPercent'],
+  patientTags: ['tag1', 'tag2'],
+  clinicSites: ['site1', 'site2'],
+};
+
+const buildState = ({
+  fetchedPatientCount = 5,
+  patientListSearchTextInput = '',
+} = {}) => ({
+  blip: {
+    selectedClinicId: 'clinic123',
+    clinics: {
+      'clinic123': {
+        id: 'clinic123',
+        fetchedPatientCount,
+        patientTags: [
+          { id: 'tag1', name: 'Tag One' },
+          { id: 'tag2', name: 'Tag Two' },
+        ],
+        sites: [
+          { id: 'site1', name: 'Site Alpha' },
+          { id: 'site2', name: 'Site Bravo' },
+        ],
+      },
+    },
+    patientListFilters: { patientListSearchTextInput },
+  },
+});
+
+const renderList = ({
+  activeFilters = defaultFilterState,
+  setActiveFilters = jest.fn(),
+  onClearSearch = jest.fn(),
+  onResetFilters = jest.fn(),
+  state = buildState(),
+} = {}) => {
+  const store = mockStore(state);
+
+  const utils = render(
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <AppliedFiltersList
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          onClearSearch={onClearSearch}
+          onResetFilters={onResetFilters}
+        />
+      </ThemeProvider>
+    </Provider>
+  );
+
+  return { ...utils, setActiveFilters, onClearSearch, onResetFilters };
+};
+
+describe('AppliedFiltersList', () => {
+  describe('clear/reset controls', () => {
+    it('shows a "Reset Filters" control that fires onResetFilters when only filters are active', async () => {
+      const { onResetFilters, onClearSearch } = renderList({
+        activeFilters: { ...defaultFilterState, timeInRange: ['timeInTargetPercent'] },
+      });
+
+      await userEvent.click(screen.getByRole('button', { name: 'Reset All Filters' }));
+
+      expect(onResetFilters).toHaveBeenCalledTimes(1);
+      expect(onClearSearch).not.toHaveBeenCalled();
+    });
+
+    it('shows a "Clear Search" control that fires onClearSearch when only a search is active', async () => {
+      const { onClearSearch, onResetFilters } = renderList({
+        activeFilters: defaultFilterState,
+        state: buildState({ patientListSearchTextInput: 'john' }),
+      });
+
+      await userEvent.click(screen.getByRole('button', { name: 'Clear Search' }));
+
+      expect(onClearSearch).toHaveBeenCalledTimes(1);
+      expect(onResetFilters).not.toHaveBeenCalled();
+    });
+
+    it('shows both controls, each wired to its own callback, when a filter and a search are both active', async () => {
+      const { onClearSearch, onResetFilters } = renderList({
+        activeFilters: { ...defaultFilterState, timeInRange: ['timeInTargetPercent'] },
+        state: buildState({ patientListSearchTextInput: 'john' }),
+      });
+
+      await userEvent.click(screen.getByRole('button', { name: 'Reset All Filters' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Clear Search' }));
+
+      expect(onResetFilters).toHaveBeenCalledTimes(1);
+      expect(onClearSearch).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('removing filters fires setActiveFilters correctly', () => {
+    it('resets lastData and lastDataType to their defaults when the data-recency chip is removed', async () => {
+      const { setActiveFilters } = renderList({ activeFilters: FULLY_ACTIVE_FILTERS });
+
+      await userEvent.click(screen.getByLabelText('Remove CGM data within 14 days filter'));
+
+      expect(setActiveFilters).toHaveBeenCalledTimes(1);
+      expect(setActiveFilters).toHaveBeenCalledWith({
+        ...FULLY_ACTIVE_FILTERS,
+        lastData: defaultFilterState.lastData,
+        lastDataType: defaultFilterState.lastDataType,
+      });
+    });
+
+    it('removes only the clicked time-in-range value, preserving the others', async () => {
+      const { setActiveFilters } = renderList({ activeFilters: FULLY_ACTIVE_FILTERS });
+
+      await userEvent.click(screen.getByLabelText('Remove %TIR = Not in Range filter'));
+
+      expect(setActiveFilters).toHaveBeenCalledTimes(1);
+      expect(setActiveFilters).toHaveBeenCalledWith({
+        ...FULLY_ACTIVE_FILTERS,
+        timeInRange: ['timeInVeryLowPercent'],
+      });
+    });
+
+    it('removes only the clicked patient tag, preserving the others', async () => {
+      const { setActiveFilters } = renderList({ activeFilters: FULLY_ACTIVE_FILTERS });
+
+      await userEvent.click(screen.getByLabelText('Remove Tag One filter'));
+
+      expect(setActiveFilters).toHaveBeenCalledTimes(1);
+      expect(setActiveFilters).toHaveBeenCalledWith({
+        ...FULLY_ACTIVE_FILTERS,
+        patientTags: ['tag2'],
+      });
+    });
+
+    it('removes only the clicked clinic site, preserving the others', async () => {
+      const { setActiveFilters } = renderList({ activeFilters: FULLY_ACTIVE_FILTERS });
+
+      await userEvent.click(screen.getByLabelText('Remove Site Alpha filter'));
+
+      expect(setActiveFilters).toHaveBeenCalledTimes(1);
+      expect(setActiveFilters).toHaveBeenCalledWith({
+        ...FULLY_ACTIVE_FILTERS,
+        clinicSites: ['site2'],
+      });
+    });
+  });
+});