mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-04 10:32:44 +00:00
mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts
And a couple of gitignore tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
+90
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
Copyright 2024,2025 New Vector Ltd.
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { expect, test } from ".";
|
||||
|
||||
test.describe("Appearance user settings tab", () => {
|
||||
test.use({
|
||||
displayName: "Hanako",
|
||||
});
|
||||
|
||||
test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app }) => {
|
||||
const tab = await app.settings.openUserSettings("Appearance");
|
||||
|
||||
// Click "Show advanced" link button
|
||||
await tab.getByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
// Assert that "Hide advanced" link button is rendered
|
||||
await expect(tab.getByRole("button", { name: "Hide advanced" })).toBeVisible();
|
||||
|
||||
await expect(tab).toMatchScreenshot("appearance-tab.png");
|
||||
});
|
||||
|
||||
test(
|
||||
"should support changing font size by using the font size dropdown",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user }) => {
|
||||
await app.settings.openUserSettings("Appearance");
|
||||
|
||||
const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
|
||||
const fontDropdown = tab.locator(".mx_FontScalingPanel_Dropdown");
|
||||
await expect(fontDropdown.getByLabel("Font size")).toBeVisible();
|
||||
|
||||
// Default browser font size is 16px and the select value is 0
|
||||
// -4 value is 12px
|
||||
await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });
|
||||
|
||||
await expect(page).toMatchScreenshot("window-12px.png", { includeDialogBackground: true });
|
||||
},
|
||||
);
|
||||
|
||||
test("should support enabling system font", async ({ page, app, user }) => {
|
||||
await app.settings.openUserSettings("Appearance");
|
||||
const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
|
||||
|
||||
// Click "Show advanced" link button
|
||||
await tab.getByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
|
||||
await tab.getByRole("switch", { name: "Use a system font" }).click();
|
||||
|
||||
// Assert that the font-family value was removed
|
||||
await expect(page.locator("body")).toHaveCSS("font-family", '""');
|
||||
});
|
||||
|
||||
test(
|
||||
"should keep same font and emoji when switching theme",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user, util }) => {
|
||||
const roomId = await util.createAndDisplayRoom();
|
||||
await app.client.sendMessage(roomId, { body: "Message with 🦡", msgtype: "m.text" });
|
||||
|
||||
await app.settings.openUserSettings("Appearance");
|
||||
const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
|
||||
await tab.getByRole("button", { name: "Show advanced" }).click();
|
||||
await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
|
||||
await tab.getByRole("switch", { name: "Use a system font" }).click();
|
||||
|
||||
await app.closeDialog();
|
||||
await expect(page).toMatchScreenshot("window-before-switch.png", {
|
||||
mask: [page.locator(".mx_MessageTimestamp")],
|
||||
});
|
||||
|
||||
// Switch to dark theme
|
||||
await app.settings.openUserSettings("Appearance");
|
||||
await util.getMatchSystemThemeSwitch().click();
|
||||
await util.getDarkTheme().click();
|
||||
|
||||
await app.closeDialog();
|
||||
// Font and emoji should remain the same after theme switch
|
||||
await expect(page).toMatchScreenshot("window-after-switch.png", {
|
||||
mask: [page.locator(".mx_MessageTimestamp")],
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,244 @@
|
||||
/*
|
||||
* Copyright 2024 New Vector Ltd.
|
||||
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type Locator, type Page } from "@playwright/test";
|
||||
|
||||
import { type ElementAppPage } from "../../../pages/ElementAppPage";
|
||||
import { test as base, expect } from "../../../element-web-test";
|
||||
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
||||
import { Layout } from "../../../../src/settings/enums/Layout";
|
||||
|
||||
export { expect };
|
||||
|
||||
/**
|
||||
* Set up for the appearance tab test
|
||||
*/
|
||||
export const test = base.extend<{
|
||||
util: Helpers;
|
||||
}>({
|
||||
util: async ({ page, app }, use) => {
|
||||
await use(new Helpers(page, app));
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* A collection of helper functions for the appearance tab test
|
||||
* The goal is to make easier to get and interact with the button, input, or other elements of the appearance tab
|
||||
*/
|
||||
class Helpers {
|
||||
private CUSTOM_THEME_URL = "http://custom.theme";
|
||||
private CUSTOM_THEME = {
|
||||
name: "Custom theme",
|
||||
isDark: false,
|
||||
colors: {},
|
||||
compound: {
|
||||
"--cpd-color-bg-canvas-default": "tomato",
|
||||
},
|
||||
};
|
||||
|
||||
constructor(
|
||||
private page: Page,
|
||||
private app: ElementAppPage,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* Open the appearance tab
|
||||
*/
|
||||
openAppearanceTab() {
|
||||
return this.app.settings.openUserSettings("Appearance");
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the appearance tab
|
||||
*/
|
||||
closeAppearanceTab() {
|
||||
return this.app.settings.closeDialog();
|
||||
}
|
||||
|
||||
/**
|
||||
* Compare screenshot and hide the matrix chat
|
||||
* @param locator
|
||||
* @param screenshot
|
||||
*/
|
||||
assertScreenshot(locator: Locator, screenshot: `${string}.png`) {
|
||||
return expect(locator).toMatchScreenshot(screenshot, {
|
||||
css: `
|
||||
#matrixchat {
|
||||
display: none;
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
|
||||
// Theme Panel
|
||||
|
||||
/**
|
||||
* Disable in the settings the system theme
|
||||
*/
|
||||
disableSystemTheme() {
|
||||
return this.app.settings.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the theme section
|
||||
*/
|
||||
getThemePanel() {
|
||||
return this.page.getByTestId("themePanel");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the system theme toggle
|
||||
*/
|
||||
getMatchSystemThemeSwitch() {
|
||||
return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the theme radio button
|
||||
* @param theme - the theme to select
|
||||
* @private
|
||||
*/
|
||||
private getThemeRadio(theme: string) {
|
||||
return this.getThemePanel().getByRole("radio", { name: theme });
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the light theme radio button
|
||||
*/
|
||||
getLightTheme() {
|
||||
return this.getThemeRadio("Light");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the dark theme radio button
|
||||
*/
|
||||
getDarkTheme() {
|
||||
return this.getThemeRadio("Dark");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the custom theme radio button
|
||||
*/
|
||||
getCustomTheme() {
|
||||
return this.getThemeRadio(this.CUSTOM_THEME.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the high contrast theme radio button
|
||||
*/
|
||||
getHighContrastTheme() {
|
||||
return this.getThemeRadio("High contrast");
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a custom theme
|
||||
* Mock the request to the custom and return a fake local custom theme
|
||||
*/
|
||||
async addCustomTheme() {
|
||||
await this.page.route(this.CUSTOM_THEME_URL, (route) =>
|
||||
route.fulfill({ body: JSON.stringify(this.CUSTOM_THEME) }),
|
||||
);
|
||||
await this.page.getByRole("textbox", { name: "Add custom theme" }).fill(this.CUSTOM_THEME_URL);
|
||||
await this.page.getByRole("button", { name: "Add custom theme" }).click();
|
||||
await this.page.unroute(this.CUSTOM_THEME_URL);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the custom theme
|
||||
*/
|
||||
removeCustomTheme() {
|
||||
return this.getThemePanel().getByRole("listitem", { name: this.CUSTOM_THEME.name }).getByRole("button").click();
|
||||
}
|
||||
|
||||
// Message layout Panel
|
||||
|
||||
/**
|
||||
* Create and display a room named Test Room
|
||||
*/
|
||||
async createAndDisplayRoom(): Promise<string> {
|
||||
const roomId = await this.app.client.createRoom({ name: "Test Room" });
|
||||
await this.app.viewRoomByName("Test Room");
|
||||
return roomId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert the room layout
|
||||
* @param layout
|
||||
* @private
|
||||
*/
|
||||
private assertRoomLayout(layout: Layout) {
|
||||
return expect(this.page.locator(`.mx_RoomView_body[data-layout=${layout}]`)).toBeVisible();
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert the room layout is modern
|
||||
*/
|
||||
assertModernLayout() {
|
||||
return this.assertRoomLayout(Layout.Group);
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert the room layout is bubble
|
||||
*/
|
||||
assertBubbleLayout() {
|
||||
return this.assertRoomLayout(Layout.Bubble);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the layout panel
|
||||
*/
|
||||
getMessageLayoutPanel() {
|
||||
return this.page.getByTestId("layoutPanel");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the layout radio button
|
||||
* @param layoutName
|
||||
* @private
|
||||
*/
|
||||
private getLayout(layoutName: string) {
|
||||
return this.getMessageLayoutPanel().getByRole("radio", { name: layoutName });
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the message bubbles layout radio button
|
||||
*/
|
||||
getBubbleLayout() {
|
||||
return this.getLayout("Message bubbles");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the modern layout radio button
|
||||
*/
|
||||
getModernLayout() {
|
||||
return this.getLayout("Modern");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the IRC layout radio button
|
||||
*/
|
||||
getIRCLayout() {
|
||||
return this.getLayout("IRC (experimental)");
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the compact layout switch
|
||||
*/
|
||||
getCompactLayoutSwitch() {
|
||||
return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
|
||||
}
|
||||
|
||||
/**
|
||||
* Assert the compact layout is enabled
|
||||
*/
|
||||
assertCompactLayout() {
|
||||
return expect(
|
||||
this.page.locator("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout"),
|
||||
).toBeVisible();
|
||||
}
|
||||
}
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { expect, test } from ".";
|
||||
|
||||
test.describe("Appearance user settings tab", () => {
|
||||
test.use({
|
||||
displayName: "Hanako",
|
||||
});
|
||||
|
||||
test.describe("Message Layout Panel", () => {
|
||||
test.beforeEach(async ({ app, user, util }) => {
|
||||
await util.createAndDisplayRoom();
|
||||
await util.assertModernLayout();
|
||||
await util.openAppearanceTab();
|
||||
});
|
||||
|
||||
test(
|
||||
"should change the message layout from modern to bubble",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user, util }) => {
|
||||
await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-modern.png");
|
||||
|
||||
await util.getBubbleLayout().click();
|
||||
|
||||
// Assert that modern are irc layout are not selected
|
||||
await expect(util.getBubbleLayout()).toBeChecked();
|
||||
await expect(util.getModernLayout()).not.toBeChecked();
|
||||
await expect(util.getIRCLayout()).not.toBeChecked();
|
||||
|
||||
// Assert that the room layout is set to bubble layout
|
||||
await util.assertBubbleLayout();
|
||||
await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-bubble.png");
|
||||
},
|
||||
);
|
||||
|
||||
test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
|
||||
await expect(util.getCompactLayoutSwitch()).not.toBeChecked();
|
||||
|
||||
await util.getCompactLayoutSwitch().click();
|
||||
await util.assertCompactLayout();
|
||||
});
|
||||
|
||||
test("should disable compact layout when the modern layout is not selected", async ({
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
util,
|
||||
}) => {
|
||||
await expect(util.getCompactLayoutSwitch()).not.toBeDisabled();
|
||||
|
||||
// Select the bubble layout, which should disable the compact layout checkbox
|
||||
await util.getBubbleLayout().click();
|
||||
await expect(util.getCompactLayoutSwitch()).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { expect, test } from ".";
|
||||
|
||||
test.describe("Appearance user settings tab", () => {
|
||||
test.use({
|
||||
displayName: "Hanako",
|
||||
});
|
||||
|
||||
test.describe("Theme Choice Panel", () => {
|
||||
test.beforeEach(async ({ app, user, util }) => {
|
||||
// Disable the default theme for consistency in case ThemeWatcher automatically chooses it
|
||||
await util.disableSystemTheme();
|
||||
await util.openAppearanceTab();
|
||||
});
|
||||
|
||||
test(
|
||||
"should be rendered with the light theme selected",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, util }) => {
|
||||
// Assert that 'Match system theme' is not checked
|
||||
await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
|
||||
|
||||
// Assert that the light theme is selected
|
||||
await expect(util.getLightTheme()).toBeChecked();
|
||||
// Assert that the dark and high contrast themes are not selected
|
||||
await expect(util.getDarkTheme()).not.toBeChecked();
|
||||
await expect(util.getHighContrastTheme()).not.toBeChecked();
|
||||
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
|
||||
},
|
||||
);
|
||||
|
||||
test(
|
||||
"should disable the themes when the system theme is clicked",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, util }) => {
|
||||
await util.getMatchSystemThemeSwitch().click();
|
||||
|
||||
// Assert that the themes are disabled
|
||||
await expect(util.getLightTheme()).toBeDisabled();
|
||||
await expect(util.getDarkTheme()).toBeDisabled();
|
||||
await expect(util.getHighContrastTheme()).toBeDisabled();
|
||||
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-match-system-enabled.png");
|
||||
},
|
||||
);
|
||||
|
||||
test("should change the theme to dark", { tag: "@screenshot" }, async ({ page, app, util }) => {
|
||||
// Assert that the light theme is selected
|
||||
await expect(util.getLightTheme()).toBeChecked();
|
||||
|
||||
await util.getDarkTheme().click();
|
||||
|
||||
// Assert that the light and high contrast themes are not selected
|
||||
await expect(util.getLightTheme()).not.toBeChecked();
|
||||
await expect(util.getDarkTheme()).toBeChecked();
|
||||
await expect(util.getHighContrastTheme()).not.toBeChecked();
|
||||
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-dark.png");
|
||||
});
|
||||
|
||||
test.describe("custom theme", () => {
|
||||
test.use({
|
||||
labsFlags: ["feature_custom_themes"],
|
||||
});
|
||||
|
||||
test("should render the custom theme section", { tag: "@screenshot" }, async ({ page, app, util }) => {
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
|
||||
});
|
||||
|
||||
test(
|
||||
"should be able to add and remove a custom theme",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, util }) => {
|
||||
await util.addCustomTheme();
|
||||
|
||||
await expect(util.getCustomTheme()).not.toBeChecked();
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
|
||||
|
||||
await util.removeCustomTheme();
|
||||
await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
|
||||
},
|
||||
);
|
||||
|
||||
test(
|
||||
"should keep custom theme when reloading the page",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user, util }) => {
|
||||
await util.addCustomTheme();
|
||||
await util.getCustomTheme().click();
|
||||
await util.closeAppearanceTab();
|
||||
|
||||
await expect(page).toMatchScreenshot("window-custom-theme.png");
|
||||
|
||||
await page.reload();
|
||||
|
||||
await util.openAppearanceTab();
|
||||
// Assert that the custom theme is still selected after reloading the page
|
||||
await expect(util.getCustomTheme()).toBeChecked();
|
||||
|
||||
await util.closeAppearanceTab();
|
||||
await expect(page).toMatchScreenshot("window-custom-theme.png");
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user