From 18a63f57910d88cb0f9071ea5524dd855274110b Mon Sep 17 00:00:00 2001
From: Shanthi Tammana <shanthi.t@wevoteeducation.org>
Date: Fri, 22 Nov 2024 13:14:51 -0800
Subject: [PATCH] Added id's to footer links and Ready page web elements

---
 .../components/Widgets/SnackNotifier.jsx      |  5 ++++-
 .../Intro/FriendInvitationOnboardingIntro.jsx |  4 ++--
 .../FriendInvitationOnboardingValues.jsx      |  2 +-
 .../Navigation/FooterCandidateList.jsx        |  4 ++--
 .../Navigation/FooterMainWeVote.jsx           |  4 ++--
 .../Navigation/SettingsSectionFooter.jsx      | 10 ++++-----
 src/js/components/Ready/ReadyFinePrint.jsx    | 18 +++++++--------
 src/js/components/Ready/ReadyIntroduction.jsx | 22 +++++++++----------
 src/js/components/Values/IssueCard.jsx        | 11 +++++-----
 .../Values/IssueFollowToggleButton.jsx        | 13 ++++++++---
 .../components/Values/IssueImageDisplay.jsx   |  2 +-
 src/js/components/Widgets/ShowMoreButtons.jsx |  2 +-
 12 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/src/js/common/components/Widgets/SnackNotifier.jsx b/src/js/common/components/Widgets/SnackNotifier.jsx
index 397411a23..997cc3822 100644
--- a/src/js/common/components/Widgets/SnackNotifier.jsx
+++ b/src/js/common/components/Widgets/SnackNotifier.jsx
@@ -34,7 +34,7 @@ class SnackNotifier extends Component {
     });
   };
 
-  openSnackbar = ({ message, severity, duration }) => {
+  openSnackbar = ({ id, message, severity, duration }) => {
     const autoHideDuration = duration || 3000;
     if (!message) {
       // eslint-disable-next-line no-param-reassign
@@ -42,6 +42,9 @@ class SnackNotifier extends Component {
       if (message && message.length === 0) {
         return;
       }
+      if (id) {
+        return;
+      }
     }
     AppObservableStore.setPendingSnackMessage('');
     if (!severity) {
diff --git a/src/js/components/Intro/FriendInvitationOnboardingIntro.jsx b/src/js/components/Intro/FriendInvitationOnboardingIntro.jsx
index f23e1c799..de8265f7c 100644
--- a/src/js/components/Intro/FriendInvitationOnboardingIntro.jsx
+++ b/src/js/components/Intro/FriendInvitationOnboardingIntro.jsx
@@ -153,7 +153,7 @@ class FriendInvitationOnboardingIntro extends Component {
             </>
           )}
         </FriendInvitationTopHeader>
-        <FriendInvitationIntroHeader className="FriendInvitationIntroHeader">
+        <FriendInvitationIntroHeader id="WeVotehelpsyouListHeaderText" className="FriendInvitationIntroHeader">
           WeVote helps you:
         </FriendInvitationIntroHeader>
         <FriendInvitationListWrapper>
@@ -184,7 +184,7 @@ class FriendInvitationOnboardingIntro extends Component {
                   Make a plan for casting your vote. See your entire ballot. Find your polling location.
                 </StepText>
               ) : (
-                <StepText onClick={this.onClickShowAllStepOne}>
+                <StepText id="BeconfidentinyourchoicesHeader" onClick={this.onClickShowAllStepOne}>
                   {showCountDownDays ? (
                     <>
                       There are
diff --git a/src/js/components/Intro/FriendInvitationOnboardingValues.jsx b/src/js/components/Intro/FriendInvitationOnboardingValues.jsx
index 02c10e8b8..b35c8d167 100644
--- a/src/js/components/Intro/FriendInvitationOnboardingValues.jsx
+++ b/src/js/components/Intro/FriendInvitationOnboardingValues.jsx
@@ -62,7 +62,7 @@ class FriendInvitationOnboardingValues extends Component {
               Opinions will be highlighted on your ballot based on what you follow. Follow as many values/issues...
               {' '}
               (
-              <span className="u-cursor--pointer u-link-color">
+              <span id="showmorelink" className="u-cursor--pointer u-link-color">
                 show more
               </span>
               )
diff --git a/src/js/components/Navigation/FooterCandidateList.jsx b/src/js/components/Navigation/FooterCandidateList.jsx
index 89a384eea..69837f862 100644
--- a/src/js/components/Navigation/FooterCandidateList.jsx
+++ b/src/js/components/Navigation/FooterCandidateList.jsx
@@ -11,7 +11,7 @@ export default function FooterCandidateList () {
   let stateNamePhraseLowerCase;
   return (
     <FooterCandidateListWrapper>
-      <SimpleModeTitle>
+      <SimpleModeTitle id="whosrunningforofficesectiontitle">
         Who&apos;s running for office?
       </SimpleModeTitle>
       {stateNameList.map((stateName) => {
@@ -21,7 +21,7 @@ export default function FooterCandidateList () {
         // console.log('tempStateCode:', tempStateCode, ', stateAlreadySelected:', stateAlreadySelected);
         return (
           <SimpleModeItemWrapper key={stateCode}>
-            <Link className="u-link-color" to={`/${stateNamePhraseLowerCase}/cs/`}>
+            <Link id={`${stateNamePhraseLowerCase}_Link`} className="u-link-color" to={`/${stateNamePhraseLowerCase}/cs/`}>
               {stateName}
               {' '}
               candidates
diff --git a/src/js/components/Navigation/FooterMainWeVote.jsx b/src/js/components/Navigation/FooterMainWeVote.jsx
index dc6e1f23d..ae42dc5f6 100644
--- a/src/js/components/Navigation/FooterMainWeVote.jsx
+++ b/src/js/components/Navigation/FooterMainWeVote.jsx
@@ -103,7 +103,7 @@ class FooterMainWeVote extends Component {
             <OneRow>
               {isWebApp() ? (
                 <>
-                  <Link to="/more/faq" className={classes.link}>
+                  <Link id="footerlinkAboutFAQ" to="/more/faq" className={classes.link}>
                     About &amp; FAQ
                   </Link>
                   <RowSpacer />
@@ -159,7 +159,7 @@ class FooterMainWeVote extends Component {
           </TopSectionInnerWrapper>
         </TopSectionOuterWrapper>
         <BottomSection>
-          <Text>
+          <Text id="wevotefootertext">
             <WeVoteName>
               WeVote
             </WeVoteName>
diff --git a/src/js/components/Navigation/SettingsSectionFooter.jsx b/src/js/components/Navigation/SettingsSectionFooter.jsx
index 1549238e3..32045d2b8 100644
--- a/src/js/components/Navigation/SettingsSectionFooter.jsx
+++ b/src/js/components/Navigation/SettingsSectionFooter.jsx
@@ -73,9 +73,9 @@ class SettingsSectionFooter extends Component {
     return (
       <Wrapper>
         <OneRow centered={centered}>
-          <span className="u-cursor--pointer u-link-color-on-hover" onClick={this.openHowItWorksModal}><TermsAndPrivacyText id = "footerLinkHowItWorks">How&nbsp;It&nbsp;Works</TermsAndPrivacyText></span>
+          <span className="u-cursor--pointer u-link-color-on-hover" onClick={this.openHowItWorksModal}><TermsAndPrivacyText id="footerLinkHowItWorks">How&nbsp;It&nbsp;Works</TermsAndPrivacyText></span>
           <span style={{ paddingLeft: 15 }} />
-          <Link to="/more/faq"><TermsAndPrivacyText id = "footerLinkAbout&FAQ">About&nbsp;&amp;&nbsp;FAQ</TermsAndPrivacyText></Link>
+          <Link to="/more/faq"><TermsAndPrivacyText id="footerLinkAbout&FAQ">About&nbsp;&amp;&nbsp;FAQ</TermsAndPrivacyText></Link>
         </OneRow>
         <OneRow centered={centered}>
           <OpenExternalWebSite
@@ -87,9 +87,9 @@ class SettingsSectionFooter extends Component {
             )}
           />
           <span style={{ paddingLeft: 15 }} />
-          <Link to="/privacy"><TermsAndPrivacyText id = "footerLinkPrivacy">Privacy</TermsAndPrivacyText></Link>
+          <Link to="/privacy"><TermsAndPrivacyText id="footerLinkPrivacy">Privacy</TermsAndPrivacyText></Link>
           <span style={{ paddingLeft: 15 }} />
-          <Link to="/more/terms"><TermsAndPrivacyText id = "footerLinkTerms">Terms</TermsAndPrivacyText></Link>
+          <Link to="/more/terms"><TermsAndPrivacyText id="footerLinkTerms">Terms</TermsAndPrivacyText></Link>
         </OneRow>
         <OneRow centered={centered}>
           {(isWebApp() && !inPrivateLabelMode) && (
@@ -122,7 +122,7 @@ class SettingsSectionFooter extends Component {
           )}
         </OneRow>
         {(isCordova() || !inPrivateLabelMode) && (
-          <DoesNotSupport centered={centered} id = "profileSideBarText">
+          <DoesNotSupport centered={centered} id="profileSideBarText">
             WeVote does not support or oppose any political candidate or party.
           </DoesNotSupport>
         )}
diff --git a/src/js/components/Ready/ReadyFinePrint.jsx b/src/js/components/Ready/ReadyFinePrint.jsx
index 63fa803b3..81fc581b3 100644
--- a/src/js/components/Ready/ReadyFinePrint.jsx
+++ b/src/js/components/Ready/ReadyFinePrint.jsx
@@ -55,14 +55,14 @@ class ReadyFinePrint extends Component {
     return (
       <OuterWrapper>
         <InnerWrapper>
-          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.introHeaderRef}>
+          <IntroHeader id="thefineprintheadertext" titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.introHeaderRef}>
             The fine print:
           </IntroHeader>
           <ListWrapper>
             <ListMaxWidth>
               <ListTitleRow onClick={this.contentUnfurledLink}>
-                <Dot><StepNumber>a</StepNumber></Dot>
-                <StepTitle>You cannot cast your vote electronically</StepTitle>
+                <Dot><StepNumber id="fineprintmenuitema">a</StepNumber></Dot>
+                <StepTitle id="fineprinttextmenuheadera">You cannot cast your vote electronically</StepTitle>
               </ListTitleRow>
               {contentUnfurled && (
                 <ListRow>
@@ -72,8 +72,8 @@ class ReadyFinePrint extends Component {
               )}
 
               <ListTitleRow onClick={this.contentUnfurledLink}>
-                <Dot><StepNumber>b</StepNumber></Dot>
-                <StepTitle>WeVote does not represent a government entity</StepTitle>
+                <Dot><StepNumber id="fineprintmenuitemb">b</StepNumber></Dot>
+                <StepTitle id="fineprinttextmenuheaderb">WeVote does not represent a government entity</StepTitle>
               </ListTitleRow>
               {contentUnfurled && (
                 <ListRow>
@@ -96,8 +96,8 @@ class ReadyFinePrint extends Component {
 
               {(contentUnfurled || showStep3WhenCompressed) && (
                 <ListTitleRow onClick={this.contentUnfurledLink}>
-                  <Dot><StepNumber>c</StepNumber></Dot>
-                  <StepTitle>Please make sure you are registered to vote</StepTitle>
+                  <Dot><StepNumber id="fineprintmenuitemc">c</StepNumber></Dot>
+                  <StepTitle id="fineprinttextmenuheaderc">Please make sure you are registered to vote</StepTitle>
                 </ListTitleRow>
               )}
               {contentUnfurled && (
@@ -111,8 +111,8 @@ class ReadyFinePrint extends Component {
 
               {(contentUnfurled || showStep3WhenCompressed) && (
                 <ListTitleRow onClick={this.contentUnfurledLink}>
-                  <Dot><StepNumber>d</StepNumber></Dot>
-                  <StepTitle>How your data is used &amp; protected</StepTitle>
+                  <Dot><StepNumber id="fineprintstepd">d</StepNumber></Dot>
+                  <StepTitle id="fineprinttextmenuheader4">How your data is used  &amp; protected</StepTitle>
                 </ListTitleRow>
               )}
               {contentUnfurled && (
diff --git a/src/js/components/Ready/ReadyIntroduction.jsx b/src/js/components/Ready/ReadyIntroduction.jsx
index bd13e8e92..4f266e1c1 100644
--- a/src/js/components/Ready/ReadyIntroduction.jsx
+++ b/src/js/components/Ready/ReadyIntroduction.jsx
@@ -95,31 +95,31 @@ class ReadyIntroduction extends Component {
     return (
       <OuterWrapper>
         <InnerWrapper>
-          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.introHeaderRef}>
+          <IntroHeader id="wevotehelpsyouheadertext" titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.introHeaderRef}>
             WeVote helps you:
           </IntroHeader>
           <ListWrapper>
             <ListMaxWidth>
               <ListTitleRow onClick={this.contentUnfurledLink}>
-                <Dot><StepNumber>1</StepNumber></Dot>
-                <StepTitle>Be ready to vote</StepTitle>
+                <Dot><StepNumber id="wevotehelpsyoumenuitem1">1</StepNumber></Dot>
+                <StepTitle id="wevotehelpsyoumenuheader1">Be ready to vote</StepTitle>
               </ListTitleRow>
               {contentUnfurled && (
                 <ListRow>
                   <Dot><StepNumberPlaceholder>&nbsp;</StepNumberPlaceholder></Dot>
                   <StepText id="readyIntroductionStepText1">
                     <button style={{ backgroundColor: 'transparent', border: 'none', padding: '0' }} onClick={this.showSelectBallotModalEditAddress} type="button">
-                      <span className="u-link-color u-link-color-on-hover u-link-underline-on-hover">Enter your address</span>
+                      <span id="EnterAddressText" className="u-link-color u-link-color-on-hover u-link-underline-on-hover">Enter your address</span>
                     </button>
                     {' '}
                     to find out when your next election is, and
                     {' '}
-                    <Link to="/ballot" className="u-link-color">preview your ballot</Link>
+                    <Link to="/ballot" id="previewyourballotlink" className="u-link-color">preview your ballot</Link>
                     .
                     {' '}
                     How are
                     {' '}
-                    <Link to="/findfriends/importcontacts" className="u-link-color">your friends</Link>
+                    <Link to="/findfriends/importcontacts" id="yourfriendslink" className="u-link-color">your friends</Link>
                     {' '}
                     planning to vote?
                   </StepText>
@@ -127,8 +127,8 @@ class ReadyIntroduction extends Component {
               )}
 
               <ListTitleRow onClick={this.contentUnfurledLink}>
-                <Dot><StepNumber>2</StepNumber></Dot>
-                <StepTitle>Be confident in your choices</StepTitle>
+                <Dot><StepNumber id="wevotehelpsyoumenuitem2">2</StepNumber></Dot>
+                <StepTitle id="wevotehelpsyoumenuheader2">Be confident in your choices</StepTitle>
               </ListTitleRow>
               {contentUnfurled && (
                 <ListRow>
@@ -154,8 +154,8 @@ class ReadyIntroduction extends Component {
               )}
               {(contentUnfurled || showStep3WhenCompressed) && (
                 <ListTitleRow onClick={this.contentUnfurledLink}>
-                  <Dot><StepNumber>3</StepNumber></Dot>
-                  <StepTitle>Help friends &amp; amplify your impact</StepTitle>
+                  <Dot><StepNumber id="wevotehelpsyoumenuitem3">3</StepNumber></Dot>
+                  <StepTitle id="wevotehelpsyoumenuheader3">Help friends &amp; amplify your impact</StepTitle>
                 </ListTitleRow>
               )}
               {contentUnfurled && (
@@ -163,7 +163,7 @@ class ReadyIntroduction extends Component {
                   <Dot><StepNumberPlaceholder>&nbsp;</StepNumberPlaceholder></Dot>
                   <StepText id="readyIntroductionStepText3">
                     {isWebApp() || isCordova() ? (
-                      <Link to="/findfriends/importcontacts" className="u-link-color">Invite your friends</Link>
+                      <Link to="/findfriends/importcontacts" id="inviteyourfriendslink" className="u-link-color">Invite your friends</Link>
                     ) : (
                       <>Invite your friends</>
                     )}
diff --git a/src/js/components/Values/IssueCard.jsx b/src/js/components/Values/IssueCard.jsx
index 810a68980..9c111a6c4 100755
--- a/src/js/components/Values/IssueCard.jsx
+++ b/src/js/components/Values/IssueCard.jsx
@@ -197,7 +197,7 @@ class IssueCard extends Component {
 
     const issueTooltip = isMobileScreenSize() ? (<span />) : (
       <Tooltip className="u-z-index-9020" id="issueTooltip">
-        <div>
+        <div id="topictooltipmsg">
           Follow
           {' '}
           {issueDisplayName}
@@ -267,7 +267,7 @@ class IssueCard extends Component {
     );
 
     const issueNameAndCount = (
-      <IssueName>
+      <IssueName id={`${issueDisplayName}_topicName`}>
         {`${issueDisplayName} `}
         {!hideAdvocatesCount && (
           <IssueAdvocatesCount>
@@ -305,7 +305,7 @@ class IssueCard extends Component {
           </IssueAdvocatesImages>
         )}
         {!!(linkedOrganizationCount) && (
-          <LinkedOrganizationCountWrapper>
+          <LinkedOrganizationCountWrapper id="numberofendorsements">
             {numberAbbreviate(linkedOrganizationCount)}
             <CheckWrapper>
               <Check />
@@ -342,7 +342,8 @@ class IssueCard extends Component {
                   {!turnOffIssueImage && (
                     <span>
                       {includeLinkToIssue ? (
-                        <Link to={this.getIssueLink}
+                        <Link
+                              to={this.getIssueLink}
                               className="u-no-underline"
                               tabIndex={-1}
                         >
@@ -416,7 +417,7 @@ class IssueCard extends Component {
           </OverlayTrigger>
           <OverlayTrigger overlay={followersTooltip} placement="top">
             <span>
-              <FollowersWrapper>
+              <FollowersWrapper id="followers">
                 {!!(issueFollowersCount) && (
                   <>
                     {numberAbbreviate(issueFollowersCount)}
diff --git a/src/js/components/Values/IssueFollowToggleButton.jsx b/src/js/components/Values/IssueFollowToggleButton.jsx
index 73113f8e6..d4b95250a 100644
--- a/src/js/components/Values/IssueFollowToggleButton.jsx
+++ b/src/js/components/Values/IssueFollowToggleButton.jsx
@@ -108,7 +108,7 @@ class IssueFollowToggleButton extends Component {
     if (this.props.onIssueFollowFunction) {
       this.props.onIssueFollowFunction(issueWeVoteId);
     }
-    openSnackbar({ message: `Now following ${this.props.issueName}!` });
+    openSnackbar({ id: `${this.props.issueName}_follow`, message: `Now following ${this.props.issueName}!` });
 
     this.setState({
       isFollowing: true,
@@ -133,7 +133,13 @@ class IssueFollowToggleButton extends Component {
     if (this.props.onIssueStopFollowingFunction) {
       this.props.onIssueStopFollowingFunction(issueWeVoteId);
     }
-    openSnackbar({ message: `You've stopped following ${issueName}.`, severity: 'success' });
+    // openSnackbar({id: `${issueName}_unfollow, message: `You've stopped following ${issueName}.`, severity: 'success' });
+    openSnackbar({
+      id: `${issueName}_unfollow`,
+      message: `You've stopped following ${issueName}.`,
+      severity: 'success',
+    });
+
     if (currentBallotIdInUrl !== ballotItemWeVoteId) {
       historyPush(`${urlWithoutHash}#${ballotItemWeVoteId}`);
     }
@@ -171,6 +177,7 @@ class IssueFollowToggleButton extends Component {
         {isFollowing ? (
           <>
             <Button
+              id="checkcircleiconfollowtopic"
               type="button"
               className="issues-follow-btn issues-follow-btn__main issues-follow-btn__icon issues-follow-btn--white issues-followed-btn--disabled"
               disabled
@@ -191,7 +198,7 @@ class IssueFollowToggleButton extends Component {
               id={`toggleFollowMenuButton-${issueWeVoteId}`}
             >
               <ArrowDropDown />
-              <span className="sr-only">Toggle Dropdown</span>
+              <span id="arrowiconfollowtopic" className="sr-only">Toggle Dropdown</span>
             </Button>
             <Menu
               id="follow-menu"
diff --git a/src/js/components/Values/IssueImageDisplay.jsx b/src/js/components/Values/IssueImageDisplay.jsx
index 5db6073e9..bf4942324 100644
--- a/src/js/components/Values/IssueImageDisplay.jsx
+++ b/src/js/components/Values/IssueImageDisplay.jsx
@@ -82,7 +82,7 @@ export default class IssueImageDisplay extends Component {
       );
     }
 
-    return <span className="issue__image-modal"><Suspense fallback={<></>}>{issueImage}</Suspense></span>;
+    return <span id={oneIssue.issue_name} className="issue__image-modal"><Suspense fallback={<></>}>{issueImage}</Suspense></span>;
   }
 }
 IssueImageDisplay.propTypes = {
diff --git a/src/js/components/Widgets/ShowMoreButtons.jsx b/src/js/components/Widgets/ShowMoreButtons.jsx
index ea8782276..a1f7b015a 100644
--- a/src/js/components/Widgets/ShowMoreButtons.jsx
+++ b/src/js/components/Widgets/ShowMoreButtons.jsx
@@ -21,7 +21,7 @@ class ShowMoreButtons extends React.Component {
 
     return (
       <ShowMoreButtonsStyled className="card-child" id={`toggleContentButton-${showMoreId}`} onClick={showMoreButtonsLink}>
-        <ShowMoreButtonsText>
+        <ShowMoreButtonsText id="showmorelink">
           { showMoreText }
           {' '}
           {showMoreButtonWasClicked ? (