imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New user profile UI in User Settings (#12548)

Browse source 
* New user profile UI in User Settings

Using new Edit In Place component.

* Show avatar upload error

* Fix avatar upload error

* Wire up errors & feedback for display name setting

* Implement avatar upload / remove progress toast

* Add 768px breakpoint

* Fix room profile display

* Update to released compund-web with required components / fixes

* Require compound-web 4.4.0

because we do need it

* Update snapshots

Because of course all the auto-generated IDs of unrelated things
have changed.

* Fix duplicate import

* Fix CSS comment

* Update snapshot

* Run all the tests so the ids stay the same

* Start of a test for ProfileSettings

* More tests

* Test that a toast appears

* Test ToastRack

* Update snapshots

* Add the usernamee control

* Fix playwright tests

 * New compound version for editinplace fixes
 * Fix useId to not just generate a constant ID
 * Use the label in the username component
 * Fix widths of test boxes
 * Update screenshots

* Put ^ back on compound-web version

* Split CSS for room & user profile settings

and name the components correspondingly

* Fix playwright test

* Update room settings screenshot

* Use original screenshot instead

* Fix styling of unrelated buttons

Needed to be added in other places otherwise the specificity changes.

Also put the old screenshots back.

* Add copyright year

* Fix copyright year
This commit is contained in:
David Baker 2024-06-06 14:56:38 +01:00 • committed by GitHub
parent c4c1faff97
commit cfa322cd62
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 919 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

17
playwright/e2e/settings/general-user-settings-tab.spec.ts
View file

@ -21,8 +21,6 @@ const USER_NAME_NEW = "Alice";
const IntegrationManager = "scalar.vector.im";
test.describe("General user settings tab", () => {
let userId: string;
test.use({
displayName: USER_NAME,
config: {
@ -34,18 +32,18 @@ test.describe("General user settings tab", () => {
},
});
test("should be rendered properly", async ({ uut }) => {
test("should be rendered properly", async ({ uut, user }) => {
await expect(uut).toMatchScreenshot("general.png");
// Assert that the top heading is rendered
await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();
const profile = uut.locator(".mx_ProfileSettings_profile");
const profile = uut.locator(".mx_UserProfileSettings_profile");
await profile.scrollIntoViewIfNeeded();
await expect(profile.getByRole("textbox", { name: "Display Name" })).toHaveValue(USER_NAME);
// Assert that a userId is rendered
await expect(profile.locator(".mx_ProfileSettings_profile_controls_userId", { hasText: userId })).toBeVisible();
expect(uut.getByLabel("Username")).toHaveText(user.userId);
// Check avatar setting
const avatar = profile.locator(".mx_AvatarSetting_avatar");
@ -131,12 +129,15 @@ test.describe("General user settings tab", () => {
});
test("should support adding and removing a profile picture", async ({ uut }) => {
const profileSettings = uut.locator(".mx_ProfileSettings");
const profileSettings = uut.locator(".mx_UserProfileSettings");
// Upload a picture
await profileSettings.getByAltText("Upload").setInputFiles("playwright/sample-files/riot.png");
// Find and click "Remove" link button
await profileSettings.locator(".mx_ProfileSettings_profile").getByRole("button", { name: "Remove" }).click();
await profileSettings
.locator(".mx_UserProfileSettings_profile")
.getByRole("button", { name: "Remove" })
.click();
// Assert that the link button disappeared
await expect(
@ -175,7 +176,7 @@ test.describe("General user settings tab", () => {
test("should support changing a display name", async ({ uut, page, app }) => {
// Change the diaplay name to USER_NAME_NEW
const displayNameInput = uut
.locator(".mx_SettingsTab .mx_ProfileSettings")
.locator(".mx_SettingsTab .mx_UserProfileSettings")
.getByRole("textbox", { name: "Display Name" });
await displayNameInput.fill(USER_NAME_NEW);
await displayNameInput.press("Enter");