@sebgroup/green-core 2.28.0 → 2.28.1

package/shared-styles/rbcb-toggle.style.js

@@ -141,9 +141,8 @@ var rbcb_toggle_style_default = css`
   .visually-hidden-checkbox {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
+    width: 1px;
+    height: 1px;
   }
 
   .rbcb-wrapper {

package/test-setup.d.ts

@@ -0,0 +1,14 @@
+interface AccessibleOptions {
+    rules?: Record<string, {
+        enabled: boolean;
+    }>;
+}
+declare module 'vitest' {
+    interface Assertion {
+        toBeAccessible(options?: AccessibleOptions): Promise<void>;
+    }
+    interface AsymmetricMatchersContaining {
+        toBeAccessible(options?: AccessibleOptions): void;
+    }
+}
+export {};

package/test-setup.js

@@ -0,0 +1,35 @@
+import * as axe from "axe-core";
+import { afterEach, expect } from "vitest";
+expect.extend({
+  async toBeAccessible(received, options = {}) {
+    const { rules = {} } = options;
+    const results = await axe.run(received, {
+      rules: {
+        // Disable color-contrast by default as it's often problematic in test environments
+        "color-contrast": { enabled: false },
+        ...rules
+      }
+    });
+    const violations = results.violations;
+    if (violations.length === 0) {
+      return {
+        pass: true,
+        message: () => "Expected element to have accessibility violations"
+      };
+    }
+    const formattedViolations = violations.map((violation) => {
+      const nodes = violation.nodes.map((node) => `    - ${node.html}`).join("\n");
+      return `  ${violation.id}: ${violation.description}
+${nodes}`;
+    }).join("\n\n");
+    return {
+      pass: false,
+      message: () => `Expected element to be accessible, but found the following violations:
+
+${formattedViolations}`
+    };
+  }
+});
+afterEach(() => {
+  document.body.innerHTML = "";
+});

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-b8f4f0";
+const VER_SUFFIX = "-712748";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/utils/testing/index.d.ts

@@ -1,32 +1,64 @@
-/** A testing utility that measures an element's position and clicks on it. */
+import { html, TemplateResult } from 'lit';
+export { html };
+/**
+ * Renders a lit template into a container and returns the first element child.
+ * Replacement for @open-wc/testing fixture function.
+ */
+export declare function fixture<T extends Element>(template: TemplateResult): Promise<T>;
+/**
+ * Wait for a specified number of milliseconds.
+ * Replacement for @open-wc/testing aTimeout function.
+ */
+export declare function aTimeout(ms: number): Promise<void>;
+/**
+ * Wait until a condition becomes true or timeout.
+ * Replacement for @open-wc/testing waitUntil function.
+ */
+export declare function waitUntil(condition: () => boolean | Promise<boolean>, message?: string, options?: {
+    interval?: number;
+    timeout?: number;
+}): Promise<void>;
+/** A testing utility that clicks on an element. */
 export declare function clickOnElement(
 /** The element to click */
 el: Element, 
-/** The location of the element to click */
-position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
-/** The horizontal offset to apply to the position when clicking */
-offsetX?: number, 
-/** The vertical offset to apply to the position when clicking */
-offsetY?: number): Promise<void>;
+/** The location of the element to click (ignored for now, clicks center) */
+_position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply to the position when clicking (ignored) */
+_offsetX?: number, 
+/** The vertical offset to apply to the position when clicking (ignored) */
+_offsetY?: number): Promise<void>;
 /** A testing utility that moves the mouse onto an element. */
 export declare function moveMouseOnElement(
-/** The element to click */
+/** The element to hover */
 el: Element, 
-/** The location of the element to click */
-position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
-/** The horizontal offset to apply to the position when clicking */
-offsetX?: number, 
-/** The vertical offset to apply to the position when clicking */
-offsetY?: number): Promise<void>;
+/** The location of the element (ignored for now, hovers center) */
+_position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply (ignored) */
+_offsetX?: number, 
+/** The vertical offset to apply (ignored) */
+_offsetY?: number): Promise<void>;
 /** A testing utility that drags an element with the mouse. */
 export declare function dragElement(
 /** The element to drag */
-el: Element, 
+source: Element, 
 /** The horizontal distance to drag in pixels */
 deltaX?: number, 
 /** The vertical distance to drag in pixels */
 deltaY?: number): Promise<void>;
 export declare function isWebKit(): boolean;
+/**
+ * WebKit-aware Tab helper.
+ * On WebKit, use Alt+Tab to move focus
+ */
+export declare function tabNext(options?: {
+    shift?: boolean;
+}): Promise<void>;
 export declare function isChromium(): boolean;
 export declare function isFirefox(): boolean;
 export declare function onlyDate(date: Date | undefined): string | undefined;
+/** A helper to wait for a specific amount of time */
+export declare function timeout(ms: number): Promise<void>;
+/** A helper to wait for a condition to become true */
+export declare function conditionToBeTrue(condition: () => boolean, timeoutMs?: number): Promise<void>;
+export declare function setViewportSize(width: number, height: number): Promise<() => Promise<void>>;

package/utils/testing/index.js

@@ -1,69 +1,121 @@
 import "../../chunks/chunk.QU3DSPNU.js";
-import { sendMouse } from "@web/test-runner-commands";
-function determineMousePosition(el, position, offsetX, offsetY) {
-  const { x, y, width, height } = el.getBoundingClientRect();
-  const centerX = Math.floor(x + window.scrollX + width / 2);
-  const centerY = Math.floor(y + window.scrollY + height / 2);
-  let clickX;
-  let clickY;
+import { html, render } from "lit";
+import { page, userEvent } from "@vitest/browser/context";
+async function fixture(template) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  render(template, container);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await Promise.resolve();
+  const element = container.firstElementChild;
+  return element;
+}
+function aTimeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+async function waitUntil(condition, message, options = {}) {
+  const { interval = 50, timeout: timeout2 = 1e3 } = options;
+  const startTime = Date.now();
+  while (Date.now() - startTime <= timeout2) {
+    const result = await condition();
+    if (result) return;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+  throw new Error(message || `waitUntil timed out after ${timeout2}ms`);
+}
+async function clickOnElement(el, _position = "center", _offsetX = 0, _offsetY = 0) {
+  const rect = el.getBoundingClientRect();
+  const position = getClickPosition(rect, _position, _offsetX, _offsetY);
+  try {
+    await withTimeout(userEvent.click(el, { position }), 1e3);
+  } catch (error) {
+    await withTimeout(userEvent.click(el, { position, force: true }), 1e3);
+  }
+}
+async function withTimeout(promise, ms) {
+  let timeoutId;
+  const timeout2 = new Promise((_, reject) => {
+    timeoutId = setTimeout(() => {
+      reject(new Error(`click timed out after ${ms}ms`));
+    }, ms);
+  });
+  try {
+    return await Promise.race([promise, timeout2]);
+  } finally {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+}
+function getClickPosition(rect, position, offsetX, offsetY) {
+  const centerX = rect.width / 2;
+  const centerY = rect.height / 2;
+  let x = centerX;
+  let y = centerY;
   switch (position) {
     case "top":
-      clickX = centerX;
-      clickY = y;
-      break;
-    case "right":
-      clickX = x + width - 1;
-      clickY = centerY;
+      y = 1;
       break;
     case "bottom":
-      clickX = centerX;
-      clickY = y + height - 1;
+      y = Math.max(1, rect.height - 1);
       break;
     case "left":
-      clickX = x;
-      clickY = centerY;
+      x = 1;
       break;
+    case "right":
+      x = Math.max(1, rect.width - 1);
+      break;
+    case "center":
     default:
-      clickX = centerX;
-      clickY = centerY;
+      break;
   }
-  clickX += offsetX;
-  clickY += offsetY;
-  return { clickX, clickY };
-}
-async function clickOnElement(el, position = "center", offsetX = 0, offsetY = 0) {
-  const { clickX, clickY } = determineMousePosition(
-    el,
-    position,
-    offsetX,
-    offsetY
-  );
-  await sendMouse({ type: "click", position: [clickX, clickY] });
-}
-async function moveMouseOnElement(el, position = "center", offsetX = 0, offsetY = 0) {
-  const { clickX, clickY } = determineMousePosition(
-    el,
-    position,
-    offsetX,
-    offsetY
-  );
-  await sendMouse({ type: "move", position: [clickX, clickY] });
-}
-async function dragElement(el, deltaX = 0, deltaY = 0) {
-  await moveMouseOnElement(el);
-  await sendMouse({ type: "down" });
-  const { clickX, clickY } = determineMousePosition(
-    el,
-    "center",
-    deltaX,
-    deltaY
-  );
-  await sendMouse({ type: "move", position: [clickX, clickY] });
-  await sendMouse({ type: "up" });
+  return {
+    x: Math.max(1, x + offsetX),
+    y: Math.max(1, y + offsetY)
+  };
+}
+async function moveMouseOnElement(el, _position = "center", _offsetX = 0, _offsetY = 0) {
+  await userEvent.hover(el);
+}
+async function dragElement(source, deltaX = 0, deltaY = 0) {
+  const rect = source.getBoundingClientRect();
+  const targetX = rect.left + rect.width / 2 + deltaX;
+  const targetY = rect.top + rect.height / 2 + deltaY;
+  await userEvent.hover(source);
+  const event = new MouseEvent("mousedown", {
+    bubbles: true,
+    cancelable: true,
+    clientX: rect.left + rect.width / 2,
+    clientY: rect.top + rect.height / 2
+  });
+  source.dispatchEvent(event);
+  const moveEvent = new MouseEvent("mousemove", {
+    bubbles: true,
+    cancelable: true,
+    clientX: targetX,
+    clientY: targetY
+  });
+  source.dispatchEvent(moveEvent);
+  const upEvent = new MouseEvent("mouseup", {
+    bubbles: true,
+    cancelable: true,
+    clientX: targetX,
+    clientY: targetY
+  });
+  source.dispatchEvent(upEvent);
 }
 function isWebKit() {
   return navigator.userAgent.toLowerCase().indexOf("safari") > -1 && navigator.userAgent.toLowerCase().indexOf("chrome") < 0;
 }
+async function tabNext(options) {
+  if (isWebKit()) {
+    if (options?.shift) {
+      await userEvent.keyboard("{Alt>}{Shift>}{Tab}{/Shift}{/Alt}");
+      return;
+    }
+    await userEvent.keyboard("{Alt>}{Tab}{/Alt}");
+    return;
+  }
+  await userEvent.tab(options);
+}
 function isChromium() {
   return navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
 }
@@ -74,12 +126,52 @@ function onlyDate(date) {
   if (!date) return void 0;
   return date.toISOString().split("T")[0];
 }
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function conditionToBeTrue(condition, timeoutMs = 1e3) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const check = () => {
+      if (condition()) {
+        resolve();
+      } else if (Date.now() - startTime > timeoutMs) {
+        reject(new Error("Condition was not met within timeout"));
+      } else {
+        requestAnimationFrame(check);
+      }
+    };
+    check();
+  });
+}
+async function setViewportSize(width, height) {
+  const originalSize = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  if (page) {
+    await page.viewport(width, height);
+  }
+  return async () => {
+    if (page) {
+      await page.viewport(originalSize.width, originalSize.height);
+    }
+  };
+}
 export {
+  aTimeout,
   clickOnElement,
+  conditionToBeTrue,
   dragElement,
+  fixture,
+  html,
   isChromium,
   isFirefox,
   isWebKit,
   moveMouseOnElement,
-  onlyDate
+  onlyDate,
+  setViewportSize,
+  tabNext,
+  timeout,
+  waitUntil
 };