WEB-4654 - Tags & Sites

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

@@ -382,146 +382,45 @@ 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();
-
-            await userEvent.click(site1checkbox);
-            await userEvent.click(site2checkbox);
-
-            expect(site1checkbox).toBeChecked();
-            expect(site2checkbox).toBeChecked();
-
-            // Click Apply
-            await userEvent.click(screen.getByRole('button', { name: /Apply/ }));
-
-            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenCalledWith(
-              'clinicID123',
-              { sites: ['site-1-id', 'site-2-id'], limit: 50, offset: 0, period: '14d', 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 () => {
-            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');
-            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.getByRole('button', { name: /Apply/ }));
-
-            expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenCalledWith(
-              'clinicID123',
-              { sites: ['_'], limit: 50, offset: 0, period: '14d', sortType: 'cgm', sort: '-lastData' },
-              expect.any(Function),
-            );
-          }, TEST_TIMEOUT_MS);
-
-          it('should allow filtering by tags', async () => {
-            render(
-              <MockedProviderWrappers>
-                <ClinicPatients {...defaultProps} />
-              </MockedProviderWrappers>
-            );
-
-            // Open the Tags filter dropdown and filter for 2 sites
+            // Open the Tags filter dropdown, select 2 tags, and apply
             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
+            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/ }));
 
             expect(defaultProps.api.clinics.getPatientsForClinic).toHaveBeenLastCalledWith(
               'clinicID123',
               { tags: ['tag1', 'tag3'], 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 site 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/ }));
-
-            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();
-
-            // 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();
-
-            // Click Apply. A query of `['_']` should be made for sites.
+            // Open the Sites filter dropdown, select 2 sites, and apply
+            await userEvent.click(screen.getByRole('button', { name: /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',
-              { tags: ['_'], 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);

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import { thunk } from 'redux-thunk';
+import { MemoryRouter } from 'react-router-dom';
+
+import * as actions from '@app/redux/actions';
+import FilterBySites from '@app/pages/clinicworkspace/clinicPatientsFilters/FilterBySites';
+import { trackMetric as mockTrackMetric } from '../../../../../app/core/metricUtils';
+import useIsClinicAdmin from '@app/pages/clinicworkspace/useIsClinicAdmin';
+
+jest.mock('@app/pages/clinicworkspace/useIsClinicAdmin');
+
+jest.mock('@app/redux/actions', () => ({
+  async: { fetchClinicSites: jest.fn().mockReturnValue({ type: 'FETCH_CLINIC_SITES' }) },
+}));
+
+const mockStore = configureStore([thunk]);
+
+describe('FilterBySites', () => {
+  let store;
+  let wrapper;
+
+  const api = { some: 'api' };
+  const selectedClinicId = 'clinic123';
+
+  const clinicSiteDefs = [
+    { id: 'site1', name: 'Site One' },
+    { id: 'site2', name: 'Site Two' },
+  ];
+
+  const setActiveFilters = jest.fn();
+  const setShowClinicSitesDialog = jest.fn();
+
+  useIsClinicAdmin.mockReturnValue(true);
+
+  const ui = (props = {}) => (
+    <Provider store={store}>
+      <MemoryRouter initialEntries={['/clinic-workspace']}>
+        <FilterBySites
+          api={api}
+          setActiveFilters={setActiveFilters}
+          setShowClinicSitesDialog={setShowClinicSitesDialog}
+          {...props}
+        />
+      </MemoryRouter>
+    </Provider>
+  );
+
+  const renderComponent = (props = {}) => render(ui(props));
+
+  beforeEach(() => {
+    store = mockStore({
+      blip: {
+        selectedClinicId,
+        clinics: { [selectedClinicId]: { id: selectedClinicId, sites: clinicSiteDefs } },
+      },
+    });
+
+    setActiveFilters.mockClear();
+    setShowClinicSitesDialog.mockClear();
+  });
+
+  describe('handleChange', () => {
+    it('calls setActiveFilters with the applied sites merged into the existing activeFilters', async () => {
+      wrapper = renderComponent({ activeFilters: { clinicSites: [], patientTags: ['tag1'] } });
+
+      await userEvent.click(screen.getByRole('button', { name: /^Clinic Sites/ }));
+      await screen.findByTestId('clinic-site-filter-option-checkbox-site1');
+
+      await userEvent.click(screen.getByTestId('clinic-site-filter-option-checkbox-site1'));
+      await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+      expect(setActiveFilters).toHaveBeenCalledTimes(1);
+      expect(setActiveFilters).toHaveBeenCalledWith({
+        clinicSites: ['site1'],
+        patientTags: ['tag1'],
+      });
+    });
+  });
+
+  describe('onClickEditSites visibility', () => {
+    it('offers the edit-sites control to clinic admins only', async () => {
+      // Hidden if not admin
+      useIsClinicAdmin.mockReturnValue(false);
+      const { rerender } = renderComponent();
+
+      expect(screen.queryByRole('button', { name: 'Edit Sites' })).not.toBeInTheDocument();
+
+      // Visible if not admin
+      useIsClinicAdmin.mockReturnValue(true);
+      rerender(ui());
+
+      await userEvent.click(screen.getByRole('button', { name: /^Clinic Sites/ }));
+      await screen.findByTestId('clinic-site-filter-option-checkbox-site1');
+
+      const editButton = screen.getByRole('button', { name: 'Edit Sites' });
+      expect(editButton).toBeInTheDocument();
+
+      await userEvent.click(editButton);
+
+      expect(actions.async.fetchClinicSites).toHaveBeenCalledWith(api, selectedClinicId);
+      expect(setShowClinicSitesDialog).toHaveBeenCalledWith(true);
+      expect(mockTrackMetric).toHaveBeenCalledWith(
+        'Clinic - Edit clinic sites open',
+        expect.objectContaining({ clinicId: selectedClinicId, source: 'Filter menu', pageName: 'Population Health' })
+      );
+    });
+  });
+
+  describe('clinicSites passthrough', () => {
+    it('reflects the active clinic sites in the filter count', () => {
+      wrapper = renderComponent({ activeFilters: { clinicSites: ['site1', 'site2'] } });
+
+      expect(screen.getByLabelText('clinic site count')).toHaveTextContent('2');
+    });
+  });
+});