diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js index 5ce8423cb4d..965bd8183e3 100644 --- a/core/scripts/testing/scripts.js +++ b/core/scripts/testing/scripts.js @@ -1,30 +1,73 @@ +/** + * This script is loaded in testing environments to set up the + * document based on URL parameters. + * + * Test pages (e.g., `chip/test/basic/index.html`) are set to use + * URL query parameters. + * + * Playwright test environments (e.g., `chip/test/basic/chip.e2e.ts`) + * are set based on whether `setContent` or `goto` has been used: + * - `setContent` uses URL hash parameters. Tests will break if + * query parameters are used. + * - `goto` uses URL query parameters. + * + * The following URL parameters are supported: + * - `rtl`: Set to `true` to enable right-to-left directionality. + * - `ionic:_testing`: Set to `true` to identify testing environments. + * - `ionic:mode`: Set to `ios` or `md` to load a specific mode. + * Defaults to `md`. + * - `palette`: Set to `light`, `dark`, `high-contrast`, or + * `high-contrast-dark` to load a specific palette. Defaults to `light`. + */ (function() { - if (window.location.search.indexOf('rtl=true') > -1) { + /** + * The `rtl` param is used to set the directionality of the + * document. This can be `true` or `false`. + */ + const isRTL = window.location.search.indexOf('rtl=true') > -1 || window.location.hash.indexOf('rtl=true') > -1; + + if (isRTL) { document.documentElement.setAttribute('dir', 'rtl'); } - if (window.location.search.indexOf('ionic:_testing=true') > -1) { + /** + * The `ionic:_testing` param is used to identify testing + * environments. + */ + const isTestEnv = window.location.search.indexOf('ionic:_testing=true') > -1 || window.location.hash.indexOf('ionic:_testing=true') > -1; + + if (isTestEnv) { const style = document.createElement('style'); style.innerHTML = ` -* { - caret-color: transparent !important; -}`; + * { + caret-color: transparent !important; + } + `; document.head.appendChild(style); } /** - * The term `palette` is used to as a param to match the - * Ionic docs, plus here is already a `ionic:theme` query being - * used for `md`, `ios`, and `ionic` themes. + * The `palette` param is used to load a specific palette + * for the theme. + * The dark class will load the dark palette automatically + * if no palette is specified through the URL. + * + * Values can be `light`, `dark`, `high-contrast`, + * or `high-contrast-dark`. Default to `light` for tests. */ - const palette = window.location.search.match(/palette=([a-z]+)/); - if (palette && palette[1] !== 'light') { + const paletteQuery = window.location.search.match(/palette=([a-z]+)/); + const paletteHash = window.location.hash.match(/palette=([a-z]+)/); + const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null; + + const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light'; + + if (paletteName !== 'light') { const linkTag = document.createElement('link'); linkTag.setAttribute('rel', 'stylesheet'); linkTag.setAttribute('type', 'text/css'); - linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`); + linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`); document.head.appendChild(linkTag); } diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts index b738133e736..8a47746e3bf 100644 --- a/core/src/utils/test/playwright/page/utils/set-content.ts +++ b/core/src/utils/test/playwright/page/utils/set-content.ts @@ -102,6 +102,13 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o } }); + /** + * URL query parameters cause the custom Playwright `page.route` + * interceptor to fail, which is necessary to inject the test HTML. + * + * To avoid this, the final navigation URL is kept simple by using + * hash params to ensure the route interceptor always works. + */ await page.goto(`${baseUrl}#`, options); } };