chore: allow tests to run w/o polyfill
Co-authored-by: aghArdeshir <ardeshirizadinl@gmail.com>
This commit is contained in:
parent
510f8b931f
commit
6da73f7a36
2 changed files with 20 additions and 35 deletions
|
|
@ -1,31 +1,14 @@
|
||||||
import sinon from 'sinon';
|
|
||||||
import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
|
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 { SlotMixin } from '@lion/ui/core.js';
|
||||||
import { LitElement } from 'lit';
|
import { LitElement } from 'lit';
|
||||||
|
import sinon from 'sinon';
|
||||||
|
|
||||||
|
import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
|
* @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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function unMockScopedRegistry() {
|
|
||||||
// @ts-expect-error wait for browser support
|
|
||||||
ShadowRoot.prototype.createElement = createElementNative;
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('SlotMixin', () => {
|
describe('SlotMixin', () => {
|
||||||
it('inserts provided element into light dom and sets slot', async () => {
|
it('inserts provided element into light dom and sets slot', async () => {
|
||||||
const tag = defineCE(
|
const tag = defineCE(
|
||||||
|
|
@ -568,8 +551,11 @@ describe('SlotMixin', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Scoped Registries', () => {
|
describe('Scoped Registries', () => {
|
||||||
it('supports scoped elements when polyfill loaded', async () => {
|
it('supports scoped elements when scoped registries supported (or polyfill loaded)', async () => {
|
||||||
const outputObj = mockScopedRegistry();
|
if (!supportsScopedRegistry()) return;
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
const createElSpy = sinon.spy(ShadowRoot.prototype, 'createElement');
|
||||||
|
|
||||||
class ScopedEl extends LitElement {}
|
class ScopedEl extends LitElement {}
|
||||||
|
|
||||||
|
|
@ -600,14 +586,14 @@ describe('SlotMixin', () => {
|
||||||
const tag = unsafeStatic(tagName);
|
const tag = unsafeStatic(tagName);
|
||||||
await fixture(html`<${tag}></${tag}>`);
|
await fixture(html`<${tag}></${tag}>`);
|
||||||
|
|
||||||
expect(outputObj.createElementCallCount).to.equal(1);
|
expect(createElSpy.callCount).to.equal(1);
|
||||||
|
|
||||||
unMockScopedRegistry();
|
createElSpy.restore();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not scope elements when polyfill not loaded', async () => {
|
it('does not scope elements when scoped registries not supported (or polyfill not loaded)', async () => {
|
||||||
// @ts-expect-error
|
if (supportsScopedRegistry()) return;
|
||||||
ShadowRoot.prototype.createElement = null;
|
|
||||||
class ScopedEl extends LitElement {}
|
class ScopedEl extends LitElement {}
|
||||||
|
|
||||||
const tagName = defineCE(
|
const tagName = defineCE(
|
||||||
|
|
@ -645,7 +631,6 @@ describe('SlotMixin', () => {
|
||||||
|
|
||||||
document.body.removeChild(renderTarget);
|
document.body.removeChild(renderTarget);
|
||||||
docSpy.restore();
|
docSpy.restore();
|
||||||
unMockScopedRegistry();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,25 +2,25 @@ import { LitElement } from 'lit';
|
||||||
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
||||||
import {
|
import {
|
||||||
getFormControlMembers,
|
getFormControlMembers,
|
||||||
AlwaysInvalid,
|
|
||||||
AlwaysValid,
|
|
||||||
AsyncAlwaysInvalid,
|
AsyncAlwaysInvalid,
|
||||||
AsyncAlwaysValid,
|
AsyncAlwaysValid,
|
||||||
|
AlwaysInvalid,
|
||||||
|
AlwaysValid,
|
||||||
} from '@lion/ui/form-core-test-helpers.js';
|
} from '@lion/ui/form-core-test-helpers.js';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import {
|
import {
|
||||||
|
ResultValidator,
|
||||||
|
ValidateMixin,
|
||||||
EqualsLength,
|
EqualsLength,
|
||||||
|
Unparseable,
|
||||||
MaxLength,
|
MaxLength,
|
||||||
MinLength,
|
MinLength,
|
||||||
Required,
|
|
||||||
ResultValidator,
|
|
||||||
Unparseable,
|
|
||||||
ValidateMixin,
|
|
||||||
Validator,
|
Validator,
|
||||||
|
Required,
|
||||||
} from '@lion/ui/form-core.js';
|
} from '@lion/ui/form-core.js';
|
||||||
|
|
||||||
import '@lion/ui/define/lion-field.js';
|
|
||||||
import '@lion/ui/define/lion-validation-feedback.js';
|
import '@lion/ui/define/lion-validation-feedback.js';
|
||||||
|
import '@lion/ui/define/lion-field.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {import('@lion/ui/form-core.js').LionField} LionField
|
* @typedef {import('@lion/ui/form-core.js').LionField} LionField
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue