From 6a4931e74c01bbff9687be6a091b166faef94691 Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Tue, 6 Aug 2019 12:19:32 +0200 Subject: [PATCH] chore(field): rename lionField to el in tests --- packages/field/test/lion-field.test.js | 224 ++++++++++++------------- 1 file changed, 107 insertions(+), 117 deletions(-) diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js index 5b16422c9..c0adcf008 100644 --- a/packages/field/test/lion-field.test.js +++ b/packages/field/test/lion-field.test.js @@ -31,39 +31,39 @@ beforeEach(() => { describe('', () => { it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => { - const lionField = await fixture(`<${tagString}>${inputSlotString}`); - expect(lionField.$$slot('input').id).to.equal(lionField._inputId); + const el = await fixture(`<${tagString}>${inputSlotString}`); + 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}`); + const el = await fixture(`<${tagString}>${inputSlotString}`); 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('', () => { }); it('offers simple getter "this.focused" returning true/false for the current focus state', async () => { - const lionField = await fixture(`<${tagString}>${inputSlotString}`); - 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}`); + 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}`, - ); - expect(lionFieldDisabled.disabled).to.equal(true); - expect(lionFieldDisabled.inputElement.disabled).to.equal(true); + const elDisabled = await fixture(`<${tagString} disabled>${inputSlotString}`); + 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}`); - lionField.disabled = true; - await lionField.updateComplete; - expect(lionField.inputElement.disabled).to.equal(true); + const el = await fixture(`<${tagString}>${inputSlotString}`); + 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('', () => { }); 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}`, ); - 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}`); - expect(lionField.$$slot('input').value).to.equal('one'); + const el = await fixture(`<${tagString} value="one">${inputSlotString}`); + expect(el.$$slot('input').value).to.equal('one'); }); it('delegates value property', async () => { - const lionField = await fixture(`<${tagString}>${inputSlotString}`); - 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}`); + 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}`, - ); - 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}`); + 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}`); - 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}`); + 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}`); - expect(lionField.classList.contains('state-disabled')).to.equal(false); - expect(lionField.inputElement.hasAttribute('disabled')).to.equal(false); + const el = await fixture(`<${tagString}>${inputSlotString}`); + 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}`, - ); - expect(disabledlionField.classList.contains('state-disabled')).to.equal(true); - expect(disabledlionField.inputElement.hasAttribute('disabled')).to.equal(true); + const disabledel = await fixture(`<${tagString} disabled>${inputSlotString}`); + 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('', () => {
[feedback] ~~~`, async () => { - const lionField = await fixture(`<${tagString}> + const el = await fixture(`<${tagString}> ${inputSlotString} Enter your Name No name entered `); - 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} [before] [after] @@ -227,12 +217,12 @@ describe('', () => { `); - 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('', () => { function hasX(str) { return { hasX: str.indexOf('x') > -1 }; } - const lionField = await fixture(`<${tagString}>${inputSlotString}`); - const feedbackEl = lionField._feedbackElement; + const el = await fixture(`<${tagString}>${inputSlotString}`); + 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('', () => { }); it('can be required', async () => { - const lionField = await fixture(html` + const el = await fixture(html` <${tag} .errorValidators=${[['required']]} >${inputSlot} `); - 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('', () => { 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('', () => { `); 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}> ${inputSlotString} @@ -395,8 +385,8 @@ describe('', () => { '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('', () => { }); 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)} `); - 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); }); }); });