Files
MagicMirror/tests/e2e/modules/weather_forecast_spec.js
Kristjan ESPERANTO f29f424a62 [core] refactor: replace XMLHttpRequest with fetch and migrate e2e tests to Playwright (#3950)
### 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
2025-11-08 21:59:05 +01:00

129 lines
4.7 KiB
JavaScript

const { expect } = require("playwright/test");
const helpers = require("../helpers/global-setup");
const weatherFunc = require("../helpers/weather-functions");
describe("Weather module: Weather Forecast", () => {
let page;
afterAll(async () => {
await weatherFunc.stopApplication();
});
describe("Default configuration", () => {
beforeAll(async () => {
await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_default.js", {});
page = helpers.getPage();
});
const days = ["Today", "Tomorrow", "Sun", "Mon", "Tue"];
for (const [index, day] of days.entries()) {
it(`should render day ${day}`, async () => {
const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`);
await expect(dayCell).toHaveText(day);
});
}
const icons = ["day-cloudy", "rain", "day-sunny", "day-sunny", "day-sunny"];
for (const [index, icon] of icons.entries()) {
it(`should render icon ${icon}`, async () => {
const iconElement = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(2) span.wi-${icon}`);
await expect(iconElement).toBeVisible();
});
}
const maxTemps = ["24.4°", "21.0°", "22.9°", "23.4°", "20.6°"];
for (const [index, temp] of maxTemps.entries()) {
it(`should render max temperature ${temp}`, async () => {
const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
await expect(maxTempCell).toHaveText(temp);
});
}
const minTemps = ["15.3°", "13.6°", "13.8°", "13.9°", "10.9°"];
for (const [index, temp] of minTemps.entries()) {
it(`should render min temperature ${temp}`, async () => {
const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`);
await expect(minTempCell).toHaveText(temp);
});
}
const opacities = [1, 1, 0.8, 0.5333333333333333, 0.2666666666666667];
for (const [index, opacity] of opacities.entries()) {
it(`should render fading of rows with opacity=${opacity}`, async () => {
const row = page.locator(`.weather table.small tr:nth-child(${index + 1})`);
await expect(row).toHaveAttribute("style", `opacity: ${opacity};`);
});
}
});
describe("Absolute configuration", () => {
beforeAll(async () => {
await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_absolute.js", {});
page = helpers.getPage();
});
const days = ["Fri", "Sat", "Sun", "Mon", "Tue"];
for (const [index, day] of days.entries()) {
it(`should render day ${day}`, async () => {
const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`);
await expect(dayCell).toHaveText(day);
});
}
});
describe("Configuration Options", () => {
beforeAll(async () => {
await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_options.js", {});
page = helpers.getPage();
});
it("should render custom table class", async () => {
await expect(page.locator(".weather table.myTableClass")).toBeVisible();
});
it("should render colored rows", async () => {
const rows = page.locator(".weather table.myTableClass tr");
await expect(rows).toHaveCount(5);
});
const precipitations = [undefined, "2.51 mm"];
for (const [index, precipitation] of precipitations.entries()) {
if (precipitation) {
it(`should render precipitation amount ${precipitation}`, async () => {
const precipCell = page.locator(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`);
await expect(precipCell).toHaveText(precipitation);
});
}
}
});
describe("Forecast weather with imperial units", () => {
beforeAll(async () => {
await weatherFunc.startApplication("tests/configs/modules/weather/forecastweather_units.js", {});
page = helpers.getPage();
});
describe("Temperature units", () => {
const temperatures = ["75_9°", "69_8°", "73_2°", "74_1°", "69_1°"];
for (const [index, temp] of temperatures.entries()) {
it(`should render custom decimalSymbol = '_' for temp ${temp}`, async () => {
const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
await expect(tempCell).toHaveText(temp);
});
}
});
describe("Precipitation units", () => {
const precipitations = [undefined, "0.10 in"];
for (const [index, precipitation] of precipitations.entries()) {
if (precipitation) {
it(`should render precipitation amount ${precipitation}`, async () => {
const precipCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`);
await expect(precipCell).toHaveText(precipitation);
});
}
}
});
});
});