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

chore(field): rename lionField to el in tests

Browse source
This commit is contained in:
Thomas Allmer 2019-08-06 12:19:32 +02:00 committed by Joren Broekema
parent 5534369d45
commit 6a4931e74c
1 changed files with 107 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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