p-elements-core 1.2.32-rc2 → 1.2.32-rc4

package/src/test-utils.ts

@@ -0,0 +1,223 @@
+/**
+ * Test utilities for p-elements-core testing with Vitest
+ * Provides helpers for creating and testing custom elements
+ */
+
+import { CustomElement } from './custom-element.js';
+import { customElementConfig } from './decorators/custom-element-config.js';
+import { generateUniqueTagName, trackElement } from './test-setup.js';
+import type { VNode } from './maquette/interfaces.js';
+
+/**
+ * Wait for an element to complete its update cycle
+ */
+export async function waitForRender(element: CustomElement): Promise<void> {
+  // Wait for shadowRoot to be created (async in requestAnimationFrame)
+  let attempts = 0;
+  const maxAttempts = 100;
+  while (!element.shadowRoot && attempts < maxAttempts) {
+    await new Promise(resolve => setTimeout(resolve, 10));
+    attempts++;
+  }
+  
+  if (!element.shadowRoot && attempts >= maxAttempts) {
+    console.warn('waitForRender: shadowRoot was not created after max attempts');
+  }
+  
+  // Wait for projector to render (also async in requestAnimationFrame)
+  await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined))));
+  
+  // Then wait for update to complete
+  await element.updateComplete;
+}
+
+/**
+ * Create and register a test custom element
+ * Returns the tag name for the registered element
+ */
+export function defineTestElement(
+  render: () => VNode,
+  options: {
+    tagName?: string;
+    isFormAssociated?: boolean;
+    delegatesFocus?: boolean;
+    style?: string;
+    extends?: string;
+  } = {}
+): string {
+  const tagName = options.tagName || generateUniqueTagName();
+
+  @customElementConfig({
+    tagName,
+    options: options.extends ? { extends: options.extends } : undefined,
+  })
+  class TestElement extends CustomElement {
+    static style = options.style || '';
+    static isFormAssociated = options.isFormAssociated || false;
+    static delegatesFocus = options.delegatesFocus || false;
+    
+    render() {
+      return render();
+    }
+  }
+
+  return tagName;
+}
+
+/**
+ * Create a simple test element directly in the DOM
+ */
+export async function createTestElement<T extends HTMLElement = HTMLElement>(
+  tagName: string,
+  attributes: Record<string, any> = {}
+): Promise<T> {
+  const el = document.createElement(tagName) as T;
+  
+  // Set attributes
+  Object.entries(attributes).forEach(([key, value]) => {
+    if (typeof value === 'boolean') {
+      if (value) {
+        el.setAttribute(key, '');
+      }
+    } else if (value !== null && value !== undefined) {
+      el.setAttribute(key, String(value));
+    }
+  });
+  
+  // Add to body for connection
+  document.body.appendChild(el);
+  trackElement(el);
+  
+  // Wait for render if it's a CustomElement
+  if (el instanceof CustomElement) {
+    await waitForRender(el as CustomElement);
+  }
+  
+  return el;
+}
+
+/**
+ * Get property descriptor from an element (helps test decorator-generated properties)
+ */
+export function getPropertyDescriptor(
+  element: any,
+  propertyName: string
+): PropertyDescriptor | undefined {
+  let proto = Object.getPrototypeOf(element);
+  
+  while (proto) {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, propertyName);
+    if (descriptor) {
+      return descriptor;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  
+  return undefined;
+}
+
+/**
+ * Wait for a condition to be true
+ */
+export async function waitFor(
+  condition: () => boolean,
+  timeout: number = 1000,
+  interval: number = 10
+): Promise<void> {
+  const startTime = Date.now();
+  
+  while (!condition()) {
+    if (Date.now() - startTime > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    await new Promise(resolve => setTimeout(resolve, interval));
+  }
+}
+
+/**
+ * Simulate an attribute change on an element
+ */
+export function setAttributeAndNotify(
+  element: HTMLElement & { attributeChangedCallback?: Function },
+  name: string,
+  value: string | null
+): void {
+  const oldValue = element.getAttribute(name);
+  
+  if (value === null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+  
+  // Manually trigger attributeChangedCallback if it exists
+  if (element.attributeChangedCallback) {
+    element.attributeChangedCallback(name, oldValue, value);
+  }
+}
+
+/**
+ * Assert that a VNode has specific properties
+ */
+export function assertVNode(
+  vnode: VNode,
+  expected: Partial<{
+    vnodeSelector: string;
+    text?: string;
+    children?: VNode[];
+  }>
+): void {
+  if (expected.vnodeSelector) {
+    if (vnode.vnodeSelector !== expected.vnodeSelector) {
+      throw new Error(
+        `Expected vnodeSelector "${expected.vnodeSelector}" but got "${vnode.vnodeSelector}"`
+      );
+    }
+  }
+  
+  if (expected.text !== undefined) {
+    if (vnode.text !== expected.text) {
+      throw new Error(`Expected text "${expected.text}" but got "${vnode.text}"`);
+    }
+  }
+  
+  if (expected.children) {
+    if (!vnode.children || vnode.children.length !== expected.children.length) {
+      throw new Error(
+        `Expected ${expected.children.length} children but got ${vnode.children?.length || 0}`
+      );
+    }
+  }
+}
+
+/**
+ * Get the shadow root of an element, throwing if not found
+ */
+export function getShadowRoot(element: HTMLElement): ShadowRoot {
+  if (!element.shadowRoot) {
+    throw new Error('Element does not have a shadow root');
+  }
+  return element.shadowRoot;
+}
+
+/**
+ * Query a selector within an element's shadow DOM
+ */
+export function shadowQuery<T extends Element = Element>(
+  element: HTMLElement,
+  selector: string
+): T | null {
+  return getShadowRoot(element).querySelector<T>(selector);
+}
+
+/**
+ * Query all selectors within an element's shadow DOM
+ */
+export function shadowQueryAll<T extends Element = Element>(
+  element: HTMLElement,
+  selector: string
+): NodeListOf<T> {
+  return getShadowRoot(element).querySelectorAll<T>(selector);
+}
+
+

package/tsconfig.json

@@ -60,5 +60,6 @@
   },
   "exclude": [
     "docs",
+    "vitest.config.ts"
   ],
 }

package/vitest.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: process.env.HEADED !== 'true',
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+    globals: true,
+    setupFiles: ['./src/test-setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      reportsDirectory: 'coverage',
+      exclude: [
+        'node_modules/',
+        'src/test-setup.ts',
+        'src/test-utils.ts',
+        'src/**/*.test.ts',
+      ],
+      thresholds: {
+        lines: 70,
+        functions: 70,
+        branches: 60,
+        statements: 70,
+      },
+    },
+    testTimeout: 5000,
+    hookTimeout: 5000,
+  },
+});
+

package/webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
       {
         test: /\.tsx?$/,
         use: ["babel-loader", "ts-loader"],
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /\.test\.ts$/],
       },
     ],
   },