fix: rearrange/cleanup mixin duties

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;
-  }
 }

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;

packages/fieldset/test/lion-fieldset.test.js

@@ -624,7 +624,7 @@ describe('<lion-fieldset>', () => {
       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"></${childTag}>
@@ -698,7 +698,7 @@ describe('<lion-fieldset>', () => {
       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[]"></${childTag}>

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) {
+        if (this.hasAttribute('value')) {
-          native.setAttribute('value', this.__dataInstanceProps.modelValue);
-        } else if (this.hasAttribute('value')) {
           native.setAttribute('value', this.getAttribute('value'));
         }
         return native;

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('<lion-input>', () => {
   it('delegates readOnly property and readonly attribute', async () => {
-    const el = await fixture(
+    const el = await fixture(html`<${tag} readonly></${tag}>`);
-      `<lion-input readonly><label slot="label">Testing readonly</label></lion-input>`,
-    );
     expect(el._inputNode.readOnly).to.equal(true);
     el.readOnly = false;
     await el.updateComplete;
@@ -14,13 +15,20 @@ describe('<lion-input>', () => {
     expect(el._inputNode.readOnly).to.equal(false);
   });
 
+  it('delegates value attribute', async () => {
+    const el = await fixture(html`<${tag} value="prefilled"></${tag}>`);
+    expect(el._inputNode.value).to.equal('prefilled');
+  });
+
   it('automatically creates an <input> element if not provided by user', async () => {
-    const el = await fixture(`<lion-input></lion-input>`);
+    const el = await fixture(html`
+      <${tag}></${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(`<lion-input></lion-input>`);
+    const el = await fixture(html`<${tag}></${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('<lion-input>', () => {
   });
 
   it('has an attribute that can be used to set the placeholder text of the input', async () => {
-    const el = await fixture(`<lion-input placeholder="text"></lion-input>`);
+    const el = await fixture(html`<${tag} placeholder="text"></${tag}>`);
     expect(el.getAttribute('placeholder')).to.equal('text');
     expect(el._inputNode.getAttribute('placeholder')).to.equal('text');
 
@@ -42,20 +50,20 @@ describe('<lion-input>', () => {
     expect(el._inputNode.getAttribute('placeholder')).to.equal('foo');
   });
 
+  describe('Accessibility', () => {
     it('is accessible', async () => {
-    const el = await fixture(`<lion-input><label slot="label">Label</label></lion-input>`);
+      const el = await fixture(html`<${tag} label="Label"></${tag}>`);
       await expect(el).to.be.accessible();
     });
 
     it('is accessible when readonly', async () => {
-    const el = await fixture(
+      const el = await fixture(html`<${tag} readonly label="Label"></${tag}>`);
-      `<lion-input readonly .modelValue=${'read only'}><label slot="label">Label</label></lion-input>`,
-    );
       await expect(el).to.be.accessible();
     });
 
     it('is accessible when disabled', async () => {
-    const el = await fixture(`<lion-input disabled><label slot="label">Label</label></lion-input>`);
+      const el = await fixture(html`<${tag} disabled label="Label"></${tag}>`);
       await expect(el).to.be.accessible();
     });
   });
+});