kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-12-12 09:52:37 +00:00
Code Issues Projects Releases Wiki Activity

[core] refactor: replace XMLHttpRequest with fetch and migrate e2e tests to Playwright (#3950)

Browse Source 
### 1. Replace `XMLHttpRequest` with the modern `fetch` API for loading
translation files

#### Changes
- **translator.js**: Use `fetch` with `async/await` instead of XHR
callbacks
- **loader.js**: Align URL handling and add error handling (follow-up to
fetch migration)
- **Tests**: Update infrastructure for `fetch` compatibility

#### Benefits
- Modern standard API
- Cleaner, more readable code
- Better error handling and fallback mechanisms

### 2. Migrate e2e tests to Playwright

This wasn't originally planned for this PR, but is related. While
investigating suspicious log entries which surfaced after the fetch
migration I kept running into JSDOM’s limitations. That pushed me to
migrate the E2E suite to Playwright instead.

#### Changes
- switch e2e harness to Playwright (`tests/e2e/helpers/global-setup.js`)
- rewrite specs to use Playwright locators + shared `expectTextContent`
- install Chromium via `npx playwright install --with-deps` in CI

#### Benefits
- much closer to real browser behaviour
- and no more fighting JSDOM’s quirks
This commit is contained in:
Kristjan ESPERANTO
2025-11-08 21:59:05 +01:00
committed by GitHub
parent 2b08288346
commit f29f424a62
31 changed files with 508 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
tests/e2e/modules/calendar_spec.js
View File

@@ -1,30 +1,28 @@
const { expect } = require("playwright/test");
const helpers = require("../helpers/global-setup");
const serverBasicAuth = require("../helpers/basic-auth");
describe("Calendar module", () => {
let page;
/**
* @param {string} element css selector
* @param {string} result expected number
* @param {string} not reverse result
* @returns {boolean} result
* Assert the number of matching elements.
* @param {string} selector css selector
* @param {number} expectedLength expected number of elements
* @param {string} [not] optional negation marker (use "not" to negate)
* @returns {Promise<void>}
*/
const testElementLength = async (element, result, not) => {
const elem = await helpers.waitForAllElements(element);
expect(elem).not.toBeNull();
const testElementLength = async (selector, expectedLength, not) => {
const locator = page.locator(selector);
if (not === "not") {
expect(elem).not.toHaveLength(result);
await expect(locator).not.toHaveCount(expectedLength);
} else {
expect(elem).toHaveLength(result);
await expect(locator).toHaveCount(expectedLength);
}
return true;
};
const testTextContain = async (element, text) => {
const elem = await helpers.waitForElement(element, "undefinedLoading");
expect(elem).not.toBeNull();
expect(elem.textContent).toContain(text);
return true;
const testTextContain = async (selector, expectedText) => {
await expect(page.locator(selector).first()).toContainText(expectedText);
};
afterAll(async () => {
@@ -35,14 +33,15 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/default.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the default maximumEntries of 10", async () => {
await expect(testElementLength(".calendar .event", 10)).resolves.toBe(true);
await testElementLength(".calendar .event", 10);
});
it("should show the default calendar symbol in each event", async () => {
await expect(testElementLength(".calendar .event .fa-calendar-days", 0, "not")).resolves.toBe(true);
await testElementLength(".calendar .event .fa-calendar-days", 0, "not");
});
});
@@ -50,30 +49,31 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/custom.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the custom maximumEntries of 5", async () => {
await expect(testElementLength(".calendar .event", 5)).resolves.toBe(true);
await testElementLength(".calendar .event", 5);
});
it("should show the custom calendar symbol in four events", async () => {
await expect(testElementLength(".calendar .event .fa-birthday-cake", 4)).resolves.toBe(true);
await testElementLength(".calendar .event .fa-birthday-cake", 4);
});
it("should show a customEvent calendar symbol in one event", async () => {
await expect(testElementLength(".calendar .event .fa-dice", 1)).resolves.toBe(true);
await testElementLength(".calendar .event .fa-dice", 1);
});
it("should show a customEvent calendar eventClass in one event", async () => {
await expect(testElementLength(".calendar .event.undo", 1)).resolves.toBe(true);
await testElementLength(".calendar .event.undo", 1);
});
it("should show two custom icons for repeating events", async () => {
await expect(testElementLength(".calendar .event .fa-undo", 2)).resolves.toBe(true);
await testElementLength(".calendar .event .fa-undo", 2);
});
it("should show two custom icons for day events", async () => {
await expect(testElementLength(".calendar .event .fa-calendar-day", 2)).resolves.toBe(true);
await testElementLength(".calendar .event .fa-calendar-day", 2);
});
});
@@ -81,10 +81,11 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/recurring.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the recurring birthday event 6 times", async () => {
await expect(testElementLength(".calendar .event", 6)).resolves.toBe(true);
await testElementLength(".calendar .event", 6);
});
});
@@ -93,15 +94,16 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/long-fullday-event.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should contain text 'Ends in' with the left days", async () => {
await expect(testTextContain(".calendar .today .time", "Ends in")).resolves.toBe(true);
await expect(testTextContain(".calendar .yesterday .time", "Today")).resolves.toBe(true);
await expect(testTextContain(".calendar .tomorrow .time", "Tomorrow")).resolves.toBe(true);
await testTextContain(".calendar .today .time", "Ends in");
await testTextContain(".calendar .yesterday .time", "Today");
await testTextContain(".calendar .tomorrow .time", "Tomorrow");
});
it("should contain in total three events", async () => {
await expect(testElementLength(".calendar .event", 3)).resolves.toBe(true);
await testElementLength(".calendar .event", 3);
});
});
@@ -109,13 +111,14 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/single-fullday-event.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should contain text 'Today'", async () => {
await expect(testTextContain(".calendar .time", "Today")).resolves.toBe(true);
await testTextContain(".calendar .time", "Today");
});
it("should contain in total two events", async () => {
await expect(testElementLength(".calendar .event", 2)).resolves.toBe(true);
await testElementLength(".calendar .event", 2);
});
});
@@ -124,6 +127,7 @@ describe("Calendar module", () => {
await helpers.startApplication("tests/configs/modules/calendar/changed-port.js");
serverBasicAuth.listen(8010);
await helpers.getDocument();
page = helpers.getPage();
});
afterAll(async () => {
@@ -131,7 +135,7 @@ describe("Calendar module", () => {
});
it("should return TestEvents", async () => {
await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
await testElementLength(".calendar .event", 0, "not");
});
});
@@ -139,10 +143,11 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/basic-auth.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should return TestEvents", async () => {
await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
await testElementLength(".calendar .event", 0, "not");
});
});
@@ -150,10 +155,11 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/auth-default.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should return TestEvents", async () => {
await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
await testElementLength(".calendar .event", 0, "not");
});
});
@@ -161,10 +167,11 @@ describe("Calendar module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/calendar/old-basic-auth.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should return TestEvents", async () => {
await expect(testElementLength(".calendar .event", 0, "not")).resolves.toBe(true);
await testElementLength(".calendar .event", 0, "not");
});
});
@@ -173,6 +180,7 @@ describe("Calendar module", () => {
await helpers.startApplication("tests/configs/modules/calendar/fail-basic-auth.js");
serverBasicAuth.listen(8020);
await helpers.getDocument();
page = helpers.getPage();
});
afterAll(async () => {
@@ -180,7 +188,7 @@ describe("Calendar module", () => {
});
it("should show Unauthorized error", async () => {
await expect(testTextContain(".calendar", "Error in the calendar module. Authorization failed")).resolves.toBe(true);
await testTextContain(".calendar", "Error in the calendar module. Authorization failed");
});
});
});