@fooloomanzoo/datetime-input
Version:
an input for date and time
204 lines (174 loc) • 8.67 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>date-input test</title>
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="../../../wct-browser-legacy/browser.js"></script>
<script type="module" src="../date-input.js"></script>
</head>
<body>
<test-fixture id="Basic">
<template>
<date-input></date-input>
</template>
</test-fixture>
<test-fixture id="ChangingProperties">
<template>
<date-input date="1980-02-01"></date-input>
</template>
</test-fixture>
<test-fixture id="Clamp">
<template>
<div>
<date-input id="clamp-month" clamp="month"></date-input>
<date-input id="clamp-day" clamp="day"></date-input>
<date-input id="clamp-none" clamp=""></date-input>
</div>
</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('date-input');
suite('basic', function() {
let element;
setup(function() {
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.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('setting properties', () => {
let element;
setup(function() {
element = fixture('ChangingProperties');
});
test('setting property should work', done => {
assert.equal(element.year, 1980, 'year should be set');
assert.equal(element.month, 2, 'month should be set');
assert.equal(element.day, 1, 'day should be set');
assert.equal(element.hour, 0, 'hour should be set');
assert.equal(element.minute, 0, 'minute should be set');
assert.equal(element.second, 0, 'second should be set');
assert.equal(element.millisecond, 0, 'millisecond should be set');
assert.equal(element.date, '1980-02-01', 'date should be set');
assert.equal(element.time, '00:00:00.000', 'time should be set');
assert.isDefined(element.valueAsNumber, 'valueAsNumber should be set');
assert.isDefined(element.valueAsDate, 'valueAsDate should be set');
assert.isDefined(element.timezone, 'timezone should be set');
assert.isDefined(element.offsetMinutes, 'offsetMinutes should be set');
done();
});
});
suite('clamp and hidden inputs', function() {
let f;
setup(function() {
f = fixture('Clamp');
});
test('clamp month', done => {
let element = f.querySelector('#clamp-month');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
assert.equal(element.clamp, 'month', 'clamp is set');
let yearInput = element.shadowRoot.querySelector('#year');
let monthInput = element.shadowRoot.querySelector('#month');
let dayInput = element.shadowRoot.querySelector('#day');
assert.notEqual(document.defaultView.getComputedStyle(yearInput).display, 'none', 'year is not hidden');
if (monthInput) {
assert.equal(document.defaultView.getComputedStyle(monthInput).display, 'none', 'month is hidden');
}
if (dayInput) {
assert.equal(document.defaultView.getComputedStyle(dayInput).display, 'none', 'day is hidden');
}
done();
}, 0);
});
test('clamp day', done => {
let element = f.querySelector('#clamp-day');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let yearInput = element.shadowRoot.querySelector('#year');
let monthInput = element.shadowRoot.querySelector('#month');
let dayInput = element.shadowRoot.querySelector('#day');
assert.notEqual(document.defaultView.getComputedStyle(yearInput).display, 'none', 'year is not hidden');
assert.notEqual(document.defaultView.getComputedStyle(monthInput).display, 'none', 'month is not hidden');
if (dayInput) {
assert.equal(document.defaultView.getComputedStyle(dayInput).display, 'none', 'day is hidden');
}
done();
}, 0);
});
test('no clamp', done => {
let element = f.querySelector('#clamp-none');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let yearInput = element.shadowRoot.querySelector('#year');
let monthInput = element.shadowRoot.querySelector('#month');
let dayInput = element.shadowRoot.querySelector('#day');
assert.notEqual(document.defaultView.getComputedStyle(yearInput).display, 'none', 'year is not hidden');
assert.notEqual(document.defaultView.getComputedStyle(monthInput).display, 'none', 'month is not hidden');
assert.notEqual(document.defaultView.getComputedStyle(dayInput).display, 'none', 'day is not hidden');
done();
}, 0);
});
});
</script>
</body>
</html>