Skip to content

Commit

Permalink
separate tests that require polyfill from tests that do not
Browse files Browse the repository at this point in the history
  • Loading branch information
aghArdeshir committed Sep 22, 2024
1 parent 804bfcd commit 3a6f625
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 99 deletions.
47 changes: 47 additions & 0 deletions packages/ui/components/core/test/SlotMixin.no-polyfill.test.js
Original file line number Diff line number Diff line change
@@ -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();
});
40 changes: 40 additions & 0 deletions packages/ui/components/core/test/SlotMixin.polyfill.test.js
Original file line number Diff line number Diff line change
@@ -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);
});
99 changes: 0 additions & 99 deletions packages/ui/components/core/test/SlotMixin.test.js
Original file line number Diff line number Diff line change
@@ -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(
Expand Down Expand Up @@ -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();
});
});
});

0 comments on commit 3a6f625

Please sign in to comment.