mirror of https://github.com/vector-im/riot-web
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 commentt3chguy/dedup-icons-17oct
parent
fabfae172b
commit
7d0c68aa29
|
@ -16,6 +16,8 @@ limitations under the License.
|
||||||
|
|
||||||
/// <reference types="cypress" />
|
/// <reference types="cypress" />
|
||||||
|
|
||||||
|
import { IWidget } from "matrix-widget-api";
|
||||||
|
|
||||||
import { HomeserverInstance } from "../../plugins/utils/homeserver";
|
import { HomeserverInstance } from "../../plugins/utils/homeserver";
|
||||||
import { SettingLevel } from "../../../src/settings/SettingLevel";
|
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)");
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -591,6 +591,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
|
||||||
})}
|
})}
|
||||||
onClick={this.props.onAppsClick}
|
onClick={this.props.onAppsClick}
|
||||||
title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
|
title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
|
||||||
|
aria-checked={this.props.appsShown}
|
||||||
alignment={Alignment.Bottom}
|
alignment={Alignment.Bottom}
|
||||||
key="apps"
|
key="apps"
|
||||||
/>,
|
/>,
|
||||||
|
|
Loading…
Reference in New Issue