Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
This commit is contained in:
Germain
2023-08-24 03:48:35 +00:00
committed by GitHub
parent e34920133e
commit 09c5e06d12
125 changed files with 936 additions and 1413 deletions
@@ -232,7 +232,7 @@ describe("General user settings tab", () => {
cy.closeDialog();
// Assert the avatar's initial characters are set
cy.get(".mx_UserMenu .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
cy.get(".mx_RoomView_wrapper .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
cy.get(".mx_UserMenu .mx_BaseAvatar").findByText("A").should("exist"); // Alice
cy.get(".mx_RoomView_wrapper .mx_BaseAvatar").findByText("A").should("exist"); // Alice
});
});
+4 -4
View File
@@ -98,7 +98,7 @@ describe("Threads", () => {
// Wait until the both messages are read
cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => {
cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
// Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout
cy.get(".mx_EventTile_line").should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart);
@@ -118,7 +118,7 @@ describe("Threads", () => {
cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
// Make sure the avatar inside ReadReceiptGroup is visible on the group layout
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
});
// Enable the bubble layout
@@ -127,12 +127,12 @@ describe("Threads", () => {
cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => {
// TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
// See: https://github.com/vector-im/element-web/issues/23569
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist");
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("exist");
// Make sure the avatar inside ReadReceiptGroup is visible on bubble layout
// TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
// See: https://github.com/vector-im/element-web/issues/23569
// cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
// cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
});
// Re-enable the group layout
+1 -1
View File
@@ -45,7 +45,7 @@ const expectDisplayName = (e: JQuery<HTMLElement>, displayName: string): void =>
const expectAvatar = (e: JQuery<HTMLElement>, avatarUrl: string): void => {
cy.all([cy.window({ log: false }), cy.getClient()]).then(([win, cli]) => {
const size = AVATAR_SIZE * win.devicePixelRatio;
expect(e.find(".mx_BaseAvatar_image").attr("src")).to.equal(
expect(e.find(".mx_BaseAvatar img").attr("src")).to.equal(
// eslint-disable-next-line no-restricted-properties
cli.mxcUrlToHttp(avatarUrl, size, size, AVATAR_RESIZE_METHOD),
);