From c83f5431421257465f645fc33c6687e89eb6f201 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 30 Jul 2024 14:36:24 -0500
Subject: [PATCH] fix: cleaner logic for tab title

---
 .../(default)/account/[tab]/layout.tsx        | 13 ++++++++--
 core/tests/ui/desktop/e2e/account.spec.ts     | 26 +++++++++----------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/core/app/[locale]/(default)/account/[tab]/layout.tsx b/core/app/[locale]/(default)/account/[tab]/layout.tsx
index 9bf794259..7d30d172b 100644
--- a/core/app/[locale]/(default)/account/[tab]/layout.tsx
+++ b/core/app/[locale]/(default)/account/[tab]/layout.tsx
@@ -33,12 +33,21 @@ export default async function AccountTabLayout({
 
   const messages = await getMessages();
 
+  const tabsTitles = {
+    orders: t('orders'),
+    messages: t('messages'),
+    addresses: t('addresses'),
+    wishlists: t('wishlists'),
+    'recently-viewed': t('recentlyViewed'),
+    settings: t('settings'),
+  };
+
   return (
     <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
       <AccountStatusProvider>
         <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
         <nav aria-label={t('accountTabsLabel')}>
-          <ul className="mb-8 flex list-none items-start overflow-x-auto text-base">
+          <ul className="mb-8 flex items-start overflow-x-auto">
             {tabList.map((tab) => (
               <li key={tab}>
                 <Link
@@ -50,7 +59,7 @@ export default async function AccountTabLayout({
                   prefetch="viewport"
                   prefetchKind="full"
                 >
-                  {tab === 'recently-viewed' ? t('recentlyViewed') : t(tab)}
+                  {tabsTitles[tab]}
                 </Link>
               </li>
             ))}
diff --git a/core/tests/ui/desktop/e2e/account.spec.ts b/core/tests/ui/desktop/e2e/account.spec.ts
index f67c4d4a9..b96f07cc9 100644
--- a/core/tests/ui/desktop/e2e/account.spec.ts
+++ b/core/tests/ui/desktop/e2e/account.spec.ts
@@ -32,34 +32,34 @@ test('My Account tabs are displayed and clickable', async ({ page }) => {
   await loginWithUserAccount(page, testUserEmail, testUserPassword);
 
   await expect(page).toHaveURL('/account/');
-  await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Addresses' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Wish lists' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Recently viewed' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Account settings' })).toBeVisible();
-
-  await page.getByRole('heading', { name: 'Orders' }).click();
+  await expect(page.getByRole('link', { name: 'Orders' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Messages' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Addresses' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Wish lists' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Recently viewed' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Account settings' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Orders' }).click();
   await expect(page).toHaveURL('/account/orders/');
   await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Messages' }).click();
+  await page.getByRole('link', { name: 'Messages' }).click();
   await expect(page).toHaveURL('/account/messages/');
   await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Addresses' }).click();
+  await page.getByRole('link', { name: 'Addresses' }).click();
   await expect(page).toHaveURL('/account/addresses/');
   await expect(page.getByRole('heading', { name: 'Addresses' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Wish lists' }).click();
+  await page.getByRole('link', { name: 'Wish lists' }).click();
   await expect(page).toHaveURL('/account/wishlists/');
   await expect(page.getByRole('heading', { name: 'Wish lists' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Recently viewed' }).click();
+  await page.getByRole('link', { name: 'Recently viewed' }).click();
   await expect(page).toHaveURL('/account/recently-viewed/');
   await expect(page.getByRole('heading', { name: 'Recently viewed' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Account settings' }).click();
+  await page.getByRole('link', { name: 'Account settings' }).click();
   await expect(page).toHaveURL('/account/settings/');
   await expect(page.getByRole('heading', { name: 'Account settings' })).toBeVisible();
 });