separate tests that require polyfill from tests that do not

ing-bank · Sep 22, 2024 · 3a6f625 · 3a6f625
1 parent 804bfcd
commit 3a6f625
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 99 deletions.
diff --git a/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js b/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js
@@ -0,0 +1,47 @@
+import sinon from 'sinon';
+import { defineCE, expect, html } from '@open-wc/testing';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { SlotMixin } from '@lion/ui/core.js';
+import { LitElement } from 'lit';
+
+it('does not scope elements when polyfill not loaded', async () => {
+  // @ts-expect-error
+  ShadowRoot.prototype.createElement = null;
+  class ScopedEl extends LitElement {}
+
+  const tagName = defineCE(
+    class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+      static get scopedElements() {
+        return {
+          // @ts-expect-error
+          ...super.scopedElements,
+          'scoped-el': ScopedEl,
+        };
+      }
+
+      get slots() {
+        return {
+          ...super.slots,
+          template: () => html`<scoped-el></scoped-el>`,
+        };
+      }
+
+      render() {
+        return html`<slot name="template"></slot>`;
+      }
+    },
+  );
+
+  const renderTarget = document.createElement('div');
+  const el = document.createElement(tagName);
+
+  // We don't use fixture, so we limit the amount of calls to document.createElement
+  const docSpy = sinon.spy(document, 'createElement');
+  document.body.appendChild(renderTarget);
+  renderTarget.appendChild(el);
+
+  expect(docSpy.callCount).to.equal(2);
+
+  document.body.removeChild(renderTarget);
+  docSpy.restore();
+});
diff --git a/packages/ui/components/core/test/SlotMixin.polyfill.test.js b/packages/ui/components/core/test/SlotMixin.polyfill.test.js
@@ -0,0 +1,40 @@
+import sinon from 'sinon';
+import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { SlotMixin } from '@lion/ui/core.js';
+import { LitElement } from 'lit';
+
+it('supports scoped elements when polyfill loaded', async () => {
+  // @ts-ignore the scoped-custom-element-registry polyfill makes sure `ShadowRoot.prototype.createElement` is defined
+  const spy = sinon.spy(ShadowRoot.prototype, 'createElement');
+
+  class ScopedEl extends LitElement {}
+
+  const tagName = defineCE(
+    class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+      static get scopedElements() {
+        return {
+          // @ts-expect-error
+          ...super.scopedElements,
+          'scoped-elm': ScopedEl,
+        };
+      }
+
+      get slots() {
+        return {
+          ...super.slots,
+          template: () => html`<scoped-elm></scoped-elm>`,
+        };
+      }
+
+      render() {
+        return html`<slot name="template"></slot>`;
+      }
+    },
+  );
+
+  const tag = unsafeStatic(tagName);
+  await fixture(html`<${tag}></${tag}>`);
+
+  expect(spy.getCalls()).to.have.length(1);
+});
diff --git a/packages/ui/components/core/test/SlotMixin.test.js b/packages/ui/components/core/test/SlotMixin.test.js
@@ -1,27 +1,11 @@
-import sinon from 'sinon';
 import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 
 /**
  * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
  */
 
-/**
- * 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);
-
-  await new Promise(resolve => {
-    script.onload = resolve;
-  });
-}
-
 describe('SlotMixin', () => {
   it('inserts provided element into light dom and sets slot', async () => {
     const tag = defineCE(
@@ -562,87 +546,4 @@ describe('SlotMixin', () => {
       expect(el._templateNode.textContent).to.equal('1');
     });
   });
-
-  describe('Scoped Registries', () => {
-    it('supports scoped elements when polyfill loaded', async () => {
-      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(
-        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-          static get scopedElements() {
-            return {
-              // @ts-expect-error
-              ...super.scopedElements,
-              'scoped-elm': ScopedEl,
-            };
-          }
-
-          get slots() {
-            return {
-              ...super.slots,
-              template: () => html`<scoped-elm></scoped-elm>`,
-            };
-          }
-
-          render() {
-            return html`<slot name="template"></slot>`;
-          }
-        },
-      );
-
-      const tag = unsafeStatic(tagName);
-      await fixture(html`<${tag}></${tag}>`);
-
-      expect(spy.getCalls()).to.have.length(1);
-    });
-
-    it('does not scope elements when polyfill not loaded', async () => {
-      // @ts-expect-error
-      ShadowRoot.prototype.createElement = null;
-      class ScopedEl extends LitElement {}
-
-      const tagName = defineCE(
-        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-          static get scopedElements() {
-            return {
-              // @ts-expect-error
-              ...super.scopedElements,
-              'scoped-el': ScopedEl,
-            };
-          }
-
-          get slots() {
-            return {
-              ...super.slots,
-              template: () => html`<scoped-el></scoped-el>`,
-            };
-          }
-
-          render() {
-            return html`<slot name="template"></slot>`;
-          }
-        },
-      );
-
-      const renderTarget = document.createElement('div');
-      const el = document.createElement(tagName);
-
-      // We don't use fixture, so we limit the amount of calls to document.createElement
-      const docSpy = sinon.spy(document, 'createElement');
-      document.body.appendChild(renderTarget);
-      renderTarget.appendChild(el);
-
-      expect(docSpy.callCount).to.equal(2);
-
-      document.body.removeChild(renderTarget);
-      docSpy.restore();
-    });
-  });
 });