diff --git a/.github/workflows/automated-tests.yaml b/.github/workflows/automated-tests.yaml index c1110304..99087447 100644 --- a/.github/workflows/automated-tests.yaml +++ b/.github/workflows/automated-tests.yaml @@ -59,6 +59,9 @@ jobs: - name: "Install MagicMirror²" run: | node --run install-mm:dev + - name: "Install Playwright browsers" + run: | + npx playwright install --with-deps chromium - name: "Prepare environment for tests" run: | # Fix chrome-sandbox permissions: diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c6170f7..212928ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,8 @@ planned for 2026-01-01 - [tests] replace `node-libgpiod` with `serialport` in electron-rebuild workflow (#3945) - [calendar] hide repeatingCountTitle if the event count is zero (#3949) - [core] configure cspell to check default modules only and fix typos (#3955) +- [core] refactor: replace `XMLHttpRequest` with `fetch` in `translator.js` (#3950) +- [tests] migrate e2e tests to Playwright (#3950) ### Fixed diff --git a/eslint.config.mjs b/eslint.config.mjs index 5b9b0e24..89777794 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -4,6 +4,7 @@ import {flatConfigs as importX} from "eslint-plugin-import-x"; import js from "@eslint/js"; import jsdocPlugin from "eslint-plugin-jsdoc"; import packageJson from "eslint-plugin-package-json"; +import playwright from "eslint-plugin-playwright"; import stylistic from "@stylistic/eslint-plugin"; import vitest from "eslint-plugin-vitest"; @@ -59,6 +60,20 @@ export default defineConfig([ "import-x/order": "error", "init-declarations": "off", "vitest/consistent-test-it": "warn", + "vitest/expect-expect": [ + "warn", + { + assertFunctionNames: [ + "expect", + "testElementLength", + "testTextContain", + "doTest", + "runAnimationTest", + "waitForAnimationClass", + "assertNoAnimationWithin" + ] + } + ], "vitest/prefer-to-be": "warn", "vitest/prefer-to-have-length": "warn", "max-lines-per-function": ["warn", 400], @@ -125,5 +140,12 @@ export default defineConfig([ rules: { "@stylistic/quotes": "off" } + }, + { + files: ["tests/e2e/**/*.js"], + extends: [playwright.configs["flat/recommended"]], + rules: { + "playwright/no-standalone-expect": "off" + } } ]); diff --git a/js/loader.js b/js/loader.js index 62bc0447..b3cfd719 100644 --- a/js/loader.js +++ b/js/loader.js @@ -10,13 +10,36 @@ const Loader = (function () { /* Private Methods */ + /** + * Get environment variables from config. + * @returns {object} Env vars with modulesDir and customCss paths from config. + */ + const getEnvVarsFromConfig = function () { + return { + modulesDir: config.foreignModulesDir || "modules", + customCss: config.customCss || "css/custom.css" + }; + }; + /** * Retrieve object of env variables. * @returns {object} with key: values as assembled in js/server_functions.js */ const getEnvVars = async function () { - const res = await fetch(`${location.protocol}//${location.host}${config.basePath}env`); - return JSON.parse(await res.text()); + // In test mode, skip server fetch and use config values directly + if (typeof process !== "undefined" && process.env && process.env.mmTestMode === "true") { + return getEnvVarsFromConfig(); + } + + // In production, fetch env vars from server + try { + const res = await fetch(new URL("env", `${location.origin}${config.basePath}`)); + return JSON.parse(await res.text()); + } catch (error) { + // Fallback to config values if server fetch fails + Log.error("Unable to retrieve env configuration", error); + return getEnvVarsFromConfig(); + } }; /** diff --git a/js/translator.js b/js/translator.js index bc7bad5f..497c4268 100644 --- a/js/translator.js +++ b/js/translator.js @@ -3,30 +3,24 @@ const Translator = (function () { /** - * Load a JSON file via XHR. + * Load a JSON file via fetch. * @param {string} file Path of the file we want to load. * @returns {Promise} the translations in the specified file */ async function loadJSON (file) { - const xhr = new XMLHttpRequest(); - return new Promise(function (resolve) { - xhr.overrideMimeType("application/json"); - xhr.open("GET", file, true); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4 && xhr.status === 200) { - // needs error handler try/catch at least - let fileInfo = null; - try { - fileInfo = JSON.parse(xhr.responseText); - } catch (exception) { - // nothing here, but don't die - Log.error(`[translator] loading json file =${file} failed`); - } - resolve(fileInfo); - } - }; - xhr.send(null); - }); + const baseHref = document.baseURI; + const url = new URL(file, baseHref); + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Unexpected response status: ${response.status}`); + } + return await response.json(); + } catch (exception) { + Log.error(`Loading json file =${file} failed`); + return null; + } } return { diff --git a/package-lock.json b/package-lock.json index ce7729f1..79658bd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "eslint-plugin-import-x": "^4.16.1", "eslint-plugin-jsdoc": "^61.1.11", "eslint-plugin-package-json": "^0.59.1", + "eslint-plugin-playwright": "^2.3.0", "eslint-plugin-vitest": "^0.5.4", "express-basic-auth": "^1.2.1", "husky": "^9.1.7", @@ -5496,6 +5497,35 @@ "jsonc-eslint-parser": "^2.0.0" } }, + "node_modules/eslint-plugin-playwright": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.3.0.tgz", + "integrity": "sha512-7UeUuIb5SZrNkrUGb2F+iwHM97kn33/huajcVtAaQFCSMUYGNFvjzRPil5C0OIppslPfuOV68M/zsisXx+/ZvQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "globals": "^16.4.0" + }, + "engines": { + "node": ">=16.9.0" + }, + "peerDependencies": { + "eslint": ">=8.40.0" + } + }, + "node_modules/eslint-plugin-playwright/node_modules/globals": { + "version": "16.5.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz", + "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/eslint-plugin-vitest": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/eslint-plugin-vitest/-/eslint-plugin-vitest-0.5.4.tgz", diff --git a/package.json b/package.json index 58cefcde..9a6ecd17 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "config:check": "node js/check_config.js", "postinstall": "git clean -df fonts vendor", "install-mm": "npm install --no-audit --no-fund --no-update-notifier --only=prod --omit=dev", - "install-mm:dev": "npm install --no-audit --no-fund --no-update-notifier", + "install-mm:dev": "npm install --no-audit --no-fund --no-update-notifier && npx playwright install chromium", "lint:css": "stylelint 'css/main.css' 'css/roboto.css' 'css/font-awesome.css' 'modules/default/**/*.css' --fix", "lint:js": "eslint --fix", "lint:markdown": "markdownlint-cli2 . --fix", @@ -106,6 +106,7 @@ "eslint-plugin-import-x": "^4.16.1", "eslint-plugin-jsdoc": "^61.1.11", "eslint-plugin-package-json": "^0.59.1", + "eslint-plugin-playwright": "^2.3.0", "eslint-plugin-vitest": "^0.5.4", "express-basic-auth": "^1.2.1", "husky": "^9.1.7", diff --git a/tests/e2e/animateCSS_spec.js b/tests/e2e/animateCSS_spec.js index f363bc43..eed01f49 100644 --- a/tests/e2e/animateCSS_spec.js +++ b/tests/e2e/animateCSS_spec.js @@ -1,8 +1,11 @@ +const { expect } = require("playwright/test"); const helpers = require("./helpers/global-setup"); // Validate Animate.css integration for compliments module using class toggling. // We intentionally ignore computed animation styles (jsdom doesn't simulate real animations). describe("AnimateCSS integration Test", () => { + let page; + // Config variants under test const TEST_CONFIG_ANIM = "tests/configs/modules/compliments/compliments_animateCSS.js"; const TEST_CONFIG_FALLBACK = "tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js"; // invalid animation names @@ -11,32 +14,26 @@ describe("AnimateCSS integration Test", () => { /** * Get the compliments container element (waits until available). - * @returns {Promise} compliments root element + * @returns {Promise} */ async function getComplimentsElement () { await helpers.getDocument(); - const el = await helpers.waitForElement(".compliments"); - expect(el).not.toBeNull(); - return el; + page = helpers.getPage(); + await expect(page.locator(".compliments")).toBeVisible(); } /** * Wait for an Animate.css class to appear and persist briefly. * @param {string} cls Animation class name without leading dot (e.g. animate__flipInX) * @param {{timeout?: number}} [options] Poll timeout in ms (default 6000) - * @returns {Promise} true if class detected in time + * @returns {Promise} */ async function waitForAnimationClass (cls, { timeout = 6000 } = {}) { - const start = Date.now(); - while (Date.now() - start < timeout) { - if (document.querySelector(`.compliments.animate__animated.${cls}`)) { - // small stability wait - await new Promise((r) => setTimeout(r, 50)); - if (document.querySelector(`.compliments.animate__animated.${cls}`)) return true; - } - await new Promise((r) => setTimeout(r, 100)); - } - throw new Error(`Timeout waiting for class ${cls}`); + const locator = page.locator(`.compliments.animate__animated.${cls}`); + await locator.waitFor({ state: "attached", timeout }); + // small stability wait + await new Promise((r) => setTimeout(r, 50)); + await expect(locator).toBeAttached(); } /** @@ -46,8 +43,10 @@ describe("AnimateCSS integration Test", () => { */ async function assertNoAnimationWithin (ms = 2000) { const start = Date.now(); + const locator = page.locator(".compliments.animate__animated"); while (Date.now() - start < ms) { - if (document.querySelector(".compliments.animate__animated")) { + const count = await locator.count(); + if (count > 0) { throw new Error("Unexpected animate__animated class present in non-animation scenario"); } await new Promise((r) => setTimeout(r, 100)); @@ -58,13 +57,13 @@ describe("AnimateCSS integration Test", () => { * Run one animation test scenario. * @param {string} [animationIn] Expected animate-in name * @param {string} [animationOut] Expected animate-out name - * @returns {Promise} true when scenario assertions pass + * @returns {Promise} Throws on assertion failure */ async function runAnimationTest (animationIn, animationOut) { await getComplimentsElement(); if (!animationIn && !animationOut) { await assertNoAnimationWithin(2000); - return true; + return; } if (animationIn) await waitForAnimationClass(`animate__${animationIn}`); if (animationOut) { @@ -72,7 +71,6 @@ describe("AnimateCSS integration Test", () => { await new Promise((r) => setTimeout(r, 2100)); await waitForAnimationClass(`animate__${animationOut}`); } - return true; } afterEach(async () => { @@ -82,28 +80,28 @@ describe("AnimateCSS integration Test", () => { describe("animateIn and animateOut Test", () => { it("with flipInX and flipOutX animation", async () => { await helpers.startApplication(TEST_CONFIG_ANIM); - await expect(runAnimationTest("flipInX", "flipOutX")).resolves.toBe(true); + await runAnimationTest("flipInX", "flipOutX"); }); }); describe("use animateOut name for animateIn (vice versa) Test", () => { it("without animation (inverted names)", async () => { await helpers.startApplication(TEST_CONFIG_INVERTED); - await expect(runAnimationTest()).resolves.toBe(true); + await runAnimationTest(); }); }); describe("false Animation name test", () => { it("without animation (invalid names)", async () => { await helpers.startApplication(TEST_CONFIG_FALLBACK); - await expect(runAnimationTest()).resolves.toBe(true); + await runAnimationTest(); }); }); describe("no Animation defined test", () => { it("without animation (no config)", async () => { await helpers.startApplication(TEST_CONFIG_NONE); - await expect(runAnimationTest()).resolves.toBe(true); + await runAnimationTest(); }); }); }); diff --git a/tests/e2e/custom_module_regions_spec.js b/tests/e2e/custom_module_regions_spec.js index 48d09712..243f8e48 100644 --- a/tests/e2e/custom_module_regions_spec.js +++ b/tests/e2e/custom_module_regions_spec.js @@ -1,10 +1,14 @@ +const { expect } = require("playwright/test"); const helpers = require("./helpers/global-setup"); describe("Custom Position of modules", () => { + let page; + beforeAll(async () => { await helpers.fixupIndex(); await helpers.startApplication("tests/configs/customregions.js"); await helpers.getDocument(); + page = helpers.getPage(); }); afterAll(async () => { await helpers.stopApplication(); @@ -16,15 +20,12 @@ describe("Custom Position of modules", () => { const className1 = positions[i].replace("_", "."); let message1 = positions[i]; it(`should show text in ${message1}`, async () => { - const elem = await helpers.waitForElement(`.${className1}`); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain(`Text in ${message1}`); + await expect(page.locator(`.${className1} .module-content`)).toContainText(`Text in ${message1}`); }); i = 1; const className2 = positions[i].replace("_", "."); let message2 = positions[i]; it(`should NOT show text in ${message2}`, async () => { - const elem = await helpers.waitForElement(`.${className2}`, "", 1500); - expect(elem).toBeNull(); - }, 1510); + await expect(page.locator(`.${className2} .module-content`)).toHaveCount(0); + }); }); diff --git a/tests/e2e/env_spec.js b/tests/e2e/env_spec.js index eebc8912..5e642ed4 100644 --- a/tests/e2e/env_spec.js +++ b/tests/e2e/env_spec.js @@ -1,9 +1,13 @@ +const { expect } = require("playwright/test"); const helpers = require("./helpers/global-setup"); describe("App environment", () => { + let page; + beforeAll(async () => { await helpers.startApplication("tests/configs/default.js"); await helpers.getDocument(); + page = helpers.getPage(); }); afterAll(async () => { await helpers.stopApplication(); @@ -20,8 +24,6 @@ describe("App environment", () => { }); it("should show the title MagicMirror²", async () => { - const elem = await helpers.waitForElement("title"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toBe("MagicMirror²"); + await expect(page).toHaveTitle("MagicMirror²"); }); }); diff --git a/tests/e2e/helpers/global-setup.js b/tests/e2e/helpers/global-setup.js index 185a0e82..098f4895 100644 --- a/tests/e2e/helpers/global-setup.js +++ b/tests/e2e/helpers/global-setup.js @@ -1,7 +1,7 @@ const path = require("node:path"); const os = require("node:os"); const fs = require("node:fs"); -const jsdom = require("jsdom"); +const { chromium } = require("playwright"); // global absolute root path global.root_path = path.resolve(`${__dirname}/../../../`); @@ -16,8 +16,67 @@ const sampleCss = [ " top: 100%;", "}" ]; -var indexData = []; -var cssData = []; +let indexData = ""; +let cssData = ""; + +let browser; +let context; +let page; + +/** + * Ensure Playwright browser and context are available. + * @returns {Promise} + */ +async function ensureContext () { + if (!browser) { + browser = await chromium.launch({ headless: true }); + } + if (!context) { + context = await browser.newContext(); + } +} + +/** + * Open a fresh page pointing to the provided url. + * @param {string} url target url + * @returns {Promise} initialized page instance + */ +async function openPage (url) { + await ensureContext(); + if (page) { + await page.close(); + } + page = await context.newPage(); + await page.goto(url, { waitUntil: "load" }); + return page; +} + +/** + * Close page, context and browser if they exist. + * @returns {Promise} + */ +async function closeBrowser () { + if (page) { + await page.close(); + page = null; + } + if (context) { + await context.close(); + context = null; + } + if (browser) { + await browser.close(); + browser = null; + } +} + +exports.getPage = () => { + if (!page) { + throw new Error("Playwright page is not initialized. Call getDocument() first."); + } + return page; +}; + exports.startApplication = async (configFilename, exec) => { vi.resetModules(); @@ -35,7 +94,7 @@ exports.startApplication = async (configFilename, exec) => { }); if (global.app) { - await this.stopApplication(); + await exports.stopApplication(); } // Use fixed port 8080 (tests run sequentially, no conflicts) @@ -64,11 +123,7 @@ exports.startApplication = async (configFilename, exec) => { }; exports.stopApplication = async (waitTime = 100) => { - if (global.window) { - // no closing causes test errors and memory leaks - global.window.close(); - delete global.window; - } + await closeBrowser(); if (!global.app) { delete global.testPort; @@ -79,90 +134,23 @@ exports.stopApplication = async (waitTime = 100) => { delete global.app; delete global.testPort; - // Small delay to ensure clean shutdown + // Wait for any pending async operations to complete before closing DOM await new Promise((resolve) => setTimeout(resolve, waitTime)); }; -exports.getDocument = () => { - return new Promise((resolve) => { - const port = global.testPort || config.port || 8080; - const url = `http://${config.address || "localhost"}:${port}`; - jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => { - dom.window.name = "jsdom"; - global.window = dom.window; - // Following fixes `navigator is not defined` errors in e2e tests, found here - // https://www.appsloveworld.com/reactjs/100/37/mocha-react-navigator-is-not-defined - global.navigator = { - useragent: "node.js" - }; - dom.window.fetch = fetch; - dom.window.onload = () => { - global.document = dom.window.document; - resolve(); - }; - }); - }); -}; +exports.getDocument = async () => { + const port = global.testPort || config.port || 8080; + const address = config.address === "0.0.0.0" ? "localhost" : config.address || "localhost"; + const url = `http://${address}:${port}`; -exports.waitForElement = (selector, ignoreValue = "", timeout = 0) => { - return new Promise((resolve) => { - let oldVal = "dummy12345"; - let element = null; - const interval = setInterval(() => { - element = document.querySelector(selector); - if (element) { - let newVal = element.textContent; - if (newVal === oldVal) { - clearInterval(interval); - resolve(element); - } else { - if (ignoreValue === "") { - oldVal = newVal; - } else { - if (!newVal.includes(ignoreValue)) oldVal = newVal; - } - } - } - }, 100); - if (timeout !== 0) { - setTimeout(() => { - if (interval) clearInterval(interval); - resolve(null); - }, timeout); - } - }); -}; - -exports.waitForAllElements = (selector) => { - return new Promise((resolve) => { - let oldVal = 999999; - const interval = setInterval(() => { - const element = document.querySelectorAll(selector); - if (element) { - let newVal = element.length; - if (newVal === oldVal) { - clearInterval(interval); - resolve(element); - } else { - if (newVal !== 0) oldVal = newVal; - } - } - }, 100); - }); -}; - -exports.testMatch = async (element, regex) => { - const elem = await this.waitForElement(element); - expect(elem).not.toBeNull(); - expect(elem.textContent).toMatch(regex); - return true; + await openPage(url); }; exports.fixupIndex = async () => { // read and save the git level index file indexData = (await fs.promises.readFile(indexFile)).toString(); // make lines of the content - let workIndexLines = indexData.split(os.EOL); + const workIndexLines = indexData.split(os.EOL); // loop thru the lines to find place to insert new region for (let l in workIndexLines) { if (workIndexLines[l].includes("region top right")) { @@ -181,7 +169,7 @@ exports.fixupIndex = async () => { exports.restoreIndex = async () => { // if we read in data - if (indexData.length > 1) { + if (indexData.length > 0) { //write out saved index.html await fs.promises.writeFile(indexFile, indexData, { flush: true }); // write out saved custom.css diff --git a/tests/e2e/helpers/weather-functions.js b/tests/e2e/helpers/weather-functions.js index 3a3e2d27..6780ea42 100644 --- a/tests/e2e/helpers/weather-functions.js +++ b/tests/e2e/helpers/weather-functions.js @@ -1,18 +1,6 @@ const { injectMockData, cleanupMockData } = require("../../utils/weather_mocker"); const helpers = require("./global-setup"); -exports.getText = async (element, result) => { - const elem = await helpers.waitForElement(element); - expect(elem).not.toBeNull(); - expect( - elem.textContent - .trim() - .replace(/(\r\n|\n|\r)/gm, "") - .replace(/[ ]+/g, " ") - ).toBe(result); - return true; -}; - exports.startApplication = async (configFileName, additionalMockData) => { await helpers.startApplication(injectMockData(configFileName, additionalMockData)); await helpers.getDocument(); diff --git a/tests/e2e/modules/alert_spec.js b/tests/e2e/modules/alert_spec.js index a8125b8a..367f2eb2 100644 --- a/tests/e2e/modules/alert_spec.js +++ b/tests/e2e/modules/alert_spec.js @@ -1,6 +1,9 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); describe("Alert module", () => { + let page; + afterAll(async () => { await helpers.stopApplication(); }); @@ -9,6 +12,7 @@ describe("Alert module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/alert/welcome_false.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should not show any welcome message", async () => { @@ -16,8 +20,7 @@ describe("Alert module", () => { await new Promise((resolve) => setTimeout(resolve, 1000)); // Check that no alert/notification elements are present - const alertElements = document.querySelectorAll(".ns-box .ns-box-inner .light.bright.small"); - expect(alertElements).toHaveLength(0); + await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toHaveCount(0); }); }); @@ -25,15 +28,14 @@ describe("Alert module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/alert/welcome_true.js"); await helpers.getDocument(); + page = helpers.getPage(); // Wait for the application to initialize await new Promise((resolve) => setTimeout(resolve, 1000)); }); it("should show the translated welcome message", async () => { - const elem = await helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Welcome, start was successful!"); + await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toContainText("Welcome, start was successful!"); }); }); @@ -41,12 +43,11 @@ describe("Alert module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/alert/welcome_string.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should show the custom welcome message", async () => { - const elem = await helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Custom welcome message!"); + await expect(page.locator(".ns-box .ns-box-inner .light.bright.small")).toContainText("Custom welcome message!"); }); }); }); diff --git a/tests/e2e/modules/calendar_spec.js b/tests/e2e/modules/calendar_spec.js index 10eb6b84..d24bae11 100644 --- a/tests/e2e/modules/calendar_spec.js +++ b/tests/e2e/modules/calendar_spec.js @@ -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} */ - 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"); }); }); }); diff --git a/tests/e2e/modules/clock_de_spec.js b/tests/e2e/modules/clock_de_spec.js index e46b37ab..79d3bb4b 100644 --- a/tests/e2e/modules/clock_de_spec.js +++ b/tests/e2e/modules/clock_de_spec.js @@ -1,6 +1,9 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); describe("Clock set to german language module", () => { + let page; + afterAll(async () => { await helpers.stopApplication(); }); @@ -9,11 +12,12 @@ describe("Clock set to german language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows week with correct format", async () => { const weekRegex = /^[0-9]{1,2}. Kalenderwoche$/; - await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true); + await expect(page.locator(".clock .week")).toHaveText(weekRegex); }); }); @@ -21,11 +25,12 @@ describe("Clock set to german language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/de/clock_showWeek_short.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows week with correct format", async () => { const weekRegex = /^[0-9]{1,2}KW$/; - await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true); + await expect(page.locator(".clock .week")).toHaveText(weekRegex); }); }); }); diff --git a/tests/e2e/modules/clock_es_spec.js b/tests/e2e/modules/clock_es_spec.js index 38b997a5..6749bda5 100644 --- a/tests/e2e/modules/clock_es_spec.js +++ b/tests/e2e/modules/clock_es_spec.js @@ -1,6 +1,9 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); describe("Clock set to spanish language module", () => { + let page; + afterAll(async () => { await helpers.stopApplication(); }); @@ -9,16 +12,17 @@ describe("Clock set to spanish language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/es/clock_24hr.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows date with correct format", async () => { const dateRegex = /^(?:lunes|martes|miércoles|jueves|viernes|sábado|domingo), \d{1,2} de (?:enero|febrero|marzo|abril|mayo|junio|julio|agosto|septiembre|octubre|noviembre|diciembre) de \d{4}$/; - await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true); + await expect(page.locator(".clock .date")).toHaveText(dateRegex); }); it("shows 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); }); }); @@ -26,16 +30,17 @@ describe("Clock set to spanish language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/es/clock_12hr.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows date with correct format", async () => { const dateRegex = /^(?:lunes|martes|miércoles|jueves|viernes|sábado|domingo), \d{1,2} de (?:enero|febrero|marzo|abril|mayo|junio|julio|agosto|septiembre|octubre|noviembre|diciembre) de \d{4}$/; - await expect(helpers.testMatch(".clock .date", dateRegex)).resolves.toBe(true); + await expect(page.locator(".clock .date")).toHaveText(dateRegex); }); it("shows 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); }); }); @@ -43,11 +48,12 @@ describe("Clock set to spanish language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/es/clock_showPeriodUpper.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows 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); }); }); @@ -55,11 +61,12 @@ describe("Clock set to spanish language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows week with correct format", async () => { const weekRegex = /^Semana [0-9]{1,2}$/; - await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true); + await expect(page.locator(".clock .week")).toHaveText(weekRegex); }); }); @@ -67,11 +74,12 @@ describe("Clock set to spanish language module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek_short.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows week with correct format", async () => { const weekRegex = /^S[0-9]{1,2}$/; - await expect(helpers.testMatch(".clock .week", weekRegex)).resolves.toBe(true); + await expect(page.locator(".clock .week")).toHaveText(weekRegex); }); }); }); diff --git a/tests/e2e/modules/clock_spec.js b/tests/e2e/modules/clock_spec.js index 88ac4f4d..6fb72fa3 100644 --- a/tests/e2e/modules/clock_spec.js +++ b/tests/e2e/modules/clock_spec.js @@ -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(); }); }); }); diff --git a/tests/e2e/modules/compliments_spec.js b/tests/e2e/modules/compliments_spec.js index 47214781..bb8f13a3 100644 --- a/tests/e2e/modules/compliments_spec.js +++ b/tests/e2e/modules/compliments_spec.js @@ -1,19 +1,20 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); describe("Compliments module", () => { + let page; /** * move similar tests in function doTest * @param {Array} complimentsArray The array of compliments. - * @returns {boolean} result + * @returns {Promise} */ const doTest = async (complimentsArray) => { - let elem = await helpers.waitForElement(".compliments"); - expect(elem).not.toBeNull(); - elem = await helpers.waitForElement(".module-content"); - expect(elem).not.toBeNull(); - expect(complimentsArray).toContain(elem.textContent); - return true; + await expect(page.locator(".compliments")).toBeVisible(); + const contentLocator = page.locator(".module-content"); + await contentLocator.waitFor({ state: "visible" }); + const content = await contentLocator.textContent(); + expect(complimentsArray).toContain(content); }; afterAll(async () => { @@ -25,10 +26,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_anytime.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows anytime because if configure empty parts of day compliments and set anytime compliments", async () => { - await expect(doTest(["Anytime here"])).resolves.toBe(true); + await doTest(["Anytime here"]); }); }); @@ -36,10 +38,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_only_anytime.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows anytime compliments", async () => { - await expect(doTest(["Anytime here"])).resolves.toBe(true); + await doTest(["Anytime here"]); }); }); }); @@ -48,10 +51,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_remote.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should show compliments from a remote file", async () => { - await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true); + await doTest(["Remote compliment file works!"]); }); }); @@ -60,10 +64,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_specialDayUnique_false.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("compliments array can contain all values", async () => { - await expect(doTest(["Special day message", "Typical message 1", "Typical message 2", "Typical message 3"])).resolves.toBe(true); + await doTest(["Special day message", "Typical message 1", "Typical message 2", "Typical message 3"]); }); }); @@ -71,10 +76,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_specialDayUnique_true.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("compliments array contains only special value", async () => { - await expect(doTest(["Special day message"])).resolves.toBe(true); + await doTest(["Special day message"]); }); }); @@ -82,10 +88,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_e2e_cron_entry.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("compliments array contains only special value", async () => { - await expect(doTest(["anytime cron"])).resolves.toBe(true); + await doTest(["anytime cron"]); }); }); }); @@ -95,10 +102,11 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_file.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows 'Remote compliment file works!' as only anytime list set", async () => { //await helpers.startApplication("tests/configs/modules/compliments/compliments_file.js", "01 Jan 2022 10:00:00 GMT"); - await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true); + await doTest(["Remote compliment file works!"]); }); // afterAll(async () =>{ // await helpers.stopApplication() @@ -109,12 +117,13 @@ describe("Compliments module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/compliments/compliments_file_change.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("shows 'test in morning' as test time set to 10am", async () => { //await helpers.startApplication("tests/configs/modules/compliments/compliments_file_change.js", "01 Jan 2022 10:00:00 GMT"); - await expect(doTest(["Remote compliment file works!"])).resolves.toBe(true); + await doTest(["Remote compliment file works!"]); await new Promise((r) => setTimeout(r, 10000)); - await expect(doTest(["test in morning"])).resolves.toBe(true); + await doTest(["test in morning"]); }); // afterAll(async () =>{ // await helpers.stopApplication() diff --git a/tests/e2e/modules/helloworld_spec.js b/tests/e2e/modules/helloworld_spec.js index 413c60e5..2db8facb 100644 --- a/tests/e2e/modules/helloworld_spec.js +++ b/tests/e2e/modules/helloworld_spec.js @@ -1,6 +1,9 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); describe("Test helloworld module", () => { + let page; + afterAll(async () => { await helpers.stopApplication(); }); @@ -9,12 +12,11 @@ describe("Test helloworld module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/helloworld/helloworld.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("Test message helloworld module", async () => { - const elem = await helpers.waitForElement(".helloworld"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Test HelloWorld Module"); + await expect(page.locator(".helloworld")).toContainText("Test HelloWorld Module"); }); }); @@ -22,12 +24,11 @@ describe("Test helloworld module", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/helloworld/helloworld_default.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("Test message helloworld module", async () => { - const elem = await helpers.waitForElement(".helloworld"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Hello World!"); + await expect(page.locator(".helloworld")).toContainText("Hello World!"); }); }); }); diff --git a/tests/e2e/modules/newsfeed_spec.js b/tests/e2e/modules/newsfeed_spec.js index dc317c91..4cee4a75 100644 --- a/tests/e2e/modules/newsfeed_spec.js +++ b/tests/e2e/modules/newsfeed_spec.js @@ -1,29 +1,28 @@ const fs = require("node:fs"); +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); const runTests = async () => { + let page; + describe("Default configuration", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/newsfeed/default.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should show the newsfeed title", async () => { - const elem = await helpers.waitForElement(".newsfeed .newsfeed-source"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Rodrigo Ramirez Blog"); + await expect(page.locator(".newsfeed .newsfeed-source")).toContainText("Rodrigo Ramirez Blog"); }); it("should show the newsfeed article", async () => { - const elem = await helpers.waitForElement(".newsfeed .newsfeed-title"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("QPanel"); + await expect(page.locator(".newsfeed .newsfeed-title")).toContainText("QPanel"); }); it("should NOT show the newsfeed description", async () => { - await helpers.waitForElement(".newsfeed"); - const elem = document.querySelector(".newsfeed .newsfeed-desc"); - expect(elem).toBeNull(); + await page.locator(".newsfeed").waitFor({ state: "visible" }); + await expect(page.locator(".newsfeed .newsfeed-desc")).toHaveCount(0); }); }); @@ -31,18 +30,18 @@ const runTests = async () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/newsfeed/prohibited_words.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should not show articles with prohibited words", async () => { - const elem = await helpers.waitForElement(".newsfeed .newsfeed-title"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Problema VirtualBox"); + await expect(page.locator(".newsfeed .newsfeed-title")).toContainText("Problema VirtualBox"); }); it("should show the newsfeed description", async () => { - const elem = await helpers.waitForElement(".newsfeed .newsfeed-desc"); - expect(elem).not.toBeNull(); - expect(elem.textContent).not.toHaveLength(0); + const locator = page.locator(".newsfeed .newsfeed-desc"); + await expect(locator).toBeVisible(); + const text = await locator.textContent(); + expect(text).toMatch(/\S/); }); }); @@ -50,12 +49,11 @@ const runTests = async () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/newsfeed/incorrect_url.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should show malformed url warning", async () => { - const elem = await helpers.waitForElement(".newsfeed .small", "No news at the moment."); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("Error in the Newsfeed module. Malformed url."); + await expect(page.locator(".newsfeed .small")).toContainText("Error in the Newsfeed module. Malformed url."); }); }); @@ -63,12 +61,11 @@ const runTests = async () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/newsfeed/ignore_items.js"); await helpers.getDocument(); + page = helpers.getPage(); }); it("should show empty items info message", async () => { - const elem = await helpers.waitForElement(".newsfeed .small"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("No news at the moment."); + await expect(page.locator(".newsfeed .small")).toContainText("No news at the moment."); }); }); }; diff --git a/tests/e2e/modules/weather_current_spec.js b/tests/e2e/modules/weather_current_spec.js index 78d32784..9b292879 100644 --- a/tests/e2e/modules/weather_current_spec.js +++ b/tests/e2e/modules/weather_current_spec.js @@ -1,7 +1,10 @@ +const { expect } = require("playwright/test"); const helpers = require("../helpers/global-setup"); const weatherFunc = require("../helpers/weather-functions"); describe("Weather module", () => { + let page; + afterAll(async () => { await weatherFunc.stopApplication(); }); @@ -10,26 +13,25 @@ describe("Weather module", () => { describe("Default configuration", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_default.js", {}); + page = helpers.getPage(); }); it("should render wind speed and wind direction", async () => { - await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "12 WSW")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("12 WSW"); }); it("should render temperature with icon", async () => { - await expect(weatherFunc.getText(".weather .large span.light.bright", "1.5°")).resolves.toBe(true); - - const elem = await helpers.waitForElement(".weather .large span.weathericon"); - expect(elem).not.toBeNull(); + await expect(page.locator(".weather .large span.light.bright")).toHaveText("1.5°"); + await expect(page.locator(".weather .large span.weathericon")).toBeVisible(); }); it("should render feels like temperature", async () => { // Template contains   which renders as \xa0 - await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "93.7\xa0 Feels like -5.6°")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("93.7\xa0 Feels like -5.6°"); }); it("should render humidity next to feels-like", async () => { - await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed .humidity", "93.7")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium.feelslike span.dimmed .humidity")).toHaveText("93.7"); }); }); }); @@ -37,56 +39,60 @@ describe("Weather module", () => { describe("Compliments Integration", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_compliments.js", {}); + page = helpers.getPage(); }); it("should render a compliment based on the current weather", async () => { - await expect(weatherFunc.getText(".compliments .module-content span", "snow")).resolves.toBe(true); + const compliment = page.locator(".compliments .module-content span"); + await compliment.waitFor({ state: "visible" }); + await expect(compliment).toHaveText("snow"); }); }); describe("Configuration Options", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_options.js", {}); + page = helpers.getPage(); }); it("should render windUnits in beaufort", async () => { - await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "6")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("6"); }); it("should render windDirection with an arrow", async () => { - const elem = await helpers.waitForElement(".weather .normal.medium sup i.fa-long-arrow-alt-down"); - expect(elem).not.toBeNull(); - expect(elem.outerHTML).toContain("transform:rotate(250deg)"); + const arrow = page.locator(".weather .normal.medium sup i.fa-long-arrow-alt-down"); + await expect(arrow).toHaveAttribute("style", "transform:rotate(250deg)"); }); it("should render humidity next to wind", async () => { - await expect(weatherFunc.getText(".weather .normal.medium .humidity", "93.7")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium .humidity")).toHaveText("93.7"); }); it("should render degreeLabel for temp", async () => { - await expect(weatherFunc.getText(".weather .large span.bright.light", "1°C")).resolves.toBe(true); + await expect(page.locator(".weather .large span.bright.light")).toHaveText("1°C"); }); it("should render degreeLabel for feels like", async () => { - await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "Feels like -6°C")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("Feels like -6°C"); }); }); describe("Current weather with imperial units", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/currentweather_units.js", {}); + page = helpers.getPage(); }); it("should render wind in imperial units", async () => { - await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(2)", "26 WSW")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium span:nth-child(2)")).toHaveText("26 WSW"); }); it("should render temperatures in fahrenheit", async () => { - await expect(weatherFunc.getText(".weather .large span.bright.light", "34,7°")).resolves.toBe(true); + await expect(page.locator(".weather .large span.bright.light")).toHaveText("34,7°"); }); it("should render 'feels like' in fahrenheit", async () => { - await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "Feels like 21,9°")).resolves.toBe(true); + await expect(page.locator(".weather .normal.medium.feelslike span.dimmed")).toHaveText("Feels like 21,9°"); }); }); }); diff --git a/tests/e2e/modules/weather_forecast_spec.js b/tests/e2e/modules/weather_forecast_spec.js index f9742643..011ed35f 100644 --- a/tests/e2e/modules/weather_forecast_spec.js +++ b/tests/e2e/modules/weather_forecast_spec.js @@ -1,7 +1,10 @@ +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(); }); @@ -9,43 +12,46 @@ describe("Weather module: Weather Forecast", () => { 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 () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`, day)).resolves.toBe(true); + 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 elem = await helpers.waitForElement(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(2) span.wi-${icon}`); - expect(elem).not.toBeNull(); + 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 () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`, temp)).resolves.toBe(true); + 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 () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`, temp)).resolves.toBe(true); + 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 elem = await helpers.waitForElement(`.weather table.small tr:nth-child(${index + 1})`); - expect(elem).not.toBeNull(); - expect(elem.outerHTML).toContain(``); + const row = page.locator(`.weather table.small tr:nth-child(${index + 1})`); + await expect(row).toHaveAttribute("style", `opacity: ${opacity};`); }); } }); @@ -53,12 +59,14 @@ describe("Weather module: Weather Forecast", () => { 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 () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`, day)).resolves.toBe(true); + const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(1)`); + await expect(dayCell).toHaveText(day); }); } }); @@ -66,25 +74,24 @@ describe("Weather module: Weather Forecast", () => { 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 () => { - const elem = await helpers.waitForElement(".weather table.myTableClass"); - expect(elem).not.toBeNull(); + await expect(page.locator(".weather table.myTableClass")).toBeVisible(); }); it("should render colored rows", async () => { - const table = await helpers.waitForElement(".weather table.myTableClass"); - expect(table).not.toBeNull(); - expect(table.rows).not.toBeNull(); - expect(table.rows).toHaveLength(5); + 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 () => { - await expect(weatherFunc.getText(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation)).resolves.toBe(true); + const precipCell = page.locator(`.weather table tr:nth-child(${index + 1}) td.precipitation-amount`); + await expect(precipCell).toHaveText(precipitation); }); } } @@ -93,13 +100,15 @@ describe("Weather module: Weather Forecast", () => { 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 () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`, temp)).resolves.toBe(true); + const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`); + await expect(tempCell).toHaveText(temp); }); } }); @@ -109,7 +118,8 @@ describe("Weather module: Weather Forecast", () => { for (const [index, precipitation] of precipitations.entries()) { if (precipitation) { it(`should render precipitation amount ${precipitation}`, async () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, precipitation)).resolves.toBe(true); + const precipCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`); + await expect(precipCell).toHaveText(precipitation); }); } } diff --git a/tests/e2e/modules/weather_hourly_spec.js b/tests/e2e/modules/weather_hourly_spec.js index bce715bc..a33503f3 100644 --- a/tests/e2e/modules/weather_hourly_spec.js +++ b/tests/e2e/modules/weather_hourly_spec.js @@ -1,6 +1,10 @@ +const { expect } = require("playwright/test"); +const helpers = require("../helpers/global-setup"); const weatherFunc = require("../helpers/weather-functions"); describe("Weather module: Weather Hourly Forecast", () => { + let page; + afterAll(async () => { await weatherFunc.stopApplication(); }); @@ -8,12 +12,14 @@ describe("Weather module: Weather Hourly Forecast", () => { describe("Default configuration", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_default.js", {}); + page = helpers.getPage(); }); const minTemps = ["7:00 pm", "8:00 pm", "9:00 pm", "10:00 pm", "11:00 pm"]; for (const [index, hour] of minTemps.entries()) { it(`should render forecast for hour ${hour}`, async () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour)).resolves.toBe(true); + const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.day`); + await expect(dayCell).toHaveText(hour); }); } }); @@ -21,13 +27,15 @@ describe("Weather module: Weather Hourly Forecast", () => { describe("Hourly weather options", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_options.js", {}); + page = helpers.getPage(); }); describe("Hourly increments of 2", () => { const minTemps = ["7:00 pm", "9:00 pm", "11:00 pm", "1:00 am", "3:00 am"]; for (const [index, hour] of minTemps.entries()) { it(`should render forecast for hour ${hour}`, async () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.day`, hour)).resolves.toBe(true); + const dayCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.day`); + await expect(dayCell).toHaveText(hour); }); } }); @@ -36,6 +44,7 @@ describe("Weather module: Weather Hourly Forecast", () => { describe("Show precipitations", () => { beforeAll(async () => { await weatherFunc.startApplication("tests/configs/modules/weather/hourlyweather_showPrecipitation.js", {}); + page = helpers.getPage(); }); describe("Shows precipitation amount", () => { @@ -43,7 +52,8 @@ describe("Weather module: Weather Hourly Forecast", () => { for (const [index, amount] of amounts.entries()) { if (amount) { it(`should render precipitation amount ${amount}`, async () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`, amount)).resolves.toBe(true); + const amountCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-amount`); + await expect(amountCell).toHaveText(amount); }); } } @@ -51,10 +61,11 @@ describe("Weather module: Weather Hourly Forecast", () => { describe("Shows precipitation probability", () => { const probabilities = [undefined, undefined, "12 %", "36 %", "44 %"]; - for (const [index, pop] of probabilities.entries()) { - if (pop) { - it(`should render probability ${pop}`, async () => { - await expect(weatherFunc.getText(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-prob`, pop)).resolves.toBe(true); + for (const [index, probability] of probabilities.entries()) { + if (probability) { + it(`should render probability ${probability}`, async () => { + const probabilityCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.precipitation-prob`); + await expect(probabilityCell).toHaveText(probability); }); } } diff --git a/tests/e2e/modules_display_spec.js b/tests/e2e/modules_display_spec.js index 88b9ff50..698fe592 100644 --- a/tests/e2e/modules_display_spec.js +++ b/tests/e2e/modules_display_spec.js @@ -1,24 +1,24 @@ +const { expect } = require("playwright/test"); const helpers = require("./helpers/global-setup"); describe("Display of modules", () => { + let page; + beforeAll(async () => { await helpers.startApplication("tests/configs/modules/display.js"); await helpers.getDocument(); + page = helpers.getPage(); }); afterAll(async () => { await helpers.stopApplication(); }); it("should show the test header", async () => { - const elem = await helpers.waitForElement("#module_0_helloworld .module-header"); - expect(elem).not.toBeNull(); // textContent returns lowercase here, the uppercase is realized by CSS, which therefore does not end up in textContent - expect(elem.textContent).toBe("test_header"); + await expect(page.locator("#module_0_helloworld .module-header")).toHaveText("test_header"); }); it("should show no header if no header text is specified", async () => { - const elem = await helpers.waitForElement("#module_1_helloworld .module-header"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toBe("undefined"); + await expect(page.locator("#module_1_helloworld .module-header")).toHaveText("undefined"); }); }); diff --git a/tests/e2e/modules_empty_spec.js b/tests/e2e/modules_empty_spec.js index e5a4cd66..3957dba7 100644 --- a/tests/e2e/modules_empty_spec.js +++ b/tests/e2e/modules_empty_spec.js @@ -1,23 +1,23 @@ +const { expect } = require("playwright/test"); const helpers = require("./helpers/global-setup"); describe("Check configuration without modules", () => { + let page; + beforeAll(async () => { await helpers.startApplication("tests/configs/without_modules.js"); await helpers.getDocument(); + page = helpers.getPage(); }); afterAll(async () => { await helpers.stopApplication(); }); it("shows the message MagicMirror² title", async () => { - const elem = await helpers.waitForElement("#module_1_helloworld .module-content"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("MagicMirror²"); + await expect(page.locator("#module_1_helloworld .module-content")).toContainText("MagicMirror²"); }); it("shows the project URL", async () => { - const elem = await helpers.waitForElement("#module_5_helloworld .module-content"); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain("https://magicmirror.builders/"); + await expect(page.locator("#module_5_helloworld .module-content")).toContainText("https://magicmirror.builders/"); }); }); diff --git a/tests/e2e/modules_position_spec.js b/tests/e2e/modules_position_spec.js index 0aa83790..30a58789 100644 --- a/tests/e2e/modules_position_spec.js +++ b/tests/e2e/modules_position_spec.js @@ -1,5 +1,7 @@ const helpers = require("./helpers/global-setup"); +const getPage = () => helpers.getPage(); + describe("Position of modules", () => { beforeAll(async () => { await helpers.startApplication("tests/configs/modules/positions.js"); @@ -14,9 +16,11 @@ describe("Position of modules", () => { for (const position of positions) { const className = position.replace("_", "."); it(`should show text in ${position}`, async () => { - const elem = await helpers.waitForElement(`.${className}`); - expect(elem).not.toBeNull(); - expect(elem.textContent).toContain(`Text in ${position}`); + const locator = getPage().locator(`.${className} .module-content`).first(); + await locator.waitFor({ state: "visible" }); + const text = await locator.textContent(); + expect(text).not.toBeNull(); + expect(text).toContain(`Text in ${position}`); }); } }); diff --git a/tests/e2e/serveronly_spec.js b/tests/e2e/serveronly_spec.js index f48d152b..dbad0daa 100644 --- a/tests/e2e/serveronly_spec.js +++ b/tests/e2e/serveronly_spec.js @@ -38,11 +38,13 @@ describe("App environment", () => { describe("Check config", () => { it("config check should return without errors", async () => { process.env.MM_CONFIG_FILE = "tests/configs/default.js"; - await expect(runConfigCheck()).resolves.toBe(0); + const exitCode = await runConfigCheck(); + expect(exitCode).toBe(0); }); it("config check should fail with non existent config file", async () => { process.env.MM_CONFIG_FILE = "tests/configs/not_exists.js"; - await expect(runConfigCheck()).resolves.toBe(1); + const exitCode = await runConfigCheck(); + expect(exitCode).toBe(1); }); }); diff --git a/tests/e2e/translations_spec.js b/tests/e2e/translations_spec.js index 969f659a..12a364d0 100644 --- a/tests/e2e/translations_spec.js +++ b/tests/e2e/translations_spec.js @@ -16,6 +16,7 @@ function createTranslationTestEnvironment () { dom.window.Log = { log: vi.fn(), error: vi.fn() }; dom.window.translations = translations; + dom.window.fetch = fetch; dom.window.eval(translatorJs); const window = dom.window; diff --git a/tests/unit/classes/translator_spec.js b/tests/unit/classes/translator_spec.js index 06357916..383f823b 100644 --- a/tests/unit/classes/translator_spec.js +++ b/tests/unit/classes/translator_spec.js @@ -13,6 +13,7 @@ function createTranslationTestEnvironment () { const dom = new JSDOM("", { url: "http://localhost:3001", runScripts: "outside-only" }); dom.window.Log = { log: vi.fn(), error: vi.fn() }; + dom.window.fetch = fetch; dom.window.eval(translatorJs); return { window: dom.window, Translator: dom.window.Translator }; diff --git a/tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js b/tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js index e4508332..4475c65c 100644 --- a/tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js +++ b/tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js @@ -9,10 +9,11 @@ describe("Calendar fetcher utils test", () => { describe("filterEvents", () => { it("no events, not crash", () => { - const minusOneHour = moment().subtract(1, "hours").toDate(); - const minusTwoHours = moment().subtract(2, "hours").toDate(); - const plusOneHour = moment().add(1, "hours").toDate(); - const plusTwoHours = moment().add(2, "hours").toDate(); + const base = moment().startOf("day").add(12, "hours"); + const minusOneHour = base.clone().subtract(1, "hours").toDate(); + const minusTwoHours = base.clone().subtract(2, "hours").toDate(); + const plusOneHour = base.clone().add(1, "hours").toDate(); + const plusTwoHours = base.clone().add(2, "hours").toDate(); const filteredEvents = CalendarFetcherUtils.filterEvents( { diff --git a/vitest.config.mjs b/vitest.config.mjs index 45e061b9..d8957c73 100644 --- a/vitest.config.mjs +++ b/vitest.config.mjs @@ -8,28 +8,21 @@ import {defineConfig} from "vitest/config"; * * Parallel execution would require dynamic ports and isolated fixtures, * so we intentionally cap Vitest at a single worker for now. + * + * Projects separate unit, e2e (Playwright), and electron tests with + * appropriate timeouts for each test type. */ export default defineConfig({ test: { - // Global settings + // Shared settings for all test types globals: true, environment: "node", - // Setup files for require aliasing setupFiles: ["./tests/utils/vitest-setup.js"], - // Increased from 20s to 60s for E2E tests, 120s for Electron tests - testTimeout: 120000, - // Increase hook timeout for Electron cleanup - hookTimeout: 30000, // Stop test execution on first failure - bail: 1, + bail: 3, - // File patterns - include: [ - "tests/**/*_spec.js", - // Legacy regression test without the _spec suffix - "tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js" - ], + // Shared exclude patterns exclude: [ "**/node_modules/**", "**/dist/**", @@ -42,6 +35,46 @@ export default defineConfig({ "tests/utils/**" ], + // Projects with specific configurations per test type + projects: [ + { + test: { + name: "unit", + globals: true, + environment: "node", + setupFiles: ["./tests/utils/vitest-setup.js"], + include: [ + "tests/unit/**/*_spec.js", + "tests/unit/modules/default/calendar/calendar_fetcher_utils_bad_rrule.js" + ], + testTimeout: 20000, + hookTimeout: 10000 + } + }, + { + test: { + name: "e2e", + globals: true, + environment: "node", + setupFiles: ["./tests/utils/vitest-setup.js"], + include: ["tests/e2e/**/*_spec.js"], + testTimeout: 60000, + hookTimeout: 30000 + } + }, + { + test: { + name: "electron", + globals: true, + environment: "node", + setupFiles: ["./tests/utils/vitest-setup.js"], + include: ["tests/electron/**/*_spec.js"], + testTimeout: 120000, + hookTimeout: 30000 + } + } + ], + // Coverage configuration coverage: { provider: "v8",