scripts that need polyfill import themselves + unnecessary mocking re…

…moval
ing-bank · Aug 27, 2024 · 3cf090e · 3cf090e
1 parent 732fabd
commit 3cf090e
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/packages/ui/components/core/test/SlotMixin.test.js b/packages/ui/components/core/test/SlotMixin.test.js
@@ -8,22 +8,18 @@ import { LitElement } from 'lit';
  * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
  */
 
-// @ts-ignore
-const createElementNative = ShadowRoot.prototype.createElement;
-function mockScopedRegistry() {
-  const outputObj = { createElementCallCount: 0 };
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = (tagName, options) => {
-    outputObj.createElementCallCount += 1;
-    // Return an element that lit can use as render target
-    return createElementNative(tagName, options);
-  };
-  return outputObj;
-}
+/**
+ * loads a script into DOM and awaits loading it
+ * @param {string} src
+ */
+async function loadScript(src) {
+  const script = document.createElement('script');
+  script.src = src;
+  document.head.appendChild(script);
 
-function unMockScopedRegistry() {
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = createElementNative;
+  await new Promise(resolve => {
+    script.onload = resolve;
+  });
 }
 
 describe('SlotMixin', () => {
@@ -569,12 +565,16 @@ describe('SlotMixin', () => {
 
   describe('Scoped Registries', () => {
     it('supports scoped elements when polyfill loaded', async () => {
-      const outputObj = mockScopedRegistry();
+      const polyfill =
+        '/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
+      await loadScript(polyfill);
+
+      // @ts-ignore the polyfill loaded above, makes sure `ShadowRoot.prototype.createElement` is defined
+      const spy = sinon.spy(ShadowRoot.prototype, 'createElement');
 
       class ScopedEl extends LitElement {}
 
       const tagName = defineCE(
-        // @ts-ignore
         class extends ScopedElementsMixin(SlotMixin(LitElement)) {
           static get scopedElements() {
             return {
@@ -600,9 +600,7 @@ describe('SlotMixin', () => {
       const tag = unsafeStatic(tagName);
       await fixture(html`<${tag}></${tag}>`);
 
-      expect(outputObj.createElementCallCount).to.equal(1);
-
-      unMockScopedRegistry();
+      expect(spy.getCalls()).to.have.length(1);
     });
 
     it('does not scope elements when polyfill not loaded', async () => {
@@ -645,7 +643,6 @@ describe('SlotMixin', () => {
 
       document.body.removeChild(renderTarget);
       docSpy.restore();
-      unMockScopedRegistry();
     });
   });
 });