OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Edit `room-header.spec.ts` to check apps button (#10934) 

* Edit room-header.spec.ts to check apps button

* Check aria-checked status instead

* Edit a comment
t3chguy/dedup-icons-17oct
Suguru Hirahara 2023-05-18 12:54:53 +00:00 committed by GitHub
parent fabfae172b
commit 7d0c68aa29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
cypress/e2e/room/room-header.spec.ts
View File

@ -16,6 +16,8 @@ limitations under the License.
/// <reference types="cypress" />
import { IWidget } from "matrix-widget-api";
import { HomeserverInstance } from "../../plugins/utils/homeserver";
import { SettingLevel } from "../../../src/settings/SettingLevel";
@ -190,4 +192,101 @@ describe("Room Header", () => {
});
});
});
describe("with a widget", () => {
const ROOM_NAME = "Test Room with a widget";
const WIDGET_ID = "fake-widget";
const WIDGET_HTML = `
<html lang="en">
<head>
<title>Fake Widget</title>
</head>
<body>
Hello World
</body>
</html>
`;
let widgetUrl: string;
let roomId: string;
beforeEach(() => {
cy.serveHtmlFile(WIDGET_HTML).then((url) => {
widgetUrl = url;
});
cy.createRoom({ name: ROOM_NAME }).then((id) => {
roomId = id;
// setup widget via state event
cy.getClient()
.then(async (matrixClient) => {
const content: IWidget = {
id: WIDGET_ID,
creatorUserId: "somebody",
type: "widget",
name: "widget",
url: widgetUrl,
};
await matrixClient.sendStateEvent(roomId, "im.vector.modular.widgets", content, WIDGET_ID);
})
.as("widgetEventSent");
// set initial layout
cy.getClient()
.then(async (matrixClient) => {
const content = {
widgets: {
[WIDGET_ID]: {
container: "top",
index: 1,
width: 100,
height: 0,
},
},
};
await matrixClient.sendStateEvent(roomId, "io.element.widgets.layout", content, "");
})
.as("layoutEventSent");
});
cy.all([cy.get<string>("@widgetEventSent"), cy.get<string>("@layoutEventSent")]).then(() => {
// open the room
cy.viewRoomByName(ROOM_NAME);
});
});
it("should highlight the apps button", () => {
// Assert that AppsDrawer is rendered
cy.get(".mx_AppsDrawer").should("exist");
cy.get(".mx_RoomHeader").within(() => {
// Assert that "Hide Widgets" button is rendered and aria-checked is set to true
cy.findByRole("button", { name: "Hide Widgets" })
.should("exist")
.should("have.attr", "aria-checked", "true");
});
cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (highlighted)");
});
it("should support hiding a widget", () => {
cy.get(".mx_AppsDrawer").should("exist");
cy.get(".mx_RoomHeader").within(() => {
// Click the apps button to hide AppsDrawer
cy.findByRole("button", { name: "Hide Widgets" }).should("exist").click();
// Assert that "Show widgets" button is rendered and aria-checked is set to false
cy.findByRole("button", { name: "Show Widgets" })
.should("exist")
.should("have.attr", "aria-checked", "false");
});
// Assert that AppsDrawer is not rendered
cy.get(".mx_AppsDrawer").should("not.exist");
cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)");
});
});
});

1
src/components/views/rooms/RoomHeader.tsx
View File

@ -591,6 +591,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
})}
onClick={this.props.onAppsClick}
title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
aria-checked={this.props.appsShown}
alignment={Alignment.Bottom}
key="apps"
/>,