refactor(dark): use palettes through url queries in test pages (#29238)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Dark mode can be added to any page by appending `palette=dark` to the
URL.

- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I recommend using badge to try this out. It already has a `goto` in the
basic tests.

Author: thetaPC

core/scripts/testing/scripts.js

@@ -14,6 +14,20 @@
     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.
+   */
+  const palette = window.location.search.match(/palette=([a-z]+)/);
+  if (palette && palette[1] !== 'light') {
+    const linkTag = document.createElement('link');
+    linkTag.setAttribute('rel', 'stylesheet');
+    linkTag.setAttribute('type', 'text/css');
+    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
+    document.head.appendChild(linkTag);
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 

core/src/utils/test/playwright/page/utils/goto.ts

@@ -1,5 +1,5 @@
 import type { Page, TestInfo } from '@playwright/test';
-import type { E2EPageOptions, Mode, Direction } from '@utils/test/playwright';
+import type { E2EPageOptions, Mode, Direction, Palette } from '@utils/test/playwright';
 
 /**
  * This is an extended version of Playwright's
@@ -28,13 +28,16 @@ configs().forEach(({ config, title }) => {
 
   let mode: Mode;
   let direction: Direction;
+  let palette: Palette;
 
   if (options == undefined) {
     mode = testInfo.project.metadata.mode;
     direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+    palette = testInfo.project.metadata.palette;
   } else {
     mode = options.mode;
     direction = options.direction;
+    palette = options.palette;
   }
 
   const rtlString = direction === 'rtl' ? 'true' : undefined;
@@ -49,13 +52,15 @@ configs().forEach(({ config, title }) => {
   const urlToParams = new URLSearchParams(paramsString);
   const formattedMode = urlToParams.get('ionic:mode') ?? mode;
   const formattedRtl = urlToParams.get('rtl') ?? rtlString;
+  const formattedPalette = urlToParams.get('palette') ?? palette;
   const ionicTesting = urlToParams.get('ionic:_testing') ?? true;
 
   /**
    * Pass through other custom query params
    */
   urlToParams.delete('ionic:mode');
   urlToParams.delete('rtl');
+  urlToParams.delete('palette');
   urlToParams.delete('ionic:_testing');
 
   /**
@@ -66,7 +71,7 @@ configs().forEach(({ config, title }) => {
   const remainingQueryParams = decodeURIComponent(urlToParams.toString());
   const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
 
-  const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}${remainingQueryParamsString}`;
+  const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
 
   testInfo.annotations.push({
     type: 'mode',
@@ -78,6 +83,11 @@ configs().forEach(({ config, title }) => {
     description: formattedRtl === 'true' ? 'rtl' : 'ltr',
   });
 
+  testInfo.annotations.push({
+    type: 'palette',
+    description: formattedPalette,
+  });
+
   const result = await Promise.all([
     page.waitForFunction(() => (window as any).testAppLoaded === true, { timeout: 4750 }),
     originalFn(formattedUrl, options),

docs/CONTRIBUTING.md

@@ -144,6 +144,7 @@ Before creating a pull request, please read our requirements that explains the m
 3. From here, navigate to one of the component's tests to preview your changes.
 4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests).
 5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`.
+6. To test in dark mode, once you are in the desired component's test, add `?palette=dark` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?palette=dark`.
 
 ##### Previewing in an external app