feat(e2e): update address modal and add data-testid locators

Author: QAComet

e2e/fixtures/account/addresses-page.ts

@@ -1,12 +1,21 @@
 import { Locator, Page } from "@playwright/test"
 import { AccountPage } from "./account-page"
-import { AddAddressModal } from "./modals/add-address-modal"
+import { AddressModal } from "./modals/address-modal"
 
 export class AddressesPage extends AccountPage {
-  addAddressModal: AddAddressModal
+  addAddressModal: AddressModal
+  editAddressModal: AddressModal
+  addressContainer: Locator
+  addressesWrapper: Locator
+  newAddressButton: Locator
+
   constructor(page: Page) {
     super(page)
-    this.addAddressModal = new AddAddressModal(page)
+    this.addAddressModal = new AddressModal(page, "add")
+    this.editAddressModal = new AddressModal(page, "edit")
+    this.addressContainer = this.container.getByTestId("address-container")
+    this.addressesWrapper = page.getByTestId("addresses-page-wrapper")
+    this.newAddressButton = this.container.getByTestId("add-address-button")
   }
 
   getAddressContainer(text: string) {
@@ -15,7 +24,7 @@ export class AddressesPage extends AccountPage {
       .filter({ hasText: text })
     return {
       container,
-      editButton: container.getByTestId("address-edit-button"),
+      editButton: container.getByTestId('address-edit-button'),
       deleteButton: container.getByTestId("address-delete-button"),
       name: container.getByTestId("address-name"),
       company: container.getByTestId("address-company"),
@@ -24,4 +33,10 @@ export class AddressesPage extends AccountPage {
       provinceCountry: container.getByTestId("address-province-country"),
     }
   }
+
+  async goto() {
+    await super.goto()
+    await this.addressesLink.click()
+    await this.addressesWrapper.waitFor({ state: "visible" })
+  }
 }

e2e/fixtures/account/modals/add-address-modal.ts renamed to e2e/fixtures/account/modals/address-modal.ts

@@ -1,8 +1,8 @@
 import { Page, Locator } from "@playwright/test"
 import { BaseModal } from "../../base/base-modal"
 
-export class AddAddressModal extends BaseModal {
-  addAddressButton: Locator
+export class AddressModal extends BaseModal {
+  saveButton: Locator
   cancelButton: Locator
 
   firstNameInput: Locator
@@ -16,10 +16,14 @@ export class AddAddressModal extends BaseModal {
   countrySelect: Locator
   phoneInput: Locator
 
-  constructor(page: Page) {
-    super(page, page.getByTestId("add-address-modal"))
+  constructor(page: Page, modalType: "add" | "edit") {
+    if (modalType === "add") {
+      super(page, page.getByTestId("add-address-modal"))
+    } else {
+      super(page, page.getByTestId("edit-address-modal"))
+    }
 
-    this.addAddressButton = this.container.getByTestId("add-address-button")
+    this.saveButton = this.container.getByTestId("save-button")
     this.cancelButton = this.container.getByTestId("cancel-button")
 
     this.firstNameInput = this.container.getByTestId("first-name-input")

src/modules/account/components/address-card/edit-address-modal.tsx

@@ -71,8 +71,9 @@ const EditAddress: React.FC<EditAddressProps> = ({
             "border-gray-900": isActive,
           }
         )}
+        data-testid="address-container"
       >
-        <div className="flex flex-col" data-testid="address-container">
+        <div className="flex flex-col">
           <Heading className="text-left text-base-semi" data-testid="address-name">
             {address.first_name} {address.last_name}
           </Heading>
@@ -115,7 +116,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
         </div>
       </div>
 
-      <Modal isOpen={state} close={close}>
+      <Modal isOpen={state} close={close} data-testid="edit-address-modal">
         <Modal.Title>
           <Heading className="mb-2">Edit address</Heading>
         </Modal.Title>
@@ -129,33 +130,38 @@ const EditAddress: React.FC<EditAddressProps> = ({
                   required
                   autoComplete="given-name"
                   defaultValue={address.first_name || undefined}
+                  data-testid="first-name-input"
                 />
                 <Input
                   label="Last name"
                   name="last_name"
                   required
                   autoComplete="family-name"
                   defaultValue={address.last_name || undefined}
+                  data-testid="last-name-input"
                 />
               </div>
               <Input
                 label="Company"
                 name="company"
                 autoComplete="organization"
                 defaultValue={address.company || undefined}
+                data-testid="company-input"
               />
               <Input
                 label="Address"
                 name="address_1"
                 required
                 autoComplete="address-line1"
                 defaultValue={address.address_1 || undefined}
+                data-testid="address-1-input"
               />
               <Input
                 label="Apartment, suite, etc."
                 name="address_2"
                 autoComplete="address-line2"
                 defaultValue={address.address_2 || undefined}
+                data-testid="address-2-input"
               />
               <div className="grid grid-cols-[144px_1fr] gap-x-2">
                 <Input
@@ -164,33 +170,38 @@ const EditAddress: React.FC<EditAddressProps> = ({
                   required
                   autoComplete="postal-code"
                   defaultValue={address.postal_code || undefined}
+                  data-testid="postal-code-input"
                 />
                 <Input
                   label="City"
                   name="city"
                   required
                   autoComplete="locality"
                   defaultValue={address.city || undefined}
+                  data-testid="city-input"
                 />
               </div>
               <Input
                 label="Province / State"
                 name="province"
                 autoComplete="address-level1"
                 defaultValue={address.province || undefined}
+                data-testid="state-input"
               />
               <CountrySelect
                 name="country_code"
                 region={region}
                 required
                 autoComplete="country"
                 defaultValue={address.country_code || undefined}
+                data-testid="country-select"
               />
               <Input
                 label="Phone"
                 name="phone"
                 autoComplete="phone"
                 defaultValue={address.phone || undefined}
+                data-testid="phone-input"
               />
             </div>
             {formState.error && (
@@ -206,10 +217,11 @@ const EditAddress: React.FC<EditAddressProps> = ({
                 variant="secondary"
                 onClick={close}
                 className="h-10"
+                data-testid="cancel-button"
               >
                 Cancel
               </Button>
-              <SubmitButton>Save</SubmitButton>
+              <SubmitButton data-testid="save-button">Save</SubmitButton>
             </div>
           </Modal.Footer>
         </form>