chore(field): created test suite for form registrations
This commit is contained in:
Thijs Louisse
parent
d2035e6a3f
commit
995e8f99de
2 changed files with 166 additions and 127 deletions
149
packages/field/test-suites/FormRegistrationMixins.suite.js
Normal file
149
packages/field/test-suites/FormRegistrationMixins.suite.js
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
|
||||||
|
import { LitElement } from '@lion/core';
|
||||||
|
|
||||||
|
import { FormRegistrarMixin } from '../src/FormRegistrarMixin.js';
|
||||||
|
import { FormRegisteringMixin } from '../src/FormRegisteringMixin.js';
|
||||||
|
import { formRegistrarManager } from '../src/formRegistrarManager.js';
|
||||||
|
|
||||||
|
export const runRegistrationSuite = customConfig => {
|
||||||
|
const cfg = {
|
||||||
|
baseElement: HTMLElement,
|
||||||
|
suffix: null,
|
||||||
|
...customConfig,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe(`FormRegistrationMixins${cfg.suffix ? ` (${cfg.suffix})` : ''}`, () => {
|
||||||
|
let parentTag;
|
||||||
|
let childTag;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
if (!cfg.parentTagString) {
|
||||||
|
cfg.parentTagString = defineCE(class extends FormRegistrarMixin(cfg.baseElement) {});
|
||||||
|
}
|
||||||
|
if (!cfg.childTagString) {
|
||||||
|
cfg.childTagString = defineCE(class extends FormRegisteringMixin(cfg.baseElement) {});
|
||||||
|
}
|
||||||
|
|
||||||
|
parentTag = unsafeStatic(cfg.parentTagString);
|
||||||
|
childTag = unsafeStatic(cfg.childTagString);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can register a formElement', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${parentTag}>
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
</${parentTag}>
|
||||||
|
`);
|
||||||
|
await el.registrationReady;
|
||||||
|
expect(el.formElements.length).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('supports nested registration parents', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${parentTag}>
|
||||||
|
<${parentTag}>
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
</${parentTag}>
|
||||||
|
</${parentTag}>
|
||||||
|
`);
|
||||||
|
await el.registrationReady;
|
||||||
|
expect(el.formElements.length).to.equal(1);
|
||||||
|
expect(el.querySelector(cfg.parentTagString).formElements.length).to.equal(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('forgets disconnected registrars', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${parentTag}>
|
||||||
|
<${parentTag}>
|
||||||
|
<${childTag}</${childTag}
|
||||||
|
</${parentTag}>
|
||||||
|
</${parentTag}>
|
||||||
|
`);
|
||||||
|
|
||||||
|
const secondRegistrar = await fixture(html`
|
||||||
|
<${parentTag}>
|
||||||
|
<${childTag}</${childTag}
|
||||||
|
</${parentTag}>
|
||||||
|
`);
|
||||||
|
|
||||||
|
el.appendChild(secondRegistrar);
|
||||||
|
expect(formRegistrarManager.__elements.length).to.equal(3);
|
||||||
|
|
||||||
|
el.removeChild(secondRegistrar);
|
||||||
|
expect(formRegistrarManager.__elements.length).to.equal(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('works for components that have a delayed render', async () => {
|
||||||
|
const tagWrapperString = defineCE(
|
||||||
|
class extends FormRegistrarMixin(LitElement) {
|
||||||
|
async performUpdate() {
|
||||||
|
await new Promise(resolve => setTimeout(() => resolve(), 10));
|
||||||
|
await super.performUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<slot></slot>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const tagWrapper = unsafeStatic(tagWrapperString);
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${tagWrapper}>
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
</${tagWrapper}>
|
||||||
|
`);
|
||||||
|
await el.registrationReady;
|
||||||
|
expect(el.formElements.length).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can dynamically add/remove elements', async () => {
|
||||||
|
const el = await fixture(html`
|
||||||
|
<${parentTag}>
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
</${parentTag}>
|
||||||
|
`);
|
||||||
|
const newField = await fixture(html`
|
||||||
|
<${childTag}></${childTag}>
|
||||||
|
`);
|
||||||
|
|
||||||
|
expect(el.formElements.length).to.equal(1);
|
||||||
|
|
||||||
|
el.appendChild(newField);
|
||||||
|
expect(el.formElements.length).to.equal(2);
|
||||||
|
|
||||||
|
el.removeChild(newField);
|
||||||
|
expect(el.formElements.length).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Unregister', () => {
|
||||||
|
it.skip('requests update of the resetModelValue function of its parent formGroup on unregister', async () => {
|
||||||
|
const ParentFormGroupClass = class extends FormRegistrarMixin(LitElement) {
|
||||||
|
_updateResetModelValue() {
|
||||||
|
this.resetModelValue = this.formElements.length;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const ChildFormGroupClass = class extends FormRegisteringMixin(LitElement) {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.__parentFormGroup = this.parentNode;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formGroupTag = unsafeStatic(defineCE(ParentFormGroupClass));
|
||||||
|
const childFormGroupTag = unsafeStatic(defineCE(ChildFormGroupClass));
|
||||||
|
const parentFormEl = await fixture(html`
|
||||||
|
<${formGroupTag}>
|
||||||
|
<${childFormGroupTag} name="child[]"></${childFormGroupTag}>
|
||||||
|
<${childFormGroupTag} name="child[]"></${childFormGroupTag}>
|
||||||
|
</${formGroupTag}>
|
||||||
|
`);
|
||||||
|
expect(parentFormEl.resetModelValue.length).to.equal(2);
|
||||||
|
parentFormEl.removeChild(parentFormEl.children[0]);
|
||||||
|
expect(parentFormEl.resetModelValue.length).to.equal(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -1,129 +1,19 @@
|
||||||
import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
|
import { html } from '@open-wc/testing';
|
||||||
import sinon from 'sinon';
|
import { UpdatingElement, LitElement } from '@lion/core';
|
||||||
import { LitElement, UpdatingElement } from '@lion/core';
|
import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js';
|
||||||
|
|
||||||
import { formRegistrarManager } from '../src/formRegistrarManager.js';
|
runRegistrationSuite({
|
||||||
import { FormRegisteringMixin } from '../src/FormRegisteringMixin.js';
|
suffix: 'with UpdatingElement',
|
||||||
import { FormRegistrarMixin } from '../src/FormRegistrarMixin.js';
|
baseElement: UpdatingElement,
|
||||||
|
});
|
||||||
describe('FormRegistrationMixins', () => {
|
|
||||||
before(async () => {
|
runRegistrationSuite({
|
||||||
const FormRegistrarEl = class extends FormRegistrarMixin(UpdatingElement) {};
|
suffix: 'with LitElement, using shadow dom',
|
||||||
customElements.define('form-registrar', FormRegistrarEl);
|
baseElement: class ShadowElement extends LitElement {
|
||||||
const FormRegisteringEl = class extends FormRegisteringMixin(UpdatingElement) {};
|
render() {
|
||||||
customElements.define('form-registering', FormRegisteringEl);
|
return html`
|
||||||
});
|
<slot></slot>
|
||||||
|
`;
|
||||||
it('can register a formElement', async () => {
|
}
|
||||||
const el = await fixture(html`
|
},
|
||||||
<form-registrar>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</form-registrar>
|
|
||||||
`);
|
|
||||||
await el.registrationReady;
|
|
||||||
expect(el.formElements.length).to.equal(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('supports nested registrar', async () => {
|
|
||||||
const el = await fixture(html`
|
|
||||||
<form-registrar>
|
|
||||||
<form-registrar>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</form-registrar>
|
|
||||||
</form-registrar>
|
|
||||||
`);
|
|
||||||
await el.registrationReady;
|
|
||||||
expect(el.formElements.length).to.equal(1);
|
|
||||||
expect(el.querySelector('form-registrar').formElements.length).to.equal(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('forgets disconnected registrars', async () => {
|
|
||||||
const el = await fixture(html`
|
|
||||||
<form-registrar>
|
|
||||||
<form-registrar>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</form-registrar>
|
|
||||||
</form-registrar>
|
|
||||||
`);
|
|
||||||
|
|
||||||
const secondRegistrar = await fixture(html`
|
|
||||||
<form-registrar>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</form-registrar>
|
|
||||||
`);
|
|
||||||
|
|
||||||
el.appendChild(secondRegistrar);
|
|
||||||
expect(formRegistrarManager.__elements.length).to.equal(3);
|
|
||||||
|
|
||||||
el.removeChild(secondRegistrar);
|
|
||||||
expect(formRegistrarManager.__elements.length).to.equal(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('works for component that have a delayed render', async () => {
|
|
||||||
const tagWrapperString = defineCE(
|
|
||||||
class extends FormRegistrarMixin(LitElement) {
|
|
||||||
async performUpdate() {
|
|
||||||
await new Promise(resolve => setTimeout(() => resolve(), 10));
|
|
||||||
await super.performUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<slot></slot>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const tagWrapper = unsafeStatic(tagWrapperString);
|
|
||||||
const registerSpy = sinon.spy();
|
|
||||||
const el = await fixture(html`
|
|
||||||
<${tagWrapper} @form-element-register=${registerSpy}>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</${tagWrapper}>
|
|
||||||
`);
|
|
||||||
await el.registrationReady;
|
|
||||||
expect(el.formElements.length).to.equal(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('requests update of the resetModelValue function of its parent formGroup', async () => {
|
|
||||||
const ParentFormGroupClass = class extends FormRegistrarMixin(LitElement) {
|
|
||||||
_updateResetModelValue() {
|
|
||||||
this.resetModelValue = 'foo';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const ChildFormGroupClass = class extends FormRegisteringMixin(LitElement) {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.__parentFormGroup = this.parentNode;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const parentClass = defineCE(ParentFormGroupClass);
|
|
||||||
const formGroup = unsafeStatic(parentClass);
|
|
||||||
const childClass = defineCE(ChildFormGroupClass);
|
|
||||||
const childFormGroup = unsafeStatic(childClass);
|
|
||||||
const parentFormEl = await fixture(html`
|
|
||||||
<${formGroup}><${childFormGroup} id="child" name="child[]"></${childFormGroup}></${formGroup}>
|
|
||||||
`);
|
|
||||||
expect(parentFormEl.resetModelValue).to.equal('foo');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('can dynamically add/remove elements', async () => {
|
|
||||||
const el = await fixture(html`
|
|
||||||
<form-registrar>
|
|
||||||
<form-registering></form-registering>
|
|
||||||
</form-registrar>
|
|
||||||
`);
|
|
||||||
const newField = await fixture(html`
|
|
||||||
<form-registering></form-registering>
|
|
||||||
`);
|
|
||||||
|
|
||||||
expect(el.formElements.length).to.equal(1);
|
|
||||||
|
|
||||||
el.appendChild(newField);
|
|
||||||
expect(el.formElements.length).to.equal(2);
|
|
||||||
|
|
||||||
el.removeChild(newField);
|
|
||||||
expect(el.formElements.length).to.equal(1);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue