kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-12-12 18:02:15 +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

73
tests/e2e/modules/clock_spec.js
View File

@@ -1,7 +1,10 @@
const { expect } = require("playwright/test");
const moment = require("moment");
const helpers = require("../helpers/global-setup");
describe("Clock module", () => {
let page;
afterAll(async () => {
await helpers.stopApplication();
});
@@ -10,16 +13,17 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_24hr.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the date in the correct format", async () => {
const dateRegex = /^(?:Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday), (?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}, \d{4}$/;
await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
await expect(page.locator(".clock .date")).toHaveText(dateRegex);
});
it("should show the time in 24hr format", async () => {
const timeRegex = /^(?:2[0-3]|[01]\d):[0-5]\d[0-5]\d$/;
await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
await expect(page.locator(".clock .time")).toHaveText(timeRegex);
});
});
@@ -27,23 +31,22 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_12hr.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the date in the correct format", async () => {
const dateRegex = /^(?:Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday), (?:January|February|March|April|May|June|July|August|September|October|November|December) \d{1,2}, \d{4}$/;
await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true);
await expect(page.locator(".clock .date")).toHaveText(dateRegex);
});
it("should show the time in 12hr format", async () => {
const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[ap]m$/;
await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
await expect(page.locator(".clock .time")).toHaveText(timeRegex);
});
it("check for discreet elements of clock", async () => {
let elemClock = await helpers.waitForElement(".clock-hour-digital");
await expect(elemClock).not.toBeNull();
elemClock = await helpers.waitForElement(".clock-minute-digital");
await expect(elemClock).not.toBeNull();
await expect(page.locator(".clock-hour-digital")).toBeVisible();
await expect(page.locator(".clock-minute-digital")).toBeVisible();
});
});
@@ -51,11 +54,12 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showPeriodUpper.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show 12hr time with upper case AM/PM", async () => {
const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[AP]M$/;
await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
await expect(page.locator(".clock .time")).toHaveText(timeRegex);
});
});
@@ -63,11 +67,12 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_displaySeconds_false.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show 12hr time without seconds am/pm", async () => {
const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[ap]m$/;
await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true);
await expect(page.locator(".clock .time")).toHaveText(timeRegex);
});
});
@@ -75,11 +80,11 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showTime.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should not show the time when digital clock is shown", async () => {
const elem = document.querySelector(".clock .digital .time");
expect(elem).toBeNull();
await expect(page.locator(".clock .digital .time")).toHaveCount(0);
});
});
@@ -87,19 +92,16 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showSunMoon.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the sun times", async () => {
const elem = await helpers.waitForElement(".clock .digital .sun");
expect(elem).not.toBeNull();
const elem2 = await helpers.waitForElement(".clock .digital .sun .fas.fa-sun");
expect(elem2).not.toBeNull();
await expect(page.locator(".clock .digital .sun")).toBeVisible();
await expect(page.locator(".clock .digital .sun .fas.fa-sun")).toBeVisible();
});
it("should show the moon times", async () => {
const elem = await helpers.waitForElement(".clock .digital .moon");
expect(elem).not.toBeNull();
await expect(page.locator(".clock .digital .moon")).toBeVisible();
});
});
@@ -107,14 +109,12 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showSunNoEvent.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the sun times", async () => {
const elem = await helpers.waitForElement(".clock .digital .sun");
expect(elem).not.toBeNull();
const elem2 = document.querySelector(".clock .digital .sun .fas.fa-sun");
expect(elem2).toBeNull();
await expect(page.locator(".clock .digital .sun")).toBeVisible();
await expect(page.locator(".clock .digital .sun .fas.fa-sun")).toHaveCount(0);
});
});
@@ -122,19 +122,18 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showWeek.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the week in the correct format", async () => {
const weekRegex = /^Week [0-9]{1,2}$/;
await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
await expect(page.locator(".clock .week")).toHaveText(weekRegex);
});
it("should show the week with the correct number of week of year", async () => {
const currentWeekNumber = moment().week();
const weekToShow = `Week ${currentWeekNumber}`;
const elem = await helpers.waitForElement(".clock .week");
expect(elem).not.toBeNull();
expect(elem.textContent).toBe(weekToShow);
await expect(page.locator(".clock .week")).toHaveText(weekToShow);
});
});
@@ -142,19 +141,18 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showWeek_short.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the week in the correct format", async () => {
const weekRegex = /^W[0-9]{1,2}$/;
await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true);
await expect(page.locator(".clock .week")).toHaveText(weekRegex);
});
it("should show the week with the correct number of week of year", async () => {
const currentWeekNumber = moment().week();
const weekToShow = `W${currentWeekNumber}`;
const elem = await helpers.waitForElement(".clock .week");
expect(elem).not.toBeNull();
expect(elem.textContent).toBe(weekToShow);
await expect(page.locator(".clock .week")).toHaveText(weekToShow);
});
});
@@ -162,11 +160,11 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_analog.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the analog clock face", async () => {
const elem = await helpers.waitForElement(".clock-circle");
expect(elem).not.toBeNull();
await expect(page.locator(".clock-circle")).toBeVisible();
});
});
@@ -174,13 +172,12 @@ describe("Clock module", () => {
beforeAll(async () => {
await helpers.startApplication("tests/configs/modules/clock/clock_showDateAnalog.js");
await helpers.getDocument();
page = helpers.getPage();
});
it("should show the analog clock face and the date", async () => {
const elemClock = await helpers.waitForElement(".clock-circle");
await expect(elemClock).not.toBeNull();
const elemDate = await helpers.waitForElement(".clock .date");
await expect(elemDate).not.toBeNull();
await expect(page.locator(".clock-circle")).toBeVisible();
await expect(page.locator(".clock .date")).toBeVisible();
});
});
});