From 3a6f625416c6b7d460f91ec322a7e503d4a0960d Mon Sep 17 00:00:00 2001 From: aghArdeshir Date: Fri, 30 Aug 2024 17:55:47 +0200 Subject: [PATCH] separate tests that require polyfill from tests that do not --- .../core/test/SlotMixin.no-polyfill.test.js | 47 +++++++++ .../core/test/SlotMixin.polyfill.test.js | 40 ++++++++ .../ui/components/core/test/SlotMixin.test.js | 99 ------------------- 3 files changed, 87 insertions(+), 99 deletions(-) create mode 100644 packages/ui/components/core/test/SlotMixin.no-polyfill.test.js create mode 100644 packages/ui/components/core/test/SlotMixin.polyfill.test.js diff --git a/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js b/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js new file mode 100644 index 000000000..1bc863481 --- /dev/null +++ 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``, + }; + } + + render() { + return html``; + } + }, + ); + + 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 new file mode 100644 index 000000000..3cbfcecda --- /dev/null +++ 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``, + }; + } + + render() { + return html``; + } + }, + ); + + const tag = unsafeStatic(tagName); + await fixture(html`<${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 index 24b3d83ef..e9b6dd57c 100644 --- a/packages/ui/components/core/test/SlotMixin.test.js +++ b/packages/ui/components/core/test/SlotMixin.test.js @@ -1,6 +1,4 @@ -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'; @@ -8,20 +6,6 @@ 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``, - }; - } - - render() { - return html``; - } - }, - ); - - const tag = unsafeStatic(tagName); - await fixture(html`<${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``, - }; - } - - render() { - return html``; - } - }, - ); - - 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(); - }); - }); });