@fooloomanzoo/datetime-input
Version:
an input for date and time
218 lines (198 loc) • 10.6 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="ResetButton">
<template>
<div>
<basic-datetime-input-element id="hide-reset-button" hide-reset-button></basic-datetime-input-element>
<basic-datetime-input-element id="disabled" disabled></basic-datetime-input-element>
<basic-datetime-input-element id="basic"></basic-datetime-input-element>
<basic-datetime-input-element id="default" default="1980-02-01T01:02:03.456Z" clamp=""></basic-datetime-input-element>
<basic-datetime-input-element id="value" datetime="1980-02-01T01:02:03.456Z" clamp=""></basic-datetime-input-element>
<basic-datetime-input-element id="default-and-value" default="1980-02-01T01:02:03.456Z" datetime="2000-02-01T01:02:03.456Z" clamp=""></basic-datetime-input-element>
</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('basic-datetime-input-element');
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.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('hide reset button', function() {
let f;
setup(function() {
f = fixture('ResetButton');
});
test('hide reset button', done => {
let element = f.querySelector('#hide-reset-button');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).display, 'none', 'reset-button is hidden');
}
done();
}, 0);
});
test('disabled', done => {
let element = f.querySelector('#disabled');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).display, 'none', 'reset-button is hidden');
}
done();
}, 0);
});
test('basic', done => {
let element = f.querySelector('#basic');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is invisible');
}
done();
}, 0);
});
test('default value', done => {
let element = f.querySelector('#default');
assert.isDefined(element.value, 'value is set');
assert.isDefined(element._defaultValue, 'default value is set');
assert.equal(element.valueAsNumber, element._defaultValue, 'valueAsNumber is equal defaultvalue');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is invisible');
}
element.valueAsNumber = 1;
assert.notEqual(element.valueAsNumber, element._defaultValue, 'valueAsNumber is not equal defaultvalue');
if (resetButton) {
assert.notEqual(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is visible');
}
element.resetDate();
assert.equal(element.valueAsNumber, element._defaultValue, 'valueAsNumber is equal defaultvalue');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is invisible when default value equals valueAsNumber');
}
done();
}, 0);
});
test('value is set', done => {
let element = f.querySelector('#value');
assert.isDefined(element.value, 'value is set');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.notEqual(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is visible');
}
element.resetDate();
assert.notOk(element.valueAsNumber, 'valueAsNumber is unset');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is not visible');
}
done();
}, 0);
});
test('default and value is set', done => {
let element = f.querySelector('#default-and-value');
assert.isDefined(element.value, 'value is set');
assert.isDefined(element._defaultValue, 'default value is set');
assert.notEqual(element.valueAsNumber, element._defaultValue, 'valueAsNumber is not equal defaultvalue');
setTimeout(() => {
// wait a tick to let dom-if stamping finish
let resetButton = element.shadowRoot.querySelector('.reset');
if (resetButton) {
assert.notEqual(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is visible');
}
element.resetDate();
assert.equal(element.valueAsNumber, element._defaultValue, 'valueAsNumber is equal defaultvalue');
if (resetButton) {
assert.equal(document.defaultView.getComputedStyle(resetButton).visibility, 'hidden', 'reset-button is invisible when default value equals valueAsNumber');
}
done();
}, 0);
});
});
</script>
</body>
</html>