Chore: test for change avatar (#26543)

RocketChat · Aug 26, 2022 · 979f884 · 979f884
1 parent 36f246d
commit 979f884
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
@@ -76,7 +76,14 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, suggestions
 								<Avatar url={`/avatar/%40${username}`} />
 							</Button>
 							<IconButton icon='upload' secondary onClick={clickUpload} disabled={disabled} title={t('Upload')} />
-							<IconButton icon='permalink' secondary onClick={clickUrl} disabled={disabled || urlEmpty} title={t('Add URL')} />
+							<IconButton
+								data-qa-id='UserAvatarEditorSetAvatarLink'
+								icon='permalink'
+								secondary
+								onClick={clickUrl}
+								disabled={disabled || urlEmpty}
+								title={t('Add URL')}
+							/>
 							{suggestions && (
 								<UserAvatarSuggestions
 									suggestions={suggestions}
@@ -89,7 +96,13 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, suggestions
 					</Box>
 					<Margins inlineStart='x4'>
 						<Box>{t('Use_url_for_avatar')}</Box>
-						<TextInput flexGrow={0} placeholder={t('Use_url_for_avatar')} value={avatarFromUrl} onChange={handleAvatarFromUrlChange} />
+						<TextInput
+							data-qa-id='UserAvatarEditorLink'
+							flexGrow={0}
+							placeholder={t('Use_url_for_avatar')}
+							value={avatarFromUrl}
+							onChange={handleAvatarFromUrlChange}
+						/>
 					</Margins>
 				</Box>
 			</Box>

diff --git a/apps/meteor/tests/e2e/fixtures/files/test-image.jpeg b/apps/meteor/tests/e2e/fixtures/files/test-image.jpeg
diff --git a/apps/meteor/tests/e2e/page-objects/account-profile.ts b/apps/meteor/tests/e2e/page-objects/account-profile.ts
@@ -16,6 +16,14 @@ export class AccountProfile {
 		return this.page.locator('//label[contains(text(), "Name")]/..//input');
 	}
 
+	get inputAvatarLink(): Locator {
+		return this.page.locator('[data-qa-id="UserAvatarEditorLink"]');
+	}
+
+	get btnSetAvatarLink(): Locator {
+		return this.page.locator('[data-qa-id="UserAvatarEditorSetAvatarLink"]');
+	}
+
 	get inputUsername(): Locator {
 		return this.page.locator('//label[contains(text(), "Username")]/..//input');
 	}
@@ -63,4 +71,8 @@ export class AccountProfile {
 	get btnRemoveTokenModal(): Locator {
 		return this.page.locator('//button[contains(text(), "Remove")]');
 	}
+
+	get inputImageFile(): Locator {
+		return this.page.locator('input[type=file]');
+	}
 }
diff --git a/apps/meteor/tests/e2e/settings-account-profile.spec.ts b/apps/meteor/tests/e2e/settings-account-profile.spec.ts
@@ -74,4 +74,25 @@ test.describe.serial('settings-account-profile', () => {
 			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success')).toBeVisible();
 		});
 	});
+
+	test.describe('Change avatar', () => {
+		test.beforeEach(async () => {
+			await poHomeChannel.sidenav.goToMyAccount();
+		});
+
+		test('expect change avatar image by upload', async ({ page }) => {
+			await poAccountProfile.inputImageFile.setInputFiles('./tests/e2e/fixtures/files/test-image.jpeg');
+
+			await poAccountProfile.btnSubmit.click();
+			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+		});
+
+		test('expect set image from url', async ({ page }) => {
+			await poAccountProfile.inputAvatarLink.fill('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
+			await poAccountProfile.btnSetAvatarLink.click();
+
+			await poAccountProfile.btnSubmit.click();
+			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+		});
+	});
 });