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

fix: rearrange/cleanup mixin duties

Browse source
This commit is contained in:
Thijs Louisse 2020-02-20 11:48:13 +01:00
parent f44d8aa26a
commit cb7120e3a5
5 changed files with 32 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/field/src/LionField.js
View file

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

2
packages/field/test-suites/FormatMixin.suite.js
View file

@ -52,7 +52,7 @@ export function runFormatMixinSuite(customConfig) {
}
}
describe(`FormatMixin ${cfg.suffix ? `(${cfg.suffix})` : ''}`, async () => {
describe('FormatMixin', async () => {
let elem;
let nonFormat;
let fooFormat;

4
packages/fieldset/test/lion-fieldset.test.js
View file

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

4
packages/input/src/LionInput.js
View file

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

48
packages/input/test/lion-input.test.js
View file

@ -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(
`<lion-input readonly><label slot="label">Testing readonly</label></lion-input>`,
);
const el = await fixture(html`<${tag} readonly></${tag}>`);
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');
});
it('is accessible', async () => {
const el = await fixture(`<lion-input><label slot="label">Label</label></lion-input>`);
await expect(el).to.be.accessible();
});
describe('Accessibility', () => {
it('is accessible', async () => {
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(
`<lion-input readonly .modelValue=${'read only'}><label slot="label">Label</label></lion-input>`,
);
await expect(el).to.be.accessible();
});
it('is accessible when readonly', async () => {
const el = await fixture(html`<${tag} readonly label="Label"></${tag}>`);
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>`);
await expect(el).to.be.accessible();
it('is accessible when disabled', async () => {
const el = await fixture(html`<${tag} disabled label="Label"></${tag}>`);
await expect(el).to.be.accessible();
});
});
});