chore: cleanup tests of all registration based awaits
This commit is contained in:
parent
6b8daef509
commit
060ad67f5c
10 changed files with 57 additions and 99 deletions
|
|
@ -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('<lion-fieldset>', () => {
|
|||
// 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}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
</div>
|
||||
</${tag}>
|
||||
`);
|
||||
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('<lion-fieldset>', () => {
|
|||
|
||||
it('handles names with ending [] as an array', async () => {
|
||||
const el = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
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 () => {
|
||||
const el = await fixture(html`
|
||||
<${tag}>
|
||||
|
|
@ -268,7 +280,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="lastName" .modelValue=${'bar'}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
const initState = {
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
|
|
@ -284,7 +295,6 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
it('disables/enables all its formElements if it becomes disabled/enabled', async () => {
|
||||
const el = await fixture(html`<${tag} disabled>${inputSlots}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
<${tag} name="sub" disabled>${inputSlots}</${tag}>
|
||||
</${tag}>
|
||||
`);
|
||||
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('<lion-fieldset>', () => {
|
|||
<${childTag} name="lastName"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.modelValue).to.eql({
|
||||
lastName: 'Bar',
|
||||
});
|
||||
|
|
@ -328,7 +338,7 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="lastName"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.modelValue).to.eql({ lastName: 'Bar' });
|
||||
});
|
||||
|
||||
|
|
@ -352,13 +362,12 @@ describe('<lion-fieldset>', () => {
|
|||
]} .modelValue=${'blue'}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
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}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
]} .modelValue=${'blue'}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
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('<lion-fieldset>', () => {
|
|||
const child2 = await fixture(html`
|
||||
<${childTag} name="c2"></${childTag}>
|
||||
`);
|
||||
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('<lion-fieldset>', () => {
|
|||
describe('Interaction states', () => {
|
||||
it('has false states (dirty, touched, prefilled) on init', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
|
||||
it('sets dirty when value changed', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
<${childTag} name="input2"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(el.prefilled).to.be.false;
|
||||
|
||||
const el2 = await fixture(html`
|
||||
|
|
@ -485,7 +486,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="input2" .modelValue="${'prefilled'}"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(el2.prefilled).to.be.true;
|
||||
});
|
||||
|
||||
|
|
@ -498,7 +498,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="myGroup[]" label="Option 2" value="2"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
const button = await fixture(`<button>Blur</button>`);
|
||||
|
||||
|
|
@ -528,7 +527,6 @@ describe('<lion-fieldset>', () => {
|
|||
</${tag}>
|
||||
`);
|
||||
|
||||
await nextFrame();
|
||||
const outside = await fixture(html`<button>outside</button>`);
|
||||
|
||||
outside.click();
|
||||
|
|
@ -562,7 +560,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
const input1 = el.querySelector(childTagString);
|
||||
input1.modelValue = 2;
|
||||
input1.focus();
|
||||
|
|
@ -596,38 +593,16 @@ describe('<lion-fieldset>', () => {
|
|||
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}>
|
||||
<${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
|
||||
describe('serializedValue', () => {
|
||||
it('use form elements serializedValue', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
|
||||
it('treats names with ending [] as arrays', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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('<lion-fieldset>', () => {
|
|||
<${tag}>
|
||||
<${childTag} name="price"></${childTag}>
|
||||
</${tag}>`);
|
||||
await nextFrame();
|
||||
fieldset.formElements.price.modelValue = 0;
|
||||
expect(fieldset.serializedValue).to.deep.equal({ price: 0 });
|
||||
});
|
||||
|
|
@ -683,7 +656,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${childTag} name="custom[]"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
|
||||
fieldset.formElements['custom[]'][1].modelValue = undefined;
|
||||
|
||||
|
|
@ -699,7 +671,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${tag} name="newfieldset">${inputSlots}</${tag}>
|
||||
</${tag}>
|
||||
`);
|
||||
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('<lion-fieldset>', () => {
|
|||
<${childTag} name="custom[]"></${childTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
|
||||
fieldset.formElements['custom[]'][1].disabled = true;
|
||||
|
||||
|
|
@ -748,7 +718,6 @@ describe('<lion-fieldset>', () => {
|
|||
<${tag} name="newfieldset">${inputSlots}</${tag}>
|
||||
</${tag}>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
const newFieldset = fieldset.querySelector('lion-fieldset');
|
||||
fieldset.formElements.comment.modelValue = 'Foo';
|
||||
|
|
@ -859,7 +828,6 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
it('clears interaction state', async () => {
|
||||
const el = await fixture(html`<${tag} touched dirty>${inputSlots}</${tag}>`);
|
||||
await nextFrame();
|
||||
// Safety check initially
|
||||
el._setValueForAllFormElements('prefilled', true);
|
||||
expect(el.dirty).to.equal(true, '"dirty" initially');
|
||||
|
|
@ -884,7 +852,6 @@ describe('<lion-fieldset>', () => {
|
|||
|
||||
it('clears submitted state', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
await nextFrame();
|
||||
fieldset.submitted = true;
|
||||
fieldset.resetGroup();
|
||||
expect(fieldset.submitted).to.equal(false);
|
||||
|
|
@ -1053,7 +1020,6 @@ describe('<lion-fieldset>', () => {
|
|||
describe('Accessibility', () => {
|
||||
it('has role="group" set', async () => {
|
||||
const fieldset = await fixture(html`<${tag}>${inputSlots}</${tag}>`);
|
||||
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' };
|
||||
|
|
|
|||
|
|
@ -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('<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 () => {
|
||||
const el = await fixture(html`
|
||||
<${parentTag}>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ describe('ChoiceGroupMixin', () => {
|
|||
<choice-group-input .choiceValue=${'other'}></choice-group-input>
|
||||
</choice-group>
|
||||
`);
|
||||
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', () => {
|
|||
<choice-group-input .choiceValue=${'other'}></choice-group-input>
|
||||
</choice-group>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.modelValue).to.equal('other');
|
||||
expect(el.formElements[2].checked).to.be.true;
|
||||
|
|
@ -118,7 +116,6 @@ describe('ChoiceGroupMixin', () => {
|
|||
<choice-group-input .choiceValue=${'other'}></choice-group-input>
|
||||
</choice-group>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.serializedValue).to.equal('other');
|
||||
expect(el.formElements[2].checked).to.be.true;
|
||||
|
|
@ -164,7 +161,6 @@ describe('ChoiceGroupMixin', () => {
|
|||
></choice-group-input>
|
||||
</choice-group>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.modelValue).to.equal('female');
|
||||
el.modelValue = 'other';
|
||||
|
|
@ -185,7 +181,6 @@ describe('ChoiceGroupMixin', () => {
|
|||
<choice-group-input .choiceValue=${'other'}></choice-group-input>
|
||||
</choice-group>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
counter = 0; // reset after setup which may result in different results
|
||||
|
||||
|
|
@ -279,7 +274,6 @@ describe('ChoiceGroupMixin', () => {
|
|||
</choice-group-multiple>
|
||||
`);
|
||||
|
||||
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', () => {
|
|||
</choice-group-multiple>
|
||||
`);
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<${itemTag} .choiceValue="${'option2'}"></${itemTag}>
|
||||
<${itemTag} .choiceValue="${'option3'}"></${itemTag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(spy.callCount).to.equal(count);
|
||||
});
|
||||
};
|
||||
|
|
@ -105,7 +105,7 @@ const choiceGroupDispatchesCountOnInteraction = (groupTagname, itemTagname, coun
|
|||
<${itemTag} .choiceValue="${'option3'}"></${itemTag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
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`
|
||||
<lion-select-rich @model-value-changed="${spy}">
|
||||
<lion-options slot="input">
|
||||
<lion-option .choiceValue="${'option1'}"></lion-option>
|
||||
|
|
@ -219,7 +219,7 @@ describe('lion-select-rich', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(spy.callCount).to.equal(firstStampCount);
|
||||
});
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ describe('lion-select-rich', () => {
|
|||
</lion-options>
|
||||
</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`
|
||||
<lion-fieldset name="parent" @model-value-changed="${spy}">
|
||||
<lion-input name="input"></lion-input>
|
||||
</lion-fieldset>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(spy.callCount).to.equal(firstStampCount);
|
||||
});
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ describe('lion-fieldset', () => {
|
|||
<lion-input name="input"></lion-input>
|
||||
</lion-fieldset>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
el.addEventListener('model-value-changed', spy);
|
||||
const input = el.querySelector('lion-input');
|
||||
input.modelValue = 'foo';
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ describe('<lion-input-range>', () => {
|
|||
const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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('<lion-radio-group>', () => {
|
|||
<lion-radio label="female" value="female" checked></lion-radio>
|
||||
</lion-radio-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(el.getAttribute('role')).to.equal('radiogroup');
|
||||
});
|
||||
|
||||
|
|
@ -22,7 +21,6 @@ describe('<lion-radio-group>', () => {
|
|||
<lion-radio></lion-radio>
|
||||
</lion-radio-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
el.children[1].focus();
|
||||
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-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
const male = el.formElements[0];
|
||||
const maleInput = male.querySelector('input');
|
||||
const female = el.formElements[1];
|
||||
|
|
@ -64,7 +61,6 @@ describe('<lion-radio-group>', () => {
|
|||
<lion-radio label="female" value="female" checked></lion-radio>
|
||||
</lion-radio-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
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-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
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-group>
|
||||
`);
|
||||
await nextFrame();
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { expect, fixture, nextFrame } from '@open-wc/testing';
|
||||
import { expect, fixture } from '@open-wc/testing';
|
||||
import '../lion-radio.js';
|
||||
|
||||
describe('<lion-radio>', () => {
|
||||
|
|
@ -6,7 +6,6 @@ describe('<lion-radio>', () => {
|
|||
const el = await fixture(`
|
||||
<lion-radio name="radio" value="male"></lion-radio>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(el.getAttribute('type')).to.equal('radio');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@ describe('lion-select-rich interactions', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
await el.registrationComplete;
|
||||
|
||||
expect(el.modelValue).to.equal(10);
|
||||
});
|
||||
|
||||
|
|
@ -489,7 +489,7 @@ describe('lion-select-rich interactions', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
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', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
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', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
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');
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ describe('lion-select-rich', () => {
|
|||
</lion-options>
|
||||
</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', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
const invalidChild = await fixture(html` <lion-option .modelValue=${'Lara'}></lion-option> `);
|
||||
|
||||
expect(() => {
|
||||
|
|
@ -79,8 +76,6 @@ describe('lion-select-rich', () => {
|
|||
</lion-options>
|
||||
</lion-select-rich>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
const invalidChild = await fixture(html`
|
||||
<lion-option name="foo" .choiceValue=${'male'}></lion-option>
|
||||
`);
|
||||
|
|
@ -102,7 +97,6 @@ describe('lion-select-rich', () => {
|
|||
</lion-options>
|
||||
</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', () => {
|
|||
</lion-options>
|
||||
</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;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
|||
<lion-step>Step 4</lion-step>
|
||||
</lion-steps>
|
||||
`);
|
||||
await nextFrame();
|
||||
|
||||
el.current = 2;
|
||||
await checkWorkflow(el, {
|
||||
|
|
@ -210,7 +209,6 @@ describe('lion-steps', () => {
|
|||
</lion-step>
|
||||
</lion-steps>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(firstEnterSpy).to.have.been.calledOnce;
|
||||
|
||||
const firstEnterSpyWithInitial = sinon.spy();
|
||||
|
|
@ -221,7 +219,6 @@ describe('lion-steps', () => {
|
|||
</lion-step>
|
||||
</lion-steps>
|
||||
`);
|
||||
await nextFrame();
|
||||
expect(firstEnterSpyWithInitial).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue