QA Fixes: Event Listing Feedback Button, VA Components, I18Next (#611)

department-of-veterans-affairs · Aug 7, 2024 · e4e7c22 · e4e7c22
1 parent 0f7e8c8
commit e4e7c22
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 32 deletions.
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
@@ -19,3 +19,14 @@ body {
   margin-top: 0;
   padding-top: 1.25rem;
 }
+
+.feedback-button {
+  background-color: var(color-primary);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-right: 0;
+  margin-top: 0.3125rem;
+  height: 44px;
+  width: 133px;
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -19,6 +19,14 @@ const Document = () => {
         {/* Preconnect to google tag manager domain */}
         <link rel="preconnect" href="https://www.googletagmanager.com" />
 
+        {/* Add web components */}
+        <link rel="stylesheet" href={`${ASSETS_URL}web-components.css`} />
+        <Script
+          id="web-components"
+          strategy="afterInteractive"
+          src={`${ASSETS_URL}web-components.entry.js`}
+        />
+
         {/* Preload main fonts */}
         <link
           rel="preload"
@@ -75,14 +83,6 @@ const Document = () => {
           href="/img/design/icons/favicon.ico"
         />
 
-        {/* Add web components */}
-        <link rel="stylesheet" href={`${ASSETS_URL}web-components.css`} />
-        <Script
-          id="web-components"
-          strategy="afterInteractive"
-          src={`${ASSETS_URL}web-components.entry.js`}
-        />
-
         {/* Add vendor file */}
         <Script
           id="vendor"

diff --git a/src/templates/common/contentFooter/index.test.tsx b/src/templates/common/contentFooter/index.test.tsx
@@ -32,18 +32,4 @@ describe('ContentFooter Component', () => {
       '2022-03-28'
     )
   })
-
-  test('renders feedback button correctly', () => {
-    render(<ContentFooter />)
-
-    expect(
-      screen.getByRole('button', { name: /feedback/i })
-    ).toBeInTheDocument()
-
-    fireEvent.click(screen.getByRole('button', { name: /feedback/i }))
-    expect(
-      require('@/lib/utils/medallia').getSurveyNumber
-    ).toHaveBeenCalledTimes(1)
-    expect(require('@/lib/utils/medallia').showForm).toHaveBeenCalledTimes(1)
-  })
 })
diff --git a/src/templates/common/contentFooter/index.tsx b/src/templates/common/contentFooter/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { parseDate, getDateParts } from '@/lib/utils/date'
 import { MedalliaAssets } from '@/templates/common/medallia'
 import { getSurveyNumber, showForm } from '@/lib/utils/medallia'
@@ -37,11 +37,8 @@ function FeedbackButton() {
   return (
     <>
       <MedalliaAssets />
-      <button
-        type="button"
-        className="feedback-button usa-button"
+      <va-button
         id="mdFormButton"
-        aria-label="give feedback"
         onClick={() => {
           const isProduction =
             process.env.NEXT_PUBLIC_BUILD_TYPE === BUILD_TYPES.PROD
@@ -51,9 +48,8 @@ function FeedbackButton() {
           )
           showForm(surveyNumber)
         }}
-      >
-        Feedback
-      </button>
+        text="Feedback"
+      ></va-button>
     </>
   )
 }

diff --git a/src/templates/components/newsStoryTeaser/index.tsx b/src/templates/components/newsStoryTeaser/index.tsx
@@ -20,7 +20,9 @@ export const NewsStoryTeaser = ({
       <div className="usa-grid usa-grid-full vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row">
         <div className="usa-width-two-thirds">
           <TitleTag className="vads-u-font-size--md medium-screen:vads-u-font-size--lg medium-screen:vads-u-margin-bottom--0p5">
-            <a href={link}>{title}</a>
+            <va-link href={link} text={title}>
+              {title}
+            </va-link>
           </TitleTag>
           <p className="vads-u-margin-y--0">
             {truncateWordsOrChar(introText, 60, true)}

diff --git a/src/templates/components/pressReleaseTeaser/index.tsx b/src/templates/components/pressReleaseTeaser/index.tsx
@@ -20,7 +20,9 @@ export function PressReleaseTeaser({
     <>
       <section className="vads-u-margin-bottom--4">
         <TitleTag className="vads-u-margin-bottom--1p5 vads-u-font-size--md medium-screen:vads-u-font-size--lg">
-          <a href={link}>{title}</a>
+          <va-link href={link} text={title}>
+            {title}
+          </va-link>
         </TitleTag>
         <strong>{formatDate(lastUpdated)}</strong>
         <p className="vads-u-margin-top--0">