Skip to content

Commit 1751908

Browse files
VariableVicVariableVic
authored
Merge pull request #299 from QAComet/qacomet/profile-tests
Profile page tests
2 parents 7961ee7 + ecb7502 commit 1751908

File tree

11 files changed

+315
-5
lines changed

11 files changed

+315
-5
lines changed

‎e2e/fixtures/account/account-page.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BasePage } from "../base/base-page"
44
export class AccountPage extends BasePage {
55
container: Locator
66
accountNav: Locator
7-
7+
88
overviewLink: Locator
99
profileLink: Locator
1010
addressesLink: Locator

‎e2e/fixtures/account/overview-page.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ export class OverviewPage extends AccountPage {
99
noOrdersMessage: Locator
1010
ordersWrapper: Locator
1111
orderWrapper: Locator
12+
overviewWrapper: Locator
1213

1314
constructor(page: Page) {
1415
super(page)
15-
this.welcomeMessage = this.container.getByTestId("welcome-message") // getAttribute("name")
16+
this.overviewWrapper = this.container.getByTestId("overview-page-wrapper")
17+
this.welcomeMessage = this.container.getByTestId("welcome-message")
1618
this.customerEmail = this.container.getByTestId("customer-email")
1719
this.profileCompletion = this.container.getByTestId(
1820
"customer-profile-completion"
@@ -36,4 +38,9 @@ export class OverviewPage extends AccountPage {
3638
openButton: order.getByTestId("open-order-button"),
3739
}
3840
}
41+
42+
async goto() {
43+
await this.navMenu.navAccountLink.click()
44+
await this.container.waitFor({ state: "visible" })
45+
}
3946
}

‎e2e/fixtures/account/profile-page.ts

+52
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AccountPage } from "./account-page"
33
import { camelCase } from "lodash"
44

55
export class ProfilePage extends AccountPage {
6+
profileWrapper: Locator
67
accountNameEditor: Locator
78
accountEmailEditor: Locator
89
accountPhoneEditor: Locator
@@ -21,6 +22,24 @@ export class ProfilePage extends AccountPage {
2122
passwordSaveButton: Locator
2223
billingAddressSaveButton: Locator
2324

25+
savedName: Locator
26+
savedEmail: Locator
27+
savedPhone: Locator
28+
savedPassword: Locator
29+
savedBillingAddress: Locator
30+
31+
nameSuccessMessage: Locator
32+
emailSuccessMessage: Locator
33+
phoneSuccessMessage: Locator
34+
passwordSuccessMessage: Locator
35+
billingAddressSuccessMessage: Locator
36+
37+
nameErrorMessage: Locator
38+
emailErrorMessage: Locator
39+
phoneErrorMessage: Locator
40+
passwordErrorMessage: Locator
41+
billingAddressErrorMessage: Locator
42+
2443
emailInput: Locator
2544
firstNameInput: Locator
2645
lastNameInput: Locator
@@ -43,6 +62,7 @@ export class ProfilePage extends AccountPage {
4362

4463
constructor(page: Page) {
4564
super(page)
65+
this.profileWrapper = page.getByTestId("profile-page-wrapper")
4666
this.accountNameEditor = this.container.getByTestId("account-name-editor")
4767
this.accountEmailEditor = this.container.getByTestId("account-email-editor")
4868
this.accountPhoneEditor = this.container.getByTestId("account-phone-editor")
@@ -69,6 +89,32 @@ export class ProfilePage extends AccountPage {
6989
this.billingAddressSaveButton =
7090
this.accountBillingAddressEditor.getByTestId("save-button")
7191

92+
this.savedName = this.accountNameEditor.getByTestId("current-info")
93+
this.savedEmail = this.accountEmailEditor.getByTestId("current-info")
94+
this.savedPhone = this.accountPhoneEditor.getByTestId("current-info")
95+
this.savedPassword = this.accountPasswordEditor.getByTestId("current-info")
96+
this.savedBillingAddress =
97+
this.accountBillingAddressEditor.getByTestId("current-info")
98+
this.nameSuccessMessage =
99+
this.accountNameEditor.getByTestId("success-message")
100+
this.emailSuccessMessage =
101+
this.accountEmailEditor.getByTestId("success-message")
102+
this.phoneSuccessMessage =
103+
this.accountPhoneEditor.getByTestId("success-message")
104+
this.passwordSuccessMessage =
105+
this.accountPasswordEditor.getByTestId("success-message")
106+
this.billingAddressSuccessMessage =
107+
this.accountBillingAddressEditor.getByTestId("success-message")
108+
this.nameErrorMessage = this.accountNameEditor.getByTestId("error-message")
109+
this.emailErrorMessage =
110+
this.accountEmailEditor.getByTestId("error-message")
111+
this.phoneErrorMessage =
112+
this.accountPhoneEditor.getByTestId("error-message")
113+
this.passwordErrorMessage =
114+
this.accountPasswordEditor.getByTestId("error-message")
115+
this.billingAddressErrorMessage =
116+
this.accountBillingAddressEditor.getByTestId("error-message")
117+
72118
this.firstNameInput = page.getByTestId("first-name-input")
73119
this.lastNameInput = page.getByTestId("last-name-input")
74120
this.emailInput = page.getByTestId("email-input")
@@ -111,4 +157,10 @@ export class ProfilePage extends AccountPage {
111157
}
112158
return o
113159
}
160+
161+
async goto() {
162+
super.goto()
163+
await this.profileLink.click()
164+
await this.profileWrapper.waitFor({ state: "visible" })
165+
}
114166
}

‎e2e/tests/authenticated/profile.spec.ts

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import { test, expect } from "../../index"
2+
3+
test.describe("Account profile tests", () => {
4+
test("Profile completed update flow", async ({
5+
accountOverviewPage: overviewPage,
6+
accountProfilePage: profilePage,
7+
}) => {
8+
await overviewPage.goto()
9+
await expect(overviewPage.profileCompletion).toHaveText("50%")
10+
11+
await test.step("navigate to the profile page", async () => {
12+
await profilePage.profileLink.click()
13+
await expect(profilePage.profileWrapper).toBeVisible()
14+
})
15+
16+
await test.step("update the saved profile phone number", async () => {
17+
await expect(profilePage.savedPhone).toHaveText("null")
18+
await profilePage.phoneEditButton.click()
19+
await profilePage.phoneInput.fill("8888888888")
20+
await profilePage.phoneSaveButton.click()
21+
await expect(profilePage.phoneSuccessMessage).toBeVisible()
22+
await expect(profilePage.savedPhone).toHaveText("8888888888")
23+
})
24+
25+
await test.step("verify the profile completion state and go back to the profile page", async () => {
26+
await profilePage.overviewLink.click()
27+
await expect(overviewPage.profileCompletion).toHaveText("75%")
28+
29+
await profilePage.profileLink.click()
30+
await expect(profilePage.profileWrapper).toBeVisible()
31+
})
32+
33+
await test.step("enter in the billing address", async () => {
34+
await expect(profilePage.savedBillingAddress).toContainText(
35+
"No billing address"
36+
)
37+
await profilePage.billingAddressEditButton.click()
38+
await profilePage.billingFirstNameInput.fill("First")
39+
await profilePage.billingLastNameInput.fill("Last")
40+
await profilePage.billingAddress1Input.fill("123 Fake Street")
41+
await profilePage.billingPostcalCodeInput.fill("11111")
42+
await profilePage.billingCityInput.fill("Springdale")
43+
await profilePage.billingProvinceInput.fill("IL")
44+
await profilePage.billingCountryCodeSelect.selectOption({
45+
label: "United States",
46+
})
47+
await profilePage.billingAddressSaveButton.click()
48+
await expect(profilePage.billingAddressSuccessMessage).toBeVisible()
49+
})
50+
51+
await test.step("profile completion state", async () => {
52+
await profilePage.overviewLink.click()
53+
await expect(overviewPage.profileCompletion).toHaveText("100%")
54+
55+
await profilePage.goto()
56+
await expect(profilePage.savedBillingAddress).toContainText("First Last")
57+
await expect(profilePage.savedBillingAddress).toContainText(
58+
"123 Fake Street"
59+
)
60+
await expect(profilePage.savedBillingAddress).toContainText(
61+
"11111, Springdale"
62+
)
63+
await expect(profilePage.savedBillingAddress).toContainText(
64+
"United States"
65+
)
66+
})
67+
})
68+
69+
test("Profile changes persist across page refreshes and logouts", async ({
70+
page,
71+
loginPage,
72+
accountOverviewPage: overviewPage,
73+
accountProfilePage: profilePage,
74+
}) => {
75+
await overviewPage.goto()
76+
await expect(overviewPage.profileCompletion).toHaveText("50%")
77+
78+
await test.step("navigate to the profile page", async () => {
79+
await profilePage.profileLink.click()
80+
await expect(profilePage.profileWrapper).toBeVisible()
81+
})
82+
83+
await test.step("update the first and last name", async () => {
84+
await profilePage.nameEditButton.click()
85+
await profilePage.firstNameInput.fill("FirstNew")
86+
await profilePage.lastNameInput.fill("LastNew")
87+
await profilePage.nameSaveButton.click()
88+
await profilePage.nameSuccessMessage.waitFor({ state: "visible" })
89+
})
90+
91+
await test.step("update the saved profile phone number", async () => {
92+
await expect(profilePage.savedPhone).toHaveText("null")
93+
await profilePage.phoneEditButton.click()
94+
await profilePage.phoneInput.fill("8888888888")
95+
await profilePage.phoneSaveButton.click()
96+
await expect(profilePage.phoneSuccessMessage).toBeVisible()
97+
await expect(profilePage.savedPhone).toHaveText("8888888888")
98+
})
99+
100+
await test.step("enter in the billing address", async () => {
101+
await expect(profilePage.savedBillingAddress).toContainText(
102+
"No billing address"
103+
)
104+
await profilePage.billingAddressEditButton.click()
105+
await profilePage.billingFirstNameInput.fill("First")
106+
await profilePage.billingLastNameInput.fill("Last")
107+
await profilePage.billingAddress1Input.fill("123 Fake Street")
108+
await profilePage.billingPostcalCodeInput.fill("11111")
109+
await profilePage.billingCityInput.fill("Springdale")
110+
await profilePage.billingProvinceInput.fill("IL")
111+
await profilePage.billingCountryCodeSelect.selectOption({
112+
label: "United States",
113+
})
114+
await profilePage.billingAddressSaveButton.click()
115+
await expect(profilePage.billingAddressSuccessMessage).toBeVisible()
116+
})
117+
118+
await test.step("Refresh page and verify information saved is still there", async () => {
119+
await page.reload()
120+
await expect(profilePage.savedName).toContainText("FirstNew")
121+
await expect(profilePage.savedName).toContainText("LastNew")
122+
await expect(profilePage.savedPhone).toContainText("8888888888")
123+
124+
await expect(profilePage.savedBillingAddress).toContainText("First Last")
125+
await expect(profilePage.savedBillingAddress).toContainText(
126+
"123 Fake Street"
127+
)
128+
await expect(profilePage.savedBillingAddress).toContainText(
129+
"11111, Springdale"
130+
)
131+
await expect(profilePage.savedBillingAddress).toContainText(
132+
"United States"
133+
)
134+
})
135+
136+
await test.step("Log out and log back in", async () => {
137+
await profilePage.logoutLink.click()
138+
await expect(loginPage.container).toBeVisible()
139+
await loginPage.emailInput.fill("[email protected]")
140+
await loginPage.passwordInput.fill("password")
141+
await loginPage.signInButton.click()
142+
await overviewPage.overviewWrapper.waitFor({ state: "visible" })
143+
await overviewPage.profileLink.click()
144+
await profilePage.profileWrapper.waitFor({ state: "visible" })
145+
})
146+
147+
await test.step("Verify the saved profile information is correct", async () => {
148+
await expect(profilePage.savedName).toContainText("FirstNew")
149+
await expect(profilePage.savedName).toContainText("LastNew")
150+
await expect(profilePage.savedPhone).toContainText("8888888888")
151+
152+
await expect(profilePage.savedBillingAddress).toContainText("First Last")
153+
await expect(profilePage.savedBillingAddress).toContainText(
154+
"123 Fake Street"
155+
)
156+
await expect(profilePage.savedBillingAddress).toContainText(
157+
"11111, Springdale"
158+
)
159+
await expect(profilePage.savedBillingAddress).toContainText(
160+
"United States"
161+
)
162+
})
163+
})
164+
165+
test("Verifies password changes work correctly", async ({
166+
loginPage,
167+
accountProfilePage: profilePage,
168+
accountOverviewPage: overviewPage,
169+
}) => {
170+
await test.step("Navigate to the account Profile page", async () => {
171+
await overviewPage.goto()
172+
await profilePage.profileLink.click()
173+
})
174+
175+
await test.step("Update the password", async () => {
176+
await profilePage.passwordEditButton.click()
177+
await profilePage.oldPasswordInput.fill("password")
178+
await profilePage.newPasswordInput.fill("updated-password")
179+
await profilePage.confirmPasswordInput.fill("updated-password")
180+
await profilePage.passwordSaveButton.click()
181+
await expect(profilePage.passwordSuccessMessage).toBeVisible()
182+
})
183+
184+
await test.step("logout and log back in", async () => {
185+
await profilePage.logoutLink.click()
186+
await expect(loginPage.container).toBeVisible()
187+
await loginPage.emailInput.fill("[email protected]")
188+
await loginPage.passwordInput.fill("updated-password")
189+
await loginPage.signInButton.click()
190+
await expect(overviewPage.container).toBeVisible()
191+
})
192+
})
193+
194+
test("Check if changing email address updates user correctly", async ({
195+
loginPage,
196+
accountProfilePage: profilePage,
197+
accountOverviewPage: accountPage,
198+
}) => {
199+
await test.step("Update the user email", async () => {
200+
await accountPage.goto()
201+
await accountPage.welcomeMessage.waitFor({ state: "visible" })
202+
await accountPage.profileLink.click()
203+
await profilePage.profileWrapper.waitFor({ state: "visible" })
204+
await profilePage.emailEditButton.click()
205+
await profilePage.emailInput.fill("[email protected]")
206+
await profilePage.emailSaveButton.click()
207+
await profilePage.emailSuccessMessage.waitFor({ state: "visible" })
208+
})
209+
210+
await test.step("Try logging in again with the old email", async () => {
211+
await profilePage.logoutLink.click()
212+
await loginPage.container.waitFor({ state: "visible" })
213+
await loginPage.emailInput.fill("[email protected]")
214+
await loginPage.passwordInput.fill("password")
215+
await loginPage.signInButton.click()
216+
await loginPage.errorMessage.waitFor({ state: "visible" })
217+
})
218+
219+
await test.step("Login with the new email", async () => {
220+
await loginPage.emailInput.fill("[email protected]")
221+
await loginPage.signInButton.click()
222+
await accountPage.welcomeMessage.waitFor({ state: "visible" })
223+
})
224+
225+
await test.step("Set the email back to [email protected]", async () => {
226+
await accountPage.profileLink.click()
227+
await profilePage.profileWrapper.waitFor({ state: "visible" })
228+
await profilePage.emailEditButton.click()
229+
await profilePage.emailInput.fill("[email protected]")
230+
await profilePage.emailSaveButton.click()
231+
await profilePage.emailSuccessMessage.waitFor({ state: "visible" })
232+
})
233+
234+
await test.step("Try logging out and logging in with the first email", async () => {
235+
await profilePage.logoutLink.click()
236+
await loginPage.container.waitFor({ state: "visible" })
237+
await loginPage.emailInput.fill("[email protected]")
238+
await loginPage.passwordInput.fill("password")
239+
await loginPage.signInButton.click()
240+
await accountPage.welcomeMessage.waitFor({ state: "visible" })
241+
})
242+
})
243+
})

‎src/modules/account/components/account-info/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const AccountInfo = ({
9898
"max-h-0 opacity-0": !isError,
9999
}
100100
)}
101+
data-testid="error-message"
101102
>
102103
<Badge className="p-2 my-4" color="red">
103104
<span>{errorMessage}</span>

‎src/modules/account/components/account-nav/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const AccountNav = ({
3131
<LocalizedClientLink
3232
href="/account"
3333
className="flex items-center gap-x-2 text-small-regular py-2"
34+
data-testid="account-main-link"
3435
>
3536
<>
3637
<ChevronDown className="transform rotate-90" />
@@ -170,9 +171,10 @@ type AccountNavLinkProps = {
170171
href: string
171172
route: string
172173
children: React.ReactNode
174+
'data-testid'?: string
173175
}
174176

175-
const AccountNavLink = ({ href, route, children }: AccountNavLinkProps) => {
177+
const AccountNavLink = ({ href, route, children, 'data-testid': dataTestId }: AccountNavLinkProps) => {
176178
const { countryCode }: { countryCode: string } = useParams()
177179

178180
const active = route.split(countryCode)[1] === href
@@ -182,6 +184,7 @@ const AccountNavLink = ({ href, route, children }: AccountNavLinkProps) => {
182184
className={clx("text-ui-fg-subtle hover:text-ui-fg-base", {
183185
"text-ui-fg-base font-semibold": active,
184186
})}
187+
data-testid={dataTestId}
185188
>
186189
{children}
187190
</LocalizedClientLink>

0 commit comments

Comments
 (0)