@remote-dom/polyfill 1.5.0 → 1.6.0

package/source/tests/custom-element-registry.test.ts

@@ -0,0 +1,137 @@
+import {CustomElementRegistryImplementation} from '../CustomElementRegistry.ts';
+import {Window} from '../Window.ts';
+
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+beforeEach(() => {
+  Window.setGlobalThis(new Window());
+});
+
+describe('CustomElementRegistry', () => {
+  describe('define()', () => {
+    it.each([
+      'my-element',
+      'x-',
+      'ui-4.x_thing',
+      'math-α',
+      'icon-💡',
+      'my-💡!',
+      'my-\u{F0000}',
+    ])('defines an element with the valid name %s', (name) => {
+      const registry = new CustomElementRegistryImplementation();
+      class CustomElement extends HTMLElement {}
+
+      registry.define(name, CustomElement);
+
+      expect(registry.get(name)).toBe(CustomElement);
+    });
+
+    it.each([
+      '',
+      'element',
+      'My-element',
+      '1-element',
+      '-element',
+      'my element',
+      'my- element',
+      'my-\telement',
+      'my-\nelement',
+      'my-\felement',
+      'my-\relement',
+      'my-\0element',
+      'my-/element',
+      'my->element',
+      'my-Element',
+      'é-element',
+      'annotation-xml',
+      'color-profile',
+      'font-face',
+      'font-face-src',
+      'font-face-uri',
+      'font-face-format',
+      'font-face-name',
+      'missing-glyph',
+    ])('rejects the invalid name %j with a SyntaxError', (name) => {
+      const registry = new CustomElementRegistryImplementation();
+      class CustomElement extends HTMLElement {}
+
+      expect(() => registry.define(name, CustomElement)).toThrowError(
+        DOMException,
+      );
+      expect(() => registry.define(name, CustomElement)).toThrowError(
+        expect.objectContaining({name: 'SyntaxError'}),
+      );
+      expect(registry.get(name)).toBeUndefined();
+    });
+
+    it('rejects duplicate names and preserves the original definition', () => {
+      const registry = new CustomElementRegistryImplementation();
+      class OriginalElement extends HTMLElement {}
+      class ReplacementElement extends HTMLElement {}
+
+      registry.define('original-element', OriginalElement);
+
+      expect(() =>
+        registry.define('original-element', ReplacementElement),
+      ).toThrowError(DOMException);
+      expect(() =>
+        registry.define('original-element', ReplacementElement),
+      ).toThrowError(expect.objectContaining({name: 'NotSupportedError'}));
+      expect(registry.get('original-element')).toBe(OriginalElement);
+      expect(registry.getName(ReplacementElement)).toBeNull();
+    });
+
+    it('rejects duplicate constructors and preserves the original definition', () => {
+      const registry = new CustomElementRegistryImplementation();
+      class CustomElement extends HTMLElement {}
+
+      registry.define('original-element', CustomElement);
+
+      expect(() =>
+        registry.define('replacement-element', CustomElement),
+      ).toThrowError(DOMException);
+      expect(() =>
+        registry.define('replacement-element', CustomElement),
+      ).toThrowError(expect.objectContaining({name: 'NotSupportedError'}));
+      expect(registry.get('replacement-element')).toBeUndefined();
+      expect(registry.getName(CustomElement)).toBe('original-element');
+    });
+
+    it('notifies whenDefined() listeners only after a successful definition', async () => {
+      const registry = new CustomElementRegistryImplementation();
+      class OriginalElement extends HTMLElement {}
+      class ReplacementElement extends HTMLElement {}
+      const listener = vi.fn();
+      const definition = registry
+        .whenDefined('replacement-element')
+        .then(listener);
+
+      registry.define('original-element', OriginalElement);
+      expect(() =>
+        registry.define('replacement-element', OriginalElement),
+      ).toThrowError(expect.objectContaining({name: 'NotSupportedError'}));
+
+      await Promise.resolve();
+      expect(listener).not.toHaveBeenCalled();
+
+      registry.define('replacement-element', ReplacementElement);
+      await definition;
+      expect(listener).toHaveBeenCalledOnce();
+      expect(listener).toHaveBeenCalledWith(ReplacementElement);
+    });
+  });
+
+  describe('whenDefined()', () => {
+    it.each(['element', 'My-element', 'font-face'])(
+      'rejects the invalid name %s with a SyntaxError',
+      async (name) => {
+        const registry = new CustomElementRegistryImplementation();
+
+        const definition = registry.whenDefined(name);
+
+        await expect(definition).rejects.toBeInstanceOf(DOMException);
+        await expect(definition).rejects.toMatchObject({name: 'SyntaxError'});
+      },
+    );
+  });
+});

package/source/tests/custom-event.test.ts

@@ -0,0 +1,26 @@
+import {describe, expect, it} from 'vitest';
+
+import {CustomEvent} from '../CustomEvent.ts';
+
+describe('CustomEvent', () => {
+  describe('constructor', () => {
+    it('defaults detail to null when the initialization dictionary is omitted', () => {
+      expect(new CustomEvent('test').detail).toBeNull();
+    });
+
+    it('defaults detail to null when omitted from the initialization dictionary', () => {
+      expect(new CustomEvent('test', {}).detail).toBeNull();
+    });
+
+    it('defaults an explicitly undefined detail to null', () => {
+      expect(new CustomEvent('test', {detail: undefined}).detail).toBeNull();
+    });
+
+    it.each([null, 0, false, '', {custom: 'detail'}])(
+      'preserves an explicitly supplied detail value of %j',
+      (detail) => {
+        expect(new CustomEvent('test', {detail}).detail).toBe(detail);
+      },
+    );
+  });
+});

package/source/tests/document-clone-import-contract.test.ts

@@ -0,0 +1,77 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {Window} from '../index.ts';
+
+let window: Window;
+let document: Window['document'];
+
+beforeEach(() => {
+  window = new Window();
+  Window.setGlobalThis(window);
+  document = window.document;
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('Document cloning and importing', () => {
+  it.each([false, true])(
+    'rejects cloneNode(%s) with a named, clear error',
+    (deep) => {
+      const clone = () => document.cloneNode(deep);
+
+      expect(clone).toThrowError(DOMException);
+      expect(clone).toThrowError(
+        expect.objectContaining({
+          name: 'NotSupportedError',
+          message: 'Cannot clone a document node',
+        }),
+      );
+    },
+  );
+
+  it.each([false, true])(
+    'rejects importNode(document, %s) with a named, clear error',
+    (deep) => {
+      const destination = new Window().document;
+      const importDocument = () => destination.importNode(document, deep);
+
+      expect(importDocument).toThrowError(DOMException);
+      expect(importDocument).toThrowError(
+        expect.objectContaining({
+          name: 'NotSupportedError',
+          message: 'Cannot import a document node',
+        }),
+      );
+    },
+  );
+
+  it('continues to clone and import supported document descendants', () => {
+    document.body.append('content');
+    const destination = new Window().document;
+
+    const clone = document.documentElement.cloneNode(true);
+    const imported = destination.importNode(document.documentElement, true);
+
+    expect(clone.textContent).toBe('content');
+    expect(clone.ownerDocument).toBe(document);
+    expect(imported.textContent).toBe('content');
+    expect(imported.ownerDocument).toBe(destination);
+  });
+
+  it('preserves the named error when DOMException is unavailable', () => {
+    vi.stubGlobal('DOMException', undefined);
+    const destination = new Window().document;
+
+    for (const operation of [
+      () => document.cloneNode(),
+      () => destination.importNode(document),
+    ]) {
+      expect(operation).toThrowError(Error);
+      expect(operation).toThrowError(
+        expect.objectContaining({name: 'NotSupportedError'}),
+      );
+    }
+  });
+});

package/source/tests/document.test.ts

@@ -0,0 +1,122 @@
+import {Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+});
+
+describe('NonElementParentNode.getElementById', () => {
+  describe('Document', () => {
+    it('returns the first matching element in tree order after arbitrary insertions', () => {
+      const container = document.createElement('div');
+      const createTarget = () => {
+        const element = document.createElement('span');
+        element.id = 'target';
+        return element;
+      };
+      const first = createTarget();
+      const second = createTarget();
+      const third = createTarget();
+      const fourth = createTarget();
+
+      container.appendChild(second);
+      container.appendChild(fourth);
+      container.insertBefore(third, fourth);
+      container.insertBefore(first, second);
+      document.body.appendChild(container);
+
+      for (const element of [first, second, third, fourth]) {
+        expect(document.getElementById('target')).toBe(element);
+        element.remove();
+      }
+
+      expect(document.getElementById('target')).toBeNull();
+    });
+
+    it('only returns elements connected to the document', () => {
+      const container = document.createElement('div');
+      const target = document.createElement('span');
+      target.id = 'target';
+      container.appendChild(target);
+
+      expect(document.getElementById('target')).toBeNull();
+
+      document.body.appendChild(container);
+      expect(document.getElementById('target')).toBe(target);
+
+      container.remove();
+      expect(document.getElementById('target')).toBeNull();
+    });
+
+    it('reflects id property and attribute changes immediately', () => {
+      const target = document.createElement('div');
+      document.body.appendChild(target);
+
+      target.id = 'before';
+      expect(target.getAttribute('id')).toBe('before');
+      expect(document.getElementById('before')).toBe(target);
+
+      target.setAttribute('id', 'after');
+      expect(target.id).toBe('after');
+      expect(document.getElementById('before')).toBeNull();
+      expect(document.getElementById('after')).toBe(target);
+
+      target.removeAttribute('id');
+      expect(target.id).toBe('');
+      expect(document.getElementById('after')).toBeNull();
+    });
+
+    it('coerces identifiers to strings but never matches an empty id', () => {
+      document.body.innerHTML = `
+        <div id=""></div>
+        <div id="null"></div>
+        <div id="undefined"></div>
+      `;
+
+      expect(document.getElementById('')).toBeNull();
+      expect(document.getElementById(null as any)?.id).toBe('null');
+      expect(document.getElementById(undefined as any)?.id).toBe('undefined');
+    });
+
+    it('matches identifiers literally instead of parsing them as selectors', () => {
+      const ids = ['a.b', 'a b', 'a[b]', 'a:b', 'a#b'];
+
+      for (const id of ids) {
+        const element = document.createElement('div');
+        element.id = id;
+        document.body.appendChild(element);
+      }
+
+      for (const id of ids) {
+        expect(document.getElementById(id)?.id).toBe(id);
+      }
+    });
+  });
+
+  describe('DocumentFragment', () => {
+    it('finds the first matching element within the fragment', () => {
+      const fragment = document.createDocumentFragment();
+      const first = document.createElement('div');
+      const second = document.createElement('div');
+      first.id = 'target';
+      second.id = 'target';
+      fragment.append(first, second);
+
+      expect(fragment.getElementById('target')).toBe(first);
+      expect(fragment.getElementById('missing')).toBeNull();
+    });
+
+    it('does not find elements outside the fragment', () => {
+      const target = document.createElement('div');
+      target.id = 'target';
+      document.body.appendChild(target);
+
+      const fragment = document.createDocumentFragment();
+
+      expect(fragment.getElementById('target')).toBeNull();
+      expect((target as any).getElementById).toBeUndefined();
+    });
+  });
+});