@forsakringskassan/cypress-config 1.5.1 → 1.6.0

package/README.md

@@ -15,9 +15,10 @@ npm rm mocha-multi-reporter
 ```
 
 - [Usage](#usage)
-- [Axe](#axe)
-- [docs-generator](#docs-generator)
-- [HTML-Validate](#html-validate)
+- [Commands](#commands)
+- [Axe plugin](#axe-plugin)
+- [docs-generator plugin](#docs-generator-plugin)
+- [HTML-Validate plugin](#html-validate-plugin)
 
 ## Usage
 
@@ -51,6 +52,7 @@ A configuration function is available for usage in `cypress/support/e2e.ts` and/
 import { configure } from "@forsakringskassan/cypress-config/support";
 
 configure({
+    resetEmulatedMedia: true,
     afterEach: {
         htmlvalidate: true,
     },
@@ -62,9 +64,42 @@ configure({
 > If the call is omitted some functionality will not work as expected.
 > Calling it multiple times is undefined behaviour.
 
-See the various components for details.
+- `resetEmulatedMedia` - When enabled, any emulated CSS media features will be reset between runs.
+- `afterEach` - Enables features to automatically run after each test. See the various components for details.
 
-### Axe
+### Commands
+
+This preset adds new custom commands:
+
+#### forcedColors
+
+- Syntax: `cy.forcedColors(value)`
+- Parameters:
+    - `value: "active" | "none"` - `"active"`" enables forced colors, `"none"` disables it.
+
+Emulate CSS media feature [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors) for testing High Contrast mode.
+
+Unless `resetEmulatedMedia` is enabled, this modifies browser settings that persist until the next `cy.forcedColors()` call.
+It is independent from `cy.prefersColorScheme()`, e.g. if you want to use forced colors with dark mode you need to call both functions.
+
+> [!TIP]
+> Enable `resetEmulatedMedia` in `configure()` to automatically reset emulated media features, including forced color mode, between tests.
+
+### prefersColorScheme
+
+- Syntax: `cy.prefersColorScheme(value)`
+- Parameters
+    - `value: "light" | "dark" | "none"` - Sets the preferred color scheme or `none` to disable it (use system default).
+
+Emulate CSS media feature [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) for testing light/dark mode themes.
+
+Unless `resetEmulatedMedia` is enabled, this modifies browser settings that persist until the next `cy.prefersColorScheme()` call.
+It is independent from `cy.forcedColors()`, e.g. if you want to use forced colors with dark mode you need to call both functions.
+
+> [!TIP]
+> Enable `resetEmulatedMedia` in `configure()` to automatically reset emulated media features, including the color scheme, between tests.
+
+### Axe plugin
 
 A preconfigured [Axe](https://github.com/dequelabs/axe-core) plugin ([@forsakringskassan/cypress-axe](https://github.com/Forsakringskassan/cypress-axe/)) is exported as `axePlugin`:
 
@@ -83,7 +118,7 @@ export default defineConfig(import.meta.dirname, {
 
 Automatic validation after each test cannot currently be disabled.
 
-### docs-generator
+### docs-generator plugin
 
 A plugin to get all pages and examples generated by `@forsakringskassan/docs-generator`.
 This is typically only useful in E2E testing.
@@ -119,7 +154,7 @@ for (const page of pages) {
 
 See [manifest documentation](https://forsakringskassan.github.io/docs-generator/latest/processors/manifest.html) for details about what each page entry contains.
 
-### HTML-Validate
+### HTML-Validate plugin
 
 A preconfigured [HTML-validate](https://html-validate.org/) plugin ([cypress-html-validate](https://gitlab.com/html-validate/cypress-html-validate/)) is exported as `htmlValidatePlugin`:
 
@@ -145,6 +180,7 @@ To automatically run validation after each test configure it using the configura
 import { configure } from "@forsakringskassan/cypress-config/support";
 
 configure({
+    resetEmulatedMedia: true,
     afterEach: {
         htmlvalidate: true,
     },

package/dist/support.d.ts

@@ -8,9 +8,50 @@ import "cypress-html-validate/commands";
  * @since v1.1.0
  */
 export declare function configure(options: {
+    /** When enabled, any emulated CSS media features will be reset between runs */
+    resetEmulatedMedia: boolean;
     afterEach: {
         htmlvalidate: boolean;
     };
 }): void;
 
 export { }
+
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Emulate CSS media feature `forced-colors`.
+             *
+             * @example
+             * ```ts
+             * cy.forcedColors("active");
+             * ```
+             *
+             * @since v1.6.0
+             * @param mode - "active" to enable, "none" to disable.
+             */
+            forcedColors(mode: "none" | "active"): Cypress.Chainable<void>;
+        }
+    }
+}
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Emulate CSS media feature `prefers-color-scheme`.
+             *
+             * @example
+             * ```ts
+             * cy.prefersColorScheme("dark");
+             * ```
+             *
+             * @since v1.6.0
+             * @param value - "light" or "dark" color mode, "none" will disable.
+             */
+            prefersColorScheme(value: "none" | "dark" | "light"): Cypress.Chainable<void>;
+        }
+    }
+}

package/dist/support.mjs

@@ -4,13 +4,95 @@ import "@forsakringskassan/cypress-axe/support";
 // src/support/html-validate.ts
 import "cypress-html-validate/commands";
 
+// src/utils/use-emulated-media.ts
+var state = {
+  prefersColorScheme: "none",
+  forcedColors: "none"
+};
+function* getFeatures() {
+  if (state.prefersColorScheme !== "none") {
+    yield {
+      name: "prefers-color-scheme",
+      value: state.prefersColorScheme
+    };
+  }
+  if (state.forcedColors !== "none") {
+    yield {
+      name: "forced-colors",
+      value: state.forcedColors
+    };
+  }
+}
+function useEmulatedMedia() {
+  return {
+    forcedColors(value) {
+      state.forcedColors = value;
+    },
+    prefersColorScheme(value) {
+      state.prefersColorScheme = value;
+    },
+    cdp() {
+      const features = Array.from(getFeatures());
+      return {
+        command: "Emulation.setEmulatedMedia",
+        params: {
+          media: "screen",
+          features
+        }
+      };
+    },
+    isEnabled() {
+      return state.prefersColorScheme !== "none" || state.forcedColors !== "none";
+    },
+    reset() {
+      state.prefersColorScheme = "none";
+      state.forcedColors = "none";
+    }
+  };
+}
+
+// src/commands/forced-colors.ts
+var emulatedMedia = useEmulatedMedia();
+Cypress.Commands.add("forcedColors", (mode) => {
+  emulatedMedia.forcedColors(mode);
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia.cdp()), { log: false });
+});
+
+// src/commands/prefers-color-scheme.ts
+var emulatedMedia2 = useEmulatedMedia();
+Cypress.Commands.add("prefersColorScheme", (value) => {
+  emulatedMedia2.prefersColorScheme(value);
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia2.cdp()), { log: false });
+});
+
 // src/support/configure.ts
+function resetEmulatedMedia(emulatedMedia3) {
+  if (!emulatedMedia3.isEnabled()) {
+    return;
+  }
+  emulatedMedia3.reset();
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia3.cdp()), {
+    log: false
+  });
+}
 function configure(options) {
   if (options.afterEach.htmlvalidate) {
     afterEach(() => {
       cy.htmlvalidate();
     });
   }
+  if (options.resetEmulatedMedia) {
+    const emulatedMedia3 = useEmulatedMedia();
+    afterEach(() => {
+      resetEmulatedMedia(emulatedMedia3);
+    });
+    beforeEach(() => {
+      resetEmulatedMedia(emulatedMedia3);
+    });
+  }
 }
 export {
   configure

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/cypress-config",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Sharable Cypress configuration building blocks for Försäkringskassan",
   "keywords": [
     "cypress"
@@ -17,8 +17,8 @@
   "author": "Försäkringskassan",
   "sideEffects": [
     "./dist/support.mjs",
-    "./src/support/axe.ts",
-    "./src/support/html-validate.ts"
+    "./src/commands/*",
+    "./src/support/*"
   ],
   "type": "module",
   "imports": {