@fooloomanzoo/property-mixins
Version:
mixin for custom elements to extends property mixins for data formats
400 lines (330 loc) • 13.1 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>range-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-range-element.js"></script>
</head>
<body>
<test-fixture id="basic">
<template>
<basic-range-element></basic-range-element>
</template>
</test-fixture>
<test-fixture id="set attribute">
<template>
<basic-range-element value-as-number="1"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="negative zero">
<template>
<basic-range-element use-negative-zero step="1"></basic-range-element>
</template>
</test-fixture>
<dom-bind id="bind">
<template>
<basic-range-element id="range1" value-as-number="{{value}}" use-negative-zero></basic-range-element>
<basic-range-element id="range2" value-as-number="{{value}}" use-negative-zero></basic-range-element>
</template>
</dom-bind>
<test-fixture id="min">
<template>
<basic-range-element min="2" value-as-number="-1"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="max">
<template>
<basic-range-element max="2" value-as-number="3"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="min-max-switched">
<template>
<basic-range-element min="3" max="-1"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="step">
<template>
<basic-range-element step="12"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="clamp">
<template>
<basic-range-element value-as-number="122" step="5"></basic-range-element>
</template>
</test-fixture>
<test-fixture id="no clamp">
<template>
<basic-range-element value-as-number="122" step="5" no-clamp></basic-range-element>
</template>
</test-fixture>
<test-fixture id="no saturation">
<template>
<basic-range-element min="-2" max="2" ></basic-range-element>
</template>
</test-fixture>
<test-fixture id="saturate">
<template>
<basic-range-element min="-2" max="2" saturate></basic-range-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-range-element']);
suite('basic', () => {
let element;
setup(function() {
element = fixture('basic');
});
test('default properties', done => {
assert.isUndefined(element.saturate, 'saturate is not defined');
assert.isUndefined(element.noClamp, 'noClamp is not defined');
done();
});
test('setting default', done => {
element.default = 3;
assert.equal(element.valueAsNumber, 3, 'valueAsNumber should be set');
element.valueAsNumber = undefined;
assert.equal(element.valueAsNumber, 3, 'valueAsNumber should be reset');
done();
});
test('start at value', done => {
element.startAt = 3;
element.increase();
assert.equal(element.valueAsNumber, 3, 'valueAsNumber should use startAt');
done();
});
test('increase with no step set', done => {
element.default = element.startAt = 3;
element.increase();
assert.equal(element.valueAsNumber, 4, 'valueAsNumber should use increment');
done();
});
test('decrease with no step set', done => {
element.default = element.startAt = 3;
element.decrease();
assert.equal(element.valueAsNumber, 2, 'valueAsNumber should use decrease');
done();
});
test('increase', done => {
element.step = 12;
element.default = element.startAt = 3;
element.increase();
assert.equal(element.valueAsNumber, 15, 'valueAsNumber should use increment');
done();
});
test('decrease', done => {
element.step = 12;
element.default = element.startAt = 3;
element.decrease();
assert.equal(element.valueAsNumber, -9, 'valueAsNumber should use decrease');
done();
});
test('increase (no clamp)', done => {
element.noClamp = true;
element.step = 12;
element.valueAsNumber = 3;
element.increase();
assert.equal(element.valueAsNumber, 15, 'valueAsNumber should use increment');
done();
});
});
suite('set attribute', () => {
let element;
setup(function() {
element = fixture('set attribute');
});
test('set value-as-number', done => {
assert.equal(element.valueAsNumber, 1, ' value-as-number is set');
done();
});
});
suite('negative zero', () => {
let element;
setup(function() {
element = fixture('negative zero');
});
test('setting -0', done => {
element.valueAsNumber = -0;
assert.isTrue(isNegative0(element.valueAsNumber), 'valueAsNumber is negative zero');
done();
});
test('setting -0 to +0', done => {
element.valueAsNumber = -0;
element.valueAsNumber = +0;
assert.isTrue(!isNegative0(element.valueAsNumber), 'valueAsNumber is positive zero');
done();
});
test('from 1 to +0', done => {
element.valueAsNumber = 1;
element.decrease();
assert.isTrue(!isNegative0(element.valueAsNumber) && element.valueAsNumber === 0, 'valueAsNumber decrease to positive zero');
done();
});
test('from +0 to -0', done => {
element.valueAsNumber = 0;
element.decrease();
assert.isTrue(isNegative0(element.valueAsNumber), 'valueAsNumber should be negative zero'+element.valueAsNumber);
done();
});
test('from 1 to -0', done => {
element.valueAsNumber = 1;
element.decrease();
element.decrease();
assert.isTrue(isNegative0(element.valueAsNumber), 'valueAsNumber should be negative zero'+element.valueAsNumber);
done();
});
test('from -0 to -1', done => {
element.valueAsNumber = -0;
element.decrease();
assert.equal(element.valueAsNumber, -1, 'valueAsNumber should decrease from negative zero');
done();
});
test('from -1 to -0', done => {
element.valueAsNumber = -1;
element.increase();
assert.isTrue(isNegative0(element.valueAsNumber), 'valueAsNumber should increase to negative zero'+element.valueAsNumber);
done();
});
test('from -0 to +0', done => {
element.valueAsNumber = -0;
element.increase();
assert.isTrue(!isNegative0(element.valueAsNumber) && element.valueAsNumber === 0, 'valueAsNumber should increase to positive zero' + element.valueAsNumber);
done();
});
test('from +0 to 1', done => {
element.valueAsNumber = 0;
element.increase();
assert.equal(element.valueAsNumber, 1, 'valueAsNumber should increase from positive zero');
done();
});
test('multiple', done => {
element.valueAsNumber = -2;
for (var i = 0; i < 5; i++) {
element.increase();
}
assert.equal(element.valueAsNumber, 2, 'valueAsNumber should increase over zero');
for (var i = 0; i < 5; i++) {
element.decrease();
}
assert.equal(element.valueAsNumber, -2, 'valueAsNumber should decrease back over zero');
done();
});
});
suite('dom-bind', () => {
let dombind,
el1,
el2;
setup( () => {
dombind = document.querySelector('#bind');
el1 = dombind.$.range1;
el2 = dombind.$.range2;
dombind.value = undefined;
el1.valueAsNumber = undefined;
el2.valueAsNumber = undefined;
})
test('propagate negative zero change to positive zero', done => {
el1.valueAsNumber = -0
assert.isTrue(isNegative0(el1.valueAsNumber), 'value of first element is set to -0');
assert.isTrue(isNegative0(el2.valueAsNumber), 'value of second element is set to -0');
el1.valueAsNumber = 0;
assert.isTrue(!isNegative0(el1.valueAsNumber) && el1.valueAsNumber === 0, 'value of first element is set to +0');
assert.isTrue(!isNegative0(el2.valueAsNumber) && el2.valueAsNumber === 0, 'value of second element is set to +0');
done();
});
test('propagate negative zero change to positive zero with default values', done => {
el1.default = 1;
el2.default = 2;
el1.valueAsNumber = -0
assert.isTrue(isNegative0(el1.valueAsNumber), 'value of first element is set to -0');
assert.isTrue(isNegative0(el2.valueAsNumber), 'value of second element is set to -0');
el1.valueAsNumber = 0;
assert.isTrue(!isNegative0(el1.valueAsNumber) && el1.valueAsNumber === 0, 'value of first element is set to +0');
assert.isTrue(!isNegative0(el2.valueAsNumber) && el2.valueAsNumber === 0, 'value of second element is set to +0');
done();
});
});
suite('min', () => {
let element;
setup(function() {
element = fixture('min');
});
test('setting min', done => {
assert.equal(element.min, 2, 'min is set');
assert.equal(element.valueAsNumber, element.min, 'value is set to min');
done();
});
});
suite('max', () => {
let element;
setup(function() {
element = fixture('max');
});
test('setting max', done => {
assert.equal(element.max, 2, 'max is set');
assert.equal(element.valueAsNumber, element.max, 'value is set to max');
done();
});
});
suite('min-max-switched', () => {
let element;
setup(function() {
element = fixture('min-max-switched');
});
test('min is higher than max', done => {
assert.equal(element.max, 3, 'max should switch');
assert.equal(element.min, -1, 'min should switch');
done();
});
});
suite('clamp', () => {
let element;
setup(function() {
element = fixture('clamp');
});
test('clamp value', done => {
assert.equal(element.valueAsNumber, 120, 'value should clamp');
done();
});
});
suite('no clamp', () => {
let element;
setup(function() {
element = fixture('no clamp');
});
test('clamp value', done => {
assert.equal(element.valueAsNumber, 122, 'value should not clamp');
done();
});
});
suite('saturation', () => {
test('saturate value', done => {
let element = fixture('saturate');
element.valueAsNumber = 2;
element.valueAsNumber = 5;
assert.equal(element.valueAsNumber, 2, 'value should saturate');
element.valueAsNumber = -2;
element.valueAsNumber = -5;
assert.equal(element.valueAsNumber, -2, 'value should saturate');
done();
});
test('do not saturate value', done => {
let element = fixture('no saturation');
element.valueAsNumber = 2;
element.valueAsNumber = 5;
assert.equal(element.valueAsNumber, -2, 'value should not saturate');
element.valueAsNumber = -2;
element.valueAsNumber = -5;
assert.equal(element.valueAsNumber, 2, 'value should not saturate');
done();
});
});
</script>
</body>
</html>