ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: cleanup tests of all registration based awaits

Browse source
This commit is contained in:
Thomas Allmer 2020-07-28 13:58:47 +02:00
parent 6b8daef509
commit 060ad67f5c
10 changed files with 57 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
packages/fieldset/test/lion-fieldset.test.js
View file

@ -4,9 +4,7 @@ import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { import {
defineCE, defineCE,
expect, expect,
fixtureSync,
html, html,
nextFrame,
triggerFocusFor, triggerFocusFor,
unsafeStatic, unsafeStatic,
fixture, fixture,
@ -66,7 +64,6 @@ describe('<lion-fieldset>', () => {
// TODO: Tests below belong to FormRegistrarMixin. Preferably run suite integration test // TODO: Tests below belong to FormRegistrarMixin. Preferably run suite integration test
it(`${tagString} has an up to date list of every form element in .formElements`, async () => { it(`${tagString} has an up to date list of every form element in .formElements`, async () => {
const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
expect(el.formElements.keys().length).to.equal(3); expect(el.formElements.keys().length).to.equal(3);
expect(el.formElements['hobbies[]'].length).to.equal(2); expect(el.formElements['hobbies[]'].length).to.equal(2);
el.removeChild(el.formElements['hobbies[]'][0]); el.removeChild(el.formElements['hobbies[]'][0]);
@ -82,7 +79,6 @@ describe('<lion-fieldset>', () => {
</div> </div>
</${tag}> </${tag}>
`); `);
await nextFrame();
expect(el.formElements.length).to.equal(1); expect(el.formElements.length).to.equal(1);
el.children[0].removeChild(el.formElements.foo); el.children[0].removeChild(el.formElements.foo);
expect(el.formElements.length).to.equal(0); expect(el.formElements.length).to.equal(0);
@ -90,7 +86,6 @@ describe('<lion-fieldset>', () => {
it('handles names with ending [] as an array', async () => { it('handles names with ending [] as an array', async () => {
const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
el.formElements['gender[]'][0].modelValue = { value: 'male' }; el.formElements['gender[]'][0].modelValue = { value: 'male' };
el.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; el.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
el.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; el.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
@ -239,6 +234,23 @@ describe('<lion-fieldset>', () => {
expect(el.formElements.lastName.modelValue).to.equal(2); expect(el.formElements.lastName.modelValue).to.equal(2);
}); });
it('works with document.createElement', async () => {
const el = document.createElement(tagString);
const childEl = document.createElement(childTagString);
childEl.name = 'planet';
childEl.modelValue = 'earth';
expect(el.formElements.length).to.equal(0);
const wrapper = await fixture('<div></div>');
el.appendChild(childEl);
wrapper.appendChild(el);
expect(el.formElements.length).to.equal(1);
await el.registrationComplete;
expect(el.modelValue).to.deep.equal({ planet: 'earth' });
});
it('does not list disabled values in this.modelValue', async () => { it('does not list disabled values in this.modelValue', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag}> <${tag}>
@ -268,7 +280,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="lastName" .modelValue=${'bar'}></${childTag}> <${childTag} name="lastName" .modelValue=${'bar'}></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
const initState = { const initState = {
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
@ -284,7 +295,6 @@ describe('<lion-fieldset>', () => {
it('disables/enables all its formElements if it becomes disabled/enabled', async () => { it('disables/enables all its formElements if it becomes disabled/enabled', async () => {
const el = await fixture(html`<${tag} disabled>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag} disabled>${inputSlots}</${tag}>`);
await nextFrame();
expect(el.formElements.color.disabled).to.be.true; expect(el.formElements.color.disabled).to.be.true;
expect(el.formElements['hobbies[]'][0].disabled).to.be.true; expect(el.formElements['hobbies[]'][0].disabled).to.be.true;
expect(el.formElements['hobbies[]'][1].disabled).to.be.true; expect(el.formElements['hobbies[]'][1].disabled).to.be.true;
@ -302,7 +312,7 @@ describe('<lion-fieldset>', () => {
<${tag} name="sub" disabled>${inputSlots}</${tag}> <${tag} name="sub" disabled>${inputSlots}</${tag}>
</${tag}> </${tag}>
`); `);
await el.registrationComplete;
expect(el.disabled).to.equal(false); expect(el.disabled).to.equal(false);
expect(el.formElements.sub.disabled).to.be.true; expect(el.formElements.sub.disabled).to.be.true;
expect(el.formElements.sub.formElements.color.disabled).to.be.true; expect(el.formElements.sub.formElements.color.disabled).to.be.true;
@ -316,7 +326,7 @@ describe('<lion-fieldset>', () => {
<${childTag} name="lastName"></${childTag}> <${childTag} name="lastName"></${childTag}>
</${tag}> </${tag}>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.eql({ expect(el.modelValue).to.eql({
lastName: 'Bar', lastName: 'Bar',
}); });
@ -328,7 +338,7 @@ describe('<lion-fieldset>', () => {
<${childTag} name="lastName"></${childTag}> <${childTag} name="lastName"></${childTag}>
</${tag}> </${tag}>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.eql({ lastName: 'Bar' }); expect(el.modelValue).to.eql({ lastName: 'Bar' });
}); });
@ -352,13 +362,12 @@ describe('<lion-fieldset>', () => {
]} .modelValue=${'blue'}></${childTag}> ]} .modelValue=${'blue'}></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
expect(el.formElements.color.validationStates.error.IsCat).to.be.true; expect(el.formElements.color.validationStates.error.IsCat).to.be.true;
}); });
it('validates when a value changes', async () => { it('validates when a value changes', async () => {
const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await el.registrationComplete;
const spy = sinon.spy(el, 'validate'); const spy = sinon.spy(el, 'validate');
el.formElements.color.modelValue = { checked: true, value: 'red' }; el.formElements.color.modelValue = { checked: true, value: 'red' };
expect(spy.callCount).to.equal(1); expect(spy.callCount).to.equal(1);
@ -383,7 +392,6 @@ describe('<lion-fieldset>', () => {
]} .modelValue=${'blue'}></${childTag}> ]} .modelValue=${'blue'}></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
expect(el.validationStates.error.FormElementsHaveNoError).to.be.true; expect(el.validationStates.error.FormElementsHaveNoError).to.be.true;
expect(el.formElements.color.validationStates.error.IsCat).to.be.true; expect(el.formElements.color.validationStates.error.IsCat).to.be.true;
@ -410,20 +418,16 @@ describe('<lion-fieldset>', () => {
const child2 = await fixture(html` const child2 = await fixture(html`
<${childTag} name="c2"></${childTag}> <${childTag} name="c2"></${childTag}>
`); `);
await nextFrame();
expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true; expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true;
el.appendChild(child2); el.appendChild(child2);
await nextFrame();
expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined); expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined);
el.removeChild(child2); el.removeChild(child2);
await nextFrame();
expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true; expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true;
// Edge case: remove all children // Edge case: remove all children
el.removeChild(el.querySelector('[id=c1]')); el.removeChild(el.querySelector('[id=c1]'));
await nextFrame();
expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined); expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined);
}); });
@ -432,7 +436,6 @@ describe('<lion-fieldset>', () => {
describe('Interaction states', () => { describe('Interaction states', () => {
it('has false states (dirty, touched, prefilled) on init', async () => { it('has false states (dirty, touched, prefilled) on init', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
expect(fieldset.dirty).to.equal(false, 'dirty'); expect(fieldset.dirty).to.equal(false, 'dirty');
expect(fieldset.touched).to.equal(false, 'touched'); expect(fieldset.touched).to.equal(false, 'touched');
expect(fieldset.prefilled).to.equal(false, 'prefilled'); expect(fieldset.prefilled).to.equal(false, 'prefilled');
@ -440,14 +443,13 @@ describe('<lion-fieldset>', () => {
it('sets dirty when value changed', async () => { it('sets dirty when value changed', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
fieldset.formElements['hobbies[]'][0].modelValue = { checked: true, value: 'football' }; fieldset.formElements['hobbies[]'][0].modelValue = { checked: true, value: 'football' };
expect(fieldset.dirty).to.be.true; expect(fieldset.dirty).to.be.true;
}); });
it('sets touched when last field in fieldset left after focus', async () => { it('sets touched when last field in fieldset left after focus', async () => {
const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await el.registrationComplete;
await triggerFocusFor(el.formElements['hobbies[]'][0]._inputNode); await triggerFocusFor(el.formElements['hobbies[]'][0]._inputNode);
await triggerFocusFor( await triggerFocusFor(
el.formElements['hobbies[]'][el.formElements['gender[]'].length - 1]._inputNode, el.formElements['hobbies[]'][el.formElements['gender[]'].length - 1]._inputNode,
@ -476,7 +478,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="input2"></${childTag}> <${childTag} name="input2"></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
expect(el.prefilled).to.be.false; expect(el.prefilled).to.be.false;
const el2 = await fixture(html` const el2 = await fixture(html`
@ -485,7 +486,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="input2" .modelValue="${'prefilled'}"></${childTag}> <${childTag} name="input2" .modelValue="${'prefilled'}"></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
expect(el2.prefilled).to.be.true; expect(el2.prefilled).to.be.true;
}); });
@ -498,7 +498,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="myGroup[]" label="Option 2" value="2"></${childTag}> <${childTag} name="myGroup[]" label="Option 2" value="2"></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
const button = await fixture(`<button>Blur</button>`); const button = await fixture(`<button>Blur</button>`);
@ -528,7 +527,6 @@ describe('<lion-fieldset>', () => {
</${tag}> </${tag}>
`); `);
await nextFrame();
const outside = await fixture(html`<button>outside</button>`); const outside = await fixture(html`<button>outside</button>`);
outside.click(); outside.click();
@ -562,7 +560,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}> <${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
const input1 = el.querySelector(childTagString); const input1 = el.querySelector(childTagString);
input1.modelValue = 2; input1.modelValue = 2;
input1.focus(); input1.focus();
@ -596,38 +593,16 @@ describe('<lion-fieldset>', () => {
inputs[1].focus(); inputs[1].focus();
outSideButton.focus(); outSideButton.focus();
await nextFrame();
expect(el.validationStates.error.Input1IsTen).to.be.true; expect(el.validationStates.error.Input1IsTen).to.be.true;
expect(el.hasFeedbackFor).to.deep.equal(['error']); expect(el.hasFeedbackFor).to.deep.equal(['error']);
}); });
it('(re)initializes children interaction states on registration ready', async () => {
const el = await fixtureSync(html`
<${tag} .modelValue="${{ a: '1', b: '2' }}">
<${childTag} name="a"></${childTag}>
<${childTag} name="b"></${childTag}>
</${tag}>
`);
const childA = el.querySelector('[name="a"]');
const childB = el.querySelector('[name="b"]');
const spyA = sinon.spy(childA, 'initInteractionState');
const spyB = sinon.spy(childB, 'initInteractionState');
expect(el.prefilled).to.be.false;
expect(el.dirty).to.be.false;
await el.registrationComplete;
expect(spyA).to.have.been.called;
expect(spyB).to.have.been.called;
expect(el.prefilled).to.be.true;
expect(el.dirty).to.be.false;
});
}); });
// TODO: this should be tested in FormGroupMixin // TODO: this should be tested in FormGroupMixin
describe('serializedValue', () => { describe('serializedValue', () => {
it('use form elements serializedValue', async () => { it('use form elements serializedValue', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
fieldset.formElements['hobbies[]'][0].serializer = v => `${v.value}-serialized`; fieldset.formElements['hobbies[]'][0].serializer = v => `${v.value}-serialized`;
fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'Bar' }; fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'Bar' };
fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
@ -647,7 +622,6 @@ describe('<lion-fieldset>', () => {
it('treats names with ending [] as arrays', async () => { it('treats names with ending [] as arrays', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' }; fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };
@ -671,7 +645,6 @@ describe('<lion-fieldset>', () => {
<${tag}> <${tag}>
<${childTag} name="price"></${childTag}> <${childTag} name="price"></${childTag}>
</${tag}>`); </${tag}>`);
await nextFrame();
fieldset.formElements.price.modelValue = 0; fieldset.formElements.price.modelValue = 0;
expect(fieldset.serializedValue).to.deep.equal({ price: 0 }); expect(fieldset.serializedValue).to.deep.equal({ price: 0 });
}); });
@ -683,7 +656,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="custom[]"></${childTag}> <${childTag} name="custom[]"></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
fieldset.formElements['custom[]'][1].modelValue = undefined; fieldset.formElements['custom[]'][1].modelValue = undefined;
@ -699,7 +671,6 @@ describe('<lion-fieldset>', () => {
<${tag} name="newfieldset">${inputSlots}</${tag}> <${tag} name="newfieldset">${inputSlots}</${tag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
const newFieldset = fieldset.querySelector('lion-fieldset'); const newFieldset = fieldset.querySelector('lion-fieldset');
newFieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; newFieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
@ -732,7 +703,6 @@ describe('<lion-fieldset>', () => {
<${childTag} name="custom[]"></${childTag}> <${childTag} name="custom[]"></${childTag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
fieldset.formElements['custom[]'][1].disabled = true; fieldset.formElements['custom[]'][1].disabled = true;
@ -748,7 +718,6 @@ describe('<lion-fieldset>', () => {
<${tag} name="newfieldset">${inputSlots}</${tag}> <${tag} name="newfieldset">${inputSlots}</${tag}>
</${tag}> </${tag}>
`); `);
await nextFrame();
const newFieldset = fieldset.querySelector('lion-fieldset'); const newFieldset = fieldset.querySelector('lion-fieldset');
fieldset.formElements.comment.modelValue = 'Foo'; fieldset.formElements.comment.modelValue = 'Foo';
@ -859,7 +828,6 @@ describe('<lion-fieldset>', () => {
it('clears interaction state', async () => { it('clears interaction state', async () => {
const el = await fixture(html`<${tag} touched dirty>${inputSlots}</${tag}>`); const el = await fixture(html`<${tag} touched dirty>${inputSlots}</${tag}>`);
await nextFrame();
// Safety check initially // Safety check initially
el._setValueForAllFormElements('prefilled', true); el._setValueForAllFormElements('prefilled', true);
expect(el.dirty).to.equal(true, '"dirty" initially'); expect(el.dirty).to.equal(true, '"dirty" initially');
@ -884,7 +852,6 @@ describe('<lion-fieldset>', () => {
it('clears submitted state', async () => { it('clears submitted state', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
fieldset.submitted = true; fieldset.submitted = true;
fieldset.resetGroup(); fieldset.resetGroup();
expect(fieldset.submitted).to.equal(false); expect(fieldset.submitted).to.equal(false);
@ -1053,7 +1020,6 @@ describe('<lion-fieldset>', () => {
describe('Accessibility', () => { describe('Accessibility', () => {
it('has role="group" set', async () => { it('has role="group" set', async () => {
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`); const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
await nextFrame();
fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' };
fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };
fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' }; fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' };

16
packages/form-core/test-suites/FormRegistrationMixins.suite.js
View file

@ -14,6 +14,8 @@ export const runRegistrationSuite = customConfig => {
let parentTag; let parentTag;
let childTag; let childTag;
let portalTag; let portalTag;
let parentTagString;
let childTagString;
before(async () => { before(async () => {
if (!cfg.parentTagString) { if (!cfg.parentTagString) {
@ -29,6 +31,8 @@ export const runRegistrationSuite = customConfig => {
parentTag = unsafeStatic(cfg.parentTagString); parentTag = unsafeStatic(cfg.parentTagString);
childTag = unsafeStatic(cfg.childTagString); childTag = unsafeStatic(cfg.childTagString);
portalTag = unsafeStatic(cfg.portalTagString); portalTag = unsafeStatic(cfg.portalTagString);
parentTagString = cfg.parentTagString;
childTagString = cfg.childTagString;
}); });
it('can register a formElement', async () => { it('can register a formElement', async () => {
@ -40,6 +44,18 @@ export const runRegistrationSuite = customConfig => {
expect(el.formElements.length).to.equal(1); expect(el.formElements.length).to.equal(1);
}); });
it('works with document.createElement', async () => {
const el = document.createElement(parentTagString);
const childEl = document.createElement(childTagString);
expect(el.formElements.length).to.equal(0);
const wrapper = await fixture('<div></div>');
el.appendChild(childEl);
wrapper.appendChild(el);
expect(el.formElements.length).to.equal(1);
});
it('can register a formElement with arbitrary dom tree in between registrar and registering', async () => { it('can register a formElement with arbitrary dom tree in between registrar and registering', async () => {
const el = await fixture(html` const el = await fixture(html`
<${parentTag}> <${parentTag}>

7
packages/form-core/test/choice-group/ChoiceGroupMixin.test.js
View file

@ -64,7 +64,6 @@ describe('ChoiceGroupMixin', () => {
<choice-group-input .choiceValue=${'other'}></choice-group-input> <choice-group-input .choiceValue=${'other'}></choice-group-input>
</choice-group> </choice-group>
`); `);
await el.registrationComplete;
expect(el.formElements[0].name).to.equal('gender'); expect(el.formElements[0].name).to.equal('gender');
expect(el.formElements[1].name).to.equal('gender'); expect(el.formElements[1].name).to.equal('gender');
@ -104,7 +103,6 @@ describe('ChoiceGroupMixin', () => {
<choice-group-input .choiceValue=${'other'}></choice-group-input> <choice-group-input .choiceValue=${'other'}></choice-group-input>
</choice-group> </choice-group>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.equal('other'); expect(el.modelValue).to.equal('other');
expect(el.formElements[2].checked).to.be.true; expect(el.formElements[2].checked).to.be.true;
@ -118,7 +116,6 @@ describe('ChoiceGroupMixin', () => {
<choice-group-input .choiceValue=${'other'}></choice-group-input> <choice-group-input .choiceValue=${'other'}></choice-group-input>
</choice-group> </choice-group>
`); `);
await el.registrationComplete;
expect(el.serializedValue).to.equal('other'); expect(el.serializedValue).to.equal('other');
expect(el.formElements[2].checked).to.be.true; expect(el.formElements[2].checked).to.be.true;
@ -164,7 +161,6 @@ describe('ChoiceGroupMixin', () => {
></choice-group-input> ></choice-group-input>
</choice-group> </choice-group>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.equal('female'); expect(el.modelValue).to.equal('female');
el.modelValue = 'other'; el.modelValue = 'other';
@ -185,7 +181,6 @@ describe('ChoiceGroupMixin', () => {
<choice-group-input .choiceValue=${'other'}></choice-group-input> <choice-group-input .choiceValue=${'other'}></choice-group-input>
</choice-group> </choice-group>
`); `);
await el.registrationComplete;
counter = 0; // reset after setup which may result in different results counter = 0; // reset after setup which may result in different results
@ -279,7 +274,6 @@ describe('ChoiceGroupMixin', () => {
</choice-group-multiple> </choice-group-multiple>
`); `);
await el.registrationComplete;
el.modelValue = ['male', 'other']; el.modelValue = ['male', 'other'];
expect(el.modelValue).to.eql(['male', 'other']); expect(el.modelValue).to.eql(['male', 'other']);
expect(el.formElements[0].checked).to.be.true; expect(el.formElements[0].checked).to.be.true;
@ -295,7 +289,6 @@ describe('ChoiceGroupMixin', () => {
</choice-group-multiple> </choice-group-multiple>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.eql(['male', 'other']); expect(el.modelValue).to.eql(['male', 'other']);
expect(el.formElements[0].checked).to.be.true; expect(el.formElements[0].checked).to.be.true;
expect(el.formElements[2].checked).to.be.true; expect(el.formElements[2].checked).to.be.true;

18
packages/form-integrations/test/model-value-consistency.test.js
View file

@ -81,14 +81,14 @@ const choiceGroupDispatchesCountOnFirstPaint = (groupTagname, itemTagname, count
const itemTag = unsafeStatic(itemTagname); const itemTag = unsafeStatic(itemTagname);
it(getFirstPaintTitle(count), async () => { it(getFirstPaintTitle(count), async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const el = await fixture(html` await fixture(html`
<${groupTag} @model-value-changed="${spy}"> <${groupTag} @model-value-changed="${spy}">
<${itemTag} .choiceValue="${'option1'}"></${itemTag}> <${itemTag} .choiceValue="${'option1'}"></${itemTag}>
<${itemTag} .choiceValue="${'option2'}"></${itemTag}> <${itemTag} .choiceValue="${'option2'}"></${itemTag}>
<${itemTag} .choiceValue="${'option3'}"></${itemTag}> <${itemTag} .choiceValue="${'option3'}"></${itemTag}>
</${groupTag}> </${groupTag}>
`); `);
await el.registrationComplete;
expect(spy.callCount).to.equal(count); expect(spy.callCount).to.equal(count);
}); });
}; };
@ -105,7 +105,7 @@ const choiceGroupDispatchesCountOnInteraction = (groupTagname, itemTagname, coun
<${itemTag} .choiceValue="${'option3'}"></${itemTag}> <${itemTag} .choiceValue="${'option3'}"></${itemTag}>
</${groupTag}> </${groupTag}>
`); `);
await el.registrationComplete;
el.addEventListener('model-value-changed', spy); el.addEventListener('model-value-changed', spy);
const option2 = el.querySelector(`${itemTagname}:nth-child(2)`); const option2 = el.querySelector(`${itemTagname}:nth-child(2)`);
option2.checked = true; option2.checked = true;
@ -210,7 +210,7 @@ describe('lion-select-rich', () => {
describe(featureName, () => { describe(featureName, () => {
it(getFirstPaintTitle(firstStampCount), async () => { it(getFirstPaintTitle(firstStampCount), async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const el = await fixture(html` await fixture(html`
<lion-select-rich @model-value-changed="${spy}"> <lion-select-rich @model-value-changed="${spy}">
<lion-options slot="input"> <lion-options slot="input">
<lion-option .choiceValue="${'option1'}"></lion-option> <lion-option .choiceValue="${'option1'}"></lion-option>
@ -219,7 +219,7 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(spy.callCount).to.equal(firstStampCount); expect(spy.callCount).to.equal(firstStampCount);
}); });
@ -234,7 +234,7 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
el.addEventListener('model-value-changed', spy); el.addEventListener('model-value-changed', spy);
const option2 = el.querySelector('lion-option:nth-child(2)'); const option2 = el.querySelector('lion-option:nth-child(2)');
option2.checked = true; option2.checked = true;
@ -253,12 +253,12 @@ describe('lion-fieldset', () => {
describe(featureName, () => { describe(featureName, () => {
it(getFirstPaintTitle(firstStampCount), async () => { it(getFirstPaintTitle(firstStampCount), async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const el = await fixture(html` await fixture(html`
<lion-fieldset name="parent" @model-value-changed="${spy}"> <lion-fieldset name="parent" @model-value-changed="${spy}">
<lion-input name="input"></lion-input> <lion-input name="input"></lion-input>
</lion-fieldset> </lion-fieldset>
`); `);
await el.registrationComplete;
expect(spy.callCount).to.equal(firstStampCount); expect(spy.callCount).to.equal(firstStampCount);
}); });
@ -269,7 +269,7 @@ describe('lion-fieldset', () => {
<lion-input name="input"></lion-input> <lion-input name="input"></lion-input>
</lion-fieldset> </lion-fieldset>
`); `);
await el.registrationComplete;
el.addEventListener('model-value-changed', spy); el.addEventListener('model-value-changed', spy);
const input = el.querySelector('lion-input'); const input = el.querySelector('lion-input');
input.modelValue = 'foo'; input.modelValue = 'foo';

2
packages/input-range/test/lion-input-range.test.js
View file

@ -60,7 +60,7 @@ describe('<lion-input-range>', () => {
const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`); const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
el.min = '120'; el.min = '120';
el.max = '220'; el.max = '220';
await nextFrame(); await nextFrame(); // sync to native element takes some time
expect(el._inputNode.min).to.equal(el.min); expect(el._inputNode.min).to.equal(el.min);
expect(el._inputNode.max).to.equal(el.max); expect(el._inputNode.max).to.equal(el.max);
}); });

8
packages/radio-group/test/lion-radio-group.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html, nextFrame } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-radio-group.js'; import '../lion-radio-group.js';
import '../lion-radio.js'; import '../lion-radio.js';
@ -11,7 +11,6 @@ describe('<lion-radio-group>', () => {
<lion-radio label="female" value="female" checked></lion-radio> <lion-radio label="female" value="female" checked></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
expect(el.getAttribute('role')).to.equal('radiogroup'); expect(el.getAttribute('role')).to.equal('radiogroup');
}); });
@ -22,7 +21,6 @@ describe('<lion-radio-group>', () => {
<lion-radio></lion-radio> <lion-radio></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
el.children[1].focus(); el.children[1].focus();
expect(el.touched).to.equal(false, 'initially, touched state is false'); expect(el.touched).to.equal(false, 'initially, touched state is false');
@ -37,7 +35,6 @@ describe('<lion-radio-group>', () => {
<lion-radio .modelValue="${{ value: 'female', checked: false }}"></lion-radio> <lion-radio .modelValue="${{ value: 'female', checked: false }}"></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
const male = el.formElements[0]; const male = el.formElements[0];
const maleInput = male.querySelector('input'); const maleInput = male.querySelector('input');
const female = el.formElements[1]; const female = el.formElements[1];
@ -64,7 +61,6 @@ describe('<lion-radio-group>', () => {
<lion-radio label="female" value="female" checked></lion-radio> <lion-radio label="female" value="female" checked></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@ -75,7 +71,6 @@ describe('<lion-radio-group>', () => {
<lion-radio label="female" value="female" checked></lion-radio> <lion-radio label="female" value="female" checked></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@ -86,7 +81,6 @@ describe('<lion-radio-group>', () => {
<lion-radio label="female" value="female" checked></lion-radio> <lion-radio label="female" value="female" checked></lion-radio>
</lion-radio-group> </lion-radio-group>
`); `);
await nextFrame();
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
}); });

3
packages/radio-group/test/lion-radio.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, nextFrame } from '@open-wc/testing'; import { expect, fixture } from '@open-wc/testing';
import '../lion-radio.js'; import '../lion-radio.js';
describe('<lion-radio>', () => { describe('<lion-radio>', () => {
@ -6,7 +6,6 @@ describe('<lion-radio>', () => {
const el = await fixture(` const el = await fixture(`
<lion-radio name="radio" value="male"></lion-radio> <lion-radio name="radio" value="male"></lion-radio>
`); `);
await nextFrame();
expect(el.getAttribute('type')).to.equal('radio'); expect(el.getAttribute('type')).to.equal('radio');
}); });
}); });

7
packages/select-rich/test/lion-select-rich-interaction.test.js
View file

@ -269,7 +269,7 @@ describe('lion-select-rich interactions', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.equal(10); expect(el.modelValue).to.equal(10);
}); });
@ -489,7 +489,7 @@ describe('lion-select-rich interactions', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el.dirty).to.be.false; expect(el.dirty).to.be.false;
el.modelValue = 20; el.modelValue = 20;
expect(el.dirty).to.be.true; expect(el.dirty).to.be.true;
@ -542,7 +542,6 @@ describe('lion-select-rich interactions', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el.hasFeedbackFor).to.include('error'); expect(el.hasFeedbackFor).to.include('error');
expect(el.validationStates).to.have.a.property('error'); expect(el.validationStates).to.have.a.property('error');
@ -580,7 +579,7 @@ describe('lion-select-rich interactions', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('first'); expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('first');
el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' })); el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('second'); expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('second');

12
packages/select-rich/test/lion-select-rich.test.js
View file

@ -39,7 +39,6 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el.formElements[0].name).to.equal('foo'); expect(el.formElements[0].name).to.equal('foo');
expect(el.formElements[1].name).to.equal('foo'); expect(el.formElements[1].name).to.equal('foo');
@ -59,8 +58,6 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await nextFrame();
const invalidChild = await fixture(html` <lion-option .modelValue=${'Lara'}></lion-option> `); const invalidChild = await fixture(html` <lion-option .modelValue=${'Lara'}></lion-option> `);
expect(() => { expect(() => {
@ -79,8 +76,6 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await nextFrame();
const invalidChild = await fixture(html` const invalidChild = await fixture(html`
<lion-option name="foo" .choiceValue=${'male'}></lion-option> <lion-option name="foo" .choiceValue=${'male'}></lion-option>
`); `);
@ -102,7 +97,6 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
expect(el.modelValue).to.equal('other'); expect(el.modelValue).to.equal('other');
expect(el.formElements[2].checked).to.be.true; expect(el.formElements[2].checked).to.be.true;
@ -230,7 +224,7 @@ describe('lion-select-rich', () => {
expect(el.serializedValue).to.equal('red'); expect(el.serializedValue).to.equal('red');
el.serializedValue = 'hotpink'; el.serializedValue = 'hotpink';
await el.registrationComplete;
expect(el.checkedIndex).to.equal(1); expect(el.checkedIndex).to.equal(1);
expect(el.serializedValue).to.equal('hotpink'); expect(el.serializedValue).to.equal('hotpink');
}); });
@ -447,7 +441,7 @@ describe('lion-select-rich', () => {
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
`); `);
await el.registrationComplete;
// The default is min, so we override that behavior here // The default is min, so we override that behavior here
el._overlayCtrl.inheritsReferenceWidth = 'full'; el._overlayCtrl.inheritsReferenceWidth = 'full';
el._initialInheritsReferenceWidth = 'full'; el._initialInheritsReferenceWidth = 'full';
@ -558,7 +552,7 @@ describe('lion-select-rich', () => {
`); `);
expect(el.opened).to.be.false; expect(el.opened).to.be.false;
el._invokerNode.click(); el._invokerNode.click();
await nextFrame(); await nextFrame(); // reflection of click takes some time
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
}); });

5
packages/steps/test/lion-steps.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing'; import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-step.js'; import '../lion-step.js';
import '../lion-steps.js'; import '../lion-steps.js';
@ -139,7 +139,6 @@ describe('lion-steps', () => {
<lion-step>Step 4</lion-step> <lion-step>Step 4</lion-step>
</lion-steps> </lion-steps>
`); `);
await nextFrame();
el.current = 2; el.current = 2;
await checkWorkflow(el, { await checkWorkflow(el, {
@ -210,7 +209,6 @@ describe('lion-steps', () => {
</lion-step> </lion-step>
</lion-steps> </lion-steps>
`); `);
await nextFrame();
expect(firstEnterSpy).to.have.been.calledOnce; expect(firstEnterSpy).to.have.been.calledOnce;
const firstEnterSpyWithInitial = sinon.spy(); const firstEnterSpyWithInitial = sinon.spy();
@ -221,7 +219,6 @@ describe('lion-steps', () => {
</lion-step> </lion-step>
</lion-steps> </lion-steps>
`); `);
await nextFrame();
expect(firstEnterSpyWithInitial).to.have.been.calledOnce; expect(firstEnterSpyWithInitial).to.have.been.calledOnce;
}); });