2022-06-10 15:24:15 +00:00
|
|
|
/*
|
|
|
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/// <reference types="cypress" />
|
|
|
|
|
|
2023-01-10 23:29:56 +00:00
|
|
|
import { HomeserverInstance } from "../../plugins/utils/homeserver";
|
2022-06-10 15:24:15 +00:00
|
|
|
|
|
|
|
|
const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
|
|
|
|
|
const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
|
|
|
|
|
const STICKER_NAME = "Test Sticker";
|
|
|
|
|
const ROOM_NAME_1 = "Sticker Test";
|
|
|
|
|
const ROOM_NAME_2 = "Sticker Test Two";
|
|
|
|
|
const STICKER_MESSAGE = JSON.stringify({
|
|
|
|
|
action: "m.sticker",
|
|
|
|
|
api: "fromWidget",
|
|
|
|
|
data: {
|
|
|
|
|
name: "teststicker",
|
|
|
|
|
description: STICKER_NAME,
|
|
|
|
|
file: "test.png",
|
|
|
|
|
content: {
|
|
|
|
|
body: STICKER_NAME,
|
|
|
|
|
msgtype: "m.sticker",
|
|
|
|
|
url: "mxc://somewhere",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
requestId: "1",
|
|
|
|
|
widgetId: STICKER_PICKER_WIDGET_ID,
|
|
|
|
|
});
|
|
|
|
|
const WIDGET_HTML = `
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Fake Sticker Picker</title>
|
|
|
|
|
<script>
|
|
|
|
|
window.onmessage = ev => {
|
|
|
|
|
if (ev.data.action === 'capabilities') {
|
|
|
|
|
window.parent.postMessage(Object.assign({
|
|
|
|
|
response: {
|
|
|
|
|
capabilities: ["m.sticker"]
|
|
|
|
|
},
|
|
|
|
|
}, ev.data), '*');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<button name="Send" id="sendsticker">Press for sticker</button>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('sendsticker').onclick = () => {
|
|
|
|
|
window.parent.postMessage(${STICKER_MESSAGE}, '*')
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
function openStickerPicker() {
|
2022-12-12 11:24:14 +00:00
|
|
|
cy.get(".mx_MessageComposer_buttonMenu").click();
|
|
|
|
|
cy.get("#stickersButton").click();
|
2022-06-10 15:24:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sendStickerFromPicker() {
|
|
|
|
|
// Note: Until https://github.com/cypress-io/cypress/issues/136 is fixed we will need
|
|
|
|
|
// to use `chromeWebSecurity: false` in our cypress config. Not even cy.origin() can
|
|
|
|
|
// break into the iframe for us :(
|
|
|
|
|
cy.accessIframe(`iframe[title="${STICKER_PICKER_WIDGET_NAME}"]`).within({}, () => {
|
2022-12-12 11:24:14 +00:00
|
|
|
cy.get("#sendsticker").should("exist").click();
|
2022-06-10 15:24:15 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Sticker picker should close itself after sending.
|
2022-12-12 11:24:14 +00:00
|
|
|
cy.get(".mx_AppTileFullWidth#stickers").should("not.exist");
|
2022-06-10 15:24:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function expectTimelineSticker(roomId: string) {
|
|
|
|
|
// Make sure it's in the right room
|
2022-12-12 11:24:14 +00:00
|
|
|
cy.get(".mx_EventTile_sticker > a").should("have.attr", "href").and("include", `/${roomId}/`);
|
2022-06-10 15:24:15 +00:00
|
|
|
|
|
|
|
|
// Make sure the image points at the sticker image
|
|
|
|
|
cy.get<HTMLImageElement>(`img[alt="${STICKER_NAME}"]`)
|
|
|
|
|
.should("have.attr", "src")
|
|
|
|
|
.and("match", /thumbnail\/somewhere\?/);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
describe("Stickers", () => {
|
|
|
|
|
// We spin up a web server for the sticker picker so that we're not testing to see if
|
|
|
|
|
// sysadmins can deploy sticker pickers on the same Element domain - we actually want
|
|
|
|
|
// to make sure that cross-origin postMessage works properly. This makes it difficult
|
|
|
|
|
// to write the test though, as we have to juggle iframe logistics.
|
|
|
|
|
//
|
|
|
|
|
// See sendStickerFromPicker() for more detail on iframe comms.
|
|
|
|
|
|
|
|
|
|
let stickerPickerUrl: string;
|
2023-01-10 23:29:56 +00:00
|
|
|
let homeserver: HomeserverInstance;
|
2023-03-23 17:25:16 +00:00
|
|
|
let userId: string;
|
2022-06-10 15:24:15 +00:00
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2023-01-10 23:29:56 +00:00
|
|
|
cy.startHomeserver("default").then((data) => {
|
|
|
|
|
homeserver = data;
|
2022-06-10 15:24:15 +00:00
|
|
|
|
2023-03-23 17:25:16 +00:00
|
|
|
cy.initTestUser(homeserver, "Sally").then((user) => (userId = user.userId));
|
2022-06-10 15:24:15 +00:00
|
|
|
});
|
2022-12-12 11:24:14 +00:00
|
|
|
cy.serveHtmlFile(WIDGET_HTML).then((url) => {
|
2022-06-10 15:24:15 +00:00
|
|
|
stickerPickerUrl = url;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
afterEach(() => {
|
2023-01-10 23:29:56 +00:00
|
|
|
cy.stopHomeserver(homeserver);
|
2022-06-10 15:24:15 +00:00
|
|
|
cy.stopWebServers();
|
|
|
|
|
});
|
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
it("should send a sticker to multiple rooms", () => {
|
2022-06-10 15:24:15 +00:00
|
|
|
cy.createRoom({
|
|
|
|
|
name: ROOM_NAME_1,
|
|
|
|
|
}).as("roomId1");
|
|
|
|
|
cy.createRoom({
|
|
|
|
|
name: ROOM_NAME_2,
|
|
|
|
|
}).as("roomId2");
|
|
|
|
|
cy.setAccountData("m.widgets", {
|
|
|
|
|
[STICKER_PICKER_WIDGET_ID]: {
|
|
|
|
|
content: {
|
|
|
|
|
type: "m.stickerpicker",
|
|
|
|
|
name: STICKER_PICKER_WIDGET_NAME,
|
|
|
|
|
url: stickerPickerUrl,
|
2023-03-23 17:25:16 +00:00
|
|
|
creatorUserId: userId,
|
2022-06-10 15:24:15 +00:00
|
|
|
},
|
2023-03-23 17:25:16 +00:00
|
|
|
sender: userId,
|
|
|
|
|
state_key: STICKER_PICKER_WIDGET_ID,
|
|
|
|
|
type: "m.widget",
|
2022-06-10 15:24:15 +00:00
|
|
|
id: STICKER_PICKER_WIDGET_ID,
|
|
|
|
|
},
|
|
|
|
|
}).as("stickers");
|
|
|
|
|
|
|
|
|
|
cy.all([
|
|
|
|
|
cy.get<string>("@roomId1"),
|
|
|
|
|
cy.get<string>("@roomId2"),
|
|
|
|
|
cy.get<{}>("@stickers"), // just want to wait for it to be set up
|
|
|
|
|
]).then(([roomId1, roomId2]) => {
|
|
|
|
|
cy.viewRoomByName(ROOM_NAME_1);
|
|
|
|
|
cy.url().should("contain", `/#/room/${roomId1}`);
|
|
|
|
|
openStickerPicker();
|
|
|
|
|
sendStickerFromPicker();
|
|
|
|
|
expectTimelineSticker(roomId1);
|
|
|
|
|
|
|
|
|
|
// Ensure that when we switch to a different room that the sticker
|
|
|
|
|
// goes to the right place
|
|
|
|
|
cy.viewRoomByName(ROOM_NAME_2);
|
|
|
|
|
cy.url().should("contain", `/#/room/${roomId2}`);
|
|
|
|
|
openStickerPicker();
|
|
|
|
|
sendStickerFromPicker();
|
|
|
|
|
expectTimelineSticker(roomId2);
|
|
|
|
|
});
|
|
|
|
|
});
|
2023-03-23 17:25:16 +00:00
|
|
|
|
|
|
|
|
it("should handle a sticker picker widget missing creatorUserId", () => {
|
|
|
|
|
cy.createRoom({
|
|
|
|
|
name: ROOM_NAME_1,
|
|
|
|
|
}).as("roomId1");
|
|
|
|
|
cy.setAccountData("m.widgets", {
|
|
|
|
|
[STICKER_PICKER_WIDGET_ID]: {
|
|
|
|
|
content: {
|
|
|
|
|
type: "m.stickerpicker",
|
|
|
|
|
name: STICKER_PICKER_WIDGET_NAME,
|
|
|
|
|
url: stickerPickerUrl,
|
|
|
|
|
// No creatorUserId
|
|
|
|
|
},
|
|
|
|
|
sender: userId,
|
|
|
|
|
state_key: STICKER_PICKER_WIDGET_ID,
|
|
|
|
|
type: "m.widget",
|
|
|
|
|
id: STICKER_PICKER_WIDGET_ID,
|
|
|
|
|
},
|
|
|
|
|
}).as("stickers");
|
|
|
|
|
|
|
|
|
|
cy.all([cy.get<string>("@roomId1"), cy.get<{}>("@stickers")]).then(([roomId1]) => {
|
|
|
|
|
cy.viewRoomByName(ROOM_NAME_1);
|
|
|
|
|
cy.url().should("contain", `/#/room/${roomId1}`);
|
|
|
|
|
openStickerPicker();
|
|
|
|
|
sendStickerFromPicker();
|
|
|
|
|
expectTimelineSticker(roomId1);
|
|
|
|
|
});
|
|
|
|
|
});
|
2022-06-10 15:24:15 +00:00
|
|
|
});
|
