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

fix: refactor slot selection

Browse source
This commit is contained in:
Joren Broekema 2019-11-15 14:06:48 +01:00 committed by Thomas Allmer
parent 90e6b4ef36
commit 5999ea9569
21 changed files with 192 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/button/src/LionButton.js
View file

@ -123,7 +123,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
}
get _nativeButtonNode() {
return this.querySelector('[slot=_button]');
return Array.from(this.children).find(child => child.slot === '_button');
}
get _form() {

6
packages/core/test/DelegateMixin.test.js
View file

@ -70,7 +70,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.querySelector('[slot=button]'),
target: () => Array.from(this.children).find(child => child.slot === 'button'),
events: ['click'],
methods: ['click'],
};
@ -89,7 +89,9 @@ describe('DelegateMixin', () => {
<${tag}><button slot="button">click me</button></${tag}>`);
const cb = sinon.spy();
element.addEventListener('click', cb);
element.querySelector('[slot=button]').click();
Array.from(element.children)
.find(child => child.slot === 'button')
.click();
expect(cb.callCount).to.equal(1);
});

4
packages/field/docs/CustomFieldsTutorial.md
View file

@ -68,11 +68,11 @@ export class LionSlider extends LionField {
// 3. Proxy property `<my-slider>.mySliderValue` to `<lion-slider>.value`
get value() {
   return this.querySelector('[slot=input]').mySliderValue;
   return Array.from(this.children).find(child => child.slot === 'input').mySliderValue;
}
set value(newV) {
   this.querySelector('[slot=input]').mySliderValue = newV;
   Array.from(this.children).find(child => child.slot === 'input').mySliderValue = newV;
}
}
```

4
packages/field/src/FormControlMixin.js
View file

@ -295,7 +295,7 @@ export const FormControlMixin = dedupeMixin(
}
inputGroupPrefixTemplate() {
return !this.querySelector('[slot=prefix]')
return !Array.from(this.children).find(child => child.slot === 'prefix')
? nothing
: html`
<div class="input-group__prefix">
@ -314,7 +314,7 @@ export const FormControlMixin = dedupeMixin(
}
inputGroupSuffixTemplate() {
return !this.querySelector('[slot=suffix]')
return !Array.from(this.children).find(child => child.slot === 'suffix')
? nothing
: html`
<div class="input-group__suffix">

4
packages/field/test/FieldCustomMixin.test.js
View file

@ -24,6 +24,8 @@ describe('FieldCustomMixin', () => {
const lionField = await fixture(`
<${elem} disable-help-text>${inputSlot}</${elem}>
`);
expect(lionField.querySelector('[slot=help-text]')).to.equal(null);
expect(Array.from(lionField.children).find(child => child.slot === 'help-text')).to.equal(
undefined,
);
});
});

22
packages/field/test/FormControlMixin.test.js
View file

@ -27,18 +27,18 @@ describe('FormControlMixin', () => {
const lionFieldAttr = await fixture(html`
<${tag} help-text="This email address is already taken">${inputSlot}</${tag}>
`);
expect(lionFieldAttr.querySelector('[slot=help-text]').textContent).to.contain(
'This email address is already taken',
);
expect(
Array.from(lionFieldAttr.children).find(child => child.slot === 'help-text').textContent,
).to.contain('This email address is already taken');
const lionFieldProp = await fixture(html`
<${tag}
.helpText=${'This email address is already taken'}
>${inputSlot}
</${tag}>`);
expect(lionFieldProp.querySelector('[slot=help-text]').textContent).to.contain(
'This email address is already taken',
);
expect(
Array.from(lionFieldProp.children).find(child => child.slot === 'help-text').textContent,
).to.contain('This email address is already taken');
});
it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
@ -52,8 +52,8 @@ describe('FormControlMixin', () => {
await wrapper.updateComplete;
['aria-describedby', 'aria-labelledby'].forEach(ariaAttributeName => {
const ariaAttribute = lionField
.querySelector('[slot=input]')
const ariaAttribute = Array.from(lionField.children)
.find(child => child.slot === 'input')
.getAttribute(ariaAttributeName)
.trim()
.split(' ');
@ -70,6 +70,10 @@ describe('FormControlMixin', () => {
</${tag}>
`);
expect(lionField.querySelector('[slot=feedback]').getAttribute('aria-live')).to.equal('polite');
expect(
Array.from(lionField.children)
.find(child => child.slot === 'feedback')
.getAttribute('aria-live'),
).to.equal('polite');
});
});

12
packages/field/test/lion-field.test.js
View file

@ -32,7 +32,7 @@ beforeEach(() => {
describe('<lion-field>', () => {
it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => {
const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
expect(el.querySelector('[slot=input]').id).to.equal(el._inputId);
expect(Array.from(el.children).find(child => child.slot === 'input').id).to.equal(el._inputId);
});
it('fires focus/blur event on host and native input if focused/blurred', async () => {
@ -113,15 +113,15 @@ describe('<lion-field>', () => {
it('reads initial value from attribute value', async () => {
const el = await fixture(html`<${tag} value="one">${inputSlot}</${tag}>`);
expect(el.querySelector('[slot=input]').value).to.equal('one');
expect(Array.from(el.children).find(child => child.slot === 'input').value).to.equal('one');
});
it('delegates value property', async () => {
const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
expect(el.querySelector('[slot=input]').value).to.equal('');
expect(Array.from(el.children).find(child => child.slot === 'input').value).to.equal('');
el.value = 'one';
expect(el.value).to.equal('one');
expect(el.querySelector('[slot=input]').value).to.equal('one');
expect(Array.from(el.children).find(child => child.slot === 'input').value).to.equal('one');
});
// This is necessary for security, so that _inputNodes autocomplete can be set to 'off'
@ -200,7 +200,7 @@ describe('<lion-field>', () => {
<span slot="feedback">No name entered</span>
</${tag}>
`);
const nativeInput = el.querySelector('[slot=input]');
const nativeInput = Array.from(el.children).find(child => child.slot === 'input');
expect(nativeInput.getAttribute('aria-labelledby')).to.equal(` label-${el._inputId}`);
expect(nativeInput.getAttribute('aria-describedby')).to.contain(` help-text-${el._inputId}`);
@ -218,7 +218,7 @@ describe('<lion-field>', () => {
</${tag}>
`);
const nativeInput = el.querySelector('[slot=input]');
const nativeInput = Array.from(el.children).find(child => child.slot === 'input');
expect(nativeInput.getAttribute('aria-labelledby')).to.contain(
` before-${el._inputId} after-${el._inputId}`,
);

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

@ -828,7 +828,7 @@ describe('<lion-fieldset>', () => {
${inputSlots}
</${tag}>
`);
const label = el.querySelector('[slot="label"]');
const label = Array.from(el.children).find(child => child.slot === 'label');
expect(el.hasAttribute('aria-labelledby')).to.equal(true);
expect(el.getAttribute('aria-labelledby')).contains(label.id);
});

2
packages/input-amount/src/LionInputAmount.js
View file

@ -56,7 +56,7 @@ export class LionInputAmount extends FieldCustomMixin(LocalizeMixin(LionInput))
_onCurrencyChanged({ currency }) {
if (this._isPrivateSlot('after')) {
this.querySelector('[slot=after]').textContent = currency;
Array.from(this.children).find(child => child.slot === 'after').textContent = currency;
}
this.formatOptions.currency = currency;
this._calculateValues();

14
packages/input-amount/test/lion-input-amount.test.js
View file

@ -71,28 +71,32 @@ describe('<lion-input-amount>', () => {
it('shows no currency', async () => {
const el = await fixture(`<lion-input-amount></lion-input-amount>`);
expect(el.querySelector('[slot=suffix]')).to.be.null;
expect(Array.from(el.children).find(child => child.slot === 'suffix')).to.be.undefined;
});
it('displays currency if provided', async () => {
const el = await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
expect(el.querySelector('[slot=after]').innerText).to.equal('EUR');
expect(Array.from(el.children).find(child => child.slot === 'after').innerText).to.equal('EUR');
});
it('can update currency', async () => {
const el = await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
el.currency = 'USD';
await el.updateComplete;
expect(el.querySelector('[slot=after]').innerText).to.equal('USD');
expect(Array.from(el.children).find(child => child.slot === 'after').innerText).to.equal('USD');
});
it('ignores currency if a suffix is already present', async () => {
const el = await fixture(
`<lion-input-amount currency="EUR"><span slot="suffix">my-currency</span></lion-input-amount>`,
);
expect(el.querySelector('[slot=suffix]').innerText).to.equal('my-currency');
expect(Array.from(el.children).find(child => child.slot === 'suffix').innerText).to.equal(
'my-currency',
);
el.currency = 'EUR';
await el.updateComplete;
expect(el.querySelector('[slot=suffix]').innerText).to.equal('my-currency');
expect(Array.from(el.children).find(child => child.slot === 'suffix').innerText).to.equal(
'my-currency',
);
});
});

3
packages/input-email/stories/index.stories.js
View file

@ -3,12 +3,13 @@ import { storiesOf, html } from '@open-wc/demoing-storybook';
import { localize } from '@lion/localize';
import '../lion-input-email.js';
import '../../fieldset/lion-fieldset.js';
storiesOf('Forms|Input Email', module)
.add(
'Default',
() => html`
<lion-input-email label="Label"></lion-input-email>
<lion-input-email name="email" label="Label"></lion-input-email>
`,
)
.add(

3
packages/overlays/src/OverlayMixin.js
View file

@ -113,6 +113,9 @@ export const OverlayMixin = dedupeMixin(
this._overlayCtrl = this._defineOverlay({ contentNode, invokerNode });
}
// FIXME: We add an overlay slot to the wrapper, but the content node already has a slot="content"
// This is a big problem, because slots should be direct children of its host element.
// Putting the shadow outlet slot in between breaks that. https://github.com/ing-bank/lion/issues/382
/**
* @desc Should be called by Subclasser for local overlay support in shadow roots
* Create an outlet slot in shadow dom that our local overlay can pass through

6
packages/popup/src/LionPopup.js
View file

@ -9,12 +9,14 @@ export class LionPopup extends OverlayMixin(LitElement) {
`;
}
// FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content')
// When this issue is fixed https://github.com/ing-bank/lion/issues/382
get _overlayContentNode() {
return this.querySelector('[slot=content]');
return this.querySelector('[slot="content"]');
}
get _overlayInvokerNode() {
return this.querySelector('[slot=invoker]');
return Array.from(this.children).find(child => child.slot === 'invoker');
}
// eslint-disable-next-line class-methods-use-this

4
packages/popup/test/lion-popup.test.js
View file

@ -21,7 +21,7 @@ describe('lion-popup', () => {
<lion-button slot="invoker">Popup button</lion-button>
</lion-popup>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
invoker.click();
await el.updateComplete;
@ -38,7 +38,7 @@ describe('lion-popup', () => {
<lion-button slot="invoker">Popup button</lion-button>
</lion-popup>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
const event = new Event('click');
invoker.dispatchEvent(event);
await el.updateComplete;

5
packages/select-rich/src/LionSelectRich.js
View file

@ -95,12 +95,13 @@ export class LionSelectRich extends OverlayMixin(
}
get _invokerNode() {
return this.querySelector('[slot=invoker]');
return Array.from(this.children).find(child => child.slot === 'invoker');
}
get _listboxNode() {
return (
(this._overlayCtrl && this._overlayCtrl.contentNode) || this.querySelector('[slot=input]')
(this._overlayCtrl && this._overlayCtrl.contentNode) ||
Array.from(this.children).find(child => child.slot === 'input')
);
}

2
packages/switch/test/lion-switch.test.js
View file

@ -7,7 +7,7 @@ describe('lion-switch', () => {
const el = await fixture(html`
<lion-switch></lion-switch>
`);
expect(el.querySelector('[slot="input"]')).not.to.be.false;
expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false;
});
it('should sync its "disabled" state to child button', async () => {

8
packages/tabs/src/LionTabs.js
View file

@ -216,8 +216,12 @@ export class LionTabs extends LitElement {
if (!(this.__store && this.__store[this.selectedIndex])) {
return;
}
const previousButton = this.querySelector('[slot="tab"][selected]');
const previousPanel = this.querySelector('[slot="panel"][selected]');
const previousButton = Array.from(this.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
);
const previousPanel = Array.from(this.children).find(
child => child.slot === 'panel' && child.hasAttribute('selected'),
);
if (previousButton) {
deselectButton(previousButton);
}

37
packages/tabs/test/lion-tabs.test.js
View file

@ -31,10 +31,18 @@ describe('<lion-tabs>', () => {
</lion-tabs>
`);
expect(el.selectedIndex).to.equal(1);
expect(el.querySelector('[slot=tab][selected]').textContent).to.equal('tab 2');
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 2');
el.selectedIndex = 0;
expect(el.querySelector('[slot=tab][selected]').textContent).to.equal('tab 1');
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 1');
});
it('has [selected] on current selected tab which serves as styling hook', async () => {
@ -79,7 +87,10 @@ describe('<lion-tabs>', () => {
<div slot="panel">panel</div>
</lion-tabs>
`);
expect(el.querySelector('[slot=tab]')).to.have.attribute('role', 'tab');
expect(Array.from(el.children).find(child => child.slot === 'tab')).to.have.attribute(
'role',
'tab',
);
});
/**
@ -219,8 +230,16 @@ describe('<lion-tabs>', () => {
}
el.selectedIndex = el.children.length / 2 - 1;
await el.updateComplete;
expect(el.querySelector('[slot=tab][selected]').textContent).to.equal('tab 5');
expect(el.querySelector('[slot=panel][selected]').textContent).to.equal('panel 5');
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 5');
expect(
Array.from(el.children).find(
child => child.slot === 'panel' && child.hasAttribute('selected'),
).textContent,
).to.equal('panel 5');
});
});
@ -234,8 +253,12 @@ describe('<lion-tabs>', () => {
<div slot="panel">panel 2</div>
</lion-tabs>
`);
expect(el.querySelector('[slot=panel]')).to.not.have.attribute('tabindex');
expect(el.querySelector('[slot=panel]')).to.not.have.attribute('tabindex');
expect(Array.from(el.children).find(child => child.slot === 'panel')).to.not.have.attribute(
'tabindex',
);
expect(Array.from(el.children).find(child => child.slot === 'panel')).to.not.have.attribute(
'tabindex',
);
});
it('makes selected tab focusable (other tabs are unfocusable)', async () => {

13
packages/tooltip/test/lion-tooltip.test.js
View file

@ -55,7 +55,7 @@ describe('lion-tooltip', () => {
<lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
const eventFocusIn = new Event('focusin');
invoker.dispatchEvent(eventFocusIn);
await el.updateComplete;
@ -73,7 +73,7 @@ describe('lion-tooltip', () => {
<lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
const eventFocusIn = new Event('focusin');
invoker.dispatchEvent(eventFocusIn);
await el.updateComplete;
@ -93,7 +93,7 @@ describe('lion-tooltip', () => {
<lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip>
`);
const invoker = el.querySelector('[slot="invoker"]');
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
const event = new Event('mouseenter');
invoker.dispatchEvent(event);
await el.updateComplete;
@ -109,8 +109,11 @@ describe('lion-tooltip', () => {
<lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip>
`);
const invoker = el.querySelector('[slot="content"]');
expect(invoker.getAttribute('role')).to.be.equal('tooltip');
// FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content')
// When this issue is fixed https://github.com/ing-bank/lion/issues/382
const content = el.querySelector('[slot=content]');
expect(content.getAttribute('role')).to.be.equal('tooltip');
});
});
});

4
packages/validate/src/ValidateMixin.js
View file

@ -294,11 +294,11 @@ export const ValidateMixin = dedupeMixin(
}
get _feedbackElement() {
return this.querySelector('[slot="feedback"]');
return Array.from(this.children).find(child => child.slot === 'feedback');
}
getFieldName(validatorParams) {
const labelEl = this.querySelector('[slot=label]');
const labelEl = Array.from(this.children).find(child => child.slot === 'label');
const label = this.label || (labelEl && labelEl.textContent);
if (validatorParams && validatorParams.fieldName) {

166
packages/validate/test/ValidateMixin.test.js
View file

@ -707,13 +707,15 @@ describe('ValidateMixin', () => {
>${lightDom}</${tag}>
`);
expect(el.querySelector('[slot=feedback]').innerText).to.equal('');
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'',
);
showErrors = true;
el.validate();
await el.updateComplete;
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'This is error message for alwaysFalse',
);
});
@ -725,9 +727,9 @@ describe('ValidateMixin', () => {
.errorValidators=${[[alwaysFalse]]}
>${lightDom}</${tag}>
`);
expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for alwaysFalse',
);
expect(
Array.from(feedbackResult.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for alwaysFalse');
});
it('rerenders validation outcome to *feedback-element*, when dependent on async resources', async () => {
@ -739,7 +741,9 @@ describe('ValidateMixin', () => {
>${lightDom}</${tag}>
`);
expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal('');
expect(
Array.from(feedbackResult.children).find(child => child.slot === 'feedback').innerText,
).to.equal('');
// locale changed or smth
localize.reset();
localize.addData('en-GB', 'lion-validate', {
@ -747,9 +751,9 @@ describe('ValidateMixin', () => {
});
feedbackResult.onLocaleUpdated();
expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal(
'error:alwaysFalseAsyncTransl',
);
expect(
Array.from(feedbackResult.children).find(child => child.slot === 'feedback').innerText,
).to.equal('error:alwaysFalseAsyncTransl');
});
it('allows to overwrite the way messages are translated', async () => {
@ -770,15 +774,15 @@ describe('ValidateMixin', () => {
>${lightDom}</${tag}>
`);
expect(customTranslations.querySelector('[slot=feedback]').innerText).to.equal(
'You should have a lowercase a',
);
expect(
Array.from(customTranslations.children).find(child => child.slot === 'feedback').innerText,
).to.equal('You should have a lowercase a');
customTranslations.modelValue = 'cat';
await customTranslations.updateComplete;
expect(customTranslations.querySelector('[slot=feedback]').innerText).to.equal(
'You can not pass',
);
expect(
Array.from(customTranslations.children).find(child => child.slot === 'feedback').innerText,
).to.equal('You can not pass');
});
it('allows to overwrite the way messages are rendered/added to dom', async () => {
@ -842,13 +846,15 @@ describe('ValidateMixin', () => {
element.modelValue = 'dog';
await element.updateComplete;
expect(element.querySelector('[slot=feedback]').innerText).to.equal(
'ERROR on containsLowercaseA',
);
expect(
Array.from(element.children).find(child => child.slot === 'feedback').innerText,
).to.equal('ERROR on containsLowercaseA');
element.modelValue = 'cat';
await element.updateComplete;
expect(element.querySelector('[slot=feedback]').innerText).to.equal('ERROR on alwaysFalse');
expect(
Array.from(element.children).find(child => child.slot === 'feedback').innerText,
).to.equal('ERROR on alwaysFalse');
});
it('allows to create a custom feedback renderer via the template [to-be-implemented]', async () => {
@ -868,21 +874,21 @@ describe('ValidateMixin', () => {
validityFeedback.modelValue = 'a';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for minLength',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for minLength');
validityFeedback.modelValue = 'abc';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is warning message for minLength',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is warning message for minLength');
validityFeedback.modelValue = 'abcde';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is info message for minLength',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is info message for minLength');
});
it('shows success message after fixing an error', async () => {
@ -896,15 +902,15 @@ describe('ValidateMixin', () => {
validityFeedback.modelValue = 'a';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for minLength',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for minLength');
validityFeedback.modelValue = 'abcd';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is success message for alwaysFalse',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is success message for alwaysFalse');
});
it(`shows only highest priority validation message determined by order of assignment of
@ -917,25 +923,27 @@ describe('ValidateMixin', () => {
`);
validityFeedback.modelValue = 'dog and dog';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for containsCat',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for containsCat');
validityFeedback.modelValue = 'dog';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for containsCat',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for containsCat');
validityFeedback.modelValue = 'cat';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'This is error message for minLength',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('This is error message for minLength');
validityFeedback.modelValue = 'dog and cat';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal('');
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('');
});
it('supports randomized selection of multiple messages for the same validator', async () => {
@ -999,13 +1007,15 @@ describe('ValidateMixin', () => {
'Good job!',
);
expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal(
'You should have a lowercase a',
);
expect(
Array.from(randomTranslations.children).find(child => child.slot === 'feedback').innerText,
).to.equal('You should have a lowercase a');
randomTranslations.modelValue = 'cat';
await randomTranslations.updateComplete;
expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal('Good job!');
expect(
Array.from(randomTranslations.children).find(child => child.slot === 'feedback').innerText,
).to.equal('Good job!');
Math.random = () => 0.25;
randomTranslations.__lastGetSuccessResult = false;
@ -1013,9 +1023,9 @@ describe('ValidateMixin', () => {
randomTranslations.modelValue = 'cat';
await randomTranslations.updateComplete;
expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal(
'You did great!',
);
expect(
Array.from(randomTranslations.children).find(child => child.slot === 'feedback').innerText,
).to.equal('You did great!');
Math.random = mathRandom; // manually restore
});
@ -1043,15 +1053,15 @@ describe('ValidateMixin', () => {
errorValidators: [[minLength, { min: 4 }]],
}),
);
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'You need to enter at least 4 characters.',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('You need to enter at least 4 characters.');
localize.locale = 'de-DE';
await validityFeedback.updateComplete;
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'Es müssen mindestens 4 Zeichen eingegeben werden.',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('Es müssen mindestens 4 Zeichen eingegeben werden.');
});
describe('Field name', () => {
@ -1070,7 +1080,7 @@ describe('ValidateMixin', () => {
.modelValue=${'cat'}
>${lightDom}</${tag}>
`);
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'myField needs more characters',
);
});
@ -1084,9 +1094,9 @@ describe('ValidateMixin', () => {
]} .modelValue=${'cat'}
>${lightDom}
</${elNameStatic}>`);
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'overrideName needs more characters',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('overrideName needs more characters');
});
it('constructs field name from label or name (in this priority order)', async () => {
@ -1098,18 +1108,18 @@ describe('ValidateMixin', () => {
.errorValidators=${[[minLength, { min: 4 }]]} .modelValue=${'cat'}
>${lightDom}
</${elNameStatic}>`);
expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
'myField needs more characters',
);
expect(
Array.from(validityFeedback.children).find(child => child.slot === 'feedback').innerText,
).to.equal('myField needs more characters');
const validityFeedback2 = await fixture(html`
<${elNameStatic} .name="${'myName'}"
.errorValidators=${[[minLength, { min: 4 }]]} .modelValue=${'cat'}
>${lightDom}
</${elNameStatic}>`);
expect(validityFeedback2.querySelector('[slot=feedback]').innerText).to.equal(
'myName needs more characters',
);
expect(
Array.from(validityFeedback2.children).find(child => child.slot === 'feedback').innerText,
).to.equal('myName needs more characters');
});
});
@ -1150,13 +1160,15 @@ describe('ValidateMixin', () => {
element.modelValue = 'dog';
await element.updateComplete;
expect(element.querySelector('[slot=feedback]').innerText).to.equal(
'ERROR on containsLowercaseA',
);
expect(
Array.from(element.children).find(child => child.slot === 'feedback').innerText,
).to.equal('ERROR on containsLowercaseA');
element.modelValue = 'cat';
await element.updateComplete;
expect(element.querySelector('[slot=feedback]').innerText).to.equal('');
expect(
Array.from(element.children).find(child => child.slot === 'feedback').innerText,
).to.equal('');
});
});
@ -1209,7 +1221,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'lion-validate : orderValidator',
);
@ -1220,7 +1232,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'lion-validate+orderValidator : orderValidator',
);
});
@ -1269,7 +1281,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'lion-validate : is12Validator',
);
@ -1280,7 +1292,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'lion-validate+is12Validator : is12Validator',
);
@ -1291,7 +1303,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'my-custom-namespace : is12Validator',
);
@ -1302,7 +1314,7 @@ describe('ValidateMixin', () => {
},
});
el._createMessageAndRenderFeedback();
expect(el.querySelector('[slot=feedback]').innerText).to.equal(
expect(Array.from(el.children).find(child => child.slot === 'feedback').innerText).to.equal(
'my-custom-namespace+is12Validator : is12Validator',
);
});