fix: cleaner logic for tab title

bigcommerce · Jul 30, 2024 · c83f543 · c83f543
1 parent cd6a9fc
commit c83f543
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git 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
@@ -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();
 });