Mhv 61347 add filters to list page (#31951)

* [] created accordion filter component, with basic smoke unit tests.

* [mhv-61347] added accordion to prescriptions container, hid accordion and content relocation under the filter feature flag, updated unit test to include accordion behind the ff.

* [mhv-61347] fixed misaligned icon.

* [mhv-61347] comment for icon fix.

* e2e test filter accordion

added e2e test to validate filter accordion, medications list h2 and refill link text update

* [MHV 61347] added the sort back regardless of ff status.

* e2e sort med list

added the sort tests back

---------

Co-authored-by: raji.venkatesh <raji.venkatesh@acommsolutions.com>

src/applications/mhv-medications/components/MedicationsList/MedicationsListFilter.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MedicationsListFilter = () => {
+  return (
+    <va-accordion open-single data-testid="filter-accordion">
+      <va-accordion-item header="Filter" id="filter">
+        <span slot="icon">
+          <va-icon aria-hidden="true" icon="filter_alt" />
+        </span>
+      </va-accordion-item>
+    </va-accordion>
+  );
+};
+
+export default MedicationsListFilter;

src/applications/mhv-medications/containers/Prescriptions.jsx

@@ -49,13 +49,15 @@ import { buildPrescriptionsTXT, buildAllergiesTXT } from '../util/txtConfigs';
 import Alert from '../components/shared/Alert';
 import {
   selectAllergiesFlag,
+  selectFilterFlag,
   selectRefillContentFlag,
 } from '../util/selectors';
 import PrescriptionsPrintOnly from './PrescriptionsPrintOnly';
 import { getPrescriptionSortedList } from '../api/rxApi';
 import ApiErrorNotification from '../components/shared/ApiErrorNotification';
 import CernerFacilityAlert from '../components/shared/CernerFacilityAlert';
 import { pageType } from '../util/dataDogConstants';
+import MedicationsListFilter from '../components/MedicationsList/MedicationsListFilter';
 
 const Prescriptions = () => {
   const { search } = useLocation();
@@ -80,6 +82,7 @@ const Prescriptions = () => {
   );
   const showRefillContent = useSelector(selectRefillContentFlag);
   const showAllergiesContent = useSelector(selectAllergiesFlag);
+  const showFilterContent = useSelector(selectFilterFlag);
   const prescriptionId = useSelector(
     state => state.rx.prescriptions?.prescriptionDetails?.prescriptionId,
   );
@@ -526,17 +529,14 @@ const Prescriptions = () => {
                     <va-card background>
                       <div className="vads-u-padding-x--1">
                         <h2 className="vads-u-margin--0 vads-u-font-size--h3">
-                          Refill your prescriptions
+                          Refill prescriptions
                         </h2>
-                        <p className="vads-u-margin-y--3">
-                          Find a list of prescriptions you can refill online.
-                        </p>
                         <Link
                           className="vads-c-action-link--green vads-u-margin--0"
                           to={medicationsUrls.subdirectories.REFILL}
                           data-testid="prescriptions-nav-link-to-refill"
                         >
-                          Refill prescriptions
+                          Start a refill request
                         </Link>
                       </div>
                     </va-card>
@@ -570,18 +570,32 @@ const Prescriptions = () => {
                         isShowingErrorNotification ? '5' : '3'
                       }
                       small-screen:vads-u-margin-top--${
-                        isShowingErrorNotification ? '5' : '4'
+                        isShowingErrorNotification ? '5' : '3'
                       }`}
                     >
-                      <PrintDownload
-                        onDownload={handleFullListDownload}
-                        isSuccess={
-                          pdfTxtGenerateStatus.status ===
-                          PDF_TXT_GENERATE_STATUS.Success
-                        }
-                        list
-                      />
-                      <BeforeYouDownloadDropdown page={pageType.LIST} />
+                      {showFilterContent ? (
+                        <>
+                          <h2
+                            className="vads-u-margin-y--3"
+                            data-testid="med-list"
+                          >
+                            Medications list
+                          </h2>
+                          <MedicationsListFilter />
+                        </>
+                      ) : (
+                        <>
+                          <PrintDownload
+                            onDownload={handleFullListDownload}
+                            isSuccess={
+                              pdfTxtGenerateStatus.status ===
+                              PDF_TXT_GENERATE_STATUS.Success
+                            }
+                            list
+                          />
+                          <BeforeYouDownloadDropdown page={pageType.LIST} />
+                        </>
+                      )}
                       <MedicationsListSort
                         value={selectedSortOption}
                         sortRxList={sortRxList}
@@ -594,6 +608,19 @@ const Prescriptions = () => {
                         selectedSortOption={selectedSortOption}
                         updateLoadingStatus={updateLoadingStatus}
                       />
+                      {showFilterContent && (
+                        <>
+                          <BeforeYouDownloadDropdown page={pageType.LIST} />
+                          <PrintDownload
+                            onDownload={handleFullListDownload}
+                            isSuccess={
+                              pdfTxtGenerateStatus.status ===
+                              PDF_TXT_GENERATE_STATUS.Success
+                            }
+                            list
+                          />
+                        </>
+                      )}
                     </div>
                   ) : (
                     <></>

src/applications/mhv-medications/sass/medications.scss

@@ -153,6 +153,10 @@
 .renew-card-details > p {
   margin: 0px;
 }
+//fixed misaligned icon for filter component
+#filter > span {
+  vertical-align: top;
+}
 
 .pagination {
   max-width: 500px;

src/applications/mhv-medications/tests/components/MedicationsList/MedicationsListFilter.unit.spec.jsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import MedicationsListFilter from '../../../components/MedicationsList/MedicationsListFilter';
+
+describe('Medicaitons List Filter component', () => {
+  const setup = () => {
+    return render(<MedicationsListFilter />);
+  };
+
+  it('renders without errors', () => {
+    const screen = setup();
+    expect(screen);
+  });
+
+  it('renders accordion', () => {
+    const screen = setup();
+    const accordion = screen.getByTestId('filter-accordion');
+    expect(accordion).to.exist;
+  });
+});

src/applications/mhv-medications/tests/containers/Prescriptions.unit.spec.jsx

@@ -313,4 +313,30 @@ describe('Medications Prescriptions container', () => {
       'If you print or download this list, we’ll include a list of your allergies.',
     );
   });
+  it('displays filter accordion if mhv_medications_display_filter feature flag is set to true', async () => {
+    const screen = setup({
+      ...initialState,
+      breadcrumbs: {
+        list: [],
+      },
+      featureToggles: {
+        // eslint-disable-next-line camelcase
+        mhv_medications_display_filter: true,
+      },
+    });
+    expect(await screen.getByTestId('filter-accordion')).to.exist;
+  });
+  it('does not display filter accordion if mhv_medications_display_filter feature flag is set to false', async () => {
+    const screen = setup({
+      ...initialState,
+      breadcrumbs: {
+        list: [],
+      },
+      featureToggles: {
+        // eslint-disable-next-line camelcase
+        mhv_medications_display_filter: false,
+      },
+    });
+    expect(await screen.queryByTestId('filter-accordion')).to.not.exist;
+  });
 });

src/applications/mhv-medications/tests/e2e/medications-filter-accordion-list-page.cypress.spec.js

@@ -0,0 +1,18 @@
+import MedicationsSite from './med_site/MedicationsSite';
+import MedicationsLandingPage from './pages/MedicationsLandingPage';
+import MedicationsListPage from './pages/MedicationsListPage';
+
+describe('Medications List Page Filter', () => {
+  it('visits Medications List Page Filter Accordion', () => {
+    const site = new MedicationsSite();
+    const listPage = new MedicationsListPage();
+    const landingPage = new MedicationsLandingPage();
+    site.login();
+    landingPage.visitLandingPageURL();
+    cy.injectAxe();
+    cy.axeCheck('main');
+    listPage.clickGotoMedicationsLink();
+    listPage.verifyMedicationsListHeaderTextOnListPage();
+    listPage.verifyFilterAccordionOnMedicationsListPage();
+  });
+});

src/applications/mhv-medications/tests/e2e/medications-list-page-link-to-prescription-refill-page.cypress.spec.js

@@ -13,6 +13,7 @@ describe('Medications List Page Refill Prescriptions Link', () => {
     site.login();
     landingPage.visitLandingPageURL();
     listPage.clickGotoMedicationsLink();
+    listPage.verifyRefillPageLinkTextOnMedicationsListPage();
     refillPage.loadRefillPage(prescriptions);
     cy.injectAxe();
     cy.axeCheck('main');

src/applications/mhv-medications/tests/e2e/pages/MedicationsListPage.js

@@ -251,7 +251,7 @@ class MedicationsListPage {
       'Download a text file',
     );
     cy.get('[data-testid="download-txt-button"]').click({
-      waitForAnimations: true,
+      force: true,
     });
   };
 
@@ -677,6 +677,21 @@ class MedicationsListPage {
       'Go to your allergies and reactions',
     );
   };
+
+  verifyRefillPageLinkTextOnMedicationsListPage = () => {
+    cy.get('[data-testid="prescriptions-nav-link-to-refill"]').should(
+      'contain',
+      'Start a refill request',
+    );
+  };
+
+  verifyMedicationsListHeaderTextOnListPage = () => {
+    cy.get('[data-testid="med-list"]').should('have.text', 'Medications list');
+  };
+
+  verifyFilterAccordionOnMedicationsListPage = () => {
+    cy.get('[data-testid="filter-accordion"]').should('be.visible');
+  };
 }
 
 export default MedicationsListPage;