From cb7120e3a59f02e7e87f00c4d281e47ca8d33ea8 Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Thu, 20 Feb 2020 11:48:13 +0100 Subject: [PATCH] fix: rearrange/cleanup mixin duties --- packages/field/src/LionField.js | 12 ----- .../field/test-suites/FormatMixin.suite.js | 2 +- packages/fieldset/test/lion-fieldset.test.js | 4 +- packages/input/src/LionInput.js | 4 +- packages/input/test/lion-input.test.js | 48 +++++++++++-------- 5 files changed, 32 insertions(+), 38 deletions(-) diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js index 957059232..4615bd28a 100644 --- a/packages/field/src/LionField.js +++ b/packages/field/src/LionField.js @@ -37,10 +37,6 @@ export class LionField extends FormControlMixin( // make sure validation can be triggered based on observer type: Boolean, }, - name: { - type: String, - reflect: true, - }, autocomplete: { type: String, reflect: true, @@ -217,12 +213,4 @@ export class LionField extends FormControlMixin( this._inputNode.value = newValue; } } - - set fieldName(value) { - this.__fieldName = value; - } - - get fieldName() { - return this.__fieldName || this.label || this.name; - } } diff --git a/packages/field/test-suites/FormatMixin.suite.js b/packages/field/test-suites/FormatMixin.suite.js index 88addcc17..6514529d9 100644 --- a/packages/field/test-suites/FormatMixin.suite.js +++ b/packages/field/test-suites/FormatMixin.suite.js @@ -52,7 +52,7 @@ export function runFormatMixinSuite(customConfig) { } } - describe(`FormatMixin ${cfg.suffix ? `(${cfg.suffix})` : ''}`, async () => { + describe('FormatMixin', async () => { let elem; let nonFormat; let fooFormat; diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js index 497ae31b2..a5b66ca93 100644 --- a/packages/fieldset/test/lion-fieldset.test.js +++ b/packages/fieldset/test/lion-fieldset.test.js @@ -624,7 +624,7 @@ describe('', () => { expect(el.hasFeedbackFor).to.deep.equal(['error']); }); - it.skip('(re)initializes children interaction states on registration ready', async () => { + it('(re)initializes children interaction states on registration ready', async () => { const fieldset = await fixtureSync(html` <${tag} .modelValue="${{ a: '1', b: '2' }}"> <${childTag} name="a"> @@ -698,7 +698,7 @@ describe('', () => { expect(fieldset.serializedValue).to.deep.equal({ price: 0 }); }); - it.skip('serializes undefined values as ""(nb radios/checkboxes are always serialized)', async () => { + it('serializes undefined values as ""(nb radios/checkboxes are always serialized)', async () => { const fieldset = await fixture(html` <${tag}> <${childTag} name="custom[]"> diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js index c00335bcc..048d902fe 100644 --- a/packages/input/src/LionInput.js +++ b/packages/input/src/LionInput.js @@ -39,9 +39,7 @@ export class LionInput extends LionField { input: () => { // TODO: Find a better way to do value delegation via attr const native = document.createElement('input'); - if (this.__dataInstanceProps && this.__dataInstanceProps.modelValue) { - native.setAttribute('value', this.__dataInstanceProps.modelValue); - } else if (this.hasAttribute('value')) { + if (this.hasAttribute('value')) { native.setAttribute('value', this.getAttribute('value')); } return native; diff --git a/packages/input/test/lion-input.test.js b/packages/input/test/lion-input.test.js index faa0d247f..04ab4bdb3 100644 --- a/packages/input/test/lion-input.test.js +++ b/packages/input/test/lion-input.test.js @@ -1,12 +1,13 @@ -import { expect, fixture } from '@open-wc/testing'; +import { expect, fixture, html, unsafeStatic } from '@open-wc/testing'; import '../lion-input.js'; +const tagString = 'lion-input'; +const tag = unsafeStatic(tagString); + describe('', () => { it('delegates readOnly property and readonly attribute', async () => { - const el = await fixture( - ``, - ); + const el = await fixture(html`<${tag} readonly>`); expect(el._inputNode.readOnly).to.equal(true); el.readOnly = false; await el.updateComplete; @@ -14,13 +15,20 @@ describe('', () => { expect(el._inputNode.readOnly).to.equal(false); }); + it('delegates value attribute', async () => { + const el = await fixture(html`<${tag} value="prefilled">`); + expect(el._inputNode.value).to.equal('prefilled'); + }); + it('automatically creates an element if not provided by user', async () => { - const el = await fixture(``); + const el = await fixture(html` + <${tag}> + `); expect(el.querySelector('input')).to.equal(el._inputNode); }); it('has a type which is reflected to an attribute and is synced down to the native input', async () => { - const el = await fixture(``); + const el = await fixture(html`<${tag}>`); expect(el.type).to.equal('text'); expect(el.getAttribute('type')).to.equal('text'); expect(el._inputNode.getAttribute('type')).to.equal('text'); @@ -32,7 +40,7 @@ describe('', () => { }); it('has an attribute that can be used to set the placeholder text of the input', async () => { - const el = await fixture(``); + const el = await fixture(html`<${tag} placeholder="text">`); expect(el.getAttribute('placeholder')).to.equal('text'); expect(el._inputNode.getAttribute('placeholder')).to.equal('text'); @@ -42,20 +50,20 @@ describe('', () => { expect(el._inputNode.getAttribute('placeholder')).to.equal('foo'); }); - it('is accessible', async () => { - const el = await fixture(``); - await expect(el).to.be.accessible(); - }); + describe('Accessibility', () => { + it('is accessible', async () => { + const el = await fixture(html`<${tag} label="Label">`); + await expect(el).to.be.accessible(); + }); - it('is accessible when readonly', async () => { - const el = await fixture( - ``, - ); - await expect(el).to.be.accessible(); - }); + it('is accessible when readonly', async () => { + const el = await fixture(html`<${tag} readonly label="Label">`); + await expect(el).to.be.accessible(); + }); - it('is accessible when disabled', async () => { - const el = await fixture(``); - await expect(el).to.be.accessible(); + it('is accessible when disabled', async () => { + const el = await fixture(html`<${tag} disabled label="Label">`); + await expect(el).to.be.accessible(); + }); }); });