diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js index 803cc6fe3..3b376c07f 100644 --- a/packages/fieldset/test/lion-fieldset.test.js +++ b/packages/fieldset/test/lion-fieldset.test.js @@ -4,9 +4,7 @@ import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { defineCE, expect, - fixtureSync, html, - nextFrame, triggerFocusFor, unsafeStatic, fixture, @@ -66,7 +64,6 @@ describe('', () => { // 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 () => { const el = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); expect(el.formElements.keys().length).to.equal(3); expect(el.formElements['hobbies[]'].length).to.equal(2); el.removeChild(el.formElements['hobbies[]'][0]); @@ -82,7 +79,6 @@ describe('', () => { `); - await nextFrame(); expect(el.formElements.length).to.equal(1); el.children[0].removeChild(el.formElements.foo); expect(el.formElements.length).to.equal(0); @@ -90,7 +86,6 @@ describe('', () => { it('handles names with ending [] as an array', async () => { const el = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); el.formElements['gender[]'][0].modelValue = { value: 'male' }; el.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; el.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; @@ -239,6 +234,23 @@ describe('', () => { 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('
'); + 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 () => { const el = await fixture(html` <${tag}> @@ -268,7 +280,6 @@ describe('', () => { <${childTag} name="lastName" .modelValue=${'bar'}> `); - await nextFrame(); const initState = { firstName: 'foo', lastName: 'bar', @@ -284,7 +295,6 @@ describe('', () => { it('disables/enables all its formElements if it becomes disabled/enabled', async () => { const el = await fixture(html`<${tag} disabled>${inputSlots}`); - await nextFrame(); expect(el.formElements.color.disabled).to.be.true; expect(el.formElements['hobbies[]'][0].disabled).to.be.true; expect(el.formElements['hobbies[]'][1].disabled).to.be.true; @@ -302,7 +312,7 @@ describe('', () => { <${tag} name="sub" disabled>${inputSlots} `); - await el.registrationComplete; + expect(el.disabled).to.equal(false); expect(el.formElements.sub.disabled).to.be.true; expect(el.formElements.sub.formElements.color.disabled).to.be.true; @@ -316,7 +326,7 @@ describe('', () => { <${childTag} name="lastName"> `); - await el.registrationComplete; + expect(el.modelValue).to.eql({ lastName: 'Bar', }); @@ -328,7 +338,7 @@ describe('', () => { <${childTag} name="lastName"> `); - await el.registrationComplete; + expect(el.modelValue).to.eql({ lastName: 'Bar' }); }); @@ -352,13 +362,12 @@ describe('', () => { ]} .modelValue=${'blue'}> `); - await nextFrame(); expect(el.formElements.color.validationStates.error.IsCat).to.be.true; }); it('validates when a value changes', async () => { const el = await fixture(html`<${tag}>${inputSlots}`); - await el.registrationComplete; + const spy = sinon.spy(el, 'validate'); el.formElements.color.modelValue = { checked: true, value: 'red' }; expect(spy.callCount).to.equal(1); @@ -383,7 +392,6 @@ describe('', () => { ]} .modelValue=${'blue'}> `); - await nextFrame(); expect(el.validationStates.error.FormElementsHaveNoError).to.be.true; expect(el.formElements.color.validationStates.error.IsCat).to.be.true; @@ -410,20 +418,16 @@ describe('', () => { const child2 = await fixture(html` <${childTag} name="c2"> `); - await nextFrame(); expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true; el.appendChild(child2); - await nextFrame(); expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined); el.removeChild(child2); - await nextFrame(); expect(el.validationStates.error.HasEvenNumberOfChildren).to.be.true; // Edge case: remove all children el.removeChild(el.querySelector('[id=c1]')); - await nextFrame(); expect(el.validationStates.error.HasEvenNumberOfChildren).to.equal(undefined); }); @@ -432,7 +436,6 @@ describe('', () => { describe('Interaction states', () => { it('has false states (dirty, touched, prefilled) on init', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); expect(fieldset.dirty).to.equal(false, 'dirty'); expect(fieldset.touched).to.equal(false, 'touched'); expect(fieldset.prefilled).to.equal(false, 'prefilled'); @@ -440,14 +443,13 @@ describe('', () => { it('sets dirty when value changed', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); fieldset.formElements['hobbies[]'][0].modelValue = { checked: true, value: 'football' }; expect(fieldset.dirty).to.be.true; }); it('sets touched when last field in fieldset left after focus', async () => { const el = await fixture(html`<${tag}>${inputSlots}`); - await el.registrationComplete; + await triggerFocusFor(el.formElements['hobbies[]'][0]._inputNode); await triggerFocusFor( el.formElements['hobbies[]'][el.formElements['gender[]'].length - 1]._inputNode, @@ -476,7 +478,6 @@ describe('', () => { <${childTag} name="input2"> `); - await nextFrame(); expect(el.prefilled).to.be.false; const el2 = await fixture(html` @@ -485,7 +486,6 @@ describe('', () => { <${childTag} name="input2" .modelValue="${'prefilled'}"> `); - await nextFrame(); expect(el2.prefilled).to.be.true; }); @@ -498,7 +498,6 @@ describe('', () => { <${childTag} name="myGroup[]" label="Option 2" value="2"> `); - await nextFrame(); const button = await fixture(``); @@ -528,7 +527,6 @@ describe('', () => { `); - await nextFrame(); const outside = await fixture(html``); outside.click(); @@ -562,7 +560,6 @@ describe('', () => { <${childTag} name="input1" .validators=${[new IsNumber()]}> `); - await nextFrame(); const input1 = el.querySelector(childTagString); input1.modelValue = 2; input1.focus(); @@ -596,38 +593,16 @@ describe('', () => { inputs[1].focus(); outSideButton.focus(); - await nextFrame(); expect(el.validationStates.error.Input1IsTen).to.be.true; 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} name="b"> - - `); - 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 describe('serializedValue', () => { it('use form elements serializedValue', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); fieldset.formElements['hobbies[]'][0].serializer = v => `${v.value}-serialized`; fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'Bar' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; @@ -647,7 +622,6 @@ describe('', () => { it('treats names with ending [] as arrays', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' }; @@ -671,7 +645,6 @@ describe('', () => { <${tag}> <${childTag} name="price"> `); - await nextFrame(); fieldset.formElements.price.modelValue = 0; expect(fieldset.serializedValue).to.deep.equal({ price: 0 }); }); @@ -683,7 +656,6 @@ describe('', () => { <${childTag} name="custom[]"> `); - await nextFrame(); fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][1].modelValue = undefined; @@ -699,7 +671,6 @@ describe('', () => { <${tag} name="newfieldset">${inputSlots} `); - await nextFrame(); const newFieldset = fieldset.querySelector('lion-fieldset'); newFieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; newFieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; @@ -732,7 +703,6 @@ describe('', () => { <${childTag} name="custom[]"> `); - await nextFrame(); fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][1].disabled = true; @@ -748,7 +718,6 @@ describe('', () => { <${tag} name="newfieldset">${inputSlots} `); - await nextFrame(); const newFieldset = fieldset.querySelector('lion-fieldset'); fieldset.formElements.comment.modelValue = 'Foo'; @@ -859,7 +828,6 @@ describe('', () => { it('clears interaction state', async () => { const el = await fixture(html`<${tag} touched dirty>${inputSlots}`); - await nextFrame(); // Safety check initially el._setValueForAllFormElements('prefilled', true); expect(el.dirty).to.equal(true, '"dirty" initially'); @@ -884,7 +852,6 @@ describe('', () => { it('clears submitted state', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); fieldset.submitted = true; fieldset.resetGroup(); expect(fieldset.submitted).to.equal(false); @@ -1053,7 +1020,6 @@ describe('', () => { describe('Accessibility', () => { it('has role="group" set', async () => { const fieldset = await fixture(html`<${tag}>${inputSlots}`); - await nextFrame(); fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'chess' }; fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' }; fieldset.formElements['gender[]'][0].modelValue = { checked: false, value: 'male' }; diff --git a/packages/form-core/test-suites/FormRegistrationMixins.suite.js b/packages/form-core/test-suites/FormRegistrationMixins.suite.js index 907b89a3f..a039be8de 100644 --- a/packages/form-core/test-suites/FormRegistrationMixins.suite.js +++ b/packages/form-core/test-suites/FormRegistrationMixins.suite.js @@ -14,6 +14,8 @@ export const runRegistrationSuite = customConfig => { let parentTag; let childTag; let portalTag; + let parentTagString; + let childTagString; before(async () => { if (!cfg.parentTagString) { @@ -29,6 +31,8 @@ export const runRegistrationSuite = customConfig => { parentTag = unsafeStatic(cfg.parentTagString); childTag = unsafeStatic(cfg.childTagString); portalTag = unsafeStatic(cfg.portalTagString); + parentTagString = cfg.parentTagString; + childTagString = cfg.childTagString; }); it('can register a formElement', async () => { @@ -40,6 +44,18 @@ export const runRegistrationSuite = customConfig => { 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('
'); + 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 () => { const el = await fixture(html` <${parentTag}> diff --git a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js index 5426ab1d7..8dc732668 100644 --- a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js +++ b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js @@ -64,7 +64,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; expect(el.formElements[0].name).to.equal('gender'); expect(el.formElements[1].name).to.equal('gender'); @@ -104,7 +103,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; expect(el.modelValue).to.equal('other'); expect(el.formElements[2].checked).to.be.true; @@ -118,7 +116,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; expect(el.serializedValue).to.equal('other'); expect(el.formElements[2].checked).to.be.true; @@ -164,7 +161,6 @@ describe('ChoiceGroupMixin', () => { > `); - await el.registrationComplete; expect(el.modelValue).to.equal('female'); el.modelValue = 'other'; @@ -185,7 +181,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; counter = 0; // reset after setup which may result in different results @@ -279,7 +274,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; el.modelValue = ['male', 'other']; expect(el.modelValue).to.eql(['male', 'other']); expect(el.formElements[0].checked).to.be.true; @@ -295,7 +289,6 @@ describe('ChoiceGroupMixin', () => { `); - await el.registrationComplete; expect(el.modelValue).to.eql(['male', 'other']); expect(el.formElements[0].checked).to.be.true; expect(el.formElements[2].checked).to.be.true; diff --git a/packages/form-integrations/test/model-value-consistency.test.js b/packages/form-integrations/test/model-value-consistency.test.js index bce0b52b2..4fc842629 100644 --- a/packages/form-integrations/test/model-value-consistency.test.js +++ b/packages/form-integrations/test/model-value-consistency.test.js @@ -81,14 +81,14 @@ const choiceGroupDispatchesCountOnFirstPaint = (groupTagname, itemTagname, count const itemTag = unsafeStatic(itemTagname); it(getFirstPaintTitle(count), async () => { const spy = sinon.spy(); - const el = await fixture(html` + await fixture(html` <${groupTag} @model-value-changed="${spy}"> <${itemTag} .choiceValue="${'option1'}"> <${itemTag} .choiceValue="${'option2'}"> <${itemTag} .choiceValue="${'option3'}"> `); - await el.registrationComplete; + expect(spy.callCount).to.equal(count); }); }; @@ -105,7 +105,7 @@ const choiceGroupDispatchesCountOnInteraction = (groupTagname, itemTagname, coun <${itemTag} .choiceValue="${'option3'}"> `); - await el.registrationComplete; + el.addEventListener('model-value-changed', spy); const option2 = el.querySelector(`${itemTagname}:nth-child(2)`); option2.checked = true; @@ -210,7 +210,7 @@ describe('lion-select-rich', () => { describe(featureName, () => { it(getFirstPaintTitle(firstStampCount), async () => { const spy = sinon.spy(); - const el = await fixture(html` + await fixture(html` @@ -219,7 +219,7 @@ describe('lion-select-rich', () => { `); - await el.registrationComplete; + expect(spy.callCount).to.equal(firstStampCount); }); @@ -234,7 +234,7 @@ describe('lion-select-rich', () => { `); - await el.registrationComplete; + el.addEventListener('model-value-changed', spy); const option2 = el.querySelector('lion-option:nth-child(2)'); option2.checked = true; @@ -253,12 +253,12 @@ describe('lion-fieldset', () => { describe(featureName, () => { it(getFirstPaintTitle(firstStampCount), async () => { const spy = sinon.spy(); - const el = await fixture(html` + await fixture(html` `); - await el.registrationComplete; + expect(spy.callCount).to.equal(firstStampCount); }); @@ -269,7 +269,7 @@ describe('lion-fieldset', () => { `); - await el.registrationComplete; + el.addEventListener('model-value-changed', spy); const input = el.querySelector('lion-input'); input.modelValue = 'foo'; diff --git a/packages/input-range/test/lion-input-range.test.js b/packages/input-range/test/lion-input-range.test.js index ccb3b2e9a..6a858dae9 100644 --- a/packages/input-range/test/lion-input-range.test.js +++ b/packages/input-range/test/lion-input-range.test.js @@ -60,7 +60,7 @@ describe('', () => { const el = await fixture(``); el.min = '120'; 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.max).to.equal(el.max); }); diff --git a/packages/radio-group/test/lion-radio-group.test.js b/packages/radio-group/test/lion-radio-group.test.js index 60c746326..70059c2c2 100644 --- a/packages/radio-group/test/lion-radio-group.test.js +++ b/packages/radio-group/test/lion-radio-group.test.js @@ -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.js'; @@ -11,7 +11,6 @@ describe('', () => { `); - await nextFrame(); expect(el.getAttribute('role')).to.equal('radiogroup'); }); @@ -22,7 +21,6 @@ describe('', () => { `); - await nextFrame(); el.children[1].focus(); expect(el.touched).to.equal(false, 'initially, touched state is false'); @@ -37,7 +35,6 @@ describe('', () => { `); - await nextFrame(); const male = el.formElements[0]; const maleInput = male.querySelector('input'); const female = el.formElements[1]; @@ -64,7 +61,6 @@ describe('', () => { `); - await nextFrame(); await expect(el).to.be.accessible(); }); @@ -75,7 +71,6 @@ describe('', () => { `); - await nextFrame(); await expect(el).to.be.accessible(); }); @@ -86,7 +81,6 @@ describe('', () => { `); - await nextFrame(); await expect(el).to.be.accessible(); }); }); diff --git a/packages/radio-group/test/lion-radio.test.js b/packages/radio-group/test/lion-radio.test.js index 00c2cfd21..4896cc090 100644 --- a/packages/radio-group/test/lion-radio.test.js +++ b/packages/radio-group/test/lion-radio.test.js @@ -1,4 +1,4 @@ -import { expect, fixture, nextFrame } from '@open-wc/testing'; +import { expect, fixture } from '@open-wc/testing'; import '../lion-radio.js'; describe('', () => { @@ -6,7 +6,6 @@ describe('', () => { const el = await fixture(` `); - await nextFrame(); expect(el.getAttribute('type')).to.equal('radio'); }); }); diff --git a/packages/select-rich/test/lion-select-rich-interaction.test.js b/packages/select-rich/test/lion-select-rich-interaction.test.js index c25df4ddf..68f317abf 100644 --- a/packages/select-rich/test/lion-select-rich-interaction.test.js +++ b/packages/select-rich/test/lion-select-rich-interaction.test.js @@ -269,7 +269,7 @@ describe('lion-select-rich interactions', () => { `); - await el.registrationComplete; + expect(el.modelValue).to.equal(10); }); @@ -489,7 +489,7 @@ describe('lion-select-rich interactions', () => { `); - await el.registrationComplete; + expect(el.dirty).to.be.false; el.modelValue = 20; expect(el.dirty).to.be.true; @@ -542,7 +542,6 @@ describe('lion-select-rich interactions', () => { `); - await el.registrationComplete; expect(el.hasFeedbackFor).to.include('error'); expect(el.validationStates).to.have.a.property('error'); @@ -580,7 +579,7 @@ describe('lion-select-rich interactions', () => { `); - await el.registrationComplete; + expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('first'); el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' })); expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('second'); diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 88be31fcf..470724fa3 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -39,7 +39,6 @@ describe('lion-select-rich', () => { `); - await el.registrationComplete; expect(el.formElements[0].name).to.equal('foo'); expect(el.formElements[1].name).to.equal('foo'); @@ -59,8 +58,6 @@ describe('lion-select-rich', () => { `); - await nextFrame(); - const invalidChild = await fixture(html` `); expect(() => { @@ -79,8 +76,6 @@ describe('lion-select-rich', () => { `); - await nextFrame(); - const invalidChild = await fixture(html` `); @@ -102,7 +97,6 @@ describe('lion-select-rich', () => { `); - await el.registrationComplete; expect(el.modelValue).to.equal('other'); expect(el.formElements[2].checked).to.be.true; @@ -230,7 +224,7 @@ describe('lion-select-rich', () => { expect(el.serializedValue).to.equal('red'); el.serializedValue = 'hotpink'; - await el.registrationComplete; + expect(el.checkedIndex).to.equal(1); expect(el.serializedValue).to.equal('hotpink'); }); @@ -447,7 +441,7 @@ describe('lion-select-rich', () => { `); - await el.registrationComplete; + // The default is min, so we override that behavior here el._overlayCtrl.inheritsReferenceWidth = 'full'; el._initialInheritsReferenceWidth = 'full'; @@ -558,7 +552,7 @@ describe('lion-select-rich', () => { `); expect(el.opened).to.be.false; el._invokerNode.click(); - await nextFrame(); + await nextFrame(); // reflection of click takes some time expect(el.opened).to.be.true; }); diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index 1ee6ac696..2f2a4d2e6 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -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 '../lion-step.js'; import '../lion-steps.js'; @@ -139,7 +139,6 @@ describe('lion-steps', () => { Step 4 `); - await nextFrame(); el.current = 2; await checkWorkflow(el, { @@ -210,7 +209,6 @@ describe('lion-steps', () => { `); - await nextFrame(); expect(firstEnterSpy).to.have.been.calledOnce; const firstEnterSpyWithInitial = sinon.spy(); @@ -221,7 +219,6 @@ describe('lion-steps', () => { `); - await nextFrame(); expect(firstEnterSpyWithInitial).to.have.been.calledOnce; });