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

Merge pull request #228 from ing-bank/fix/fieldDelegation

Browse source 
Sync field properties instead of delegation and add integration tests for FormatMixin
This commit is contained in:
Joren Broekema 2019-08-14 14:26:21 +02:00 committed by GitHub
commit 5535d45419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 3020 additions and 1873 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/button/src/LionButton.js
View file

@ -1,9 +1,6 @@
import { css, html, DelegateMixin, SlotMixin, DisabledWithTabIndexMixin } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
import { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@lion/core';
export class LionButton extends DisabledWithTabIndexMixin(
DelegateMixin(SlotMixin(LionLitElement)),
) {
export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
static get properties() {
return {
role: {
@ -14,6 +11,10 @@ export class LionButton extends DisabledWithTabIndexMixin(
type: Boolean,
reflect: true,
},
type: {
type: String,
reflect: true,
},
};
}
@ -107,14 +108,6 @@ export class LionButton extends DisabledWithTabIndexMixin(
];
}
get delegations() {
return {
...super.delegations,
target: () => this.$$slot('_button'),
attributes: ['type'],
};
}
get slots() {
return {
...super.slots,
@ -129,9 +122,14 @@ export class LionButton extends DisabledWithTabIndexMixin(
};
}
get _nativeButtonNode() {
return this.querySelector('[slot=_button]');
}
constructor() {
super();
this.role = 'button';
this.type = 'submit';
this.active = false;
this.__setupDelegationInConstructor();
}
@ -146,12 +144,22 @@ export class LionButton extends DisabledWithTabIndexMixin(
this.__teardownEvents();
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('type')) {
const native = this._nativeButtonNode;
if (native) {
native.type = this.type;
}
}
}
_redispatchClickEvent(oldEvent) {
// replacing `MouseEvent` with `oldEvent.constructor` breaks IE
const newEvent = new MouseEvent(oldEvent.type, oldEvent);
newEvent.__isRedispatchedOnNativeButton = true;
this.__enforceHostEventTarget(newEvent);
this.$$slot('_button').dispatchEvent(newEvent);
this._nativeButtonNode.dispatchEvent(newEvent);
}
/**

23
packages/button/test/lion-button.test.js
View file

@ -27,23 +27,26 @@ describe('lion-button', () => {
expect(el.getAttribute('tabindex')).to.equal('0');
});
it('has no type by default on the native button', async () => {
it('has .type="submit" and type="submit" by default', async () => {
const el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('type')).to.be.null;
expect(el.type).to.equal('submit');
expect(el.getAttribute('type')).to.be.equal('submit');
expect(el._nativeButtonNode.type).to.equal('submit');
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('submit');
});
it('has type="submit" on the native button when set', async () => {
const el = await fixture(`<lion-button type="submit">foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('type')).to.equal('submit');
it('sync type down to the native button', async () => {
const el = await fixture(`<lion-button type="button">foo</lion-button>`);
expect(el.type).to.equal('button');
expect(el.getAttribute('type')).to.be.equal('button');
expect(el._nativeButtonNode.type).to.equal('button');
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('button');
});
it('hides the native button in the UI', async () => {
const el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('tabindex')).to.equal('-1');
expect(window.getComputedStyle(nativeButton).visibility).to.equal('hidden');
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
expect(window.getComputedStyle(el._nativeButtonNode).visibility).to.equal('hidden');
});
it('can be disabled imperatively', async () => {

1
packages/choice-input/src/ChoiceInputMixin.js
View file

@ -8,7 +8,6 @@ export const ChoiceInputMixin = superclass =>
class ChoiceInputMixin extends FormatMixin(superclass) {
static get properties() {
return {
...super.properties,
/**
* Boolean indicating whether or not this element is checked by the end user.
*/

1
packages/field/src/FieldCustomMixin.js
View file

@ -13,7 +13,6 @@ export const FieldCustomMixin = dedupeMixin(
class FieldCustomMixin extends superclass {
static get properties() {
return {
...super.properties,
/**
* When no light dom defined and prop set
*/

124
packages/field/src/FocusMixin.js
View file

@ -1,52 +1,120 @@
import { dedupeMixin, DelegateMixin } from '@lion/core';
import { dedupeMixin } from '@lion/core';
export const FocusMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-unused-vars, max-len, no-shadow
class FocusMixin extends DelegateMixin(superclass) {
get delegations() {
class FocusMixin extends superclass {
static get properties() {
return {
...super.delegations,
target: () => this.inputElement,
events: [...super.delegations.events, 'focus', 'blur'], // since these events don't bubble
methods: [...super.delegations.methods, 'focus', 'blur'],
properties: [...super.delegations.properties, 'onfocus', 'onblur', 'autofocus'],
attributes: [...super.delegations.attributes, 'onfocus', 'onblur', 'autofocus'],
focused: {
type: Boolean,
reflect: true,
},
};
}
constructor() {
super();
this.focused = false;
}
connectedCallback() {
super.connectedCallback();
this._onFocus = this._onFocus.bind(this);
this._onBlur = this._onBlur.bind(this);
this.inputElement.addEventListener('focusin', this._onFocus);
this.inputElement.addEventListener('focusout', this._onBlur);
if (super.connectedCallback) {
super.connectedCallback();
}
this.__registerEventsForFocusMixin();
}
disconnectedCallback() {
super.disconnectedCallback();
this.inputElement.removeEventListener('focusin', this._onFocus);
this.inputElement.removeEventListener('focusout', this._onBlur);
if (super.disconnectedCallback) {
super.disconnectedCallback();
}
this.__teardownEventsForFocusMixin();
}
focus() {
const native = this.inputElement;
if (native) {
native.focus();
}
}
blur() {
const native = this.inputElement;
if (native) {
native.blur();
}
}
updated(changedProperties) {
super.updated(changedProperties);
// 'state-focused' css classes are deprecated
if (changedProperties.has('focused')) {
this.classList[this.focused ? 'add' : 'remove']('state-focused');
}
}
/**
* Helper Function to easily check if the element is being focused
* Functions should be private
*
* TODO: performance comparision vs
* return this.inputElement === document.activeElement;
* @deprecated
*/
get focused() {
return this.classList.contains('state-focused');
}
_onFocus() {
if (super._onFocus) super._onFocus();
this.classList.add('state-focused');
if (super._onFocus) {
super._onFocus();
}
this.focused = true;
}
/**
* Functions should be private
*
* @deprecated
*/
_onBlur() {
if (super._onBlur) super._onBlur();
this.classList.remove('state-focused');
if (super._onBlur) {
super._onBlur();
}
this.focused = false;
}
__registerEventsForFocusMixin() {
// focus
this.__redispatchFocus = ev => {
ev.stopPropagation();
this.dispatchEvent(new FocusEvent('focus'));
};
this.inputElement.addEventListener('focus', this.__redispatchFocus);
// blur
this.__redispatchBlur = ev => {
ev.stopPropagation();
this.dispatchEvent(new FocusEvent('blur'));
};
this.inputElement.addEventListener('blur', this.__redispatchBlur);
// focusin
this.__redispatchFocusin = ev => {
ev.stopPropagation();
this._onFocus(ev);
this.dispatchEvent(new FocusEvent('focusin', { bubbles: true, composed: true }));
};
this.inputElement.addEventListener('focusin', this.__redispatchFocusin);
// focusout
this.__redispatchFocusout = ev => {
ev.stopPropagation();
this._onBlur();
this.dispatchEvent(new FocusEvent('focusout', { bubbles: true, composed: true }));
};
this.inputElement.addEventListener('focusout', this.__redispatchFocusout);
}
__teardownEventsForFocusMixin() {
this.inputElement.removeEventListener('focus', this.__redispatchFocus);
this.inputElement.removeEventListener('blur', this.__redispatchBlur);
this.inputElement.removeEventListener('focusin', this.__redispatchFocusin);
this.inputElement.removeEventListener('focusout', this.__redispatchFocusout);
}
},
);

1
packages/field/src/FormControlMixin.js
View file

@ -18,7 +18,6 @@ export const FormControlMixin = dedupeMixin(
class FormControlMixin extends FormRegisteringMixin(ObserverMixin(SlotMixin(superclass))) {
static get properties() {
return {
...super.properties,
/**
* A list of ids that will be put on the inputElement as a serialized string
*/

2
packages/field/src/FormatMixin.js
View file

@ -53,8 +53,6 @@ export const FormatMixin = dedupeMixin(
class FormatMixin extends ObserverMixin(superclass) {
static get properties() {
return {
...super.properties,
/**
* The model value is the result of the parser function(when available).
* It should be considered as the internal value used for validation and reasoning/logic.

1
packages/field/src/InteractionStateMixin.js
View file

@ -18,7 +18,6 @@ export const InteractionStateMixin = dedupeMixin(
class InteractionStateMixin extends ObserverMixin(superclass) {
static get properties() {
return {
...super.properties,
/**
* True when user has focused and left(blurred) the field.
*/

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

@ -1,6 +1,6 @@
import { DelegateMixin, SlotMixin, LitElement } from '@lion/core';
import { SlotMixin, LitElement } from '@lion/core';
import { ElementMixin } from '@lion/core/src/ElementMixin.js';
import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
import { ValidateMixin } from '@lion/validate';
import { FormControlMixin } from './FormControlMixin.js';
@ -35,40 +35,53 @@ import { FocusMixin } from './FocusMixin.js';
export class LionField extends FormControlMixin(
InteractionStateMixin(
FocusMixin(
FormatMixin(
ValidateMixin(
CssClassMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LitElement))))),
),
),
FormatMixin(ValidateMixin(DisabledMixin(ElementMixin(SlotMixin(ObserverMixin(LitElement)))))),
),
),
) {
get delegations() {
return {
...super.delegations,
target: () => this.inputElement,
properties: [
...super.delegations.properties,
'name',
'type',
'disabled',
'selectionStart',
'selectionEnd',
],
attributes: [...super.delegations.attributes, 'name', 'type', 'disabled'],
};
}
static get properties() {
return {
...super.properties,
submitted: {
// make sure validation can be triggered based on observer
type: Boolean,
},
name: {
type: String,
reflect: true,
},
};
}
get selectionStart() {
const native = this.inputElement;
if (native && native.selectionStart) {
return native.selectionStart;
}
return 0;
}
set selectionStart(value) {
const native = this.inputElement;
if (native && native.selectionStart) {
native.selectionStart = value;
}
}
get selectionEnd() {
const native = this.inputElement;
if (native && native.selectionEnd) {
return native.selectionEnd;
}
return 0;
}
set selectionEnd(value) {
const native = this.inputElement;
if (native && native.selectionEnd) {
native.selectionEnd = value;
}
}
// We don't delegate, because we want to preserve caret position via _setValueAndPreserveCaret
set value(value) {
// if not yet connected to dom can't change the value
@ -82,20 +95,23 @@ export class LionField extends FormControlMixin(
return (this.inputElement && this.inputElement.value) || '';
}
static get asyncObservers() {
return {
...super.asyncObservers,
_setDisabledClass: ['disabled'],
};
constructor() {
super();
this.name = '';
this.submitted = false;
}
connectedCallback() {
// TODO: Normally we put super calls on top for predictability,
// here we temporarily need to do attribute delegation before,
// so the FormatMixin uses the right value. Should be solved
// when value delegation is part of the calculation loop of
// FormatMixin
this._delegateInitialValueAttr();
super.connectedCallback();
this._onChange = this._onChange.bind(this);
this.inputElement.addEventListener('change', this._onChange);
this._delegateInitialValueAttr();
this._setDisabledClass();
this.classList.add('form-field'); // eslint-disable-line
}
@ -112,8 +128,22 @@ export class LionField extends FormControlMixin(
this.inputElement.removeEventListener('change', this._onChange);
}
_setDisabledClass() {
this.classList[this.disabled ? 'add' : 'remove']('state-disabled');
updated(changedProps) {
super.updated(changedProps);
if (changedProps.has('disabled')) {
if (this.disabled) {
this.inputElement.disabled = true;
this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
} else {
this.inputElement.disabled = false;
this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
}
}
if (changedProps.has('name')) {
this.inputElement.name = this.name;
}
}
/**

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

@ -0,0 +1,401 @@
import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon';
import { LitElement } from '@lion/core';
import { Unparseable } from '@lion/validate';
import { FormatMixin } from '../src/FormatMixin.js';
function mimicUserInput(formControl, newViewValue) {
formControl.value = newViewValue; // eslint-disable-line no-param-reassign
formControl.inputElement.dispatchEvent(new CustomEvent('input', { bubbles: true }));
}
export function runFormatMixinSuite(customConfig) {
// TODO: Maybe remove suffix
const cfg = {
tagString: null,
modelValueType: String,
suffix: '',
...customConfig,
};
/**
* Mocks a value for you based on the data type
* Optionally toggles you a different value
* for needing to mimic a value-change.
*
* TODO: The FormatMixin can know about platform types like
* Date, but not about modelValue of input-iban etc.
* Make this concept expandable by allowing 'non standard'
* modelValues to hook into this.
*/
function generateValueBasedOnType(opts = {}) {
const options = { type: cfg.modelValueType, toggleValue: false, viewValue: false, ...opts };
switch (options.type) {
case Number:
return !options.toggleValue ? '123' : '456';
case Date:
// viewValue instead of modelValue, since a Date object is unparseable.
// Note: this viewValue needs to point to the same date as the
// default returned modelValue.
if (options.viewValue) {
return !options.toggleValue ? '5-5-2005' : '10-10-2010';
}
return !options.toggleValue ? new Date('5-5-2005') : new Date('10-10-2010');
case Array:
return !options.toggleValue ? ['foo', 'bar'] : ['baz', 'yay'];
case Object:
return !options.toggleValue ? { foo: 'bar' } : { bar: 'foo' };
case Boolean:
return !options.toggleValue;
case 'email':
return !options.toggleValue ? 'some-user@ing.com' : 'another-user@ing.com';
case 'iban':
return !options.toggleValue ? 'SE3550000000054910000003' : 'CH9300762011623852957';
default:
return !options.toggleValue ? 'foo' : 'bar';
}
}
describe(`FormatMixin ${cfg.suffix ? `(${cfg.suffix})` : ''}`, async () => {
let elem;
let nonFormat;
let fooFormat;
before(async () => {
if (!cfg.tagString) {
cfg.tagString = defineCE(
class extends FormatMixin(LitElement) {
render() {
return html`
<slot name="input"></slot>
`;
}
set value(newValue) {
this.inputElement.value = newValue;
}
get value() {
return this.inputElement.value;
}
get inputElement() {
return this.querySelector('input');
}
},
);
}
elem = unsafeStatic(cfg.tagString);
nonFormat = await fixture(html`<${elem}
.formatter="${v => v}"
.parser="${v => v}"
.serializer="${v => v}"
.deserializer="${v => v}"
><input slot="input">
</${elem}>`);
fooFormat = await fixture(html`
<${elem}
.formatter="${value => `foo: ${value}`}"
.parser="${value => value.replace('foo: ', '')}"
.serializer="${value => `[foo] ${value}`}"
.deserializer="${value => value.replace('[foo] ', '')}"
><input slot="input">
</${elem}>`);
});
it('fires `model-value-changed` for every change on the input', async () => {
const formatEl = await fixture(html`<${elem}><input slot="input"></${elem}>`);
let counter = 0;
formatEl.addEventListener('model-value-changed', () => {
counter += 1;
});
mimicUserInput(formatEl, generateValueBasedOnType());
expect(counter).to.equal(1);
// Counter offset +1 for Date because parseDate created a new Date object
// when the user changes the value.
// This will result in a model-value-changed trigger even if the user value was the same
// TODO: a proper solution would be to add `hasChanged` to input-date, like isSameDate()
// from calendar utils
const counterOffset = cfg.modelValueType === Date ? 1 : 0;
mimicUserInput(formatEl, generateValueBasedOnType());
expect(counter).to.equal(1 + counterOffset);
mimicUserInput(formatEl, generateValueBasedOnType({ toggleValue: true }));
expect(counter).to.equal(2 + counterOffset);
});
it('fires `model-value-changed` for every modelValue change', async () => {
const el = await fixture(html`<${elem}><input slot="input"></${elem}>`);
let counter = 0;
el.addEventListener('model-value-changed', () => {
counter += 1;
});
el.modelValue = 'one';
expect(counter).to.equal(1);
// no change means no event
el.modelValue = 'one';
expect(counter).to.equal(1);
el.modelValue = 'two';
expect(counter).to.equal(2);
});
it('has modelValue, formattedValue and serializedValue which are computed synchronously', async () => {
expect(nonFormat.modelValue).to.equal('', 'modelValue initially');
expect(nonFormat.formattedValue).to.equal('', 'formattedValue initially');
expect(nonFormat.serializedValue).to.equal('', 'serializedValue initially');
const generatedValue = generateValueBasedOnType();
nonFormat.modelValue = generatedValue;
expect(nonFormat.modelValue).to.equal(generatedValue, 'modelValue as provided');
expect(nonFormat.formattedValue).to.equal(generatedValue, 'formattedValue synchronized');
expect(nonFormat.serializedValue).to.equal(generatedValue, 'serializedValue synchronized');
});
it('has an input node (like <input>/<textarea>) which holds the formatted (view) value', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
expect(fooFormat.value).to.equal('foo: string');
expect(fooFormat.inputElement.value).to.equal('foo: string');
});
it('converts modelValue => formattedValue (via this.formatter)', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
expect(fooFormat.serializedValue).to.equal('[foo] string');
});
it('converts modelValue => serializedValue (via this.serializer)', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.serializedValue).to.equal('[foo] string');
});
it('converts formattedValue => modelValue (via this.parser)', async () => {
fooFormat.formattedValue = 'foo: string';
expect(fooFormat.modelValue).to.equal('string');
});
it('converts serializedValue => modelValue (via this.deserializer)', async () => {
fooFormat.serializedValue = '[foo] string';
expect(fooFormat.modelValue).to.equal('string');
});
it('synchronizes inputElement.value as a fallback mechanism', async () => {
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
const formatElem = await fixture(html`
<${elem}
value="string",
.formatter=${value => `foo: ${value}`}
.parser=${value => value.replace('foo: ', '')}
.serializer=${value => `[foo] ${value}`}
.deserializer=${value => value.replace('[foo] ', '')}
><input slot="input" value="string"/></${elem}>`);
// Now check if the format/parse/serialize loop has been triggered
await formatElem.updateComplete;
expect(formatElem.formattedValue).to.equal('foo: string');
expect(formatElem.inputElement.value).to.equal('foo: string');
expect(formatElem.serializedValue).to.equal('[foo] string');
expect(formatElem.modelValue).to.equal('string');
});
it('reflects back formatted value to user on leave', async () => {
const formatEl = await fixture(html`
<${elem} .formatter="${value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`);
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
const generatedModelValue = generateValueBasedOnType();
mimicUserInput(formatEl, generatedViewValue);
expect(formatEl.inputElement.value).to.not.equal(`foo: ${generatedModelValue}`);
// user leaves field
formatEl.inputElement.dispatchEvent(new CustomEvent(formatEl.formatOn, { bubbles: true }));
await aTimeout();
expect(formatEl.inputElement.value).to.equal(`foo: ${generatedModelValue}`);
});
it('reflects back .formattedValue immediately when .modelValue changed imperatively', async () => {
const el = await fixture(html`
<${elem} .formatter="${value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`);
// The FormatMixin can be used in conjunction with the ValidateMixin, in which case
// it can hold errorState (affecting the formatting)
el.errorState = true;
// users types value 'test'
mimicUserInput(el, 'test');
expect(el.inputElement.value).to.not.equal('foo: test');
// Now see the difference for an imperative change
el.modelValue = 'test2';
expect(el.inputElement.value).to.equal('foo: test2');
});
it('works if there is no underlying inputElement', async () => {
const tagNoInputString = defineCE(class extends FormatMixin(LitElement) {});
const tagNoInput = unsafeStatic(tagNoInputString);
expect(async () => {
await fixture(html`<${tagNoInput}></${tagNoInput}>`);
}).to.not.throw();
});
describe('parsers/formatters/serializers', () => {
it('should call the parser|formatter|serializer provided by user', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
const serializerSpy = sinon.spy(value => `[foo] ${value}`);
const el = await fixture(html`
<${elem}
.formatter=${formatterSpy}
.parser=${parserSpy}
.serializer=${serializerSpy}
.modelValue=${'test'}
>
<input slot="input">
</${elem}>
`);
expect(formatterSpy.called).to.equal(true);
expect(serializerSpy.called).to.equal(true);
el.formattedValue = 'raw';
expect(parserSpy.called).to.equal(true);
});
it('should have formatOptions available in formatter', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
await fixture(html`
<${elem}
value="${generatedViewValue}"
.formatter="${formatterSpy}"
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
<input slot="input" value="${generatedViewValue}">
</${elem}>
`);
expect(formatterSpy.args[0][1].locale).to.equal('en-GB');
expect(formatterSpy.args[0][1].decimalSeparator).to.equal('-');
});
it('will only call the parser for defined values', async () => {
const generatedValue = generateValueBasedOnType();
const parserSpy = sinon.spy();
const el = await fixture(html`
<${elem} .parser="${parserSpy}">
<input slot="input" value="${generatedValue}">
</${elem}>
`);
expect(parserSpy.callCount).to.equal(1);
// This could happen for instance in a reset
el.modelValue = undefined;
expect(parserSpy.callCount).to.equal(1);
// This could happen when the user erases the input value
mimicUserInput(el, '');
expect(parserSpy.callCount).to.equal(1);
});
it('will not return Unparseable when empty strings are inputted', async () => {
const el = await fixture(html`
<${elem}>
<input slot="input" value="string">
</${elem}>
`);
// This could happen when the user erases the input value
mimicUserInput(el, '');
// For backwards compatibility, we keep the modelValue an empty string here.
// Undefined would be more appropriate 'conceptually', however
expect(el.modelValue).to.equal('');
});
it('will only call the formatter for valid values on `user-input-changed` ', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const generatedModelValue = generateValueBasedOnType();
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
const generatedViewValueAlt = generateValueBasedOnType({
viewValue: true,
toggleValue: true,
});
const el = await fixture(html`
<${elem} .formatter=${formatterSpy}>
<input slot="input" value="${generatedViewValue}">
</${elem}>
`);
expect(formatterSpy.callCount).to.equal(1);
el.errorState = true;
// Ensure errorState is always true by putting a validator on it that always returns false.
// Setting errorState = true is not enough if the element has errorValidators (uses ValidateMixin)
// that set errorState back to false when the user input is mimicked.
const alwaysInvalidator = () => ({ 'always-invalid': false });
el.errorValidators = [alwaysInvalidator];
mimicUserInput(el, generatedViewValueAlt);
expect(formatterSpy.callCount).to.equal(1);
// Due to errorState, the formatter should not have ran.
expect(el.formattedValue).to.equal(generatedViewValueAlt);
el.errorState = false;
el.errorValidators = [];
mimicUserInput(el, generatedViewValue);
expect(formatterSpy.callCount).to.equal(2);
expect(el.formattedValue).to.equal(`foo: ${generatedModelValue}`);
});
});
describe('Unparseable values', () => {
it('should convert to Unparseable when wrong value inputted by user', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
mimicUserInput(el, 'test');
expect(el.modelValue).to.be.an.instanceof(Unparseable);
});
it('should preserve the viewValue when not parseable', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
mimicUserInput(el, 'test');
expect(el.formattedValue).to.equal('test');
expect(el.value).to.equal('test');
});
it('should display the viewValue when modelValue is of type Unparseable', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
el.modelValue = new Unparseable('foo');
expect(el.value).to.equal('foo');
});
});
});
}

1
packages/field/test/FieldCustomMixin.test.js
View file

@ -11,7 +11,6 @@ describe('FieldCustomMixin', () => {
const FieldCustomMixinClass = class extends FieldCustomMixin(LionField) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},

117
packages/field/test/FocusMixin.test.js Normal file
View file

@ -0,0 +1,117 @@
import { expect, fixture, html, defineCE, unsafeStatic, oneEvent } from '@open-wc/testing';
import { LitElement } from '@lion/core';
import { FocusMixin } from '../src/FocusMixin.js';
describe('FocusMixin', () => {
let tag;
before(async () => {
const tagString = defineCE(
class extends FocusMixin(LitElement) {
render() {
return html`
<slot name="input"></slot>
`;
}
get inputElement() {
return this.querySelector('input');
}
},
);
tag = unsafeStatic(tagString);
});
it('focuses/blurs the underlaying native element on .focus()/.blur()', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
el.focus();
expect(document.activeElement === el.inputElement).to.be.true;
el.blur();
expect(document.activeElement === el.inputElement).to.be.false;
});
it('has an attribute focused when focused', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
el.focus();
await el.updateComplete;
expect(el.hasAttribute('focused')).to.be.true;
el.blur();
await el.updateComplete;
expect(el.hasAttribute('focused')).to.be.false;
});
it('becomes focused/blurred if the native element gets focused/blurred', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
expect(el.focused).to.be.false;
el.inputElement.focus();
expect(el.focused).to.be.true;
el.inputElement.blur();
expect(el.focused).to.be.false;
});
it('has a deprecated "state-focused" css class when focused', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
el.focus();
await el.updateComplete;
expect(el.classList.contains('state-focused')).to.be.true;
el.blur();
await el.updateComplete;
expect(el.classList.contains('state-focused')).to.be.false;
});
it('dispatches [focus, blur] events', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
setTimeout(() => el.focus());
const focusEv = await oneEvent(el, 'focus');
expect(focusEv).to.be.instanceOf(FocusEvent);
expect(focusEv.target).to.equal(el);
expect(focusEv.bubbles).to.be.false;
expect(focusEv.composed).to.be.false;
setTimeout(() => {
el.focus();
el.blur();
});
const blurEv = await oneEvent(el, 'blur');
expect(blurEv).to.be.instanceOf(FocusEvent);
expect(blurEv.target).to.equal(el);
expect(blurEv.bubbles).to.be.false;
expect(blurEv.composed).to.be.false;
});
it('dispatches [focusin, focusout] events with { bubbles: true, composed: true }', async () => {
const el = await fixture(html`
<${tag}><input slot="input"></${tag}>
`);
setTimeout(() => el.focus());
const focusinEv = await oneEvent(el, 'focusin');
expect(focusinEv).to.be.instanceOf(FocusEvent);
expect(focusinEv.target).to.equal(el);
expect(focusinEv.bubbles).to.be.true;
expect(focusinEv.composed).to.be.true;
setTimeout(() => {
el.focus();
el.blur();
});
const focusoutEv = await oneEvent(el, 'focusout');
expect(focusoutEv).to.be.instanceOf(FocusEvent);
expect(focusoutEv.target).to.equal(el);
expect(focusoutEv.bubbles).to.be.true;
expect(focusoutEv.composed).to.be.true;
});
});

1
packages/field/test/FormControlMixin.test.js
View file

@ -13,7 +13,6 @@ describe('FormControlMixin', () => {
const FormControlMixinClass = class extends FormControlMixin(SlotMixin(LionLitElement)) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},

314
packages/field/test/FormatMixin.test.js
View file

@ -1,313 +1,3 @@
import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon';
import { runFormatMixinSuite } from '../test-suites/FormatMixin.suite.js';
import { LitElement } from '@lion/core';
import { Unparseable } from '@lion/validate';
import { FormatMixin } from '../src/FormatMixin.js';
function mimicUserInput(formControl, newViewValue) {
formControl.value = newViewValue; // eslint-disable-line no-param-reassign
formControl.inputElement.dispatchEvent(new CustomEvent('input', { bubbles: true }));
}
describe('FormatMixin', () => {
let elem;
let nonFormat;
let fooFormat;
before(async () => {
const tagString = defineCE(
class extends FormatMixin(LitElement) {
render() {
return html`
<slot name="input"></slot>
`;
}
set value(newValue) {
this.inputElement.value = newValue;
}
get value() {
return this.inputElement.value;
}
get inputElement() {
return this.querySelector('input');
}
},
);
elem = unsafeStatic(tagString);
nonFormat = await fixture(html`<${elem}><input slot="input"></${elem}>`);
fooFormat = await fixture(html`
<${elem}
.formatter="${value => `foo: ${value}`}"
.parser="${value => value.replace('foo: ', '')}"
.serializer="${value => `[foo] ${value}`}"
.deserializer="${value => value.replace('[foo] ', '')}"
><input slot="input">
</${elem}>`);
});
it('fires `model-value-changed` for every change on the input', async () => {
const formatEl = await fixture(html`<${elem}><input slot="input"></${elem}>`);
let counter = 0;
formatEl.addEventListener('model-value-changed', () => {
counter += 1;
});
mimicUserInput(formatEl, 'one');
expect(counter).to.equal(1);
// no change means no event
mimicUserInput(formatEl, 'one');
expect(counter).to.equal(1);
mimicUserInput(formatEl, 'two');
expect(counter).to.equal(2);
});
it('fires `model-value-changed` for every modelValue change', async () => {
const el = await fixture(html`<${elem}><input slot="input"></${elem}>`);
let counter = 0;
el.addEventListener('model-value-changed', () => {
counter += 1;
});
el.modelValue = 'one';
expect(counter).to.equal(1);
// no change means no event
el.modelValue = 'one';
expect(counter).to.equal(1);
el.modelValue = 'two';
expect(counter).to.equal(2);
});
it('has modelValue, formattedValue and serializedValue which are computed synchronously', async () => {
expect(nonFormat.modelValue).to.equal('', 'modelValue initially');
expect(nonFormat.formattedValue).to.equal('', 'formattedValue initially');
expect(nonFormat.serializedValue).to.equal('', 'serializedValue initially');
nonFormat.modelValue = 'string';
expect(nonFormat.modelValue).to.equal('string', 'modelValue as provided');
expect(nonFormat.formattedValue).to.equal('string', 'formattedValue synchronized');
expect(nonFormat.serializedValue).to.equal('string', 'serializedValue synchronized');
});
it('has an input node (like <input>/<textarea>) which holds the formatted (view) value', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
expect(fooFormat.value).to.equal('foo: string');
expect(fooFormat.inputElement.value).to.equal('foo: string');
});
it('converts modelValue => formattedValue (via this.formatter)', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.formattedValue).to.equal('foo: string');
expect(fooFormat.serializedValue).to.equal('[foo] string');
});
it('converts modelValue => serializedValue (via this.serializer)', async () => {
fooFormat.modelValue = 'string';
expect(fooFormat.serializedValue).to.equal('[foo] string');
});
it('converts formattedValue => modelValue (via this.parser)', async () => {
fooFormat.formattedValue = 'foo: string';
expect(fooFormat.modelValue).to.equal('string');
});
it('converts serializedValue => modelValue (via this.deserializer)', async () => {
fooFormat.serializedValue = '[foo] string';
expect(fooFormat.modelValue).to.equal('string');
});
it('synchronizes inputElement.value as a fallback mechanism', async () => {
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
const formatElem = await fixture(html`
<${elem}
value="string",
.formatter=${value => `foo: ${value}`}
.parser=${value => value.replace('foo: ', '')}
.serializer=${value => `[foo] ${value}`}
.deserializer=${value => value.replace('[foo] ', '')}
><input slot="input" value="string"/></${elem}>`);
// Now check if the format/parse/serialize loop has been triggered
await aTimeout();
expect(formatElem.formattedValue).to.equal('foo: string');
expect(formatElem.inputElement.value).to.equal('foo: string');
expect(formatElem.serializedValue).to.equal('[foo] string');
expect(formatElem.modelValue).to.equal('string');
});
it('reflects back formatted value to user on leave', async () => {
const formatEl = await fixture(html`
<${elem} .formatter="${value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`);
// users types value 'test'
mimicUserInput(formatEl, 'test');
expect(formatEl.inputElement.value).to.not.equal('foo: test');
// user leaves field
formatEl.inputElement.dispatchEvent(new CustomEvent(formatEl.formatOn, { bubbles: true }));
await aTimeout();
expect(formatEl.inputElement.value).to.equal('foo: test');
});
it('reflects back .formattedValue immediately when .modelValue changed imperatively', async () => {
const el = await fixture(html`
<${elem} .formatter="${value => `foo: ${value}`}">
<input slot="input" />
</${elem}>
`);
// The FormatMixin can be used in conjunction with the ValidateMixin, in which case
// it can hold errorState (affecting the formatting)
el.errorState = true;
// users types value 'test'
mimicUserInput(el, 'test');
expect(el.inputElement.value).to.not.equal('foo: test');
// Now see the difference for an imperative change
el.modelValue = 'test2';
expect(el.inputElement.value).to.equal('foo: test2');
});
it('works if there is no underlying inputElement', async () => {
const tagNoInputString = defineCE(class extends FormatMixin(LitElement) {});
const tagNoInput = unsafeStatic(tagNoInputString);
expect(async () => {
await fixture(html`<${tagNoInput}></${tagNoInput}>`);
}).to.not.throw();
});
describe('parsers/formatters/serializers', () => {
it('should call the parser|formatter|serializer provided by user', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const parserSpy = sinon.spy(value => value.replace('foo: ', ''));
const serializerSpy = sinon.spy(value => `[foo] ${value}`);
const el = await fixture(html`
<${elem}
.formatter=${formatterSpy}
.parser=${parserSpy}
.serializer=${serializerSpy}
.modelValue=${'test'}
>
<input slot="input">
</${elem}>
`);
expect(formatterSpy.called).to.equal(true);
expect(serializerSpy.called).to.equal(true);
el.formattedValue = 'raw';
expect(parserSpy.called).to.equal(true);
});
it('should have formatOptions available in formatter', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
await fixture(html`
<${elem}
value="string",
.formatter="${formatterSpy}"
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
<input slot="input" value="string">
</${elem}>`);
await aTimeout();
expect(formatterSpy.args[0][1].locale).to.equal('en-GB');
expect(formatterSpy.args[0][1].decimalSeparator).to.equal('-');
});
it('will only call the parser for defined values', async () => {
const parserSpy = sinon.spy();
const el = await fixture(html`
<${elem} .parser="${parserSpy}">
<input slot="input" value="string">
</${elem}>
`);
el.modelValue = 'foo';
expect(parserSpy.callCount).to.equal(1);
// This could happen for instance in a reset
el.modelValue = undefined;
expect(parserSpy.callCount).to.equal(1);
// This could happen when the user erases the input value
mimicUserInput(el, '');
expect(parserSpy.callCount).to.equal(1);
});
it('will not return Unparseable when empty strings are inputted', async () => {
const el = await fixture(html`
<${elem}>
<input slot="input" value="string">
</${elem}>
`);
// This could happen when the user erases the input value
mimicUserInput(el, '');
// For backwards compatibility, we keep the modelValue an empty string here.
// Undefined would be more appropriate 'conceptually', however
expect(el.modelValue).to.equal('');
});
it('will only call the formatter for valid values on `user-input-changed` ', async () => {
const formatterSpy = sinon.spy(value => `foo: ${value}`);
const el = await fixture(html`
<${elem} .formatter=${formatterSpy}>
<input slot="input" value="init-string">
</${elem}>
`);
expect(formatterSpy.callCount).to.equal(1);
el.errorState = true;
mimicUserInput(el, 'bar');
expect(formatterSpy.callCount).to.equal(1);
expect(el.formattedValue).to.equal('bar');
el.errorState = false;
mimicUserInput(el, 'bar2');
expect(formatterSpy.callCount).to.equal(2);
expect(el.formattedValue).to.equal('foo: bar2');
});
});
describe('Unparseable values', () => {
it('should convert to Unparseable when wrong value inputted by user', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
mimicUserInput(el, 'test');
expect(el.modelValue).to.be.an.instanceof(Unparseable);
});
it('should preserve the viewValue when not parseable', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
mimicUserInput(el, 'test');
expect(el.formattedValue).to.equal('test');
expect(el.value).to.equal('test');
});
it('should display the viewValue when modelValue is of type Unparseable', async () => {
const el = await fixture(html`
<${elem}
.parser=${viewValue => Number(viewValue) || undefined}
>
<input slot="input">
</${elem}>
`);
el.modelValue = new Unparseable('foo');
expect(el.value).to.equal('foo');
});
});
});
runFormatMixinSuite();

5
packages/field/test/field-integrations.test.js
View file

@ -1,6 +1,7 @@
import { defineCE } from '@open-wc/testing';
import { runInteractionStateMixinSuite } from '../test-suites/InteractionStateMixin.suite.js';
import '../lion-field.js';
import { runFormatMixinSuite } from '../test-suites/FormatMixin.suite.js';
const fieldTagString = defineCE(
class extends customElements.get('lion-field') {
@ -19,4 +20,8 @@ describe('<lion-field> integrations', () => {
tagString: fieldTagString,
suffix: 'lion-field',
});
runFormatMixinSuite({
tagString: fieldTagString,
});
});

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

@ -31,146 +31,144 @@ beforeEach(() => {
describe('<lion-field>', () => {
it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => {
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
expect(lionField.$$slot('input').id).to.equal(lionField._inputId);
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
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}</${tagString}>`);
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
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);
});
it('has class "state-focused" if focused', async () => {
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
expect(el.classList.contains('state-focused')).to.equal(false, 'no state-focused initially');
await triggerFocusFor(el.inputElement);
expect(el.classList.contains('state-focused')).to.equal(true, 'state-focused after focus()');
await triggerBlurFor(el.inputElement);
expect(el.classList.contains('state-focused')).to.equal(false, 'no state-focused after blur()');
});
it('offers simple getter "this.focused" returning true/false for the current focus state', async () => {
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
expect(lionField.focused).to.equal(false);
await triggerFocusFor(lionField);
expect(lionField.focused).to.equal(true);
await triggerBlurFor(lionField);
expect(lionField.focused).to.equal(false);
});
it('can be disabled via attribute', async () => {
const lionFieldDisabled = await fixture(
`<${tagString} disabled>${inputSlotString}</${tagString}>`,
);
expect(lionFieldDisabled.disabled).to.equal(true);
expect(lionFieldDisabled.inputElement.disabled).to.equal(true);
const elDisabled = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
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}</${tagString}>`);
lionField.disabled = true;
await lionField.updateComplete;
expect(lionField.inputElement.disabled).to.equal(true);
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
el.disabled = true;
await el.updateComplete;
expect(el.inputElement.disabled).to.equal(true);
});
// classes are added only for backward compatibility - they are deprecated
it('sets a state-disabled class when disabled', async () => {
const el = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
await el.updateComplete;
expect(el.classList.contains('state-disabled')).to.equal(true);
el.disabled = false;
await el.updateComplete;
expect(el.classList.contains('state-disabled')).to.equal(false);
});
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}>`,
);
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}</${tagString}>`);
expect(lionField.$$slot('input').value).to.equal('one');
const el = await fixture(`<${tagString} value="one">${inputSlotString}</${tagString}>`);
expect(el.$$slot('input').value).to.equal('one');
});
it('delegates value property', async () => {
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
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}</${tagString}>`);
expect(el.$$slot('input').value).to.equal('');
el.value = 'one';
expect(el.value).to.equal('one');
expect(el.$$slot('input').value).to.equal('one');
});
it('has a name which is reflected to an attribute and is synced down to the native input', async () => {
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
expect(el.name).to.equal('');
expect(el.getAttribute('name')).to.equal('');
expect(el.inputElement.getAttribute('name')).to.equal('');
el.name = 'foo';
await el.updateComplete;
expect(el.getAttribute('name')).to.equal('foo');
expect(el.inputElement.getAttribute('name')).to.equal('foo');
});
// 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}</${tagString}>`,
);
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}</${tagString}>`);
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}</${tagString}>`);
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}</${tagString}>`);
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}</${tagString}>`);
expect(lionField.classList.contains('state-disabled')).to.equal(false);
expect(lionField.inputElement.hasAttribute('disabled')).to.equal(false);
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
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}</${tagString}>`,
);
expect(disabledlionField.classList.contains('state-disabled')).to.equal(true);
expect(disabledlionField.inputElement.hasAttribute('disabled')).to.equal(true);
const disabledel = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
expect(disabledel.classList.contains('state-disabled')).to.equal(true);
expect(disabledel.inputElement.hasAttribute('disabled')).to.equal(true);
});
describe(`A11y${nameSuffix}`, () => {
@ -188,27 +186,23 @@ describe('<lion-field>', () => {
<div slot="feedback" id="feedback-[id]">[feedback] </span>
</lion-field>
~~~`, async () => {
const lionField = await fixture(`<${tagString}>
const el = await fixture(`<${tagString}>
<label slot="label">My Name</label>
${inputSlotString}
<span slot="help-text">Enter your Name</span>
<span slot="feedback">No name entered</span>
</${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-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}
<span slot="before" data-label>[before]</span>
<span slot="after" data-label>[after]</span>
@ -217,12 +211,12 @@ describe('<lion-field>', () => {
</${tagString}>
`);
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}`,
);
});
@ -291,31 +285,31 @@ describe('<lion-field>', () => {
function hasX(str) {
return { hasX: str.indexOf('x') > -1 };
}
const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
const feedbackEl = lionField._feedbackElement;
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
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',
@ -323,14 +317,14 @@ describe('<lion-field>', () => {
});
it('can be required', async () => {
const lionField = await fixture(html`
const el = await fixture(html`
<${tag}
.errorValidators=${[['required']]}
>${inputSlot}</${tag}>
`);
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 () => {
@ -338,7 +332,7 @@ describe('<lion-field>', () => {
function isBarValidator(value) {
return { isBar: value === 'bar' };
}
const lionField = await fixture(html`
const el = await fixture(html`
<${tag}
.modelValue=${'init-string'}
.formatter=${formatterSpy}
@ -347,21 +341,21 @@ describe('<lion-field>', () => {
`);
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}>
<label slot="label">[label]</label>
${inputSlotString}
@ -385,8 +379,8 @@ describe('<lion-field>', () => {
'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');
@ -395,12 +389,6 @@ describe('<lion-field>', () => {
});
describe(`Delegation${nameSuffix}`, () => {
it('delegates attribute autofocus', async () => {
const el = await fixture(`<${tagString} autofocus>${inputSlotString}</${tagString}>`);
expect(el.hasAttribute('autofocus')).to.be.false;
expect(el.inputElement.hasAttribute('autofocus')).to.be.true;
});
it('delegates property value', async () => {
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
expect(el.inputElement.value).to.equal('');
@ -409,51 +397,17 @@ describe('<lion-field>', () => {
expect(el.inputElement.value).to.equal('one');
});
it('delegates property type', async () => {
const el = await fixture(`<${tagString} type="text">${inputSlotString}</${tagString}>`);
const inputElemTag = el.inputElement.tagName.toLowerCase();
if (inputElemTag === 'select') {
// TODO: later on we might want to support multi select ?
expect(el.inputElement.type).to.contain('select-one');
} else if (inputElemTag === 'textarea') {
expect(el.inputElement.type).to.contain('textarea');
} else {
// input or custom inputElement
expect(el.inputElement.type).to.contain('text');
el.type = 'password';
expect(el.type).to.equal('password');
expect(el.inputElement.type).to.equal('password');
}
});
it('delegates property onfocus', async () => {
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
const cbFocusHost = sinon.spy();
el.onfocus = cbFocusHost;
await triggerFocusFor(el.inputElement);
expect(cbFocusHost.callCount).to.equal(1);
});
it('delegates property onblur', async () => {
const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
const cbBlurHost = sinon.spy();
el.onblur = cbBlurHost;
await triggerFocusFor(el.inputElement);
await triggerBlurFor(el.inputElement);
expect(cbBlurHost.callCount).to.equal(1);
});
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)}</${tag}>
`);
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);
});
});
});

56
packages/fieldset/src/LionFieldset.js
View file

@ -1,6 +1,6 @@
import { SlotMixin, html } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
import { ValidateMixin } from '@lion/validate';
import { FormControlMixin, FormRegistrarMixin } from '@lion/field';
@ -15,16 +15,10 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
* @extends LionLitElement
*/
export class LionFieldset extends FormRegistrarMixin(
FormControlMixin(ValidateMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement))))),
FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(ObserverMixin(LionLitElement))))),
) {
static get properties() {
return {
...super.properties,
disabled: {
type: Boolean,
reflect: true,
nonEmptyToClass: 'state-disabled',
},
name: {
type: String,
},
@ -35,13 +29,6 @@ export class LionFieldset extends FormRegistrarMixin(
};
}
static get asyncObservers() {
return {
...super.asyncObservers,
_onDisabledChanged: ['disabled'],
};
}
get inputElement() {
return this;
}
@ -121,6 +108,36 @@ export class LionFieldset extends FormRegistrarMixin(
this.removeEventListener('dirty-changed', this._updateDirtyClass);
}
updated(changedProps) {
super.updated(changedProps);
if (changedProps.has('disabled')) {
if (this.disabled) {
this.__requestChildrenToBeDisabled();
this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
} else {
this.__retractRequestChildrenToBeDisabled();
this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
}
}
}
__requestChildrenToBeDisabled() {
this.formElementsArray.forEach(child => {
if (child.makeRequestToBeDisabled) {
child.makeRequestToBeDisabled();
}
});
}
__retractRequestChildrenToBeDisabled() {
this.formElementsArray.forEach(child => {
if (child.retractRequestToBeDisabled) {
child.retractRequestToBeDisabled();
}
});
}
// eslint-disable-next-line class-methods-use-this
inputGroupTemplate() {
return html`
@ -251,13 +268,6 @@ export class LionFieldset extends FormRegistrarMixin(
this.classList[this.dirty ? 'add' : 'remove']('state-dirty');
}
_onDisabledChanged({ disabled }, { disabled: oldDisabled }) {
// do not propagate/override inital disabled value on nested form elements
if (typeof oldDisabled !== 'undefined') {
this._setValueForAllFormElements('disabled', disabled);
}
}
_setRole(role) {
this.setAttribute('role', role || 'group');
}
@ -303,7 +313,7 @@ export class LionFieldset extends FormRegistrarMixin(
if (this.disabled) {
// eslint-disable-next-line no-param-reassign
child.disabled = true;
child.makeRequestToBeDisabled();
}
if (name.substr(-2) === '[]') {
if (!Array.isArray(this.formElements[name])) {

24
packages/fieldset/stories/index.stories.js
View file

@ -31,6 +31,30 @@ storiesOf('Forms|Fieldset', module)
</lion-fieldset>
`,
)
.add('Disabled', () => {
function toggleDisabled() {
const fieldset = document.querySelector('#fieldset');
fieldset.disabled = !fieldset.disabled;
}
return html`
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-fieldset name="nameGroup2" label="Name">
<lion-input
name="FirstName2"
label="First Name"
.modelValue=${'Foo'}
disabled
></lion-input>
<lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset>
</lion-fieldset>
<button @click=${toggleDisabled}>
Toggle disabled
</button>
`;
})
.add(
'Sub Fieldsets Data',
() => html`

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

@ -223,12 +223,11 @@ describe('<lion-fieldset>', () => {
expect(el.formElements['hobbies[]'][1].disabled).to.equal(false);
});
it('does not propagate/override inital disabled value on nested form elements', async () => {
it('does not propagate/override initial disabled value on nested form elements', async () => {
const el = await fixture(
`<${tagString}><${tagString} name="sub" disabled>${inputSlotString}</${tagString}></${tagString}>`,
);
await nextFrame();
await el.updateComplete;
expect(el.disabled).to.equal(false);
expect(el.formElements.sub.disabled).to.equal(true);
expect(el.formElements.sub.formElements.color.disabled).to.equal(true);
@ -236,6 +235,16 @@ describe('<lion-fieldset>', () => {
expect(el.formElements.sub.formElements['hobbies[]'][1].disabled).to.equal(true);
});
// classes are added only for backward compatibility - they are deprecated
it('sets a state-disabled class when disabled', async () => {
const el = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
await nextFrame();
expect(el.classList.contains('state-disabled')).to.equal(true);
el.disabled = false;
await nextFrame();
expect(el.classList.contains('state-disabled')).to.equal(false);
});
describe('validation', () => {
it('validates on init', async () => {
function isCat(value) {
@ -715,7 +724,7 @@ describe('<lion-fieldset>', () => {
childAriaFixture = async (
msgSlotType = 'feedback', // eslint-disable-line no-shadow
) => {
const dom = fixture(`
const dom = await fixture(`
<lion-fieldset name="l1_g">
<lion-input name="l1_fa">
<div slot="${msgSlotType}" id="msg_l1_fa"></div>
@ -750,14 +759,12 @@ describe('<lion-fieldset>', () => {
<!-- group referred by: #msg_l1_g (local) -->
</lion-fieldset>
`);
await nextFrame();
return dom;
};
// eslint-disable-next-line no-shadow
childAriaTest = childAriaFixture => {
/* eslint-disable camelcase */
// Message elements: all elements pointed at by inputs
const msg_l1_g = childAriaFixture.querySelector('#msg_l1_g');
const msg_l1_fa = childAriaFixture.querySelector('#msg_l1_fa');
@ -767,10 +774,10 @@ describe('<lion-fieldset>', () => {
const msg_l2_fb = childAriaFixture.querySelector('#msg_l2_fb');
// Field elements: all inputs pointing to message elements
const input_l1_fa = childAriaFixture.querySelector('[name=l1_fa]');
const input_l1_fb = childAriaFixture.querySelector('[name=l1_fb]');
const input_l2_fa = childAriaFixture.querySelector('[name=l2_fa]');
const input_l2_fb = childAriaFixture.querySelector('[name=l2_fb]');
const input_l1_fa = childAriaFixture.querySelector('input[name=l1_fa]');
const input_l1_fb = childAriaFixture.querySelector('input[name=l1_fb]');
const input_l2_fa = childAriaFixture.querySelector('input[name=l2_fa]');
const input_l2_fb = childAriaFixture.querySelector('input[name=l2_fb]');
/* eslint-enable camelcase */

65
packages/form/src/LionForm.js
View file

@ -1,4 +1,3 @@
import { DelegateMixin } from '@lion/core';
import { LionFieldset } from '@lion/fieldset';
/**
@ -8,50 +7,58 @@ import { LionFieldset } from '@lion/fieldset';
* @extends LionFieldset
*/
// eslint-disable-next-line no-unused-vars
export class LionForm extends DelegateMixin(LionFieldset) {
get delegations() {
return {
...super.delegations,
target: () => this.formElement,
events: [...super.delegations.events, 'submit', 'reset'],
methods: [...super.delegations.methods, 'submit', 'reset'],
};
}
constructor() {
super();
this.__boundSubmit = this._submit.bind(this);
this.__boundReset = this._reset.bind(this);
}
export class LionForm extends LionFieldset {
connectedCallback() {
super.connectedCallback();
this.addEventListener('submit', this.__boundSubmit);
this.addEventListener('reset', this.__boundReset);
if (super.connectedCallback) {
super.connectedCallback();
}
this.__registerEventsForLionForm();
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('submit', this.__boundSubmit);
this.removeEventListener('reset', this.__boundReset);
if (super.disconnectedCallback) {
super.disconnectedCallback();
}
this.__teardownEventsForLionForm();
}
get formElement() {
return this.querySelector('form');
}
submit() {
this.formElement.submit();
}
reset() {
this.formElement.reset();
}
/**
* As we use a native form there is no need for a role
*/
_setRole() {} // eslint-disable-line class-methods-use-this
_submit(ev) {
ev.preventDefault();
this.submitGroup();
__registerEventsForLionForm() {
this._submit = ev => {
ev.preventDefault();
ev.stopPropagation();
this.dispatchEvent(new Event('submit', { bubbles: true }));
this.submitGroup();
};
this.formElement.addEventListener('submit', this._submit);
this._reset = ev => {
ev.preventDefault();
ev.stopPropagation();
this.dispatchEvent(new Event('reset', { bubbles: true }));
this.resetGroup();
};
this.formElement.addEventListener('reset', this._reset);
}
_reset(ev) {
ev.preventDefault();
this.resetGroup();
__teardownEventsForLionForm() {
this.formElement.removeEventListener('submit', this._submit);
this.formElement.removeEventListener('rest', this._reset);
}
}

40
packages/form/test/lion-form.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { spy } from 'sinon';
import '@lion/input/lion-input.js';
@ -7,7 +7,7 @@ import '@lion/fieldset/lion-fieldset.js';
import '../lion-form.js';
describe('<lion-form>', () => {
it.skip('has a custom reset that gets triggered by native reset', async () => {
it('has a custom reset that gets triggered by native reset', async () => {
const withDefaults = await fixture(html`
<lion-form
><form>
@ -39,6 +39,24 @@ describe('<lion-form>', () => {
});
});
it('dispatches reset events', async () => {
const el = await fixture(html`
<lion-form>
<form>
<lion-input name="firstName" .modelValue="${'Foo'}"></lion-input>
</form>
</lion-form>
`);
setTimeout(() => el.reset());
const resetEv = await oneEvent(el, 'reset');
expect(resetEv).to.be.instanceOf(Event);
expect(resetEv.type).to.equal('reset');
expect(resetEv.target).to.equal(el);
expect(resetEv.bubbles).to.be.true;
expect(resetEv.composed).to.be.false;
});
it('works with the native submit event (triggered via a button)', async () => {
const submitSpy = spy();
const el = await fixture(html`
@ -53,4 +71,22 @@ describe('<lion-form>', () => {
button.click();
expect(submitSpy.callCount).to.equal(1);
});
it('dispatches submit events', async () => {
const el = await fixture(html`
<lion-form>
<form>
<button type="submit">submit</button>
</form>
</lion-form>
`);
const button = el.querySelector('button');
setTimeout(() => button.click());
const submitEv = await oneEvent(el, 'submit');
expect(submitEv).to.be.instanceOf(Event);
expect(submitEv.type).to.equal('submit');
expect(submitEv.target).to.equal(el);
expect(submitEv.bubbles).to.be.true;
expect(submitEv.composed).to.be.false;
});
});

1
packages/input-amount/src/LionInputAmount.js
View file

@ -16,7 +16,6 @@ import { formatAmount } from './formatters.js';
export class LionInputAmount extends FieldCustomMixin(LocalizeMixin(ObserverMixin(LionInput))) {
static get properties() {
return {
...super.properties,
currency: {
type: String,
},

18
packages/input-amount/test/lion-input-amount-integrations.test.js Normal file
View file

@ -0,0 +1,18 @@
import { runInteractionStateMixinSuite } from '@lion/field/test-suites/InteractionStateMixin.suite.js';
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input-amount.js';
const tagString = 'lion-input-amount';
describe('<lion-input-amount> integrations', () => {
runInteractionStateMixinSuite({
tagString,
suffix: 'lion-input-amount',
allowedModelValueTypes: [Number],
});
runFormatMixinSuite({
tagString,
modelValueType: Number,
});
});

12
packages/input-date/test/lion-input-date-integrations.test.js
View file

@ -1,10 +1,18 @@
import { runInteractionStateMixinSuite } from '@lion/field/test-suites/InteractionStateMixin.suite.js';
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input-date.js';
const tagString = 'lion-input-date';
describe('<lion-input-date> integrations', () => {
runInteractionStateMixinSuite({
tagString: 'lion-input-date',
suffix: 'lion-input-date',
tagString,
suffix: tagString,
allowedModelValueTypes: [Date],
});
runFormatMixinSuite({
tagString,
modelValueType: Date,
});
});

1
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -12,7 +12,6 @@ import './lion-calendar-overlay-frame.js';
export class LionInputDatepicker extends LionInputDate {
static get properties() {
return {
...super.properties,
/**
* The heading to be added on top of the calendar overlay.
* Naming chosen from an Application Developer perspective.

11
packages/input-datepicker/test/lion-input-datepicker-integrations.test.js
View file

@ -1,10 +1,17 @@
import { runInteractionStateMixinSuite } from '@lion/field/test-suites/InteractionStateMixin.suite.js';
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input-datepicker.js';
const tagString = 'lion-input-datepicker';
describe('<lion-input-datepicker> integrations', () => {
runInteractionStateMixinSuite({
tagString: 'lion-input-datepicker',
suffix: 'lion-input-datepicker',
tagString,
suffix: tagString,
allowedModelValueTypes: [Date],
});
runFormatMixinSuite({
tagString,
modelValueType: Date,
});
});

11
packages/input-email/test/lion-input-email-integrations.test.js Normal file
View file

@ -0,0 +1,11 @@
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input-email.js';
const tagString = 'lion-input-email';
describe('<lion-input-email> integrations', () => {
runFormatMixinSuite({
tagString,
modelValueType: 'email',
});
});

2
packages/input-iban/src/formatters.js
View file

@ -8,7 +8,7 @@ import { friendlyFormatIBAN } from '@bundled-es-modules/ibantools';
*/
export function formatIBAN(modelValue) {
// defensive code because of ibantools
if (modelValue === '') {
if (!modelValue) {
return '';
}
return friendlyFormatIBAN(modelValue);

4
packages/input-iban/src/validators.js
View file

@ -1,6 +1,8 @@
import { isValidIBAN } from '@bundled-es-modules/ibantools/ibantools.js';
export const isIBAN = value => isValidIBAN(value);
export const isIBAN = value => {
return isValidIBAN(value);
};
export const isIBANValidator = () => [(...params) => ({ isIBAN: isIBAN(...params) })];

11
packages/input-iban/test/lion-input-iban-integrations.test.js Normal file
View file

@ -0,0 +1,11 @@
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input-iban.js';
const tagString = 'lion-input-iban';
describe('<lion-input-iban> integrations', () => {
runFormatMixinSuite({
tagString,
modelValueType: 'iban',
});
});

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

@ -9,7 +9,6 @@ import { LionField } from '@lion/field';
export class LionInput extends LionField {
static get properties() {
return {
...super.properties,
/**
* A Boolean attribute which, if present, indicates that the user should not be able to edit
* the value of the input. The difference between disabled and readonly is that read-only
@ -22,14 +21,14 @@ export class LionInput extends LionField {
type: Boolean,
attribute: 'readonly',
},
};
}
get delegations() {
return {
...super.delegations,
properties: [...super.delegations.properties, 'step'],
attributes: [...super.delegations.attributes, 'step'],
type: {
type: String,
reflect: true,
},
step: {
type: Number,
reflect: true,
},
};
}
@ -48,6 +47,18 @@ export class LionInput extends LionField {
};
}
constructor() {
super();
this.readOnly = false;
this.type = 'text';
/**
* Only application to type="amount" & type="range"
*
* @deprecated
*/
this.step = undefined;
}
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'readOnly') {
@ -60,6 +71,16 @@ export class LionInput extends LionField {
this.__delegateReadOnly();
}
updated(changedProps) {
super.updated(changedProps);
if (changedProps.has('type')) {
this.inputElement.type = this.type;
}
if (changedProps.has('step')) {
this.inputElement.step = this.step;
}
}
__delegateReadOnly() {
if (this.inputElement) {
this.inputElement.readOnly = this.readOnly;

9
packages/input/test/lion-input-integrations.test.js
View file

@ -1,9 +1,16 @@
import { runInteractionStateMixinSuite } from '@lion/field/test-suites/InteractionStateMixin.suite.js';
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-input.js';
const tagString = 'lion-input';
describe('<lion-input> integrations', () => {
runInteractionStateMixinSuite({
tagString: 'lion-input',
tagString,
suffix: 'lion-input',
});
runFormatMixinSuite({
tagString,
});
});

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

@ -26,4 +26,16 @@ describe('<lion-input>', () => {
const el = await fixture(`<lion-input></lion-input>`);
expect(el.querySelector('input')).to.equal(el.inputElement);
});
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>`);
expect(el.type).to.equal('text');
expect(el.getAttribute('type')).to.equal('text');
expect(el.inputElement.getAttribute('type')).to.equal('text');
el.type = 'foo';
await el.updateComplete;
expect(el.getAttribute('type')).to.equal('foo');
expect(el.inputElement.getAttribute('type')).to.equal('foo');
});
});

1
packages/select-rich/src/LionSelectRich.js
View file

@ -30,7 +30,6 @@ export class LionSelectRich extends FormRegistrarMixin(
) {
static get properties() {
return {
...super.properties,
checkedValue: {
type: Object,
},

2
packages/textarea/package.json
View file

@ -33,7 +33,7 @@
],
"dependencies": {
"@lion/core": "^0.1.13",
"@lion/input": "^0.1.44",
"@lion/field": "^0.1.42",
"autosize": "4.0.2"
},
"devDependencies": {

45
packages/textarea/src/LionTextarea.js
View file

@ -1,7 +1,6 @@
import autosize from 'autosize/src/autosize.js';
import { LionInput } from '@lion/input';
import { LionField } from '@lion/field';
import { css } from '@lion/core';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
/**
* LionTextarea: extension of lion-field with native input element in place and user friendly API
@ -9,31 +8,17 @@ import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
* @customElement
* @extends LionInput
*/
export class LionTextarea extends ObserverMixin(LionInput) {
export class LionTextarea extends LionField {
static get properties() {
return {
...super.properties,
maxRows: {
type: Number,
attribute: 'max-rows',
},
};
}
get delegations() {
return {
...super.delegations,
target: () => this.inputElement,
properties: [...super.delegations.properties, 'rows'],
attributes: [...super.delegations.attributes, 'rows'],
};
}
static get asyncObservers() {
return {
...super.asyncObservers,
resizeTextarea: ['maxRows', 'modelValue'],
setTextareaMaxHeight: ['maxRows', 'rows'],
rows: {
type: Number,
reflect: true,
},
};
}
@ -69,6 +54,24 @@ export class LionTextarea extends ObserverMixin(LionInput) {
autosize.destroy(this.inputElement);
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('rows')) {
const native = this.inputElement;
if (native) {
native.rows = this.rows;
}
}
if (changedProperties.has('modelValue')) {
this.resizeTextarea();
}
if (changedProperties.has('maxRows') || changedProperties.has('rows')) {
this.setTextareaMaxHeight();
}
}
/**
* To support maxRows we need to set max-height of the textarea
*/

10
packages/textarea/test/lion-input-iban-integrations.test.js Normal file
View file

@ -0,0 +1,10 @@
import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.js';
import '../lion-textarea.js';
const tagString = 'lion-textarea';
describe('<lion-textarea> integrations', () => {
runFormatMixinSuite({
tagString,
});
});

27
packages/textarea/test/lion-textarea.test.js
View file

@ -16,12 +16,28 @@ describe('<lion-textarea>', () => {
expect(el.querySelector('textarea').nodeName).to.equal('TEXTAREA');
});
it('has default minRows and maxRows', async () => {
it('has .rows=2 and .maxRows=6', async () => {
const el = await fixture(`<lion-textarea></lion-textarea>`);
expect(el.rows).to.equal(2);
expect(el.maxRows).to.equal(6);
});
it('has .rows=2 and rows="2" by default', async () => {
const el = await fixture(`<lion-textarea>foo</lion-textarea>`);
expect(el.rows).to.equal(2);
expect(el.getAttribute('rows')).to.be.equal('2');
expect(el.inputElement.rows).to.equal(2);
expect(el.inputElement.getAttribute('rows')).to.be.equal('2');
});
it('sync rows down to the native textarea', async () => {
const el = await fixture(`<lion-textarea rows="8">foo</lion-textarea>`);
expect(el.rows).to.equal(8);
expect(el.getAttribute('rows')).to.be.equal('8');
expect(el.inputElement.rows).to.equal(8);
expect(el.inputElement.getAttribute('rows')).to.be.equal('8');
});
it('disables user resize behavior', async () => {
if (!hasBrowserResizeSupport()) {
return;
@ -102,12 +118,9 @@ describe('<lion-textarea>', () => {
});
it('stops shrinking after property "rows" is reached', async () => {
const el = await fixture(
html`
<lion-textarea rows="1" max-rows="3"></lion-textarea>
`,
);
const el = await fixture(html`
<lion-textarea rows="1" max-rows="3"></lion-textarea>
`);
expect(el.scrollHeight).to.be.equal(el.clientHeight);
const oneRowHeight = el.clientHeight;

1
packages/validate/src/ValidateMixin.js
View file

@ -110,7 +110,6 @@ export const ValidateMixin = dedupeMixin(
static get properties() {
return {
...super.properties,
/**
* List of validators that should set the input to invalid
*/

6
packages/validate/test/ValidateMixin.test.js
View file

@ -19,7 +19,6 @@ const tagString = defineCE(
class extends ValidateMixin(LionLitElement) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},
@ -658,7 +657,6 @@ describe('ValidateMixin', () => {
class extends ValidateMixin(LionLitElement) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},
@ -782,7 +780,6 @@ describe('ValidateMixin', () => {
class extends ValidateMixin(LionLitElement) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},
@ -934,7 +931,6 @@ describe('ValidateMixin', () => {
class extends ValidateMixin(LionLitElement) {
static get properties() {
return {
...super.properties,
modelValue: {
type: String,
},
@ -1220,7 +1216,7 @@ describe('ValidateMixin', () => {
const orderName = defineCE(
class extends ValidateMixin(LionLitElement) {
static get properties() {
return { ...super.properties, modelValue: { type: String } };
return { modelValue: { type: String } };
}
static get localizeNamespaces() {

3042
yarn.lock
View file

File diff suppressed because it is too large Load diff