chore(field): rename lionField to el in tests
This commit is contained in:
Thomas Allmer
Joren Broekema
parent
5534369d45
commit
6a4931e74c
1 changed files with 107 additions and 117 deletions
|
|
@ -31,39 +31,39 @@ beforeEach(() => {
|
|||
|
||||
describe('<lion-field>', () => {
|
||||
it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(lionField.$$slot('input').id).to.equal(lionField._inputId);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(el.$$slot('input').id).to.equal(el._inputId);
|
||||
});
|
||||
|
||||
it('fires focus/blur event on host and native input if focused/blurred', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
const cbFocusHost = sinon.spy();
|
||||
lionField.addEventListener('focus', cbFocusHost);
|
||||
el.addEventListener('focus', cbFocusHost);
|
||||
const cbFocusNativeInput = sinon.spy();
|
||||
lionField.inputElement.addEventListener('focus', cbFocusNativeInput);
|
||||
el.inputElement.addEventListener('focus', cbFocusNativeInput);
|
||||
const cbBlurHost = sinon.spy();
|
||||
lionField.addEventListener('blur', cbBlurHost);
|
||||
el.addEventListener('blur', cbBlurHost);
|
||||
const cbBlurNativeInput = sinon.spy();
|
||||
lionField.inputElement.addEventListener('blur', cbBlurNativeInput);
|
||||
el.inputElement.addEventListener('blur', cbBlurNativeInput);
|
||||
|
||||
await triggerFocusFor(lionField);
|
||||
await triggerFocusFor(el);
|
||||
|
||||
expect(document.activeElement).to.equal(lionField.inputElement);
|
||||
expect(document.activeElement).to.equal(el.inputElement);
|
||||
expect(cbFocusHost.callCount).to.equal(1);
|
||||
expect(cbFocusNativeInput.callCount).to.equal(1);
|
||||
expect(cbBlurHost.callCount).to.equal(0);
|
||||
expect(cbBlurNativeInput.callCount).to.equal(0);
|
||||
|
||||
await triggerBlurFor(lionField);
|
||||
await triggerBlurFor(el);
|
||||
expect(cbBlurHost.callCount).to.equal(1);
|
||||
expect(cbBlurNativeInput.callCount).to.equal(1);
|
||||
|
||||
await triggerFocusFor(lionField);
|
||||
expect(document.activeElement).to.equal(lionField.inputElement);
|
||||
await triggerFocusFor(el);
|
||||
expect(document.activeElement).to.equal(el.inputElement);
|
||||
expect(cbFocusHost.callCount).to.equal(2);
|
||||
expect(cbFocusNativeInput.callCount).to.equal(2);
|
||||
|
||||
await triggerBlurFor(lionField);
|
||||
await triggerBlurFor(el);
|
||||
expect(cbBlurHost.callCount).to.equal(2);
|
||||
expect(cbBlurNativeInput.callCount).to.equal(2);
|
||||
});
|
||||
|
|
@ -78,27 +78,25 @@ describe('<lion-field>', () => {
|
|||
});
|
||||
|
||||
it('offers simple getter "this.focused" returning true/false for the current focus state', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(lionField.focused).to.equal(false);
|
||||
await triggerFocusFor(lionField);
|
||||
expect(lionField.focused).to.equal(true);
|
||||
await triggerBlurFor(lionField);
|
||||
expect(lionField.focused).to.equal(false);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(el.focused).to.equal(false);
|
||||
await triggerFocusFor(el);
|
||||
expect(el.focused).to.equal(true);
|
||||
await triggerBlurFor(el);
|
||||
expect(el.focused).to.equal(false);
|
||||
});
|
||||
|
||||
it('can be disabled via attribute', async () => {
|
||||
const lionFieldDisabled = await fixture(
|
||||
`<${tagString} disabled>${inputSlotString}</${tagString}>`,
|
||||
);
|
||||
expect(lionFieldDisabled.disabled).to.equal(true);
|
||||
expect(lionFieldDisabled.inputElement.disabled).to.equal(true);
|
||||
const elDisabled = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
|
||||
expect(elDisabled.disabled).to.equal(true);
|
||||
expect(elDisabled.inputElement.disabled).to.equal(true);
|
||||
});
|
||||
|
||||
it('can be disabled via property', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
lionField.disabled = true;
|
||||
await lionField.updateComplete;
|
||||
expect(lionField.inputElement.disabled).to.equal(true);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
el.disabled = true;
|
||||
await el.updateComplete;
|
||||
expect(el.inputElement.disabled).to.equal(true);
|
||||
});
|
||||
|
||||
// classes are added only for backward compatibility - they are deprecated
|
||||
|
|
@ -112,75 +110,71 @@ describe('<lion-field>', () => {
|
|||
});
|
||||
|
||||
it('can be cleared which erases value, validation and interaction states', async () => {
|
||||
const lionField = await fixture(
|
||||
const el = await fixture(
|
||||
`<${tagString} value="Some value from attribute">${inputSlotString}</${tagString}>`,
|
||||
);
|
||||
lionField.clear();
|
||||
expect(lionField.value).to.equal('');
|
||||
lionField.value = 'Some value from property';
|
||||
expect(lionField.value).to.equal('Some value from property');
|
||||
lionField.clear();
|
||||
expect(lionField.value).to.equal('');
|
||||
el.clear();
|
||||
expect(el.value).to.equal('');
|
||||
el.value = 'Some value from property';
|
||||
expect(el.value).to.equal('Some value from property');
|
||||
el.clear();
|
||||
expect(el.value).to.equal('');
|
||||
});
|
||||
|
||||
it('reads initial value from attribute value', async () => {
|
||||
const lionField = await fixture(`<${tagString} value="one">${inputSlotString}</${tagString}>`);
|
||||
expect(lionField.$$slot('input').value).to.equal('one');
|
||||
const el = await fixture(`<${tagString} value="one">${inputSlotString}</${tagString}>`);
|
||||
expect(el.$$slot('input').value).to.equal('one');
|
||||
});
|
||||
|
||||
it('delegates value property', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(lionField.$$slot('input').value).to.equal('');
|
||||
lionField.value = 'one';
|
||||
expect(lionField.value).to.equal('one');
|
||||
expect(lionField.$$slot('input').value).to.equal('one');
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(el.$$slot('input').value).to.equal('');
|
||||
el.value = 'one';
|
||||
expect(el.value).to.equal('one');
|
||||
expect(el.$$slot('input').value).to.equal('one');
|
||||
});
|
||||
|
||||
// TODO: find out if we could put all listeners on this.value (instead of this.inputElement.value)
|
||||
// and make it act on this.value again
|
||||
it('has a class "state-filled" if this.value is filled', async () => {
|
||||
const lionField = await fixture(
|
||||
`<${tagString} value="filled">${inputSlotString}</${tagString}>`,
|
||||
);
|
||||
expect(lionField.classList.contains('state-filled')).to.equal(true);
|
||||
lionField.value = '';
|
||||
await lionField.updateComplete;
|
||||
expect(lionField.classList.contains('state-filled')).to.equal(false);
|
||||
lionField.value = 'bla';
|
||||
await lionField.updateComplete;
|
||||
expect(lionField.classList.contains('state-filled')).to.equal(true);
|
||||
const el = await fixture(`<${tagString} value="filled">${inputSlotString}</${tagString}>`);
|
||||
expect(el.classList.contains('state-filled')).to.equal(true);
|
||||
el.value = '';
|
||||
await el.updateComplete;
|
||||
expect(el.classList.contains('state-filled')).to.equal(false);
|
||||
el.value = 'bla';
|
||||
await el.updateComplete;
|
||||
expect(el.classList.contains('state-filled')).to.equal(true);
|
||||
});
|
||||
|
||||
it('preserves the caret position on value change for native text fields (input|textarea)', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
await triggerFocusFor(lionField);
|
||||
await lionField.updateComplete;
|
||||
lionField.inputElement.value = 'hello world';
|
||||
lionField.inputElement.selectionStart = 2;
|
||||
lionField.inputElement.selectionEnd = 2;
|
||||
lionField.value = 'hey there universe';
|
||||
expect(lionField.inputElement.selectionStart).to.equal(2);
|
||||
expect(lionField.inputElement.selectionEnd).to.equal(2);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
await triggerFocusFor(el);
|
||||
await el.updateComplete;
|
||||
el.inputElement.value = 'hello world';
|
||||
el.inputElement.selectionStart = 2;
|
||||
el.inputElement.selectionEnd = 2;
|
||||
el.value = 'hey there universe';
|
||||
expect(el.inputElement.selectionStart).to.equal(2);
|
||||
expect(el.inputElement.selectionEnd).to.equal(2);
|
||||
});
|
||||
|
||||
// TODO: add pointerEvents test for disabled
|
||||
it('has a class "state-disabled"', async () => {
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(lionField.classList.contains('state-disabled')).to.equal(false);
|
||||
expect(lionField.inputElement.hasAttribute('disabled')).to.equal(false);
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
expect(el.classList.contains('state-disabled')).to.equal(false);
|
||||
expect(el.inputElement.hasAttribute('disabled')).to.equal(false);
|
||||
|
||||
lionField.disabled = true;
|
||||
await lionField.updateComplete;
|
||||
el.disabled = true;
|
||||
await el.updateComplete;
|
||||
await aTimeout();
|
||||
|
||||
expect(lionField.classList.contains('state-disabled')).to.equal(true);
|
||||
expect(lionField.inputElement.hasAttribute('disabled')).to.equal(true);
|
||||
expect(el.classList.contains('state-disabled')).to.equal(true);
|
||||
expect(el.inputElement.hasAttribute('disabled')).to.equal(true);
|
||||
|
||||
const disabledlionField = await fixture(
|
||||
`<${tagString} disabled>${inputSlotString}</${tagString}>`,
|
||||
);
|
||||
expect(disabledlionField.classList.contains('state-disabled')).to.equal(true);
|
||||
expect(disabledlionField.inputElement.hasAttribute('disabled')).to.equal(true);
|
||||
const disabledel = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
|
||||
expect(disabledel.classList.contains('state-disabled')).to.equal(true);
|
||||
expect(disabledel.inputElement.hasAttribute('disabled')).to.equal(true);
|
||||
});
|
||||
|
||||
describe(`A11y${nameSuffix}`, () => {
|
||||
|
|
@ -198,27 +192,23 @@ describe('<lion-field>', () => {
|
|||
<div slot="feedback" id="feedback-[id]">[feedback] </span>
|
||||
</lion-field>
|
||||
~~~`, async () => {
|
||||
const lionField = await fixture(`<${tagString}>
|
||||
const el = await fixture(`<${tagString}>
|
||||
<label slot="label">My Name</label>
|
||||
${inputSlotString}
|
||||
<span slot="help-text">Enter your Name</span>
|
||||
<span slot="feedback">No name entered</span>
|
||||
</${tagString}>
|
||||
`);
|
||||
const nativeInput = lionField.$$slot('input');
|
||||
const nativeInput = el.$$slot('input');
|
||||
|
||||
expect(nativeInput.getAttribute('aria-labelledby')).to.equal(` label-${lionField._inputId}`);
|
||||
expect(nativeInput.getAttribute('aria-describedby')).to.contain(
|
||||
` help-text-${lionField._inputId}`,
|
||||
);
|
||||
expect(nativeInput.getAttribute('aria-describedby')).to.contain(
|
||||
` feedback-${lionField._inputId}`,
|
||||
);
|
||||
expect(nativeInput.getAttribute('aria-labelledby')).to.equal(` label-${el._inputId}`);
|
||||
expect(nativeInput.getAttribute('aria-describedby')).to.contain(` help-text-${el._inputId}`);
|
||||
expect(nativeInput.getAttribute('aria-describedby')).to.contain(` feedback-${el._inputId}`);
|
||||
});
|
||||
|
||||
it(`allows additional slots (prefix, suffix, before, after) to be included in labelledby
|
||||
(via attribute data-label) and in describedby (via attribute data-description)`, async () => {
|
||||
const lionField = await fixture(`<${tagString}>
|
||||
const el = await fixture(`<${tagString}>
|
||||
${inputSlotString}
|
||||
<span slot="before" data-label>[before]</span>
|
||||
<span slot="after" data-label>[after]</span>
|
||||
|
|
@ -227,12 +217,12 @@ describe('<lion-field>', () => {
|
|||
</${tagString}>
|
||||
`);
|
||||
|
||||
const nativeInput = lionField.$$slot('input');
|
||||
const nativeInput = el.$$slot('input');
|
||||
expect(nativeInput.getAttribute('aria-labelledby')).to.contain(
|
||||
` before-${lionField._inputId} after-${lionField._inputId}`,
|
||||
` before-${el._inputId} after-${el._inputId}`,
|
||||
);
|
||||
expect(nativeInput.getAttribute('aria-describedby')).to.contain(
|
||||
` prefix-${lionField._inputId} suffix-${lionField._inputId}`,
|
||||
` prefix-${el._inputId} suffix-${el._inputId}`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -301,31 +291,31 @@ describe('<lion-field>', () => {
|
|||
function hasX(str) {
|
||||
return { hasX: str.indexOf('x') > -1 };
|
||||
}
|
||||
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
const feedbackEl = lionField._feedbackElement;
|
||||
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
|
||||
const feedbackEl = el._feedbackElement;
|
||||
|
||||
lionField.modelValue = 'a@b.nl';
|
||||
lionField.errorValidators = [[hasX]];
|
||||
el.modelValue = 'a@b.nl';
|
||||
el.errorValidators = [[hasX]];
|
||||
|
||||
expect(lionField.error.hasX).to.equal(true);
|
||||
expect(el.error.hasX).to.equal(true);
|
||||
expect(feedbackEl.innerText.trim()).to.equal(
|
||||
'',
|
||||
'shows no feedback, although the element has an error',
|
||||
);
|
||||
lionField.dirty = true;
|
||||
lionField.touched = true;
|
||||
lionField.modelValue = 'ab@c.nl'; // retrigger validation
|
||||
await lionField.updateComplete;
|
||||
el.dirty = true;
|
||||
el.touched = true;
|
||||
el.modelValue = 'ab@c.nl'; // retrigger validation
|
||||
await el.updateComplete;
|
||||
|
||||
expect(feedbackEl.innerText.trim()).to.equal(
|
||||
'This is error message for hasX',
|
||||
'shows feedback, because touched=true and dirty=true',
|
||||
);
|
||||
|
||||
lionField.touched = false;
|
||||
lionField.dirty = false;
|
||||
lionField.prefilled = true;
|
||||
await lionField.updateComplete;
|
||||
el.touched = false;
|
||||
el.dirty = false;
|
||||
el.prefilled = true;
|
||||
await el.updateComplete;
|
||||
expect(feedbackEl.innerText.trim()).to.equal(
|
||||
'This is error message for hasX',
|
||||
'shows feedback, because prefilled=true',
|
||||
|
|
@ -333,14 +323,14 @@ describe('<lion-field>', () => {
|
|||
});
|
||||
|
||||
it('can be required', async () => {
|
||||
const lionField = await fixture(html`
|
||||
const el = await fixture(html`
|
||||
<${tag}
|
||||
.errorValidators=${[['required']]}
|
||||
>${inputSlot}</${tag}>
|
||||
`);
|
||||
expect(lionField.error.required).to.be.true;
|
||||
lionField.modelValue = 'cat';
|
||||
expect(lionField.error.required).to.be.undefined;
|
||||
expect(el.error.required).to.be.true;
|
||||
el.modelValue = 'cat';
|
||||
expect(el.error.required).to.be.undefined;
|
||||
});
|
||||
|
||||
it('will only update formattedValue when valid on `user-input-changed`', async () => {
|
||||
|
|
@ -348,7 +338,7 @@ describe('<lion-field>', () => {
|
|||
function isBarValidator(value) {
|
||||
return { isBar: value === 'bar' };
|
||||
}
|
||||
const lionField = await fixture(html`
|
||||
const el = await fixture(html`
|
||||
<${tag}
|
||||
.modelValue=${'init-string'}
|
||||
.formatter=${formatterSpy}
|
||||
|
|
@ -357,21 +347,21 @@ describe('<lion-field>', () => {
|
|||
`);
|
||||
|
||||
expect(formatterSpy.callCount).to.equal(0);
|
||||
expect(lionField.formattedValue).to.equal('init-string');
|
||||
expect(el.formattedValue).to.equal('init-string');
|
||||
|
||||
lionField.modelValue = 'bar';
|
||||
el.modelValue = 'bar';
|
||||
expect(formatterSpy.callCount).to.equal(1);
|
||||
expect(lionField.formattedValue).to.equal('foo: bar');
|
||||
expect(el.formattedValue).to.equal('foo: bar');
|
||||
|
||||
mimicUserInput(lionField, 'foo');
|
||||
mimicUserInput(el, 'foo');
|
||||
expect(formatterSpy.callCount).to.equal(1);
|
||||
expect(lionField.value).to.equal('foo');
|
||||
expect(el.value).to.equal('foo');
|
||||
});
|
||||
});
|
||||
|
||||
describe(`Content projection${nameSuffix}`, () => {
|
||||
it('renders correctly all slot elements in light DOM', async () => {
|
||||
const lionField = await fixture(`
|
||||
const el = await fixture(`
|
||||
<${tagString}>
|
||||
<label slot="label">[label]</label>
|
||||
${inputSlotString}
|
||||
|
|
@ -395,8 +385,8 @@ describe('<lion-field>', () => {
|
|||
'feedback',
|
||||
];
|
||||
names.forEach(slotName => {
|
||||
lionField.querySelector(`[slot="${slotName}"]`).setAttribute('test-me', 'ok');
|
||||
const slot = lionField.shadowRoot.querySelector(`slot[name="${slotName}"]`);
|
||||
el.querySelector(`[slot="${slotName}"]`).setAttribute('test-me', 'ok');
|
||||
const slot = el.shadowRoot.querySelector(`slot[name="${slotName}"]`);
|
||||
const assignedNodes = slot.assignedNodes();
|
||||
expect(assignedNodes.length).to.equal(1);
|
||||
expect(assignedNodes[0].getAttribute('test-me')).to.equal('ok');
|
||||
|
|
@ -454,16 +444,16 @@ describe('<lion-field>', () => {
|
|||
});
|
||||
|
||||
it('delegates property selectionStart and selectionEnd', async () => {
|
||||
const lionField = await fixture(html`
|
||||
const el = await fixture(html`
|
||||
<${tag}
|
||||
.modelValue=${'Some text to select'}
|
||||
>${unsafeHTML(inputSlotString)}</${tag}>
|
||||
`);
|
||||
|
||||
lionField.selectionStart = 5;
|
||||
lionField.selectionEnd = 12;
|
||||
expect(lionField.inputElement.selectionStart).to.equal(5);
|
||||
expect(lionField.inputElement.selectionEnd).to.equal(12);
|
||||
el.selectionStart = 5;
|
||||
el.selectionEnd = 12;
|
||||
expect(el.inputElement.selectionStart).to.equal(5);
|
||||
expect(el.inputElement.selectionEnd).to.equal(12);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue