525 lines
20 KiB
JavaScript
525 lines
20 KiB
JavaScript
import { LitElement } from '@lion/core';
|
|
import { parseDate } from '@lion/localize';
|
|
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import { FormatMixin } from '../src/FormatMixin.js';
|
|
import { Unparseable, Validator } from '../index.js';
|
|
|
|
/**
|
|
* @typedef {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
|
|
*/
|
|
|
|
class FormatClass extends FormatMixin(LitElement) {
|
|
get _inputNode() {
|
|
return /** @type {HTMLInputElement} */ (super._inputNode); // casts type
|
|
}
|
|
|
|
render() {
|
|
return html`<slot name="input"></slot>`;
|
|
}
|
|
|
|
set value(newValue) {
|
|
if (this._inputNode) {
|
|
this._inputNode.value = newValue;
|
|
}
|
|
}
|
|
|
|
get value() {
|
|
if (this._inputNode) {
|
|
return this._inputNode.value;
|
|
}
|
|
return '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {FormatClass} formControl
|
|
* @param {?} newViewValue
|
|
* @param {{caretIndex?:number}} config
|
|
*/
|
|
function mimicUserInput(formControl, newViewValue, { caretIndex } = {}) {
|
|
formControl.value = newViewValue; // eslint-disable-line no-param-reassign
|
|
if (caretIndex) {
|
|
// eslint-disable-next-line no-param-reassign
|
|
formControl._inputNode.selectionStart = caretIndex;
|
|
// eslint-disable-next-line no-param-reassign
|
|
formControl._inputNode.selectionEnd = caretIndex;
|
|
}
|
|
formControl._inputNode.dispatchEvent(new Event('input', { bubbles: true }));
|
|
}
|
|
|
|
/**
|
|
* @param {{tagString?: string, modelValueType?: modelValueType}} [customConfig]
|
|
*/
|
|
export function runFormatMixinSuite(customConfig) {
|
|
const cfg = {
|
|
tagString: null,
|
|
childTagString: null,
|
|
...customConfig,
|
|
};
|
|
|
|
/**
|
|
* Mocks a value for you based on the data type
|
|
* Optionally toggles you a different value
|
|
* for needing to mimic a value-change.
|
|
*/
|
|
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 ? parseDate('5-5-2005') : parseDate('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', async () => {
|
|
/** @type {{d: any}} */
|
|
let tag;
|
|
/** @type {FormatClass} */
|
|
let nonFormat;
|
|
/** @type {FormatClass} */
|
|
let fooFormat;
|
|
|
|
before(async () => {
|
|
if (!cfg.tagString) {
|
|
cfg.tagString = defineCE(FormatClass);
|
|
}
|
|
tag = unsafeStatic(cfg.tagString);
|
|
|
|
nonFormat = await fixture(html`
|
|
<${tag}
|
|
.formatter="${/** @param {?} v */ v => v}"
|
|
.parser="${/** @param {string} v */ v => v}"
|
|
.serializer="${/** @param {?} v */ v => v}"
|
|
.deserializer="${/** @param {string} v */ v => v}"
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`);
|
|
|
|
fooFormat = await fixture(html`
|
|
<${tag}
|
|
.formatter="${/** @param {string} value */ value => `foo: ${value}`}"
|
|
.parser="${/** @param {string} value */ value => value.replace('foo: ', '')}"
|
|
.serializer="${/** @param {string} value */ value => `[foo] ${value}`}"
|
|
.deserializer="${/** @param {string} value */ value => value.replace('[foo] ', '')}"
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`);
|
|
});
|
|
|
|
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');
|
|
});
|
|
|
|
/**
|
|
* Reminder: modelValue is the SSOT all other values are derived from
|
|
* (and should be translated to)
|
|
*/
|
|
describe('ModelValue', () => {
|
|
it('fires `model-value-changed` for every programmatic modelValue change', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(
|
|
html`<${tag}><input slot="input"></${tag}>`,
|
|
));
|
|
let counter = 0;
|
|
let isTriggeredByUser = false;
|
|
|
|
el.addEventListener('model-value-changed', event => {
|
|
counter += 1;
|
|
isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
|
|
});
|
|
|
|
el.modelValue = 'one';
|
|
expect(counter).to.equal(1);
|
|
expect(isTriggeredByUser).to.be.false;
|
|
|
|
// no change means no event
|
|
el.modelValue = 'one';
|
|
expect(counter).to.equal(1);
|
|
|
|
el.modelValue = 'two';
|
|
expect(counter).to.equal(2);
|
|
});
|
|
|
|
it('fires `model-value-changed` for every user input, adding `isTriggeredByUser` in event detail', async () => {
|
|
const formatEl = /** @type {FormatClass} */ (await fixture(
|
|
html`<${tag}><input slot="input"></${tag}>`,
|
|
));
|
|
|
|
let counter = 0;
|
|
let isTriggeredByUser = false;
|
|
formatEl.addEventListener('model-value-changed', (
|
|
/** @param {CustomEvent} event */ event,
|
|
) => {
|
|
counter += 1;
|
|
isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
|
|
});
|
|
|
|
mimicUserInput(formatEl, generateValueBasedOnType());
|
|
expect(counter).to.equal(1);
|
|
expect(isTriggeredByUser).to.be.true;
|
|
|
|
// 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('synchronizes _inputNode.value as a fallback mechanism on init (when no modelValue provided)', async () => {
|
|
// Note that in lion-field, the attribute would be put on <lion-field>, not on <input>
|
|
const formatElem = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag}
|
|
value="string"
|
|
.formatter=${/** @param {string} value */ value => `foo: ${value}`}
|
|
.parser=${/** @param {string} value */ value => value.replace('foo: ', '')}
|
|
.serializer=${/** @param {string} value */ value => `[foo] ${value}`}
|
|
.deserializer=${/** @param {string} value */ value => value.replace('[foo] ', '')}
|
|
>
|
|
<input slot="input" value="string" />
|
|
</${tag}>
|
|
`));
|
|
// Now check if the format/parse/serialize loop has been triggered
|
|
await formatElem.updateComplete;
|
|
expect(formatElem.formattedValue).to.equal('foo: string');
|
|
|
|
expect(formatElem._inputNode.value).to.equal('foo: string');
|
|
|
|
expect(formatElem.serializedValue).to.equal('[foo] string');
|
|
expect(formatElem.modelValue).to.equal('string');
|
|
});
|
|
|
|
describe('Unparseable values', () => {
|
|
it('converts to Unparseable when wrong value inputted by user', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .parser=${
|
|
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
|
|
}
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
mimicUserInput(el, 'test');
|
|
expect(el.modelValue).to.be.an.instanceof(Unparseable);
|
|
});
|
|
|
|
it('preserves the viewValue when unparseable', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag}
|
|
.parser=${
|
|
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
|
|
}
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
mimicUserInput(el, 'test');
|
|
expect(el.formattedValue).to.equal('test');
|
|
expect(el.value).to.equal('test');
|
|
});
|
|
|
|
it('displays the viewValue when modelValue is of type Unparseable', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag}
|
|
.parser=${
|
|
/** @param {string} viewValue */ viewValue => Number(viewValue) || undefined
|
|
}
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
el.modelValue = new Unparseable('foo');
|
|
expect(el.value).to.equal('foo');
|
|
});
|
|
|
|
it('empty strings are not Unparseable', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag}>
|
|
<input slot="input" value="string">
|
|
</${tag}>
|
|
`));
|
|
// 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('');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('View value', () => {
|
|
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._inputNode.value).to.equal('foo: string');
|
|
});
|
|
|
|
it('works if there is no underlying _inputNode', async () => {
|
|
const tagNoInputString = defineCE(class extends FormatMixin(LitElement) {});
|
|
const tagNoInput = unsafeStatic(tagNoInputString);
|
|
expect(async () => {
|
|
/** @type {FormatClass} */ (await fixture(html`<${tagNoInput}></${tagNoInput}>`));
|
|
}).to.not.throw();
|
|
});
|
|
|
|
describe('Presenting value to end user', () => {
|
|
it('reflects back formatted value to user on leave', async () => {
|
|
const formatEl = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
|
|
<input slot="input" />
|
|
</${tag}>
|
|
`));
|
|
|
|
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
|
|
const generatedModelValue = generateValueBasedOnType();
|
|
mimicUserInput(formatEl, generatedViewValue);
|
|
expect(formatEl._inputNode.value).to.not.equal(`foo: ${generatedModelValue}`);
|
|
|
|
// user leaves field
|
|
formatEl._inputNode.dispatchEvent(new CustomEvent(formatEl.formatOn, { bubbles: true }));
|
|
await aTimeout(0);
|
|
expect(formatEl._inputNode.value).to.equal(`foo: ${generatedModelValue}`);
|
|
});
|
|
|
|
it('reflects back .formattedValue immediately when .modelValue changed imperatively', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .formatter="${/** @param {string} value */ value => `foo: ${value}`}">
|
|
<input slot="input" />
|
|
</${tag}>
|
|
`));
|
|
// The FormatMixin can be used in conjunction with the ValidateMixin, in which case
|
|
// it can hold errorState (affecting the formatting)
|
|
el.hasFeedbackFor = ['error'];
|
|
|
|
// users types value 'test'
|
|
mimicUserInput(el, 'test');
|
|
expect(el._inputNode.value).to.not.equal('foo: test');
|
|
|
|
// Now see the difference for an imperative change
|
|
el.modelValue = 'test2';
|
|
expect(el._inputNode.value).to.equal('foo: test2');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Parser / formatter / serializer / preprocessor', () => {
|
|
it('calls the parser|formatter|serializer|preprocessor 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 preprocessorSpy = sinon.spy(value => value.replace('bar', ''));
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag}
|
|
.formatter=${formatterSpy}
|
|
.parser=${parserSpy}
|
|
.serializer=${serializerSpy}
|
|
.preprocessor=${preprocessorSpy}
|
|
.modelValue=${'test'}
|
|
>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
expect(formatterSpy.called).to.be.true;
|
|
expect(serializerSpy.called).to.be.true;
|
|
|
|
el.formattedValue = 'raw';
|
|
expect(parserSpy.called).to.be.true;
|
|
el.dispatchEvent(new CustomEvent('user-input-changed'));
|
|
expect(preprocessorSpy.called).to.be.true;
|
|
});
|
|
|
|
describe('Value conversions', () => {
|
|
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');
|
|
});
|
|
});
|
|
|
|
describe('Formatter', () => {
|
|
it('only calls the formatter for valid values on `user-input-changed` ', async () => {
|
|
const formatterSpy = sinon.spy(value => `foo: ${value}`);
|
|
|
|
const generatedModelValue = generateValueBasedOnType();
|
|
/** @type {?} */
|
|
const generatedViewValue = generateValueBasedOnType({ viewValue: true });
|
|
/** @type {?} */
|
|
const generatedViewValueAlt = generateValueBasedOnType({
|
|
viewValue: true,
|
|
toggleValue: true,
|
|
});
|
|
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .formatter=${formatterSpy}>
|
|
<input slot="input" .value="${generatedViewValue}">
|
|
</${tag}>
|
|
`));
|
|
expect(formatterSpy.callCount).to.equal(1);
|
|
|
|
el.hasFeedbackFor.push('error');
|
|
// Ensure hasError is always true by putting a validator on it that always returns false.
|
|
// Setting hasError = true is not enough if the element has errorValidators (uses ValidateMixin)
|
|
// that set hasError back to false when the user input is mimicked.
|
|
|
|
const AlwaysInvalid = class extends Validator {
|
|
static get validatorName() {
|
|
return 'AlwaysInvalid';
|
|
}
|
|
|
|
execute() {
|
|
return true;
|
|
}
|
|
};
|
|
|
|
el.validators = [new AlwaysInvalid()];
|
|
mimicUserInput(el, generatedViewValueAlt);
|
|
|
|
expect(formatterSpy.callCount).to.equal(1);
|
|
// Due to hasError, the formatter should not have ran.
|
|
expect(el.formattedValue).to.equal(generatedViewValueAlt);
|
|
|
|
el.hasFeedbackFor.filter(/** @param {string} type */ type => type !== 'error');
|
|
el.validators = [];
|
|
mimicUserInput(el, generatedViewValue);
|
|
expect(formatterSpy.callCount).to.equal(2);
|
|
|
|
expect(el.formattedValue).to.equal(`foo: ${generatedModelValue}`);
|
|
});
|
|
|
|
it('has formatOptions available in formatter', async () => {
|
|
const formatterSpy = sinon.spy(value => `foo: ${value}`);
|
|
const generatedViewValue = /** @type {string} */ (generateValueBasedOnType({
|
|
viewValue: true,
|
|
}));
|
|
await fixture(html`
|
|
<${tag} value="${generatedViewValue}" .formatter="${formatterSpy}"
|
|
.formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
|
|
<input slot="input" .value="${generatedViewValue}">
|
|
</${tag}>
|
|
`);
|
|
|
|
/** @type {{locale: string, decimalSeparator: string}[]} */
|
|
const spyItem = formatterSpy.args[0];
|
|
const spyArg = spyItem[1];
|
|
expect(spyArg.locale).to.equal('en-GB');
|
|
expect(spyArg.decimalSeparator).to.equal('-');
|
|
});
|
|
});
|
|
|
|
describe('Parser', () => {
|
|
it('only calls the parser for defined values', async () => {
|
|
/** @type {?} */
|
|
const generatedValue = generateValueBasedOnType();
|
|
const parserSpy = sinon.spy();
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .parser="${parserSpy}">
|
|
<input slot="input" .value="${generatedValue}">
|
|
</${tag}>
|
|
`));
|
|
|
|
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);
|
|
});
|
|
});
|
|
|
|
describe('Preprocessor', () => {
|
|
it('changes `.value` on keyup, before passing on to parser', async () => {
|
|
const val = generateValueBasedOnType({ viewValue: true }) || 'init-value';
|
|
if (typeof val !== 'string') {
|
|
return;
|
|
}
|
|
|
|
const toBeCorrectedVal = `${val}$`;
|
|
const preprocessorSpy = sinon.spy(v => v.replace(/\$$/g, ''));
|
|
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .preprocessor=${preprocessorSpy}>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
|
|
expect(preprocessorSpy.callCount).to.equal(1);
|
|
|
|
const parserSpy = sinon.spy(el, 'parser');
|
|
mimicUserInput(el, toBeCorrectedVal);
|
|
|
|
expect(preprocessorSpy.callCount).to.equal(2);
|
|
expect(parserSpy.lastCall.args[0]).to.equal(val);
|
|
expect(el._inputNode.value).to.equal(val);
|
|
});
|
|
|
|
it('does not preprocess during composition', async () => {
|
|
const el = /** @type {FormatClass} */ (await fixture(html`
|
|
<${tag} .preprocessor=${(/** @type {string} */ v) => v.replace(/\$$/g, '')}>
|
|
<input slot="input">
|
|
</${tag}>
|
|
`));
|
|
const preprocessorSpy = sinon.spy(el, 'preprocessor');
|
|
el._inputNode.dispatchEvent(new Event('compositionstart', { bubbles: true }));
|
|
mimicUserInput(el, '`');
|
|
expect(preprocessorSpy.callCount).to.equal(0);
|
|
// "à" would be sent by the browser after pressing "option + `", followed by "a"
|
|
mimicUserInput(el, 'à');
|
|
el._inputNode.dispatchEvent(new Event('compositionend', { bubbles: true }));
|
|
expect(preprocessorSpy.callCount).to.equal(1);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|