Merge pull request #313 from DTS-STN/dev

Update Main with latest changes from dev (June 30th)
DTS-STN · Jul 4, 2023 · 42da4b2 · 42da4b2
2 parents d788d05 + 6bc538d
commit 42da4b2
Show file tree

Hide file tree

Showing 34 changed files with 274 additions and 222 deletions.
diff --git a/__tests__/pages/login.test.js b/__tests__/pages/login.test.js
@@ -11,6 +11,13 @@ jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }))
 
+//mock auth function
+jest.mock('../../lib/auth', () => ({
+  AuthIsDisabled: () => {
+    return true
+  },
+}))
+
 describe('login page', () => {
   /* Place-holder Meta Data Props */
   const meta = {

diff --git a/components/BackToButton.js b/components/BackToButton.js
@@ -9,7 +9,7 @@ export default function BackToButton(props) {
           <a
             id={props.buttonId}
             className="inline-block my-4 py-2.5 px-3.5 font-display text-xl rounded bg-gray-30a text-deep-blue-60b hover:bg-gray-50a hover:cursor-pointer focus:ring focus:ring-offset-4 ring-deep-blue-60f"
-            data-gc-analytics-customclick={`${props.refPageAA}:${props.buttonLinkText}`}
+            data-gc-analytics-customclick={`${props.refPageAA}:${props.id}`}
           >
             {props.buttonLinkText}
           </a>

diff --git a/components/BenefitTasks.js b/components/BenefitTasks.js
@@ -47,7 +47,7 @@ export default function BenefitTasks(props) {
                       props.openModal(task.link, 'betaModal')
                     }
                   }}
-                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.title}`}
+                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.id}`}
                   className="flex items-center underline py-1 text-deep-blue-dark hover:text-blue-hover"
                 >
                   <FontAwesomeIcon

diff --git a/components/Card.js b/components/Card.js
@@ -7,7 +7,7 @@ export default function Card(props) {
 
   return (
     <div className="border rounded border-gray-300 shadow my-6" data-cy="cards">
-      <h2 className="py-4 md:py-9 md:mt-2 px-3 sm:px-8 md:px-15 text-4xl font-display font-bold">
+      <h2 className="py-4 md:py-8 md:mt-2 px-3 sm:px-8 md:px-15 text-4xl font-display font-bold">
         {props.cardTitle}
       </h2>
       <ViewMoreLessButton
@@ -21,9 +21,10 @@ export default function Card(props) {
         ariaExpanded={isOpen.toString()}
         icon={isOpen}
         caption={props.viewMoreLessCaption}
-        className="pb-6 md:pb-12 md:pt-0.5 px-3 sm:px-8 md:px-15"
+        className="pb-6 md:pb-8 md:pt-4 px-3 sm:px-8 md:px-15 w-full"
         acronym={props.acronym}
         refPageAA={props.refPageAA}
+        ariaLabel={props.cardTitle}
       />
       {!isOpen ? null : (
         <div className="pb-6" data-cy="sectionList">

diff --git a/components/ExitBeta.js b/components/ExitBeta.js
@@ -23,7 +23,7 @@ export default function ExitBeta(props) {
           type="button"
           aria-label={props.closeModalAria}
           onClick={props.closeModal}
-          data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:Close-Fermer`}
+          data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:Close`}
         >
           <FontAwesomeIcon aria-hidden="true" icon={solid('xmark')} size="xl" />
         </button>
@@ -41,13 +41,12 @@ export default function ExitBeta(props) {
         />
         {/* Using anchor tag due to ref errors
         continueLink is always external so NextJS routing can be ignored */}
-        <a href={props.continueLink}>
-          <Button
-            className="w-full block mt-6 md:mt-0 md:w-fit"
-            id={props.popupPrimaryBtn.id}
-            styling="primary"
-            text={props.popupPrimaryBtn.text}
-          />
+        <a
+          href={props.continueLink}
+          id={props.popupPrimaryBtn.id}
+          className="flex justify-center align-middle text-lg py-2 px-4 mt-6 bg-deep-blue-medium text-white font-body rounded focus:ring-offset-4 focus:ring-4 focus:ring-deep-blue-focus focus:bg-deep-blue-focus hover:bg-deep-blue-light md:mt-auto"
+        >
+          {props.popupPrimaryBtn.text}
         </a>
       </div>
     </div>

diff --git a/components/Layout.js b/components/Layout.js
@@ -6,7 +6,6 @@ import {
 } from '@dts-stn/service-canada-design-system'
 import { useState, cloneElement } from 'react'
 import MetaData from './MetaData'
-import { signOut } from 'next-auth/react'
 import PhaseBanner from './PhaseBanner'
 import en from '../locales/en'
 import fr from '../locales/fr'
@@ -23,7 +22,6 @@ export default function Layout(props) {
   const [openModalWithLink, setOpenModalWithLink] = useState({
     activeLink: '/',
     context: null,
-    contentLabel: null,
   })
 
   const openModal = (link, context) => {
@@ -32,7 +30,6 @@ export default function Layout(props) {
         isOpen: true,
         activeLink: link,
         context,
-        contentLabel: null,
       }
     })
   }
@@ -43,7 +40,6 @@ export default function Layout(props) {
         isOpen: false,
         activeLink: '/',
         context: null,
-        contentLabel: null,
       }
     })
   }
@@ -61,9 +57,7 @@ export default function Layout(props) {
           bannerLinkHref={props.bannerContent.bannerLinkHref || ''}
           bannerButtonText={props.bannerContent.bannerButtonText || ''}
           bannerButtonLink={props.bannerContent.bannerButtonLink || ''}
-          bannerButtonExternalText={
-            props.bannerContent.bannerButtonExternalText || ''
-          }
+          id={props.bannerContent.id || ''}
           bannerButtonExternalLink
           icon={props.bannerContent.icon || ''}
           popupContent={props.popupContent || ''}
@@ -97,12 +91,10 @@ export default function Layout(props) {
           props.children.props.aaPrefix
         }
         menuProps={{
-          onSignOut: () => {
-            signOut()
-          },
           menuList: [
             {
               key: 'dashKey',
+              id: 'dash',
               value: t.menuItems.dashboard,
               path: `${
                 props.locale === 'en'
@@ -113,12 +105,14 @@ export default function Layout(props) {
             },
             {
               key: 'profileKey',
+              id: 'profile',
               value: t.menuItems.profile,
               path: `${props.locale === 'en' ? '/en/profile' : '/fr/profil'}`,
               component: Link,
             },
             {
               key: 'securityKey',
+              id: 'security',
               value: t.menuItems.security,
               path: `${
                 props.locale === 'en'
@@ -129,6 +123,7 @@ export default function Layout(props) {
             },
             {
               key: 'contactKey',
+              id: 'contact',
               value: t.menuItems.contactUs,
               path: `${
                 props.locale === 'en' ? '/en/contact-us' : '/fr/contactez-nous'
@@ -137,6 +132,7 @@ export default function Layout(props) {
             },
             {
               key: 'signOutKey',
+              id: 'signOut',
               value: t.menuItems.signOut,
               path: '/auth/logout',
               component: Link,

diff --git a/components/MostReqTasks.js b/components/MostReqTasks.js
@@ -24,8 +24,8 @@ export default function MostReqTasks(props) {
                       props.openModal(task.link, 'betaModal')
                     }
                   }}
-                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.title}`}
-                  className="flex items-center underline pl-2 text-white hover:text-gray-50a"
+                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.id}`}
+                  className="flex items-center underline pl-2 text-white hover:text-gray-50a  focus:outline-1 focus:outline-white"
                 >
                   <FontAwesomeIcon
                     icon={

diff --git a/components/MultiModal.js b/components/MultiModal.js
@@ -20,7 +20,7 @@ export default function MultiModal(props) {
   } = props
 
   const [timer, setTimer] = useState({ seconds: 0, minutes: 0 })
-  let modalBody
+  let modalBody, contentLabel
 
   const handleOnIdle = () => {
     Router.push('/auth/logout')
@@ -67,6 +67,7 @@ export default function MultiModal(props) {
           refPageAA={aaPrefix}
         />
       )
+      contentLabel = popupContentNA.popupTitle
       break
     case 'betaBannerModal':
       modalBody = (
@@ -82,6 +83,7 @@ export default function MultiModal(props) {
           refPageAA={aaPrefix}
         />
       )
+      contentLabel = popupContent.popupTitle
       break
     case 'countDown':
       modalBody = (
@@ -96,6 +98,7 @@ export default function MultiModal(props) {
           refPageAA={aaPrefix}
         />
       )
+      contentLabel = popupStaySignedIn.bannerHeading
       break
     default:
       // code block
@@ -108,7 +111,7 @@ export default function MultiModal(props) {
         className="flex justify-center bg-black/75 h-full"
         isOpen={openModalWithLink.context != null}
         onRequestClose={closeModal}
-        contentLabel={openModalWithLink.contentLabel}
+        contentLabel={contentLabel}
       >
         <FocusOn enabled={openModalWithLink.context != null}>
           {modalBody}

diff --git a/components/PageLink.js b/components/PageLink.js
@@ -21,7 +21,7 @@ export default function PageLink(props) {
             <a
               id={`link-for-${linkID}`}
               data-cy={props.dataCy}
-              data-gc-analytics-customclick={`${props.refPageAA}:${props.linkText}`}
+              data-gc-analytics-customclick={`${props.refPageAA}:${props.linkId}`}
               className="text-blue-default hover:text-blue-hover visited:text-purple-medium underline"
             >
               {props.linkText}
@@ -35,6 +35,7 @@ export default function PageLink(props) {
           buttonId={props.buttonId}
           buttonLinkText={props.buttonLinkText}
           refPageAA={props.refPageAA}
+          id={props.dashId}
         />
       </div>
     </>

diff --git a/components/PhaseBanner.js b/components/PhaseBanner.js
@@ -31,7 +31,7 @@ export default function PhaseBanner(props) {
             rel={
               props.bannerButtonExternalLink ? 'noopener noreferrer' : undefined
             }
-            data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:${props.bannerButtonExternalText}`}
+            data-gc-analytics-customclick={`ESDC-EDSC:${props.refPageAA}:${props.id}`}
           >
             <span className="mr-2 underline">{props.bannerLink}</span>
             {props.bannerButtonExternalLink && (

diff --git a/components/ProfileTasks.js b/components/ProfileTasks.js
@@ -10,6 +10,7 @@ export default function ProfileTasks(props) {
       <ul
         className="w-full grid md:grid-cols-1 items-center pt-3"
         data-cy="task"
+        aria-label={props.programTitle}
       >
         {props.tasks.map((task, index) => {
           return (
@@ -24,7 +25,7 @@ export default function ProfileTasks(props) {
                       props.openModal(task.link, 'betaModal')
                     }
                   }}
-                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.title}`}
+                  data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:${task.id}`}
                 >
                   <FontAwesomeIcon
                     icon={

diff --git a/components/ViewMoreLessButton.js b/components/ViewMoreLessButton.js
@@ -6,30 +6,31 @@ export default function ViewMoreLessButton(props) {
   return (
     <button
       className={
-        'text-xl leading-8 text-deep-blue-60d hover:text-blue-hover ' +
+        'text-xl leading-8 text-deep-blue-60d hover:text-blue-hover focus:text-blue-hover ' +
         props.className
       }
       data-cy={props.dataCy}
       onClick={props.onClick}
       id={props.id}
       data-testid={props.dataTestid}
       aria-expanded={props.ariaExpanded ?? undefined}
+      aria-label={props.ariaLabel}
     >
       <div className="flex sm:items-center">
         {props.icon ? (
           <FontAwesomeIcon
             icon={solid('circle-chevron-up')}
             className={`text-46px pr-3`}
-            data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:Contract-Diminuer`}
+            data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:Contract`}
           />
         ) : (
           <FontAwesomeIcon
             icon={solid('circle-chevron-down')}
             className={`text-46px pr-3`}
-            data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:Expand-Etendre`}
+            data-gc-analytics-customclick={`${props.refPageAA} ${props.acronym}:Expand`}
           />
         )}
-        <span className="text-left underline font-body">{props.caption}</span>
+        <span className="text-left font-body">{props.caption}</span>
       </div>
     </button>
   )
@@ -44,4 +45,5 @@ ViewMoreLessButton.propTypes = {
   ariaExpanded: propTypes.string,
   className: propTypes.string,
   dataCy: propTypes.string,
+  ariaLabel: propTypes.string,
 }
diff --git a/components/sessionModals/SessionTimeout.js b/components/sessionModals/SessionTimeout.js
diff --git a/cypress/e2e/Login.cy.js b/cypress/e2e/Login.cy.js
@@ -0,0 +1,18 @@
+/**This and the logout tests currently only test that the page is accessible and reachable.
+It does not test the authentication functionality currently since those endpoints are on prem only at this time. **/
+
+beforeEach(() => {
+  cy.visit('/auth/login')
+})
+
+describe('Validate login page', () => {
+  it('Lands on login page and displays loading spinner', () => {
+    cy.get('[data-cy="loading-spinner"]')
+      .should('be.visible')
+      .and('have.text', 'Loading / Chargement en cours ...')
+  })
+  it('Redirects to dashboard', () => {
+    cy.wait(2000)
+    cy.url().should('contains', '/my-dashboard')
+  })
+})