Added a logout test, improved some locators

e2e/fixtures/account/account-page.ts

@@ -4,22 +4,42 @@ import { BasePage } from "../base/base-page"
 export class AccountPage extends BasePage {
   container: Locator
   accountNav: Locator
-  mobileAccountNav: Locator
+
   overviewLink: Locator
   profileLink: Locator
   addressesLink: Locator
   ordersLink: Locator
   logoutLink: Locator
 
+  mobileAccountNav: Locator
+  mobileAccountMainLink : Locator
+  mobileOverviewLink : Locator
+  mobileProfileLink : Locator
+  mobileAddressesLink : Locator
+  mobileOrdersLink : Locator
+  mobileLogoutLink : Locator
+
   constructor(page: Page) {
     super(page)
     this.container = page.getByTestId("account-page")
     this.accountNav = this.container.getByTestId("account-nav")
+    this.overviewLink = this.accountNav.getByTestId("overview-link")
+    this.profileLink = this.accountNav.getByTestId("profile-link")
+    this.addressesLink = this.accountNav.getByTestId("addresses-link")
+    this.ordersLink = this.accountNav.getByTestId("orders-link")
+    this.logoutLink = this.accountNav.getByTestId("logout-button")
+
     this.mobileAccountNav = this.container.getByTestId("mobile-account-nav")
-    this.overviewLink = this.container.getByTestId("overview-link")
-    this.profileLink = this.container.getByTestId("profile-link")
-    this.addressesLink = this.container.getByTestId("addresses-link")
-    this.ordersLink = this.container.getByTestId("orders-link")
-    this.logoutLink = this.container.getByTestId("logout-button")
+    this.mobileAccountMainLink = this.mobileAccountNav.getByTestId("account-main-link")
+    this.mobileOverviewLink = this.mobileAccountNav.getByTestId("overview-link")
+    this.mobileProfileLink = this.mobileAccountNav.getByTestId("profile-link")
+    this.mobileAddressesLink = this.mobileAccountNav.getByTestId("addresses-link")
+    this.mobileOrdersLink = this.mobileAccountNav.getByTestId("orders-link")
+    this.mobileLogoutLink = this.mobileAccountNav.getByTestId("logout-button")
+  }
+
+  async goto() {
+    await this.navMenu.navAccountLink.click()
+    await this.container.waitFor({ state: "visible" })
   }
 }

e2e/fixtures/base/nav-menu.ts

@@ -4,6 +4,7 @@ export class NavMenu {
   page: Page
   navMenuButton: Locator
   navMenu: Locator
+  navAccountLink: Locator
   homeLink: Locator
   storeLink: Locator
   searchLink: Locator
@@ -17,6 +18,7 @@ export class NavMenu {
     this.page = page
     this.navMenuButton = page.getByTestId("nav-menu-button")
     this.navMenu = page.getByTestId("nav-menu-popup")
+    this.navAccountLink = page.getByTestId("nav-account-link")
     this.homeLink = this.navMenu.getByTestId("home-link")
     this.storeLink = this.navMenu.getByTestId("store-link")
     this.searchLink = this.navMenu.getByTestId("search-link")
@@ -45,4 +47,9 @@ export class NavMenu {
     })
     await countryLink.click()
   }
+
+  async open() {
+    await this.navMenuButton.click()
+    await this.navMenu.waitFor({ state: "visible" })
+  }
 }

e2e/tests/public/login.spec.ts

@@ -47,4 +47,24 @@ test.describe("Login Page functionality", async () => {
     await loginPage.signInButton.click()
     await expect(accountOverviewPage.welcomeMessage).toBeVisible()
   })
+
+  test("logging out works correctly", async ({
+    page,
+    accountOverviewPage,
+    loginPage,
+  }) => {
+    await loginPage.accountLink.click()
+    await loginPage.container.waitFor({ state: "visible" })
+    await loginPage.emailInput.fill("[email protected]")
+    await loginPage.passwordInput.fill("password")
+    await loginPage.signInButton.click()
+    await expect(accountOverviewPage.welcomeMessage).toBeVisible()
+
+    await accountOverviewPage.logoutLink.highlight()
+    await accountOverviewPage.logoutLink.click()
+    await loginPage.container.waitFor({ state: "visible" })
+
+    await loginPage.accountLink.click()
+    await loginPage.container.waitFor({ state: "visible" })
+  })
 })

src/app/[countryCode]/(main)/account/@dashboard/profile/page.tsx

@@ -23,7 +23,7 @@ export default async function Profile() {
   }
 
   return (
-    <div className="w-full">
+    <div className="w-full" data-testid="profile-page-wrapper">
       <div className="mb-8 flex flex-col gap-y-4">
         <h1 className="text-2xl-semi">Profile</h1>
         <p className="text-base-regular">
@@ -32,7 +32,7 @@ export default async function Profile() {
           your password.
         </p>
       </div>
-      <div className="flex flex-col gap-y-8 w-full" data-testid="profile-wrapper">
+      <div className="flex flex-col gap-y-8 w-full">
         <ProfileName customer={customer} />
         <Divider />
         <ProfileEmail customer={customer} />