Cleanup of functionality, tests scaffolded (still needs work to complete)

strr-web/components/bcros/existing-accounts-list/ExistingAccountsList.vue

@@ -1,25 +1,30 @@
 <template>
-  <div class="flex flex-col justify-center mb-[32px]">
-    <div v-for="account in accounts" class="bg-white shadow-md">
-      <div :key="account.id" class="mobile:flex-col items-center pb-[24px] flex flex-row justify-space-between mobile:mx-[8px] mx-[32px] mt-[24px] border-b border-bcGovColor-hairlinesOnWhite">
+  <div class="flex flex-col justify-center mb-[32px]" data-cy="existing-accounts-list">
+    <div v-for="account in accounts" :key="account.id" class="bg-white shadow-md">
+      <div
+        class="mobile:flex-col items-center pb-[24px] flex flex-row
+        justify-space-between mobile:mx-[8px] mx-[32px] mt-[24px] border-b border-bcGovColor-hairlinesOnWhite"
+      >
         <div class="flex grow mobile:justify-between mobile:w-full mobile:mb-[16px]">
-          <div><BcrosLetterIcon letter="E" /></div>
+          <div><BcrosLetterIcon :letter="account.label.charAt(0)" /></div>
           <div class="grow pl-[20px]">
             <div class="text-[18px] font-bold">
               {{ account.label }}
             </div>
             <div class="text-[14px]">
-              {{ 
-                account.mailingAddress ? 
-                `${account.mailingAddress.street}, ${account.mailingAddress.city}, ${account.mailingAddress.region} ${account.mailingAddress.postalCode}, ${account.mailingAddress.country}`:
-                '-' 
+              {{
+                account.mailingAddress
+                  ? `${account.mailingAddress.street}, ${account.mailingAddress.city},
+                    ${account.mailingAddress.region} ${account.mailingAddress.postalCode},
+                    ${account.mailingAddress.country}`
+                  : '-'
               }}
             </div>
           </div>
         </div>
         <div class="mobile:w-full">
           <BcrosButtonsPrimary
-            :action="buttonAction"
+            :action="() => chooseButtonAction(account)"
             icon="i-mdi-chevron-right"
             :label="buttonText"
             :text="buttonText"
@@ -32,7 +37,7 @@
   </div>
   <div class="flex justify-center">
     <BcrosButtonsPrimary
-      :action="buttonAction"
+      :action="createButtonAction"
       icon="i-mdi-chevron-right"
       :label="buttonText"
       :text="createAccountButtonText"
@@ -48,7 +53,8 @@ const { accounts } = defineProps<{ accounts: AccountI[] }>()
 const t = useNuxtApp().$i18n.t
 
 const buttonText = t('account.existing-account-section.use-account-button')
-const buttonAction = () => console.log('CLICKED')
+const createButtonAction = () => alert('Creating new Account')
+const chooseButtonAction = (account : AccountI) => alert(`Using Account ID: ${account.label}`)
 
 const createAccountButtonText = t('account.existing-account-section.create-account-button')
 

strr-web/components/bcros/footer/Footer.vue

@@ -1,30 +1,33 @@
 <template>
   <footer
     id="bcros-main-footer"
-    class="h-[54px] flex-[0_0_54px] mobile:flex-[0_0_80px] flex items-center border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer text-sm"
+    class="h-[54px] flex-[0_0_54px] mobile:flex-[0_0_80px] flex items-center border-t-2
+    border-bcGovColor-navDivider bg-bcGovColor-footer text-sm"
     data-cy="footer"
   >
     <div class="m-auto px-4 w-full max-w-[1360px]">
       <nav class="flex flex-grow">
         <ul class="p-0 -ml-2 list-none">
-          <li v-for="link in links" :key="link.text" class="inline-block mr-2 mobile:border-none pr-2 border-r border-blue-200 last:mr-0 last:border-r-0">
+          <li
+            v-for="link in links"
+            :key="link.text"
+            class="inline-block mr-2 mobile:border-none pr-2 border-r border-blue-200 last:mr-0 last:border-r-0"
+          >
             <a
               class="block py-1 px-2 text-white text-[15px] mobile:text-[13px] hover:underline"
               :href="link.href"
               :target="link.newTab ? '_blank' : '_self'"
             >
-
-              <!-- {{ t('header.buttons.createAccount') }} -->
               {{ t(`footer.link.${link.text}`) }}
             </a>
           </li>
         </ul>
         <div class="flex flex-auto justify-end items-center">
           <i class="text-yellow-500">{{ t(`footer.bcApp`) }}</i>
-          <Tooltip
+          <BcrosTooltip
             id="footer-tooltip"
             class="mt-1"
-            :text="`STR UI v${version}`"
+            :text="`STRR UI v${version}`"
             :popper="{
               placement: 'left',
               arrow: true
@@ -33,7 +36,7 @@
             <div class="ml-[15px] icon-container" role="img" aria-label="information">
               <UIcon class="text-2xl text-blue-200" name="i-mdi-information-outline" />
             </div>
-          </Tooltip>
+          </BcrosTooltip>
         </div>
       </nav>
     </div>

strr-web/components/bcros/header/Header.vue

@@ -8,14 +8,19 @@
       id="bcros-main-header__container"
       class="flex flex-wrap content-center m-auto px-4 h-[68px] w-full max-w-[1360px]"
     >
-      <nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center h-[50px] w-full items-center">
+      <nav
+        id="bcros-main-header__container__actions"
+        class="flex flex-wrap content-center h-[50px] w-full items-center"
+      >
         <a id="bcros-main-header__container__actions__home-redirect" class="flex" @click="goToBcrosHome()">
           <picture class="mobile:w-[60px] mobile:h-[60px]">
             <source media="(max-width:1024px)" srcset="@/assets/images/gov_bc_logo_vert.png">
             <img src="@/assets/images/gov_bc_logo_horiz.png" alt="Government of British Columbia Logo">
           </picture>
           <span
-            class="flex flex-wrap content-center font-bold ml-5 text-white text-lg mobile:ml-[10px] mobile:leading-[20px] mobile:text-[14px] mobile:w-[130px]"
+            data-cy="strr-title"
+            class="flex flex-wrap content-center font-bold ml-5 text-white text-lg
+            mobile:ml-[10px] mobile:leading-[20px] mobile:text-[14px] mobile:w-[130px]"
             style="letter-spacing: -.03rem;"
           >
             {{ t('header.title') }}
@@ -26,7 +31,7 @@
           class="flex flex-auto justify-end h-full text-white"
         >
           <div class="hidden mobile:flex justify-center items-center">
-            <BcrosMobileIcon :icon-path="notificationIcon" alt-text="Notification Icon"/>
+            <BcrosMobileIcon :icon-path="notificationIcon" alt-text="Notification Icon" />
             <BcrosMobileIcon :icon-path="hamburgerIcon" alt-text="Menu Icon" />
           </div>
           <div v-if="authenticated" class="flex flex-wrap self-center text-sm mobile:hidden">

strr-web/components/bcros/mobile-icon/MobileIcon.vue

@@ -1,5 +1,7 @@
 <template>
-  <button class="w-[48px] h-[44px]"><img :src="iconPath" :alt="altText"></img></button>
+  <button class="w-[48px] h-[44px]">
+    <img :src="iconPath" :alt="altText"></img>
+  </button>
 </template>
 
 <script setup lang="ts">

strr-web/composables/useBcrosNavigate.ts

@@ -14,8 +14,6 @@ export const useBcrosNavigate = () => {
     window.location.assign(redirectURL.href)
   }
 
-  console.log(config.public.authWebURL)
-
   // common redirects
   function goToBcrosHome () { redirect(config.public.registryHomeURL) }
   function goToBcrosLogin (idpHint: string) {

strr-web/cypress/e2e/accessibility/accountSelect.cy.ts

@@ -0,0 +1,61 @@
+import 'cypress-plugin-tab'
+
+describe('accessibility -> Account Select', () => {
+  beforeEach(() => {
+    cy.visitAccountSelectAuthWithActiveAccounts()
+    cy.injectAxe()
+  })
+
+  it('checks page passes accessibility', () => {
+
+    cy.checkA11y('[data-cy=page-header]')
+
+    //TODO: TC - change to the account select layout with active accounts, titles etc
+
+    // cy.fixture('individuals').then((testData) => {
+    //   cy.get('#individual-person-full-name').type(testData.profile1.fullName)
+    //   cy.get('[data-cy=usePreferredName').check()
+    //   cy.get('[data-cy=testPercentOfShares]').click()
+    //   cy.checkA11y('[data-cy=addIndividualPerson]',
+    //     {
+    //       rules: {
+    //         // todo: fixme: nested-interactive should be removed/set to true after resolving it after
+    //         //  discussion with nuxt-ui team
+    //         // first ticket for opening discussions: https://github.com/bcgov/entity/issues/19775
+    //         'nested-interactive': { enabled: false }
+    //       }
+    //     }
+    //   )
+    // })
+
+  })
+
+  //TODO - TC - change this to use our existing-account-list component instead
+  it('checks the summary table passes accessibility', () => {
+
+  //   cy.checkA11y('[data-cy=individualsSummaryTable]', { rules: { 'nested-interactive': { enabled: false } } })
+
+  //   cy.get('[data-cy=popover-button]').eq(0).click()
+  //   cy.wait(100)
+  //   cy.checkA11y('[data-cy=summary-table-buttons]', {
+  //     rules: {
+  //       'nested-interactive': { enabled: false },
+  //       'aria-hidden-focus': { enabled: false }
+  //     }
+  //   })
+
+  //   // close the popover panel
+  //   cy.get('[data-cy=popover-button]').eq(0).click()
+
+  //   // empty table
+  //   cy.get('[data-cy=popover-button]').then((buttons) => {
+  //     for (let i = 0; i < buttons.length; i++) {
+  //       cy.get('[data-cy=popover-button]').first().click()
+  //       cy.get('[data-cy=remove-button]').click()
+  //     }
+  //   })
+  //   cy.checkA11y('[data-cy=individualsSummaryTable]')
+  // 
+  })
+
+})

strr-web/cypress/e2e/accessibility/layouts.cy.ts

@@ -0,0 +1,59 @@
+describe('accessibility -> Business Layout', () => {
+  beforeEach(() => {
+    // setup intercepts
+    cy.interceptAccounts().as('accounts')
+    cy.interceptNoAccounts().as('noAccounts')
+    cy.interceptAccountDetails().as('accountDetails')
+  })
+
+  it('checks Account Select Page passes accessibility (logged out)', () => {
+    sessionStorage.setItem('FAKE_LOGIN', '')
+    cy.visit(`/account-select`)
+    cy.injectAxe()
+
+    // TODO: TC - change to our layout when no account
+
+    // cy.checkA11y({ exclude: ['[data-cy=owner-change]'], include: ['[data-cy=header]'] })
+
+  })
+
+  //
+  it('checks Account Select Page passes accessibility (logged in, no accounts)', () => {
+    sessionStorage.setItem('FAKE_LOGIN', 'true')
+    cy.visit(`/account-select`)
+
+    //TODO: TC - change to our api call for empty return with just settings?
+    cy.wait(['@noAccounts'])
+    cy.injectAxe()
+
+    // TODO: TC - check out layout when someone is auth but no accounts
+    // Click example below for only Create button
+
+    // // footer 
+    // cy.checkA11y({ exclude: ['[data-cy=owner-change]'], include: ['[data-cy=footer]'] })
+
+  })
+
+    //
+    it('checks Account Select Page passes accessibility (logged in, active accounts)', () => {
+      sessionStorage.setItem('FAKE_LOGIN', 'true')
+      cy.visit(`/account-select`)
+
+      //TODO: TC - change to our api calls
+      cy.wait(['@accounts', '@accountDetails'])
+      cy.injectAxe()
+
+      // TODO: TC - check out layout when someone is auth and has active accounts
+      // Click example below
+      // Include clicking the two buttons - create and choose - move this to AccountSelect?
+
+      // cy.checkA11y({ exclude: ['[data-cy=owner-change]'], include: ['[data-cy=header]'] })
+      // cy.get('[data-cy=logged-out-menu]').click()
+      // cy.wait(250)
+      // cy.checkA11y({ exclude: ['[data-cy=owner-change]'], include: ['[data-cy=header]'] })
+
+      // // footer 
+      // cy.checkA11y({ exclude: ['[data-cy=owner-change]'], include: ['[data-cy=footer]'] })
+
+    })
+})

strr-web/cypress/e2e/layouts/accountSelect.cy.ts

@@ -0,0 +1,76 @@
+import accounts from '../../fixtures/accounts.json'
+import noAccounts from '../../fixtures/noAccounts.json'
+import accountDetails from '../../fixtures/accountDetails.json'
+
+describe('Layout -> Account Select (No Active Accounts)', () => {
+  it('shows correct values', () => {
+    // TODO: TC - are these required just to do validation?
+    // setup intercepts 
+    cy.intercept(
+      'GET',
+      'https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/users/testSub/settings',
+      accounts)
+    cy.intercept(
+      'GET',
+      `https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/orgs/${account.id}`,
+      accountDetails).as('accountDetails')
+
+    // TODO: TC do we need fake login for this?
+
+    cy.visit(`/account-select`)
+    cy.wait(['@accounts', '@accountDetails'])
+
+    // TODO: TC - existing-account-list should not exist
+    // Check for other header
+
+  })
+})
+
+
+describe('Layout -> Account Select (No Active Accounts)', () => {
+  it('shows correct values', () => {
+    // setup intercepts
+    cy.intercept(
+      'GET',
+      'https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/users/testSub/settings',
+      accounts)
+    cy.intercept(
+      'GET',
+      `https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/orgs/${account.id}`,
+      accountDetails).as('accountDetails')
+
+    // TODO: TC do we need fake login for this?
+
+    cy.visit(`/account-select`)
+    cy.wait(['@accounts', '@accountDetails'])
+
+    // TODO: TC - existing-account-list should not exist
+    // Check for other header
+
+  })
+})
+
+describe('Layout -> Account Select (Active Accounts)', () => {
+  it('shows correct values', () => {
+    // setup intercepts
+    cy.intercept(
+      'GET',
+      'https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/users/testSub/settings',
+      accounts)
+    cy.intercept(
+      'GET',
+      `https://auth-api-dev.apps.silver.devops.gov.bc.ca/api/v1/orgs/${account.id}`,
+      accountDetails).as('accountDetails')
+
+    // TODO: TC do we need fake login for this?
+
+    cy.visit(`/account-select`)
+    cy.wait(['@accounts', '@accountDetails'])
+
+    // TODO: TC - existing-account-list should exist
+    // Check for correct header based on account list, and check for details inside the existing-account-list
+
+    // cy.get('#bcros-business-details').should('exist')
+    // cy.get('[data-cy=business-details-name]').should('contain.text', 'Test')
+  })
+})

strr-web/cypress/e2e/layouts/footer.cy.ts

@@ -0,0 +1,11 @@
+describe('Layout -> Footer', () => {
+  it('shows the footer on Home Page', () => {
+    cy.visit('/')
+    cy.get('#bcros-main-footer').should('exist')
+  })
+
+  it('shows the footer on Account Select Page', () => {
+    cy.visit('/account-select')
+    cy.get('#bcros-main-footer').should('exist')
+  })
+})

strr-web/cypress/e2e/layouts/header.cy.ts

@@ -0,0 +1,11 @@
+describe('Layout -> Header', () => {
+  it('shows the header on Home Page', () => {
+    cy.visit('/')
+    cy.get('#bcros-main-header').should('exist')
+  })
+
+  it('shows the header on Account Select Page', () => {
+    cy.visit('/account-select')
+    cy.get('#bcros-main-header').should('exist')
+  })
+})