@fooloomanzoo/property-mixins
Version:
mixin for custom elements to extends property mixins for data formats
335 lines (295 loc) • 15.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>intl-number-format-mixin test</title>
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../wct-browser-legacy/browser.js"></script>
<script src="../../../@polymer/iron-test-helpers/test-helpers.js" type="module"></script>
<script type="module" src="../demo/elements/basic-intl-number-format-element.js"></script>
</head>
<body>
<test-fixture id="basic">
<template>
<basic-intl-number-format-element></basic-intl-number-format-element>
</template>
</test-fixture>
<test-fixture id="currency">
<template>
<basic-intl-number-format-element number-style="currency" currency="EUR"></basic-intl-number-format-element>
</template>
</test-fixture>
<test-fixture id="units">
<template>
<basic-intl-number-format-element unit="°"></basic-intl-number-format-element>
</template>
</test-fixture>
<script type="module">
import { Base } from '@polymer/polymer/polymer-legacy.js';
import { isNegative0 } from '../number-utilities.js';
import { getParams, mixinSuite } from '@fooloomanzoo/input-picker-pattern/utils/wct-mixin-test-helper.js';
const params = getParams();
mixinSuite(['basic-intl-number-format-element']);
suite('basic', () => {
let element;
setup(function() {
element = fixture('basic');
});
test('default properties', done => {
assert.isDefined(element.locale, 'locale is defined');
assert.isDefined(element.decimalSeparator, 'decimalSeparator is defined');
assert.isDefined(element.groupingSeparator, 'groupingSeparator is defined');
assert.isDefined(element._numberOptions, 'numberOptions is defined');
assert.isFunction(element.formatNumber, 'timeSeparator is a function');
assert.isFunction(element.parseNumber, 'parseNumber is a function');
done();
});
test('format number', done => {
assert.isDefined(element.locale, 'locale is defined');
assert.isDefined(element.decimalSeparator, 'decimalSeparator is defined');
assert.isDefined(element.groupingSeparator, 'groupingSeparator is defined');
assert.isFunction(element.formatNumber, 'timeSeparator is a function');
assert.isFunction(element.parseNumber, 'parseNumber is a function');
done();
});
test('keep negative zero', done => {
assert.equal(element.formatNumber(-0), '-0', 'format negative zero');
assert.isTrue(isNegative0(element.parseNumber('-0')), 'parse negative zero');
element.setProperties({minimumIntegerDigits: 4}, true);
assert.equal(element.formatNumber(-0), '-0000', 'format negative zero');
element.setProperties({unit: '°', unitSeparator: ' '}, true);
assert.equal(element.formatNumber(-0), '-0000 °', 'format negative zero');
element.setProperties({minimumIntegerDigits: 0}, true);
assert.equal(element.formatNumber(-0), '-0 °', 'format negative zero');
done();
});
test('minimumFractionDigits', done => {
element.setProperties({locale: 'en', minimumFractionDigits: 4}, true);
assert.equal(element._numberOptions.minimumFractionDigits, 4);
assert.isDefined(element._numberOptions.maximumFractionDigits);
if (element._numberOptions.maximumFractionDigits > 0) {
assert.equal(element.formatNumber(123987654321.456), '123987654321.4560', 'format number');
} else {
assert.equal(element.formatNumber(123987654321.456), '123987654321', 'format number');
}
if (element._numberOptions.maximumFractionDigits > 4) {
assert.equal(element.formatNumber(0.123456), '0.123456', 'format number');
} else {
assert.equal(element.formatNumber(0.123456), '0.1235', 'format number');
}
done();
});
test('maximumFractionDigits', done => {
if (element.__numberParser !== parseInt) {
element.setProperties({locale: 'en', maximumFractionDigits: 4}, true);
if (!(!isNaN(element._numberOptions.minimumFractionDigits) && element._numberOptions.minimumFractionDigits > 4)) {
assert.equal(element._numberOptions.maximumFractionDigits, 4);
assert.equal(element.formatNumber(1.00006), '1.0001', 'format number');
assert.equal(element.formatNumber(0.1), '0.1', 'format number');
} else {
assert.equal(element._numberOptions.maximumFractionDigits, element._numberOptions.minimumFractionDigits);
}
}
done();
});
test('minimumIntegerDigits', done => {
element.setProperties({locale: 'en', minimumIntegerDigits: 4}, true);
assert.equal(element._numberOptions.minimumIntegerDigits, 4);
assert.equal(element.formatNumber(1), '0001', 'format number');
if (!isNaN(element._numberOptions.maximumFractionDigits) && element._numberOptions.maximumFractionDigits === 0) {
assert.equal(element.formatNumber(1.2), '0001', 'format number');
} else {
assert.equal(element.formatNumber(1.2), '0001.2', 'format number');
}
done();
});
test('minimumSignificantDigits', done => {
element.setProperties({locale: 'en', minimumSignificantDigits: 4}, true);
assert.equal(element._numberOptions.minimumSignificantDigits, 4);
assert.equal(element.formatNumber(123), '123.0', 'format number');
assert.equal(element.formatNumber(123.45), '123.45', 'format number');
assert.equal(element.formatNumber(1.23), '1.230', 'format number');
assert.equal(element.formatNumber(1.2345), '1.2345', 'format number');
done();
});
test('maximumSignificantDigits', done => {
element.setProperties({locale: 'en', maximumSignificantDigits: 4}, true);
assert.equal(element.formatNumber(123), '123', 'format number');
assert.equal(element.formatNumber(123.45), '123.5', 'format number');
assert.equal(element.formatNumber(0.0012345), '0.001235', 'format number');
done();
});
test('grouping (english style)', done => {
element.setProperties({locale: 'en', useGrouping: true}, true);
if (element.maximumFractionDigits === 0) {
assert.equal(element.formatNumber(1000), '1,000', 'use grouping');
assert.equal(element.parseNumber('1,000'), 1000, 'parse grouped number'+ ' ' + element.groupingSeparator);
} else {
assert.equal(element.formatNumber(1000.1), '1,000.1', 'use grouping');
assert.equal(element.parseNumber('1,000.1'), 1000.1, 'parse grouped number');
}
done();
});
test('grouping (german style)', done => {
element.setProperties({locale: 'de', useGrouping: true}, true);
if (element.maximumFractionDigits === 0) {
assert.equal(element.formatNumber(1000), '1.000', 'use grouping');
assert.equal(element.parseNumber('1.000'), 1000, 'parse grouped number');
} else {
assert.equal(element.formatNumber(1000.1), '1.000,1', 'use grouping');
assert.equal(element.parseNumber('1.000,1'), 1000.1, 'parse grouped number');
}
done();
});
test('percent', done => {
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.equal(element.formatNumber(10.01), '1001 %', 'default');
element.setProperties({useGrouping: true}, true);
assert.equal(element.formatNumber(10.01), '1.001 %', 'use grouping');
if (element.maximumFractionDigits === 0) {
assert.equal(element.parseNumber('1.000,1 %'), 10, 'parse percent with grouping');
assert.equal(element.formatNumber(10.001), '1.000 %', 'format number with grouping');
} else {
assert.equal(element.parseNumber('1.000,1 %'), 10.001, 'parse percent with grouping');
element.setProperties({minimumFractionDigits: 1, useGrouping: false}, true);
assert.equal(element.formatNumber(10.001), '1000,1 %', 'minimal fraction digits');
}
done();
});
test('parse null', done => {
assert.isNaN(element.parseNumber(null), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNaN(element.parseNumber(null), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNaN(element.parseNumber(null), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNaN(element.parseNumber(null), 'use grouping');
done();
});
test('parse undefined', done => {
assert.isNaN(element.parseNumber(undefined), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNaN(element.parseNumber(undefined), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNaN(element.parseNumber(undefined), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNaN(element.parseNumber(undefined), 'use grouping');
done();
});
test('parse empty string', done => {
assert.isNaN(element.parseNumber(''), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNaN(element.parseNumber(''), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNaN(element.parseNumber(''), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNaN(element.parseNumber(''), 'use grouping');
done();
});
test('parse false', done => {
assert.isNaN(element.parseNumber(false), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNaN(element.parseNumber(false), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNaN(element.parseNumber(false), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNaN(element.parseNumber(false), 'use grouping');
done();
});
test('parse true', done => {
assert.isNaN(element.parseNumber(true), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNaN(element.parseNumber(true), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNaN(element.parseNumber(true), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNaN(element.parseNumber(true), 'use grouping');
done();
});
test('parse date', done => {
const d = new Date();
assert.isNotNaN(element.parseNumber(d), 'default');
element.setProperties({useGrouping: true}, true);
assert.isNotNaN(element.parseNumber(d), 'use grouping');
element.setProperties({locale: 'de', numberStyle: 'percent'}, true);
assert.isNotNaN(element.parseNumber(d), 'percent and grouping');
element.setProperties({useGrouping: false}, true);
assert.isNotNaN(element.parseNumber(d), 'use grouping');
done();
});
});
suite('currency', () => {
let element;
setup(function() {
element = fixture('currency');
});
test('default properties', done => {
if (element._numberOptions.style = 'currency') {
assert.equal(element._numberOptions.style, 'currency', 'number option is set');
} else {
console.warn('element might not use currency')
}
done();
});
test('no given currency', done => {
if (element._numberOptions.style = 'currency') {
element.currency = '';
assert.equal(element._numberOptions.style, 'decimal', 'fallback, when no currency is given');
assert.equal(element.formatNumber(2), '2', 'fallback format');
} else {
console.warn('element might not use currency')
}
done();
});
test('EUR in "en", symbol', done => {
if (element._numberOptions.style = 'currency') {
element.setProperties({locale: 'en', currencyDisplay: 'symbol'}, true);
assert.equal(element.formatNumber(100), '€100', '100 euros with symbol');
} else {
console.warn('element might not use currency')
}
done();
});
test('EUR in "de", name', done => {
if (element._numberOptions.style = 'currency') {
element.setProperties({locale: 'en', currencyDisplay: 'name'}, true);
assert.equal(element.formatNumber(100), '100 euros', '100 euros with name');
} else {
console.warn('element might not use currency')
}
done();
});
test('parse', done => {
if (element._numberOptions.style = 'currency') {
element.setProperties({locale: 'en', currencyDisplay: 'symbol'}, true);
assert.equal(element.parseNumber('€100'), 100, '100 euros');
assert.isNaN(element.parseNumber(''), 'empty string');
assert.isNaN(element.parseNumber(false), 'false');
assert.isNaN(element.parseNumber(true), 'true');
assert.isNaN(element.parseNumber(null), 'null');
assert.isNaN(element.parseNumber(undefined), 'undefined');
} else {
console.warn('element might not use currency')
}
done();
});
});
suite('units', () => {
let element;
setup(function() {
element = fixture('units');
});
test('default properties', done => {
assert.isDefined(element.unit, '"unit" is defined');
assert.isDefined(element.unitSeparator, '"unitSeparator" is defined');
done();
});
test('format number', done => {
assert.equal(element.formatNumber(100), '100' + element.unitSeparator + element.unit, 'number is formatedl');
done();
});
});
</script>
</body>
</html>