user should be able to change password test

package.json

@@ -126,7 +126,7 @@
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10",
     "@graphql-codegen/typescript-operations": "^2.2.4",
     "@graphql-codegen/typescript-react-apollo": "^3.2.5",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.40.0",
     "@saleor/app-sdk": "0.43.0",
     "@sentry/cli": "^2.20.6",
     "@swc/jest": "^0.2.26",

playwright/data/e2eTestData.ts

@@ -37,4 +37,11 @@ export const USERS = {
     name: "e2e",
     lastName: "user",
   },
+  userForPasswordChange: {
+    email: "[email protected]",
+    newPassword: "4321test",
+    info: "User used in change password test",
+    name: "change password",
+    lastName: "user",
+  },
 };

playwright/pages/accountSettingsPage.ts

@@ -0,0 +1,36 @@
+import type { Locator, Page } from "@playwright/test";
+
+import { BasePage } from "./basePage";
+import { ChangePasswordDialog } from "./dialogs/changePasswordDialog";
+
+export class AccountSettingsPage {
+  readonly page: Page;
+  readonly basePage: BasePage;
+  readonly changePasswordButton: Locator;
+  readonly saveButton: Locator;
+  readonly changePasswordDialog: ChangePasswordDialog;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.basePage = new BasePage(page);
+    this.changePasswordDialog = new ChangePasswordDialog(page);
+    this.changePasswordButton = page.getByTestId("changePasswordBtn");
+    this.saveButton = page.getByTestId("button-bar-confirm");
+  }
+
+  async clickChangePasswordButton() {
+    await this.changePasswordButton.click();
+  }
+
+  async typeOldAndNewPasswords(oldPassword: string, newPassword: string) {
+    await this.changePasswordDialog.typeOldPassword(oldPassword);
+    await this.changePasswordDialog.typeNewPassword(newPassword);
+  }
+
+  async clickSaveChangedPasswordButton() {
+    await this.changePasswordDialog.clickSaveButton();
+  }
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+}

playwright/pages/dialogs/changePasswordDialog.ts

@@ -0,0 +1,30 @@
+import type { Locator, Page } from "@playwright/test";
+
+export class ChangePasswordDialog {
+  readonly page: Page;
+  readonly newPasswordInput: Locator;
+  readonly oldPasswordInput: Locator;
+  readonly saveButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.saveButton = page.getByTestId("submit");
+    this.newPasswordInput = page
+      .getByTestId("new-password-input")
+      .locator("input");
+    this.oldPasswordInput = page
+      .getByTestId("old-password-input")
+      .locator("input");
+  }
+
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+
+  async typeNewPassword(newPassword: string) {
+    await this.newPasswordInput.fill(newPassword);
+  }
+  async typeOldPassword(oldPassword: string) {
+    await this.oldPasswordInput.fill(oldPassword);
+  }
+}

playwright/pages/loginPage.ts

@@ -45,6 +45,13 @@ export class LoginPage {
     // End of authentication steps.
     await page.context().storageState({ path });
   }
+  async basicUiLogin(userEmail: string, userPassword: string) {
+    await this.goto();
+    await this.typeEmail(userEmail);
+    await this.typePassword(userPassword);
+    await this.clickSignInButton();
+    await expect(this.homePage.welcomeMessage).toContainText("Hello there,");
+  }
   async typeEmail(email: string) {
     await this.emailInput.fill(email);
   }

playwright/pages/mainMenuPage.ts

@@ -22,9 +22,13 @@ export class MainMenuPage {
   readonly menuItem: Locator;
   readonly drafts: Locator;
   readonly collections: Locator;
+  readonly accountSettings: Locator;
+  readonly userMenu: Locator;
 
   constructor(page: Page) {
     this.page = page;
+    this.userMenu = page.getByTestId("userMenu");
+    this.accountSettings = page.getByTestId("account-settings-button");
     this.catalog = page.getByTestId("menu-item-label-catalogue");
     this.content = page.getByTestId("menu-item-label-pages");
     this.categories = page.getByTestId("menu-item-label-categories");
@@ -45,6 +49,11 @@ export class MainMenuPage {
     this.menuItem = page.locator("[data-test-id*='menu-item-label-']");
   }
 
+  async gotoAccountSettings() {
+    await this.userMenu.click();
+    await this.accountSettings.click();
+  }
+
   async openDiscounts() {
     await this.discounts.click();
   }