@grantcodes/ui 2.15.7 → 2.16.0

package/src/test-utils/assert-helpers.js

@@ -2,7 +2,7 @@
  * Custom assertions for web components
  */
 
-import { strict as assert } from "node:assert";
+import { strict as assert } from 'node:assert';
 
 /**
  * Asserts that an element has a specific attribute
@@ -11,17 +11,17 @@ import { strict as assert } from "node:assert";
  * @param {string} expectedValue - The expected attribute value (optional)
  */
 export function assertAttribute(element, attribute, expectedValue) {
-	const hasAttribute = element.hasAttribute(attribute);
-	assert.ok(hasAttribute, `Element should have attribute "${attribute}"`);
+  const hasAttribute = element.hasAttribute(attribute);
+  assert.ok(hasAttribute, `Element should have attribute "${attribute}"`);
 
-	if (expectedValue !== undefined) {
-		const actualValue = element.getAttribute(attribute);
-		assert.strictEqual(
-			actualValue,
-			expectedValue,
-			`Attribute "${attribute}" should be "${expectedValue}" but was "${actualValue}"`,
-		);
-	}
+  if (expectedValue !== undefined) {
+    const actualValue = element.getAttribute(attribute);
+    assert.strictEqual(
+      actualValue,
+      expectedValue,
+      `Attribute "${attribute}" should be "${expectedValue}" but was "${actualValue}"`,
+    );
+  }
 }
 
 /**
@@ -30,8 +30,8 @@ export function assertAttribute(element, attribute, expectedValue) {
  * @param {string} attribute - The attribute name
  */
 export function assertNoAttribute(element, attribute) {
-	const hasAttribute = element.hasAttribute(attribute);
-	assert.ok(!hasAttribute, `Element should not have attribute "${attribute}"`);
+  const hasAttribute = element.hasAttribute(attribute);
+  assert.ok(!hasAttribute, `Element should not have attribute "${attribute}"`);
 }
 
 /**
@@ -40,10 +40,7 @@ export function assertNoAttribute(element, attribute) {
  * @param {string} className - The class name
  */
 export function assertClass(element, className) {
-	assert.ok(
-		element.classList.contains(className),
-		`Element should have class "${className}"`,
-	);
+  assert.ok(element.classList.contains(className), `Element should have class "${className}"`);
 }
 
 /**
@@ -52,10 +49,7 @@ export function assertClass(element, className) {
  * @param {string} className - The class name
  */
 export function assertNoClass(element, className) {
-	assert.ok(
-		!element.classList.contains(className),
-		`Element should not have class "${className}"`,
-	);
+  assert.ok(!element.classList.contains(className), `Element should not have class "${className}"`);
 }
 
 /**
@@ -64,10 +58,7 @@ export function assertNoClass(element, className) {
  * @param {string} selector - The CSS selector
  */
 export function assertSelector(element, selector) {
-	assert.ok(
-		element.matches(selector),
-		`Element should match selector "${selector}"`,
-	);
+  assert.ok(element.matches(selector), `Element should match selector "${selector}"`);
 }
 
 /**
@@ -76,12 +67,12 @@ export function assertSelector(element, selector) {
  * @param {string} expectedText - The expected text
  */
 export function assertTextContent(element, expectedText) {
-	const actualText = element.textContent?.trim();
-	assert.strictEqual(
-		actualText,
-		expectedText,
-		`Element text content should be "${expectedText}" but was "${actualText}"`,
-	);
+  const actualText = element.textContent?.trim();
+  assert.strictEqual(
+    actualText,
+    expectedText,
+    `Element text content should be "${expectedText}" but was "${actualText}"`,
+  );
 }
 
 /**
@@ -90,11 +81,11 @@ export function assertTextContent(element, expectedText) {
  * @param {string} substring - The substring to find
  */
 export function assertTextIncludes(element, substring) {
-	const text = element.textContent || "";
-	assert.ok(
-		text.includes(substring),
-		`Element text should include "${substring}" but was "${text}"`,
-	);
+  const text = element.textContent || '';
+  assert.ok(
+    text.includes(substring),
+    `Element text should include "${substring}" but was "${text}"`,
+  );
 }
 
 /**
@@ -103,11 +94,11 @@ export function assertTextIncludes(element, substring) {
  * @param {string} selector - The CSS selector to find in shadow root
  */
 export function assertShadowElement(element, selector) {
-	const shadowRoot = element.shadowRoot || element.renderRoot;
-	assert.ok(shadowRoot, "Element should have a shadow root");
+  const shadowRoot = element.shadowRoot || element.renderRoot;
+  assert.ok(shadowRoot, 'Element should have a shadow root');
 
-	const found = shadowRoot.querySelector(selector);
-	assert.ok(found, `Shadow root should contain element matching "${selector}"`);
+  const found = shadowRoot.querySelector(selector);
+  assert.ok(found, `Shadow root should contain element matching "${selector}"`);
 }
 
 /**
@@ -117,7 +108,7 @@ export function assertShadowElement(element, selector) {
  * @param {string} expectedValue - The expected value (optional)
  */
 export function assertAria(element, ariaAttribute, expectedValue) {
-	assertAttribute(element, ariaAttribute, expectedValue);
+  assertAttribute(element, ariaAttribute, expectedValue);
 }
 
 /**
@@ -125,17 +116,9 @@ export function assertAria(element, ariaAttribute, expectedValue) {
  * @param {HTMLElement} element - The element to check
  */
 export function assertVisible(element) {
-	const style = window.getComputedStyle(element);
-	assert.notStrictEqual(
-		style.display,
-		"none",
-		"Element should not have display:none",
-	);
-	assert.notStrictEqual(
-		style.visibility,
-		"hidden",
-		"Element should not have visibility:hidden",
-	);
+  const style = window.getComputedStyle(element);
+  assert.notStrictEqual(style.display, 'none', 'Element should not have display:none');
+  assert.notStrictEqual(style.visibility, 'hidden', 'Element should not have visibility:hidden');
 }
 
 /**
@@ -143,10 +126,8 @@ export function assertVisible(element) {
  * @param {HTMLElement} element - The element to check
  */
 export function assertHidden(element) {
-	const style = window.getComputedStyle(element);
-	const isHidden =
-		style.display === "none" ||
-		style.visibility === "hidden" ||
-		element.hidden === true;
-	assert.ok(isHidden, "Element should be hidden");
+  const style = window.getComputedStyle(element);
+  const isHidden =
+    style.display === 'none' || style.visibility === 'hidden' || element.hidden === true;
+  assert.ok(isHidden, 'Element should be hidden');
 }

package/src/test-utils/events.js

@@ -10,13 +10,13 @@
  * @returns {boolean} Returns true if the event was not cancelled
  */
 export function dispatchEvent(element, eventName, detail = {}) {
-	const event = new CustomEvent(eventName, {
-		detail,
-		bubbles: true,
-		composed: true,
-		cancelable: true,
-	});
-	return element.dispatchEvent(event);
+  const event = new CustomEvent(eventName, {
+    detail,
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+  });
+  return element.dispatchEvent(event);
 }
 
 /**
@@ -27,22 +27,20 @@ export function dispatchEvent(element, eventName, detail = {}) {
  * @returns {Promise<Event>} Resolves with the event object
  */
 export function waitForEvent(element, eventName, timeout = 3000) {
-	return new Promise((resolve, reject) => {
-		const timeoutId = setTimeout(() => {
-			element.removeEventListener(eventName, handler);
-			reject(
-				new Error(`Event "${eventName}" did not fire within ${timeout}ms`),
-			);
-		}, timeout);
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      element.removeEventListener(eventName, handler);
+      reject(new Error(`Event "${eventName}" did not fire within ${timeout}ms`));
+    }, timeout);
 
-		const handler = (event) => {
-			clearTimeout(timeoutId);
-			element.removeEventListener(eventName, handler);
-			resolve(event);
-		};
+    const handler = (event) => {
+      clearTimeout(timeoutId);
+      element.removeEventListener(eventName, handler);
+      resolve(event);
+    };
 
-		element.addEventListener(eventName, handler);
-	});
+    element.addEventListener(eventName, handler);
+  });
 }
 
 /**
@@ -50,7 +48,7 @@ export function waitForEvent(element, eventName, timeout = 3000) {
  * @param {HTMLElement} element - The element to click
  */
 export function click(element) {
-	element.click();
+  element.click();
 }
 
 /**
@@ -59,14 +57,14 @@ export function click(element) {
  * @param {string} key - The key to press (e.g., 'Enter', 'Escape')
  * @param {string} type - The event type ('keydown', 'keyup', 'keypress')
  */
-export function keyboard(element, key, type = "keydown") {
-	const event = new KeyboardEvent(type, {
-		key,
-		bubbles: true,
-		composed: true,
-		cancelable: true,
-	});
-	element.dispatchEvent(event);
+export function keyboard(element, key, type = 'keydown') {
+  const event = new KeyboardEvent(type, {
+    key,
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+  });
+  element.dispatchEvent(event);
 }
 
 /**
@@ -74,8 +72,8 @@ export function keyboard(element, key, type = "keydown") {
  * @param {HTMLElement} element - The element to focus
  */
 export function focus(element) {
-	element.focus();
-	element.dispatchEvent(new FocusEvent("focus", { bubbles: true }));
+  element.focus();
+  element.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
 }
 
 /**
@@ -83,6 +81,6 @@ export function focus(element) {
  * @param {HTMLElement} element - The element to blur
  */
 export function blur(element) {
-	element.blur();
-	element.dispatchEvent(new FocusEvent("blur", { bubbles: true }));
+  element.blur();
+  element.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
 }

package/src/test-utils/fixture.js

@@ -1,7 +1,7 @@
 /**
  * Test utilities for creating and cleaning up web component fixtures
  */
-import { Window } from "happy-dom";
+import { Window } from 'happy-dom';
 
 // Initialize happy-dom window
 const window = new Window();
@@ -17,12 +17,12 @@ globalThis.Event = window.Event;
 
 // Polyfill requestAnimationFrame for test environment
 if (!globalThis.requestAnimationFrame) {
-	globalThis.requestAnimationFrame = (callback) => {
-		return setTimeout(callback, 0);
-	};
-	globalThis.cancelAnimationFrame = (id) => {
-		clearTimeout(id);
-	};
+  globalThis.requestAnimationFrame = (callback) => {
+    return setTimeout(callback, 0);
+  };
+  globalThis.cancelAnimationFrame = (id) => {
+    clearTimeout(id);
+  };
 }
 
 /**
@@ -32,25 +32,25 @@ if (!globalThis.requestAnimationFrame) {
  * @returns {Promise<HTMLElement>} The created element after it's connected
  */
 export async function fixture(tagName, props = {}) {
-	const element = document.createElement(tagName);
+  const element = document.createElement(tagName);
 
-	// Set properties
-	for (const [key, value] of Object.entries(props)) {
-		element[key] = value;
-	}
+  // Set properties
+  for (const [key, value] of Object.entries(props)) {
+    element[key] = value;
+  }
 
-	// Append to body
-	document.body.appendChild(element);
+  // Append to body
+  document.body.appendChild(element);
 
-	// Wait for element to be fully connected and updated
-	await new Promise((resolve) => setTimeout(resolve, 0));
+  // Wait for element to be fully connected and updated
+  await new Promise((resolve) => setTimeout(resolve, 0));
 
-	// If it's a LitElement, wait for updateComplete
-	if (element.updateComplete) {
-		await element.updateComplete;
-	}
+  // If it's a LitElement, wait for updateComplete
+  if (element.updateComplete) {
+    await element.updateComplete;
+  }
 
-	return element;
+  return element;
 }
 
 /**
@@ -58,20 +58,20 @@ export async function fixture(tagName, props = {}) {
  * @param {HTMLElement} element - The element to remove
  */
 export function cleanup(element) {
-	if (element?.parentNode) {
-		element.parentNode.removeChild(element);
-	}
+  if (element?.parentNode) {
+    element.parentNode.removeChild(element);
+  }
 }
 
 /**
  * Removes all elements matching the selector from the document
  * @param {string} selector - CSS selector for elements to remove
  */
-export function cleanupAll(selector = "*") {
-	const elements = document.querySelectorAll(selector);
-	elements.forEach((el) => {
-		if (el.parentNode) {
-			el.parentNode.removeChild(el);
-		}
-	});
+export function cleanupAll(selector = '*') {
+  const elements = document.querySelectorAll(selector);
+  elements.forEach((el) => {
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  });
 }

package/src/test-utils/index.js

@@ -2,6 +2,6 @@
  * Test utilities for web components
  */
 
-export * from "./assert-helpers.js";
-export * from "./events.js";
-export * from "./fixture.js";
+export * from './assert-helpers.js';
+export * from './events.js';
+export * from './fixture.js';

package/src/types.d.ts

@@ -9,10 +9,10 @@
  */
 
 // Component deep imports
-declare module "@grantcodes/ui/components/*";
+declare module '@grantcodes/ui/components/*';
 
 // Style imports
-declare module "@grantcodes/ui/styles/*";
+declare module '@grantcodes/ui/styles/*';
 
 // Font imports
-declare module "@grantcodes/ui/fonts/*";
+declare module '@grantcodes/ui/fonts/*';