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

Move room directory Puppeteer tests over to Cypress (#8832) 

* Fix user view percy test by sticking the user avatar colour

* Move room directory Puppeteer tests over to Cypress

* Consolidate import

* Fix tests

* Grab default widths

* Tweak Percy CSS mechanism
pull/28788/head^2
Michael Telatynski 2022-06-13 19:25:39 +01:00 committed by GitHub
parent dfdba46d57
commit b03aa2ebf5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 150 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/global.d.ts vendored
View File

@ -15,9 +15,17 @@ limitations under the License.
*/
import "matrix-js-sdk/src/@types/global";
import type { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
import type { MatrixScheduler, MemoryCryptoStore, MemoryStore, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import type { RoomMemberEvent } from "matrix-js-sdk/src/models/room-member";
import type {
MatrixClient,
ClientEvent,
MatrixScheduler,
MemoryCryptoStore,
MemoryStore,
Preset,
RoomStateEvent,
Visibility,
RoomMemberEvent,
} from "matrix-js-sdk/src/matrix";
import type { WebStorageSessionStore } from "matrix-js-sdk/src/store/session/webstorage";
import type { MatrixDispatcher } from "../src/dispatcher/dispatcher";
import type PerformanceMonitor from "../src/performance";
@ -42,6 +50,8 @@ declare global {
MemoryStore: typeof MemoryStore;
MemoryCryptoStore: typeof MemoryCryptoStore;
WebStorageSessionStore: typeof WebStorageSessionStore;
Visibility: typeof Visibility;
Preset: typeof Preset;
};
}
}

103
cypress/integration/11-room-directory/room-directory.spec.ts Normal file
View File

@ -0,0 +1,103 @@
/*
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" />
import { SynapseInstance } from "../../plugins/synapsedocker";
import { MatrixClient } from "../../global";
describe("Room Directory", () => {
let synapse: SynapseInstance;
beforeEach(() => {
cy.startSynapse("default").then(data => {
synapse = data;
cy.initTestUser(synapse, "Ray");
cy.getBot(synapse, "Paul").as("bot");
});
});
afterEach(() => {
cy.stopSynapse(synapse);
});
it("should allow admin to add alias & publish room to directory", () => {
cy.window({ log: false }).then(win => {
cy.createRoom({
name: "Gaming",
preset: win.matrixcs.Preset.PublicChat,
}).as("roomId");
});
cy.viewRoomByName("Gaming");
cy.openRoomSettings();
// First add a local address `gaming`
cy.contains(".mx_SettingsFieldset", "Local Addresses").within(() => {
cy.get(".mx_Field input").type("gaming");
cy.contains(".mx_AccessibleButton", "Add").click();
cy.get(".mx_EditableItem_item").should("contain", "#gaming:localhost");
});
// Publish into the public rooms directory
cy.contains(".mx_SettingsFieldset", "Published Addresses").within(() => {
cy.get("#canonicalAlias").find(":selected").should("contain", "#gaming:localhost");
cy.get(`[aria-label="Publish this room to the public in localhost's room directory?"]`).click()
.should("have.attr", "aria-checked", "true");
});
cy.closeDialog();
cy.all([
cy.get<MatrixClient>("@bot"),
cy.get<string>("@roomId"),
]).then(async ([bot, roomId]) => {
const resp = await bot.publicRooms({});
expect(resp.total_room_count_estimate).to.equal(1);
expect(resp.chunk).to.have.length(1);
expect(resp.chunk[0].room_id).to.equal(roomId);
});
});
it("should allow finding published rooms in directory", () => {
const name = "This is a public room";
cy.all([
cy.window({ log: false }),
cy.get<MatrixClient>("@bot"),
]).then(([win, bot]) => {
bot.createRoom({
visibility: win.matrixcs.Visibility.Public,
name,
room_alias_name: "test1234",
});
});
cy.get('[role="button"][aria-label="Explore rooms"]').click();
cy.get('.mx_RoomDirectory_dialogWrapper [name="dirsearch"]').type("Unknown Room");
cy.get(".mx_RoomDirectory_dialogWrapper h5").should("contain", 'No results for "Unknown Room"');
cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered no results");
cy.get('.mx_RoomDirectory_dialogWrapper [name="dirsearch"]').type("{selectAll}{backspace}test1234");
cy.get(".mx_RoomDirectory_dialogWrapper").contains(".mx_RoomDirectory_listItem", name)
.should("exist").as("resultRow");
cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered one result");
cy.get("@resultRow").find(".mx_AccessibleButton").contains("Join").click();
cy.url().should('contain', `/#/room/#test1234:localhost`);
});
});

2
cypress/support/percy.ts
View File

@ -37,7 +37,7 @@ declare global {
}
}
Cypress.Commands.add("percySnapshotElement", { prevSubject: true }, (subject, name, options) => {
Cypress.Commands.add("percySnapshotElement", { prevSubject: "element" }, (subject, name, options) => {
cy.percySnapshot(name, {
domTransformation: documentClone => scope(documentClone, subject.selector),
...options,

30
cypress/support/settings.ts
View File

@ -33,16 +33,22 @@ declare global {
*/
openUserSettings(tab?: string): Chainable<JQuery<HTMLElement>>;
/**
* Open room settings (via room header menu), returning a handle to the resulting dialog.
* @param tab the name of the tab to switch to after opening, optional.
*/
openRoomSettings(tab?: string): Chainable<JQuery<HTMLElement>>;
/**
* Switch settings tab to the one by the given name, ideally call this in the context of the dialog.
* @param tab the name of the tab to switch to.
*/
switchTabUserSettings(tab: string): Chainable<JQuery<HTMLElement>>;
switchTab(tab: string): Chainable<JQuery<HTMLElement>>;
/**
* Close user settings, ideally call this in the context of the dialog.
* Close dialog, ideally call this in the context of the dialog.
*/
closeUserSettings(): Chainable<JQuery<HTMLElement>>;
closeDialog(): Chainable<JQuery<HTMLElement>>;
/**
* Join the given beta, the `Labs` tab must already be opened,
@ -72,18 +78,30 @@ Cypress.Commands.add("openUserSettings", (tab?: string): Chainable<JQuery<HTMLEl
});
return cy.get(".mx_UserSettingsDialog").within(() => {
if (tab) {
cy.switchTabUserSettings(tab);
cy.switchTab(tab);
}
});
});
Cypress.Commands.add("switchTabUserSettings", (tab: string): Chainable<JQuery<HTMLElement>> => {
Cypress.Commands.add("openRoomSettings", (tab?: string): Chainable<JQuery<HTMLElement>> => {
cy.get(".mx_RoomHeader_name").click();
cy.get(".mx_RoomTile_contextMenu").within(() => {
cy.get('[aria-label="Settings"]').click();
});
return cy.get(".mx_RoomSettingsDialog").within(() => {
if (tab) {
cy.switchTab(tab);
}
});
});
Cypress.Commands.add("switchTab", (tab: string): Chainable<JQuery<HTMLElement>> => {
return cy.get(".mx_TabbedView_tabLabels").within(() => {
cy.get(".mx_TabbedView_tabLabel").contains(tab).click();
});
});
Cypress.Commands.add("closeUserSettings", (): Chainable<JQuery<HTMLElement>> => {
Cypress.Commands.add("closeDialog", (): Chainable<JQuery<HTMLElement>> => {
return cy.get('[aria-label="Close dialog"]').click();
});

9
res/css/views/avatars/_BaseAvatar.scss
View File

@ -52,3 +52,12 @@ limitations under the License.
vertical-align: top;
background-color: $background;
}
// Percy screenshot test specific CSS
@media only percy {
.mx_BaseAvatar_initial,
.mx_BaseAvatar_initial + .mx_BaseAvatar_image {
// Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot
background-color: $username-variant2-color !important;
}
}

2
test/end-to-end-tests/src/scenario.ts
View File

@ -18,7 +18,6 @@ limitations under the License.
import { range } from './util';
import { signup } from './usecases/signup';
import { toastScenarios } from './scenarios/toast';
import { roomDirectoryScenarios } from './scenarios/directory';
import { lazyLoadingScenarios } from './scenarios/lazy-loading';
import { e2eEncryptionScenarios } from './scenarios/e2e-encryption';
import { ElementSession } from "./session";
@ -45,7 +44,6 @@ export async function scenario(createSession: (s: string) => Promise<ElementSess
const bob = await createUser("bob");
await toastScenarios(alice, bob);
await roomDirectoryScenarios(alice, bob);
await e2eEncryptionScenarios(alice, bob);
console.log("create REST users:");
const charlies = await createRestUsers(restCreator);

46
test/end-to-end-tests/src/scenarios/directory.ts
View File

@ -1,46 +0,0 @@
/*
Copyright 2018 New Vector Ltd
Copyright 2019 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.
*/
import { join } from '../usecases/join';
import { sendMessage } from '../usecases/send-message';
import { receiveMessage } from '../usecases/timeline';
import { createRoom } from '../usecases/create-room';
import { changeRoomSettings, checkRoomSettings } from '../usecases/room-settings';
import { ElementSession } from "../session";
export async function roomDirectoryScenarios(alice: ElementSession, bob: ElementSession) {
console.log(" creating a public room and join through directory:");
const room = 'test';
await createRoom(alice, room);
const settings = {
directory: true,
visibility: "public",
alias: "#test:localhost",
publishedAlias: "#test:localhost",
};
await changeRoomSettings(alice, settings);
await join(bob, room); //looks up room in directory
await checkRoomSettings(bob, settings);
const bobMessage = "hi Alice!";
await sendMessage(bob, bobMessage);
await receiveMessage(alice, { sender: "bob", body: bobMessage });
const aliceMessage = "hi Bob, welcome!";
await sendMessage(alice, aliceMessage);
await receiveMessage(bob, { sender: "alice", body: aliceMessage });
}