@remote-dom/polyfill 1.5.0 → 1.6.0

package/source/tests/extensions.test.ts

@@ -0,0 +1,159 @@
+import {describe, expect, it, vi} from 'vitest';
+
+import {HOOKS} from '../constants.ts';
+import type {Hooks} from '../hooks.ts';
+import {MutationObserver as PolyfillMutationObserver} from '../MutationObserver.ts';
+import {Window} from '../Window.ts';
+
+describe('Window extensions', () => {
+  it('creates reusable Window subclasses', () => {
+    const installs: string[] = [];
+    const first = () => {
+      installs.push('first');
+    };
+    const second = () => {
+      installs.push('second');
+    };
+    const ExtendedWindow = Window.with(first, second);
+
+    const firstWindow = new ExtendedWindow();
+    const secondWindow = new ExtendedWindow();
+
+    expect(firstWindow).toBeInstanceOf(Window);
+    expect(secondWindow).toBeInstanceOf(Window);
+    expect(installs).toEqual(['first', 'second', 'first', 'second']);
+  });
+
+  it('composes extensions across successive calls to with()', () => {
+    const installs: string[] = [];
+    const FirstWindow = Window.with(() => {
+      installs.push('first');
+    });
+    const ExtendedWindow = FirstWindow.with(() => {
+      installs.push('second');
+    });
+
+    new ExtendedWindow();
+
+    expect(installs).toEqual(['first', 'second']);
+  });
+
+  it('dispatches DOM operations to installed hook subscriptions', () => {
+    const hooks = {
+      createElement: vi.fn<Hooks['createElement']>(),
+      setAttribute: vi.fn<Hooks['setAttribute']>(),
+      removeAttribute: vi.fn<Hooks['removeAttribute']>(),
+      createText: vi.fn<Hooks['createText']>(),
+      setText: vi.fn<Hooks['setText']>(),
+      insertChild: vi.fn<Hooks['insertChild']>(),
+      removeChild: vi.fn<Hooks['removeChild']>(),
+      addEventListener: vi.fn<Hooks['addEventListener']>(),
+      removeEventListener: vi.fn<Hooks['removeEventListener']>(),
+    } satisfies Hooks;
+    const ExtendedWindow = Window.with(() => hooks);
+    const window = new ExtendedWindow();
+
+    const parent = window.document.createElement('parent');
+    const child = window.document.createElement('child');
+    const text = window.document.createTextNode('initial');
+    const listener = () => {};
+
+    parent.setAttribute('attribute', 'value');
+    parent.removeAttribute('attribute');
+    text.data = 'updated';
+    parent.appendChild(child);
+    parent.removeChild(child);
+    parent.addEventListener('event', listener);
+    parent.removeEventListener('event', listener);
+
+    expect(hooks.createElement).toHaveBeenCalledTimes(2);
+    expect(hooks.createText).toHaveBeenCalledOnce();
+    expect(hooks.setText).toHaveBeenCalledOnce();
+    expect(hooks.setAttribute).toHaveBeenCalledOnce();
+    expect(hooks.removeAttribute).toHaveBeenCalledOnce();
+    expect(hooks.insertChild).toHaveBeenCalledOnce();
+    expect(hooks.removeChild).toHaveBeenCalledOnce();
+    expect(hooks.addEventListener).toHaveBeenCalledOnce();
+    expect(hooks.removeEventListener).toHaveBeenCalledOnce();
+  });
+
+  it('dispatches extension hooks in installation order before legacy hooks', () => {
+    const calls: string[] = [];
+    const ExtendedWindow = Window.with(
+      () => ({
+        createElement: () => calls.push('first'),
+      }),
+      () => ({
+        createElement: () => calls.push('second'),
+      }),
+    );
+    const window = new ExtendedWindow();
+
+    window[HOOKS].createElement = () => calls.push('legacy');
+    window.document.createElement('element');
+
+    expect(calls).toEqual(['first', 'second', 'legacy']);
+  });
+
+  it('resolves legacy hooks assigned after construction', () => {
+    const extensionHook = vi.fn();
+    const legacyHook = vi.fn();
+    const ExtendedWindow = Window.with(() => ({
+      insertChild: extensionHook,
+    }));
+    const window = new ExtendedWindow();
+    const parent = window.document.createElement('parent');
+    const child = window.document.createElement('child');
+
+    window[HOOKS].insertChild = legacyHook;
+    parent.appendChild(child);
+
+    expect(extensionHook).toHaveBeenCalledOnce();
+    expect(legacyHook).toHaveBeenCalledOnce();
+  });
+
+  it('creates independent subscriptions for each Window instance', () => {
+    const subscriptionCounts: Array<() => number> = [];
+    const ExtendedWindow = Window.with(() => {
+      let count = 0;
+      subscriptionCounts.push(() => count);
+
+      return {
+        setText: () => count++,
+      };
+    });
+    const firstWindow = new ExtendedWindow();
+    new ExtendedWindow();
+
+    firstWindow.document.createTextNode('').data = 'updated';
+
+    expect(subscriptionCounts.map((readCount) => readCount())).toEqual([1, 0]);
+  });
+
+  it('supports extensions that only install APIs', () => {
+    class CustomMutationObserver extends PolyfillMutationObserver {}
+
+    const ExtendedWindow = Window.with((window) => {
+      window.MutationObserver = CustomMutationObserver;
+    });
+    const window = new ExtendedWindow();
+
+    expect(window.MutationObserver).toBe(CustomMutationObserver);
+  });
+
+  it('lets later extensions override window APIs set by earlier ones', () => {
+    class FirstMutationObserver extends PolyfillMutationObserver {}
+    class SecondMutationObserver extends PolyfillMutationObserver {}
+
+    const ExtendedWindow = Window.with(
+      (window) => {
+        window.MutationObserver = FirstMutationObserver;
+      },
+      (window) => {
+        window.MutationObserver = SecondMutationObserver;
+      },
+    );
+
+    expect(new ExtendedWindow().MutationObserver).toBe(SecondMutationObserver);
+  });
+});

package/source/tests/get-elements-by-tag-name.test.ts

@@ -0,0 +1,79 @@
+import {SVG_NAMESPACE} from '../constants.ts';
+import {Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+});
+
+describe('getElementsByTagName', () => {
+  it('is exposed on Document and Element but not DocumentFragment', () => {
+    expect(document.getElementsByTagName).toBeTypeOf('function');
+    expect(document.body.getElementsByTagName).toBeTypeOf('function');
+    expect(
+      (document.createDocumentFragment() as any).getElementsByTagName,
+    ).toBeUndefined();
+  });
+
+  it('finds descendant HTML elements case-insensitively', () => {
+    document.body.innerHTML = '<main><div></div><DIV></DIV></main>';
+
+    expect(document.getElementsByTagName('body')[0]).toBe(document.body);
+    expect(document.body.getElementsByTagName('DIV')).toHaveLength(2);
+    expect(document.body.getElementsByTagName('*')).toHaveLength(3);
+  });
+
+  it('matches non-HTML tag names case-sensitively', () => {
+    const svg = document.createElementNS(SVG_NAMESPACE, 'svg');
+    const gradient = document.createElementNS(SVG_NAMESPACE, 'linearGradient');
+    svg.appendChild(gradient);
+    document.body.appendChild(svg);
+
+    expect(document.getElementsByTagName('linearGradient')[0]).toBe(gradient);
+    expect(document.getElementsByTagName('lineargradient')).toHaveLength(0);
+  });
+
+  it.each(['Document', 'Element'])(
+    'uses WPT-derived ASCII matching for %s.getElementsByTagName()',
+    (contextType) => {
+      const parent =
+        contextType === 'Document'
+          ? document.body
+          : document.createElement('section');
+      const context = contextType === 'Document' ? document : parent;
+      const uppercaseHtml = document.createElementNS(
+        'http://www.w3.org/1999/xhtml',
+        'I',
+      );
+      const nonAsciiHtml = document.createElement('aÇ');
+      const kelvinHtml = document.createElement('aK');
+      const prefixedHtml = document.createElementNS(
+        'http://www.w3.org/1999/xhtml',
+        'test:aÇ',
+      );
+      const prefixedForeign = document.createElementNS('test', 'te:ST');
+      parent.append(
+        uppercaseHtml,
+        nonAsciiHtml,
+        kelvinHtml,
+        prefixedHtml,
+        prefixedForeign,
+      );
+
+      expect(context.getElementsByTagName('I')).toHaveLength(0);
+      expect(context.getElementsByTagName('i')).toHaveLength(0);
+      expect(context.getElementsByTagName('AÇ')).toEqual([nonAsciiHtml]);
+      expect(context.getElementsByTagName('aÇ')).toEqual([nonAsciiHtml]);
+      expect(context.getElementsByTagName('aç')).toHaveLength(0);
+      expect(context.getElementsByTagName('AK')).toEqual([kelvinHtml]);
+      expect(context.getElementsByTagName('aK')).toEqual([kelvinHtml]);
+      expect(context.getElementsByTagName('ak')).toHaveLength(0);
+      expect(context.getElementsByTagName('TEST:AÇ')).toEqual([prefixedHtml]);
+      expect(context.getElementsByTagName('test:aç')).toHaveLength(0);
+      expect(context.getElementsByTagName('te:ST')).toEqual([prefixedForeign]);
+      expect(context.getElementsByTagName('te:st')).toHaveLength(0);
+    },
+  );
+});

package/source/tests/getElementsByClassName.test.ts

@@ -0,0 +1,109 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {NodeList} from '../NodeList.ts';
+import {Window} from '../Window.ts';
+import type {Element} from '../Element.ts';
+
+describe('getElementsByClassName', () => {
+  let window: Window;
+
+  beforeEach(() => {
+    window = new Window();
+  });
+
+  it('is exposed on Document and Element but not DocumentFragment', () => {
+    expect(window.document.getElementsByClassName).toBeTypeOf('function');
+    expect(window.document.body.getElementsByClassName).toBeTypeOf('function');
+    expect(
+      (window.document.createDocumentFragment() as any).getElementsByClassName,
+    ).toBeUndefined();
+  });
+
+  it('finds descendants containing every requested class in tree order', () => {
+    window.document.body.innerHTML = `
+      <main class="card selected">
+        <div class="selected card first"></div>
+        <section><span class="card selected last"></span></section>
+        <div class="card"></div>
+      </main>
+    `;
+
+    const matches = window.document.getElementsByClassName('card selected');
+    const withinMain = matches[0]!.getElementsByClassName('selected card');
+
+    expect(matches.map((element: Element) => element.localName)).toEqual([
+      'main',
+      'div',
+      'span',
+    ]);
+    expect(withinMain.map((element: Element) => element.localName)).toEqual([
+      'div',
+      'span',
+    ]);
+  });
+
+  it('treats class names literally instead of parsing a selector', () => {
+    const element = window.document.createElement('div');
+    element.setAttribute('class', 'has.dot has:colon');
+    window.document.body.appendChild(element);
+
+    expect(window.document.getElementsByClassName('has.dot')[0]).toBe(element);
+    expect(window.document.getElementsByClassName('has:colon')[0]).toBe(
+      element,
+    );
+  });
+
+  it('coerces null to the literal class name "null"', () => {
+    const element = window.document.createElement('div');
+    element.setAttribute('class', 'null');
+    window.document.body.appendChild(element);
+
+    expect(window.document.getElementsByClassName(null as any)[0]).toBe(
+      element,
+    );
+  });
+
+  it('uses ASCII whitespace, removes duplicate names, and handles empty input', () => {
+    const element = window.document.createElement('div');
+    element.setAttribute('class', 'one\ttwo\nthree\ffour\rfive');
+    window.document.body.appendChild(element);
+
+    expect(
+      window.document.getElementsByClassName(
+        ' one one two three four five ',
+      )[0],
+    ).toBe(element);
+    expect(
+      window.document.getElementsByClassName('one\ttwo\nthree\ffour\rfive')[0],
+    ).toBe(element);
+    expect(window.document.getElementsByClassName('   ')).toHaveLength(0);
+  });
+
+  it('does not treat non-breaking space as a class separator', () => {
+    const literal = window.document.createElement('div');
+    literal.setAttribute('class', 'left\u00a0right');
+
+    const separated = window.document.createElement('div');
+    separated.setAttribute('class', 'left right');
+
+    window.document.body.append(literal, separated);
+
+    const literalMatches =
+      window.document.getElementsByClassName('left\u00a0right');
+    expect(literalMatches).toHaveLength(1);
+    expect(literalMatches[0]).toBe(literal);
+
+    const leftMatches = window.document.getElementsByClassName('left');
+    expect(leftMatches).toHaveLength(1);
+    expect(leftMatches[0]).toBe(separated);
+  });
+
+  it('returns the polyfill collection with item() access', () => {
+    window.document.body.innerHTML = '<div class="match"></div>';
+
+    const matches = window.document.getElementsByClassName('match');
+
+    expect(matches).toBeInstanceOf(NodeList);
+    expect(matches.item(0)).toBe(matches[0]);
+  });
+});

package/source/tests/hooks.test.ts

@@ -0,0 +1,43 @@
+import {HOOKS, type Hooks, Window} from '../index.ts';
+
+import {expect, expectTypeOf, it, vi} from 'vitest';
+
+type CommentNode = ReturnType<Document['createComment']>;
+type HookParameters<Hook extends (...args: any[]) => unknown> =
+  Parameters<Hook>;
+
+it('types comment creation for handling hooks', () => {
+  expectTypeOf<CommentNode>().toMatchTypeOf<
+    HookParameters<Hooks['setText']>[0]
+  >();
+  expectTypeOf<CommentNode>().toMatchTypeOf<
+    HookParameters<Hooks['insertChild']>[1]
+  >();
+  expectTypeOf<CommentNode>().toMatchTypeOf<
+    HookParameters<Hooks['removeChild']>[1]
+  >();
+});
+
+it('calls handling hooks for comments', () => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+
+  const insertChild = vi.fn();
+  const removeChild = vi.fn();
+  const setText = vi.fn();
+
+  window[HOOKS].insertChild = insertChild;
+  window[HOOKS].removeChild = removeChild;
+  window[HOOKS].setText = setText;
+
+  const parent = document.createElement('div');
+  const comment = document.createComment('Comment');
+
+  parent.appendChild(comment);
+  comment.data = 'Updated comment';
+  parent.removeChild(comment);
+
+  expect(insertChild).toHaveBeenCalledWith(parent, comment, 0);
+  expect(setText).toHaveBeenCalledWith(comment, 'Updated comment');
+  expect(removeChild).toHaveBeenCalledWith(parent, comment, 0);
+});