From 150f0d4d50d1baf49a45b29ce63c22a8b8117cff Mon Sep 17 00:00:00 2001
From: Zachary Rogers <zrogers>
Date: Tue, 17 Sep 2024 11:13:49 -0700
Subject: [PATCH] 10339: Update data test ids for accordion

---
 .../accessibility/dashboard/petitioner.cy.ts      |  2 +-
 .../file-a-petition-intro.cy.ts                   | 12 +++++++-----
 web-client/src/styles/overrides.scss              | 10 ----------
 web-client/src/ustc-ui/Accordion/Accordion.tsx    |  6 ++++++
 web-client/src/views/BeforeStartingCase.tsx       | 15 +++++++++++----
 .../src/views/Dashboards/FilingFeeOptions.tsx     |  1 +
 6 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/cypress/local-only/tests/accessibility/dashboard/petitioner.cy.ts b/cypress/local-only/tests/accessibility/dashboard/petitioner.cy.ts
index bbd061c4619..1a24eb8efb5 100644
--- a/cypress/local-only/tests/accessibility/dashboard/petitioner.cy.ts
+++ b/cypress/local-only/tests/accessibility/dashboard/petitioner.cy.ts
@@ -14,7 +14,7 @@ describe('Dashboard - Petitioner Accessibility', () => {
 
   it('should be free of a11y issues when viewing payment options', () => {
     loginAsPetitioner();
-    cy.get('.payment-options').click();
+    cy.get('[data-testid="other-options"]').click();
     cy.get('a.usa-link--external').should('exist');
 
     checkA11y();
diff --git a/cypress/local-only/tests/integration/fileAPetitionUpdated/file-a-petition-intro.cy.ts b/cypress/local-only/tests/integration/fileAPetitionUpdated/file-a-petition-intro.cy.ts
index d8f048f8c6d..9b3fd978935 100644
--- a/cypress/local-only/tests/integration/fileAPetitionUpdated/file-a-petition-intro.cy.ts
+++ b/cypress/local-only/tests/integration/fileAPetitionUpdated/file-a-petition-intro.cy.ts
@@ -51,11 +51,13 @@ describe('File a petition: Intro', () => {
         cy.get('[data-testid="deadline-to-file"]').contains(
           'If you received a notice in the mail from the IRS',
         );
-        cy.get('[data-testid="accordion-item-title"]').contains(
+        cy.get('[data-testid="are-you-filing-jointly-with-a-spouse"]').contains(
           'Are you filing jointly with a spouse?',
         );
 
-        cy.get('[data-testid="accordion-item-title"]').eq(0).click();
+        cy.get('[data-testid="are-you-filing-jointly-with-a-spouse"]')
+          .eq(0)
+          .click();
         cy.get('[data-testid="filing-jointly-accordion-item"]').contains(
           "To file a joint Petition with your spouse, you must have the spouse's consent",
         );
@@ -118,9 +120,9 @@ describe('File a petition: Intro', () => {
         cy.get('[data-testid="deadline-to-file"]').contains(
           'If the petitioner received a notice in the mail from the IRS',
         );
-        cy.get('[data-testid="accordion-item-title"]')
-          .contains('Is the petitioner filing jointly with a spouse?')
-          .should('not.exist');
+        cy.get('[data-testid="are-you-filing-jointly-with-a-spouse"]').should(
+          'not.exist',
+        );
       });
     });
   });
diff --git a/web-client/src/styles/overrides.scss b/web-client/src/styles/overrides.scss
index 4537aa5bfd4..e15c89c43d8 100644
--- a/web-client/src/styles/overrides.scss
+++ b/web-client/src/styles/overrides.scss
@@ -336,15 +336,6 @@ p {
   margin-top: 10px;
 }
 
-.payment-options {
-  .usa-accordion__button {
-    padding: 3px;
-    font-family: $font-source-sans;
-    font-size: 17px;
-    font-weight: normal;
-  }
-}
-
 .other-filing-option {
   .usa-accordion__button {
     padding: 3px;
@@ -364,7 +355,6 @@ p {
   padding-top: 20px;
   border-top: 1px solid #dfe1e2;
   margin-bottom: 15px;
-  
 }
 
 .usa-alert__text:only-child {
diff --git a/web-client/src/ustc-ui/Accordion/Accordion.tsx b/web-client/src/ustc-ui/Accordion/Accordion.tsx
index d314b43d921..123490e8629 100644
--- a/web-client/src/ustc-ui/Accordion/Accordion.tsx
+++ b/web-client/src/ustc-ui/Accordion/Accordion.tsx
@@ -5,9 +5,11 @@ import classNames from 'classnames';
 export const Accordion = ({
   children,
   className,
+  dataTestId,
   ...props
 }: {
   children: ReactNode;
+  dataTestId?: string;
   className?: string;
 } & HTMLAttributes<HTMLDivElement>) => {
   return (
@@ -18,6 +20,7 @@ export const Accordion = ({
         'usa-accordion',
         'usa-accordion--multiselectable',
       )}
+      data-testid={dataTestId}
       {...props}
     >
       {children}
@@ -28,10 +31,12 @@ export const Accordion = ({
 export const AccordionItem = ({
   children,
   contentClassName,
+  dataTestId,
   headerClassName,
   initiallyOpen = false,
   title,
 }: {
+  dataTestId?: string;
   initiallyOpen?: boolean;
   headerClassName?: string;
   contentClassName?: string;
@@ -52,6 +57,7 @@ export const AccordionItem = ({
             'accordion-title',
             headerClassName,
           )}
+          data-testid={dataTestId}
           onClick={() => {
             setIsOpen(!isOpen);
           }}
diff --git a/web-client/src/views/BeforeStartingCase.tsx b/web-client/src/views/BeforeStartingCase.tsx
index 258cd4f43b0..f7e8c4ab975 100644
--- a/web-client/src/views/BeforeStartingCase.tsx
+++ b/web-client/src/views/BeforeStartingCase.tsx
@@ -204,7 +204,7 @@ export const BeforeStartingCase = connect(
               {isPetitioner ? 'your' : 'the'} case may be dismissed.
             </div>
           </div>
-          <CaseInfoAccordion isPetitioner={isPetitioner} />
+          <BeforeStartingCaseAccordion isPetitioner={isPetitioner} />
           <Button
             className="before-case-button"
             data-testid="go-to-step-1"
@@ -252,12 +252,19 @@ export const BeforeStartingCase = connect(
 
 BeforeStartingCase.displayName = 'BeforeStartingCase';
 
-function CaseInfoAccordion({ isPetitioner }: { isPetitioner: boolean }) {
+function BeforeStartingCaseAccordion({
+  isPetitioner,
+}: {
+  isPetitioner: boolean;
+}) {
   return (
     <div className="grid-row grid-gap">
-      <Accordion>
+      <Accordion dataTestId="before-starting-case-accordion">
         {isPetitioner && (
-          <AccordionItem title="Are you filing jointly with a spouse?">
+          <AccordionItem
+            dataTestId="are-you-filing-jointly-with-a-spouse"
+            title="Are you filing jointly with a spouse?"
+          >
             <div data-testid="filing-jointly-accordion-item">
               {
                 "To file a joint Petition with your spouse, you must have the spouse's consent. If you do not have your spouse's consent, select “Myself” as the person who is filing."
diff --git a/web-client/src/views/Dashboards/FilingFeeOptions.tsx b/web-client/src/views/Dashboards/FilingFeeOptions.tsx
index b80f11ecf0a..ed65c46e765 100644
--- a/web-client/src/views/Dashboards/FilingFeeOptions.tsx
+++ b/web-client/src/views/Dashboards/FilingFeeOptions.tsx
@@ -34,6 +34,7 @@ export const FilingFeeOptions = function () {
         <Accordion>
           <AccordionItem
             contentClassName="bg-gray padding-x-0"
+            dataTestId="other-options"
             headerClassName="padding-0"
             title="Other options"
           >