New room list: new visual for invitation (#29773)

* feat: rework invitation styling in room list item

* test: update notification decoration test

* test: add test for vm

* test(e2e): update to new invitation styling
This commit is contained in:
Florian Duros
2025-04-16 11:23:23 +02:00
committed by GitHub
parent 427e61309b
commit b511bf064d
6 changed files with 42 additions and 12 deletions

View File

@@ -33,6 +33,10 @@ describe("RoomListItemViewModel", () => {
room = mkStubRoom("roomId", "roomName", matrixClient);
});
afterEach(() => {
jest.resetAllMocks();
});
it("should dispatch view room action on openRoom", async () => {
const { result: vm } = renderHook(
() => useRoomListItemViewModel(room),
@@ -68,6 +72,20 @@ describe("RoomListItemViewModel", () => {
expect(vm.current.showHoverMenu).toBe(true);
});
it("should not show hover menu if user has an invitation notification", async () => {
mocked(hasAccessToOptionsMenu).mockReturnValue(true);
const notificationState = new RoomNotificationState(room, false);
jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(notificationState);
jest.spyOn(notificationState, "invited", "get").mockReturnValue(false);
const { result: vm } = renderHook(
() => useRoomListItemViewModel(room),
withClientContextRenderOptions(room.client),
);
expect(vm.current.showHoverMenu).toBe(true);
});
describe("a11yLabel", () => {
let notificationState: RoomNotificationState;
beforeEach(() => {
@@ -108,7 +126,10 @@ describe("RoomListItemViewModel", () => {
},
])("should return the $label label", ({ mock, expected }) => {
mock?.();
const { result: vm } = renderHook(() => useRoomListItemViewModel(room));
const { result: vm } = renderHook(
() => useRoomListItemViewModel(room),
withClientContextRenderOptions(room.client),
);
expect(vm.current.a11yLabel).toBe(expected);
});
});

View File

@@ -23,11 +23,17 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
>
<span
class="_unread-counter_9mg0k_8"
<svg
fill="var(--cpd-color-icon-accent-primary)"
height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
1
</span>
<path
d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m0 5.111a1 1 0 0 0 .514.874l7 3.89a1 1 0 0 0 .972 0l7-3.89a1 1 0 1 0-.972-1.748L12 11.856 5.486 8.237A1 1 0 0 0 4 9.111"
/>
</svg>
</div>
</DocumentFragment>
`;