test(scripts): update to handle hash params

Author: thetaPC

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:theme`: Set to `ionic`, `ios`, or `md` to load a specific 
+ * theme. 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);
   }
 

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);
   }
 };