sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Iterate

Browse Source
This commit is contained in:
Michael Telatynski
2025-05-14 11:56:58 +01:00
parent 1985a351d9
commit 3c7bb885fd
8 changed files with 174 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/banner/element-web/tests/banner.spec.ts
+78 -30
View File
@@ -11,6 +11,9 @@ import { ModuleConfig } from "../src/config.ts";
test.describe("Banner", () => {
test.use({
displayName: "Timmy",
navigationJsonResolver: async ({}, use) => {
await use(Promise.withResolvers<void>());
},
page: async ({ context, page, moduleDir }, use) => {
for (const path of ["logo.svg", "app1.png", "app2.png", "opendesk/"]) {
await context.route(`/${path}*`, async (route) => {
@@ -18,15 +21,6 @@ test.describe("Banner", () => {
await route.fulfill({ path: `${moduleDir}/tests/fixture/${file}` });
});
}
await context.route("http://localhost:8080/ics/navigation.json*", async (route) => {
await route.fulfill({
path: `${moduleDir}/tests/fixture/navigation.json`,
contentType: "application/json",
});
});
await context.route("http://localhost:8080/ics/silent", async (route) => {
await route.fulfill({ path: `${moduleDir}/tests/fixture/silent/index.html`, contentType: "text/html" });
});
await page.goto("/");
await use(page);
@@ -35,6 +29,7 @@ test.describe("Banner", () => {
test("should error if config is missing", { tag: ["@screenshot"] }, async ({ page }) => {
await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
await expect(page.getByText("Errors in module configuration")).toBeVisible();
// We don't take a screenshot as we don't want to assert Element's styling, only our own
});
@@ -50,8 +45,8 @@ test.describe("Banner", () => {
links: [
{
icon_uri: "http://localhost:8080/app1.png",
name: "App 1",
link_url: "https://example.com/app1",
name: "E-Mail",
link_url: "https://example.com/email",
target: "app1",
},
{
@@ -96,20 +91,27 @@ test.describe("Banner", () => {
},
});
test("should render", { tag: ["@screenshot"] }, async ({ page, axe }) => {
test.beforeEach(async ({ context, moduleDir, navigationJsonResolver }) => {
await context.route("http://localhost:8080/ics/navigation.json*", async (route) => {
await navigationJsonResolver.promise;
await route.fulfill({
path: `${moduleDir}/tests/fixture/navigation.json`,
contentType: "application/json",
});
});
await context.route("http://localhost:8080/ics/silent", async (route) => {
await route.fulfill({
path: `${moduleDir}/tests/fixture/silent/index.html`,
contentType: "text/html",
});
});
});
test("should render", { tag: ["@screenshot"] }, async ({ page, axe, navigationJsonResolver }) => {
await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();
await expect(page.getByLabel("Show portal")).toHaveAttribute("href", "https://example.com/portal");
const nav = page.locator("nav");
if (type === "univention") {
await expect(nav).toMatchScreenshot(`${type}_nav_loading.png`);
// The stub silent html doesn't seem to work in Playwright so send the postMessage manually
await page.evaluate(() => {
window.postMessage({
loggedIn: true,
});
});
}
const trigger = page.getByLabel("Show menu");
await expect(trigger).toBeVisible();
@@ -124,21 +126,28 @@ test.describe("Banner", () => {
await test.step("open menu", async () => {
await trigger.click();
const app1 = page.getByText("App 1");
await expect(app1).toHaveAttribute("href", "https://example.com/app1");
await app1.hover();
const sidebar = page.getByRole("dialog");
if (type === "univention") {
await expect(sidebar).toMatchScreenshot(`${type}_menu_loading.png`);
await navigationJsonResolver.resolve();
}
const emailApp = page.getByText("E-Mail");
await expect(emailApp).toHaveAttribute("href", "https://example.com/email");
await emailApp.hover();
// Assert the sidebar looks as we expect
const sidebar = page.getByRole("dialog");
await expect(axe).toHaveNoViolations();
await expect(sidebar).toMatchAriaSnapshot();
await expect(page).toMatchScreenshot(`${type}_menu.png`, {
// We exclude this as we don't want to assert Element's styling, only our own
css: `
#matrixchat {
opacity: 0;
background: orchid;
}
`,
#matrixchat {
opacity: 0;
background: orchid;
}
`,
});
});
@@ -152,4 +161,43 @@ test.describe("Banner", () => {
});
});
}
test.describe("univention config", () => {
test.use({
config: {
"io.element.element-web-modules.banner": {
logo_url: "http://localhost:8080/opendesk/logomark.svg",
logo_link_url: "https://example.com/portal",
menu: {
type: "univention",
logo_url: "http://localhost:8080/opendesk/logofull.svg",
ics_url: "http://localhost:8080/ics/",
},
},
},
});
test.beforeEach(async ({ context }) => {
await context.route("http://localhost:8080/ics/silent", async (route) => {
await route.fulfill({ status: 500 });
});
await context.route("http://localhost:8080/ics/navigation.json*", async (route) => {
await route.fulfill({ status: 500 });
});
});
test("should render error", { tag: ["@screenshot"] }, async ({ page, axe }) => {
await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();
await expect(page.getByLabel("Show portal")).toHaveAttribute("href", "https://example.com/portal");
const nav = page.locator("nav");
const trigger = page.getByLabel("Show menu");
await trigger.click();
const sidebar = page.getByRole("dialog");
await expect(sidebar.getByText("Failed to load")).toBeVisible();
await expect(sidebar).toMatchScreenshot("univention_error.png");
});
});
});
modules/banner/element-web/tests/fixture/navigation.json
+1 -1
View File
@@ -36,7 +36,7 @@
"identifier": "app5",
"display_name": "E-Mail",
"icon_url": "http://localhost:8080/opendesk/app5.svg",
"link": "https://example.com/app5",
"link": "https://example.com/email",
"target": "_blank"
},
{
modules/banner/element-web/tests/fixture/silent/index.html
+3 -3
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Univention Silent Login</title>
<script type="text/javascript">
window.postMessage({
loggedIn: true,
});
// window.postMessage({
// loggedIn: true,
// });
</script>
</head>
<body></body>