meno-core 1.0.0

package/lib/test-utils/factories/DomMockFactory.ts

@@ -0,0 +1,487 @@
+/**
+ * DOM Mock Factory
+ * Properly typed mock factories for Window, Document, and HTMLElement
+ */
+
+import { mock } from 'bun:test';
+
+// ========== Types ==========
+
+export interface MockDOMRect {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  toJSON: () => object;
+}
+
+export interface MockHTMLElementOptions {
+  tagName?: string;
+  id?: string;
+  className?: string;
+  textContent?: string;
+  innerHTML?: string;
+  style?: Partial<CSSStyleDeclaration>;
+  dataset?: Record<string, string>;
+  attributes?: Record<string, string>;
+}
+
+export interface MockWindowOptions {
+  location?: Partial<Location>;
+  innerWidth?: number;
+  innerHeight?: number;
+}
+
+export interface MockDocumentOptions {
+  elements?: Map<string, HTMLElement>;
+}
+
+// ========== DOMRect ==========
+
+export function createMockDOMRect(overrides?: Partial<MockDOMRect>): DOMRect {
+  return {
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 100,
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+    ...overrides,
+  } as DOMRect;
+}
+
+// ========== CSSStyleDeclaration ==========
+
+export function createMockCSSStyleDeclaration(
+  initial?: Partial<CSSStyleDeclaration>
+): CSSStyleDeclaration {
+  const styles: Record<string, string> = {};
+
+  // Copy initial values
+  if (initial) {
+    for (const [key, value] of Object.entries(initial)) {
+      if (typeof value === 'string') {
+        styles[key] = value;
+      }
+    }
+  }
+
+  return new Proxy(styles as unknown as CSSStyleDeclaration, {
+    get(target, prop: string) {
+      if (prop === 'setProperty') {
+        return (name: string, value: string) => {
+          styles[name] = value;
+        };
+      }
+      if (prop === 'getPropertyValue') {
+        return (name: string) => styles[name] || '';
+      }
+      if (prop === 'removeProperty') {
+        return (name: string) => {
+          const old = styles[name];
+          delete styles[name];
+          return old || '';
+        };
+      }
+      return styles[prop] ?? '';
+    },
+    set(_, prop: string, value: string) {
+      styles[prop] = value;
+      return true;
+    },
+  });
+}
+
+// ========== HTMLElement ==========
+
+export interface TypedMockHTMLElement {
+  tagName: string;
+  id: string;
+  className: string;
+  textContent: string;
+  innerHTML: string;
+  style: CSSStyleDeclaration;
+  dataset: DOMStringMap;
+  childNodes: Node[];
+  children: Element[];
+  parentNode: Node | null;
+  parentElement: HTMLElement | null;
+  getAttribute: ReturnType<typeof mock>;
+  setAttribute: ReturnType<typeof mock>;
+  removeAttribute: ReturnType<typeof mock>;
+  hasAttribute: ReturnType<typeof mock>;
+  addEventListener: ReturnType<typeof mock>;
+  removeEventListener: ReturnType<typeof mock>;
+  dispatchEvent: ReturnType<typeof mock>;
+  appendChild: ReturnType<typeof mock>;
+  removeChild: ReturnType<typeof mock>;
+  insertBefore: ReturnType<typeof mock>;
+  contains: ReturnType<typeof mock>;
+  matches: ReturnType<typeof mock>;
+  querySelector: ReturnType<typeof mock>;
+  querySelectorAll: ReturnType<typeof mock>;
+  closest: ReturnType<typeof mock>;
+  getBoundingClientRect: ReturnType<typeof mock>;
+  remove: ReturnType<typeof mock>;
+  cloneNode: ReturnType<typeof mock>;
+  focus: ReturnType<typeof mock>;
+  blur: ReturnType<typeof mock>;
+  scrollIntoView: ReturnType<typeof mock>;
+  // Expose for assertions
+  _attributes: Map<string, string>;
+  _eventListeners: Map<string, EventListener[]>;
+}
+
+export function createTypedMockHTMLElement(
+  options: MockHTMLElementOptions = {}
+): TypedMockHTMLElement {
+  const attributes = new Map<string, string>(
+    Object.entries(options.attributes || {})
+  );
+  const eventListeners = new Map<string, EventListener[]>();
+  const childNodes: Node[] = [];
+
+  const element: TypedMockHTMLElement = {
+    tagName: (options.tagName || 'DIV').toUpperCase(),
+    id: options.id || '',
+    className: options.className || '',
+    textContent: options.textContent || '',
+    innerHTML: options.innerHTML || '',
+    style: createMockCSSStyleDeclaration(options.style),
+    dataset: (options.dataset || {}) as DOMStringMap,
+    childNodes,
+    children: childNodes as unknown as Element[],
+    parentNode: null,
+    parentElement: null,
+
+    getAttribute: mock((name: string) => attributes.get(name) ?? null),
+    setAttribute: mock((name: string, value: string) => {
+      attributes.set(name, value);
+    }),
+    removeAttribute: mock((name: string) => {
+      attributes.delete(name);
+    }),
+    hasAttribute: mock((name: string) => attributes.has(name)),
+
+    addEventListener: mock((type: string, listener: EventListener) => {
+      if (!eventListeners.has(type)) {
+        eventListeners.set(type, []);
+      }
+      eventListeners.get(type)!.push(listener);
+    }),
+    removeEventListener: mock((type: string, listener: EventListener) => {
+      const listeners = eventListeners.get(type);
+      if (listeners) {
+        const index = listeners.indexOf(listener);
+        if (index > -1) listeners.splice(index, 1);
+      }
+    }),
+    dispatchEvent: mock((event: Event) => {
+      const listeners = eventListeners.get(event.type);
+      listeners?.forEach((l) => l(event));
+      return true;
+    }),
+
+    appendChild: mock((child: Node) => {
+      childNodes.push(child);
+      return child;
+    }),
+    removeChild: mock((child: Node) => {
+      const index = childNodes.indexOf(child);
+      if (index > -1) childNodes.splice(index, 1);
+      return child;
+    }),
+    insertBefore: mock((newNode: Node, refNode: Node | null) => {
+      if (refNode === null) {
+        childNodes.push(newNode);
+      } else {
+        const index = childNodes.indexOf(refNode);
+        if (index > -1) {
+          childNodes.splice(index, 0, newNode);
+        }
+      }
+      return newNode;
+    }),
+
+    contains: mock(() => false),
+    matches: mock(() => false),
+    querySelector: mock(() => null),
+    querySelectorAll: mock(() => [] as unknown as NodeListOf<Element>),
+    closest: mock(() => null),
+    getBoundingClientRect: mock(() => createMockDOMRect()),
+    remove: mock(() => {}),
+    cloneNode: mock(() => createTypedMockHTMLElement(options) as unknown as Node),
+    focus: mock(() => {}),
+    blur: mock(() => {}),
+    scrollIntoView: mock(() => {}),
+
+    // Internal state for assertions
+    _attributes: attributes,
+    _eventListeners: eventListeners,
+  };
+
+  return element;
+}
+
+// ========== Location ==========
+
+export interface TypedMockLocation {
+  href: string;
+  pathname: string;
+  search: string;
+  hash: string;
+  host: string;
+  hostname: string;
+  port: string;
+  protocol: string;
+  origin: string;
+  assign: ReturnType<typeof mock>;
+  replace: ReturnType<typeof mock>;
+  reload: ReturnType<typeof mock>;
+  toString: () => string;
+}
+
+export function createTypedMockLocation(
+  overrides?: Partial<Location>
+): TypedMockLocation {
+  const base = {
+    href: 'http://localhost/',
+    pathname: '/',
+    search: '',
+    hash: '',
+    host: 'localhost',
+    hostname: 'localhost',
+    port: '',
+    protocol: 'http:',
+    origin: 'http://localhost',
+    ...overrides,
+  };
+
+  return {
+    ...base,
+    assign: mock(() => {}),
+    replace: mock(() => {}),
+    reload: mock(() => {}),
+    toString: () => base.href,
+  };
+}
+
+// ========== History ==========
+
+export interface TypedMockHistory {
+  length: number;
+  state: unknown;
+  scrollRestoration: ScrollRestoration;
+  pushState: ReturnType<typeof mock>;
+  replaceState: ReturnType<typeof mock>;
+  go: ReturnType<typeof mock>;
+  back: ReturnType<typeof mock>;
+  forward: ReturnType<typeof mock>;
+  // Internal state for assertions
+  _stateStack: Array<{ state: unknown; title: string; url: string }>;
+}
+
+export function createTypedMockHistory(): TypedMockHistory {
+  const stateStack: Array<{ state: unknown; title: string; url: string }> = [];
+
+  return {
+    length: 1,
+    state: null,
+    scrollRestoration: 'auto',
+    pushState: mock((state: unknown, title: string, url?: string | null) => {
+      stateStack.push({ state, title, url: url || '' });
+    }),
+    replaceState: mock((state: unknown, title: string, url?: string | null) => {
+      if (stateStack.length > 0) {
+        stateStack[stateStack.length - 1] = { state, title, url: url || '' };
+      } else {
+        stateStack.push({ state, title, url: url || '' });
+      }
+    }),
+    go: mock(() => {}),
+    back: mock(() => {}),
+    forward: mock(() => {}),
+    _stateStack: stateStack,
+  };
+}
+
+// ========== Window ==========
+
+export interface TypedMockWindow {
+  location: TypedMockLocation;
+  history: TypedMockHistory;
+  innerWidth: number;
+  innerHeight: number;
+  addEventListener: ReturnType<typeof mock>;
+  removeEventListener: ReturnType<typeof mock>;
+  dispatchEvent: ReturnType<typeof mock>;
+  getComputedStyle: ReturnType<typeof mock>;
+  requestAnimationFrame: ReturnType<typeof mock>;
+  cancelAnimationFrame: ReturnType<typeof mock>;
+  setTimeout: typeof globalThis.setTimeout;
+  clearTimeout: typeof globalThis.clearTimeout;
+  setInterval: typeof globalThis.setInterval;
+  clearInterval: typeof globalThis.clearInterval;
+  // Internal state
+  _eventListeners: Map<string, EventListener[]>;
+}
+
+export function createTypedMockWindow(
+  options: MockWindowOptions = {}
+): TypedMockWindow {
+  const eventListeners = new Map<string, EventListener[]>();
+  const location = createTypedMockLocation(options.location);
+  const history = createTypedMockHistory();
+
+  return {
+    location,
+    history,
+    innerWidth: options.innerWidth ?? 1920,
+    innerHeight: options.innerHeight ?? 1080,
+
+    addEventListener: mock((type: string, listener: EventListener) => {
+      if (!eventListeners.has(type)) {
+        eventListeners.set(type, []);
+      }
+      eventListeners.get(type)!.push(listener);
+    }),
+    removeEventListener: mock((type: string, listener: EventListener) => {
+      const listeners = eventListeners.get(type);
+      if (listeners) {
+        const index = listeners.indexOf(listener);
+        if (index > -1) listeners.splice(index, 1);
+      }
+    }),
+    dispatchEvent: mock((event: Event) => {
+      const listeners = eventListeners.get(event.type);
+      listeners?.forEach((l) => l(event));
+      return true;
+    }),
+
+    getComputedStyle: mock(() => createMockCSSStyleDeclaration()),
+    requestAnimationFrame: mock((cb: FrameRequestCallback) => {
+      setTimeout(() => cb(performance.now()), 0);
+      return 1;
+    }),
+    cancelAnimationFrame: mock(() => {}),
+
+    setTimeout: globalThis.setTimeout,
+    clearTimeout: globalThis.clearTimeout,
+    setInterval: globalThis.setInterval,
+    clearInterval: globalThis.clearInterval,
+
+    _eventListeners: eventListeners,
+  };
+}
+
+// ========== Document ==========
+
+export interface TypedMockDocument {
+  createElement: ReturnType<typeof mock>;
+  getElementById: ReturnType<typeof mock>;
+  querySelector: ReturnType<typeof mock>;
+  querySelectorAll: ReturnType<typeof mock>;
+  addEventListener: ReturnType<typeof mock>;
+  removeEventListener: ReturnType<typeof mock>;
+  dispatchEvent: ReturnType<typeof mock>;
+  head: TypedMockHTMLElement;
+  body: TypedMockHTMLElement;
+  documentElement: TypedMockHTMLElement;
+  // Internal state
+  _createdElements: TypedMockHTMLElement[];
+  _registeredElements: Map<string, TypedMockHTMLElement>;
+  _eventListeners: Map<string, EventListener[]>;
+}
+
+export function createTypedMockDocument(
+  options: MockDocumentOptions = {}
+): TypedMockDocument {
+  const registeredElements = new Map<string, TypedMockHTMLElement>();
+  const createdElements: TypedMockHTMLElement[] = [];
+  const eventListeners = new Map<string, EventListener[]>();
+
+  // Convert any provided elements
+  if (options.elements) {
+    for (const [id, el] of options.elements) {
+      registeredElements.set(id, el as unknown as TypedMockHTMLElement);
+    }
+  }
+
+  return {
+    createElement: mock((tag: string) => {
+      const el = createTypedMockHTMLElement({ tagName: tag });
+      createdElements.push(el);
+      return el;
+    }),
+    getElementById: mock((id: string) => registeredElements.get(id) ?? null),
+    querySelector: mock(() => null),
+    querySelectorAll: mock(() => [] as unknown as NodeListOf<Element>),
+
+    addEventListener: mock((type: string, listener: EventListener) => {
+      if (!eventListeners.has(type)) {
+        eventListeners.set(type, []);
+      }
+      eventListeners.get(type)!.push(listener);
+    }),
+    removeEventListener: mock((type: string, listener: EventListener) => {
+      const listeners = eventListeners.get(type);
+      if (listeners) {
+        const index = listeners.indexOf(listener);
+        if (index > -1) listeners.splice(index, 1);
+      }
+    }),
+    dispatchEvent: mock((event: Event) => {
+      const listeners = eventListeners.get(event.type);
+      listeners?.forEach((l) => l(event));
+      return true;
+    }),
+
+    head: createTypedMockHTMLElement({ tagName: 'HEAD' }),
+    body: createTypedMockHTMLElement({ tagName: 'BODY' }),
+    documentElement: createTypedMockHTMLElement({ tagName: 'HTML' }),
+
+    _createdElements: createdElements,
+    _registeredElements: registeredElements,
+    _eventListeners: eventListeners,
+  };
+}
+
+// ========== Global Installation Helpers ==========
+
+export interface DomMockInstallation {
+  window: TypedMockWindow;
+  document: TypedMockDocument;
+  cleanup: () => void;
+}
+
+/**
+ * Install mock DOM globally and return cleanup function
+ */
+export function installMockDom(
+  options: { window?: MockWindowOptions; document?: MockDocumentOptions } = {}
+): DomMockInstallation {
+  const originalWindow = (globalThis as any).window;
+  const originalDocument = (globalThis as any).document;
+
+  const mockWindow = createTypedMockWindow(options.window);
+  const mockDocument = createTypedMockDocument(options.document);
+
+  (globalThis as any).window = mockWindow;
+  (globalThis as any).document = mockDocument;
+
+  return {
+    window: mockWindow,
+    document: mockDocument,
+    cleanup: () => {
+      (globalThis as any).window = originalWindow;
+      (globalThis as any).document = originalDocument;
+    },
+  };
+}