@fooloomanzoo/datetime-input
Version:
an input for date and time
225 lines (195 loc) • 10.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>basic-datetime-input-element test</title>
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="../../../wct-browser-legacy/browser.js"></script>
<script type="module" src="../demo/elements/basic-datetime-input-element.js"></script>
</head>
<body>
<test-fixture id="Basic">
<template>
<basic-datetime-input-element></basic-datetime-input-element>
</template>
</test-fixture>
<test-fixture id="Required">
<template>
<basic-datetime-input-element required></basic-datetime-input-element>
</template>
</test-fixture>
<test-fixture id="valueAsDate for value-property">
<template>
<basic-datetime-input-element property-for-value="valueAsDate"></basic-datetime-input-element>
</template>
</test-fixture>
<script type="module">
import {
Base
} from '@polymer/polymer/polymer-legacy.js';
import {
getParams,
mixinSuite
} from '@fooloomanzoo/input-picker-pattern/utils/wct-mixin-test-helper.js';
const params = getParams();
mixinSuite('basic-datetime-input-element');
suite('basic', () => {
let element;
setup(() => {
element = fixture('Basic');
});
test('instantiating the element with default properties should work', done => {
assert.isUndefined(element.date, 'no date is defined');
assert.isUndefined(element.time, 'no time is defined');
assert.isUndefined(element.datetime, 'no datetime is defined');
assert.isUndefined(element.value, 'no value is defined');
assert.isUndefined(element.valueAsNumber, 'no valueAsNumber is defined');
assert.isUndefined(element.valueAsDate, 'no valueAsDate is defined');
assert.isUndefined(element.year, 'no year is defined');
assert.isUndefined(element.month, 'no month is defined');
assert.isUndefined(element.day, 'no day is defined');
assert.isUndefined(element.hour, 'no hour is defined');
assert.isUndefined(element.hour12, 'no hour12 is defined');
assert.isUndefined(element.minute, 'no minute is defined');
assert.isUndefined(element.second, 'no second is defined');
assert.isUndefined(element.millisecond, 'no millisecond is defined');
assert.isUndefined(element.timezone, 'no timezone is defined');
assert.isUndefined(element.offsetMinutes, 'no timezone-offset is defined');
assert.isUndefined(element._timeZoneHours, 'no timezone-hours is defined');
assert.isUndefined(element._timeZoneMinutes, 'no timezone-minutes is defined');
assert.isUndefined(element.setp, 'no step is defined');
assert.isDefined(element.locale, 'locale is defined');
assert.isDefined(element.decimalSeparator, 'decimalSeparator is defined');
assert.isDefined(element.dateSeparator, 'dateSeparator is defined');
assert.isDefined(element.timeSeparator, 'timeSeparator is defined');
assert.isDefined(element.amString, 'amString is defined');
assert.isDefined(element.pmString, 'pmString is defined');
assert.isDefined(element.dateOrder, 'dateOrder is defined');
assert.isDefined(element.propertyForValue, 'propertyForValue is defined');
done();
});
test('calling "now" on the element should work', done => {
assert.isDefined(element.now, '"now" exists');
element.now();
assert.isDefined(element.date, 'date is defined');
assert.isDefined(element.time, 'time is defined');
assert.isDefined(element.datetime, 'datetime is defined');
assert.isDefined(element.value, 'value is defined');
assert.isDefined(element.valueAsNumber, 'valueAsNumber is defined');
assert.isDefined(element.valueAsDate, 'valueAsDate is defined');
assert.isDefined(element.year, 'year is defined');
assert.isDefined(element.month, 'month is defined');
assert.isDefined(element.day, 'day is defined');
assert.isDefined(element.hour, 'hour is defined');
assert.isDefined(element.minute, 'minute is defined');
assert.isDefined(element.second, 'second is defined');
assert.isDefined(element.millisecond, 'millisecond is defined');
assert.isDefined(element.timezone, 'timezone is defined');
assert.isDefined(element.offsetMinutes, 'timezone-offset is defined');
assert.isDefined(element._timeZoneHours, 'timezone-hours is defined');
assert.isDefined(element._timeZoneMinutes, 'timezone-minutes is defined');
done();
});
});
suite('step and disabled', () => {
let element;
setup(() => {
element = fixture('Basic');
});
test('setting step to 1 millisecond', done => {
element.step = 0.001;
assert.deepEqual(element._partsStep, {day: 1, hour: 1, minute: 1, second: 1, millisecond: 1}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: false, second: false, millisecond: false}, 'partsDisabled is set');
done();
});
test('setting step to 50 millisecond', done => {
element.step = 0.05;
assert.deepEqual(element._partsStep, {day: 1, hour: 1, minute: 1, second: 1, millisecond: 50}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: false, second: false, millisecond: false}, 'partsDisabled is set');
done();
});
test('setting step to 1 second', done => {
element.step = 1;
assert.deepEqual(element._partsStep, {day: 1, hour: 1, minute: 1, second: 1, millisecond: 0}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: false, second: false, millisecond: true}, 'partsDisabled is set');
done();
});
test('setting step to 1.250 second', done => {
element.step = 1.25;
assert.deepEqual(element._partsStep, {day: 1, hour: 1, minute: 1, second: 1, millisecond: 1250}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: false, second: false, millisecond: false}, 'partsDisabled is set');
done();
});
test('setting step to 2 minutes', done => {
element.step = 120;
assert.deepEqual(element._partsStep, {day: 1, hour: 1, minute: 2, second: 0, millisecond: 0}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: false, second: true, millisecond: true}, 'partsDisabled is set');
done();
});
test('setting step to 3 hours', done => {
element.step = 10800;
assert.deepEqual(element._partsStep, {day: 1, hour: 3, minute: 0, second: 0, millisecond: 0}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: false, minute: true, second: true, millisecond: true}, 'partsDisabled is set');
done();
});
test('setting step to 4 days', done => {
element.step = 345600;
assert.deepEqual(element._partsStep, {day: 4, hour: 0, minute: 0, second: 0, millisecond: 0}, 'partsStep is set');
assert.deepEqual(element._partsDisabled, {day: false, hour: true, minute: true, second: true, millisecond: true}, 'partsDisabled is set');
done();
});
test('setting step when input is disabled', done => {
element.disabled = true;
element.step = 1;
assert.deepEqual(element._partsDisabled, {day: true, hour: true, minute: true, second: true, millisecond: true}, 'partsDisabled is set');
done();
});
});
suite('required', () => {
let element;
setup(() => {
element = fixture('Required');
});
test('"value is not set" is invalid when required', done => {
assert.isUndefined(element.value, 'no value is defined');
assert.isTrue(element.invalid, 'state is invalid');
done();
});
test('settting an invalid date is invalid', done => {
element.setAttribute('datetime', 'abc');
assert.isUndefined(element.value, 'no value is defined');
assert.isTrue(element.invalid, 'state is invalid');
done();
});
test('"value is set" is not invalid when required', done => {
element.now();
assert.isDefined(element.value, 'value is defined');
assert.isFalse(element.invalid, 'state is not invalid');
done();
});
});
suite('property for value', () => {
let element;
setup(() => {
element = fixture('valueAsDate for value-property');
});
test('valueAsDate should serialize and deserialize"', done => {
let d = new Date();
// transforming date according to its clamp attribute
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
d = element._clampUTCComponents(d, element.clamp);
d.setMinutes(d.getMinutes() + d.getTimezoneOffset());
// NOTE: milliseconds are often not serialized by browsers
d.setMilliseconds(0);
element.setAttribute('value', d);
assert.equal(+new Date(element.value), +d, 'value does not change');
assert.equal(+element.valueAsNumber, +d, 'valueAsNumber is set');
assert.equal(+element.valueAsDate, +d, 'valueAsDate is set');
assert.isTrue(element.value instanceof Date, 'value is a date-object');
done();
});
});
</script>
</body>
</html>