skinny-widgets
Version:
skinnable web components widgets collection
117 lines (105 loc) • 5.26 kB
HTML
<html>
<head>
<meta charset="utf-8">
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/sinon/pkg/sinon.js"></script>
<script src="../node_modules/wct-mocha/wct-mocha.js"></script>
</head>
<body>
<sk-config
theme="antd"
base-path="../src"
lang="ru"
id="skConfig"
dimport="false"
></sk-config>
<sk-datepicker id="skDatePicker" value="12/25/2019"></sk-datepicker>
<sk-datepicker id="skDatePicker2">
<template id="SkDatePickerTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<span class="ant-calendar-picker">
<div>
<label><slot name="label"></slot><slot></slot></label>
<input class="ant-calendar-picker-input ant-input" value="">
<i aria-label="icon: calendar" class="anticon anticon-calendar ant-calendar-picker-icon">
<svg
viewBox="64 64 896 896" focusable="false" class="" data-icon="calendar" width="1em" height="1em"
fill="currentColor" aria-hidden="true">
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg>
</i>
</div>
</span>
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft">
<div class="ant-calendar" tabindex="0">
<div class="ant-calendar-panel">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap ant-input-affix-wrapper">
<input class="ant-calendar-input" placeholder="Select date" />
<span class="ant-input-suffix ant-input-clear">x</span>
</div>
<a role="button" title="Clear"><span class="ant-calendar-clear-btn"></span></a>
</div>
<div tabindex="0" class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;">
<a class="ant-calendar-prev-year-btn" role="button" title="Last year (Control + left)"></a>
<a class="ant-calendar-prev-month-btn" role="button" title="Previous month (PageUp)"></a>
<span class="ant-calendar-my-select">
<a class="ant-calendar-month-select" role="button" title="Choose a month">Dec</a>
<a class="ant-calendar-year-select" role="button" title="Choose a year">2019</a>
</span>
<a class="ant-calendar-next-month-btn" role="button" title="Next month (PageDown)"></a>
<a class="ant-calendar-next-year-btn" role="button" title="Next year (Control + right)"></a>
</div>
</div>
<div class="ant-calendar-body">
<table class="ant-calendar-table" cellspacing="0" role="grid">
<thead>
</thead>
<tbody class="ant-calendar-tbody">
</tbody>
</table>
</div>
<div class="ant-calendar-footer">
<span class="ant-calendar-footer-btn">
<a class="ant-calendar-today-btn " role="button" title="December 23, 2019">Today</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="skDatePickerInternal">SkDatePicker2</div>
</template>
</sk-datepicker>
<script src="/dist/sk-compat-bundle.js"></script>
<script type="module">
/*
import { SkDatePicker } from '../src/sk-datepicker.js';**/
import { whenSkRendered } from '../node_modules/sk-core/src/rd-util.js';
customElements.define('sk-datepicker', SkDatePicker);
suite('<sk-datepicker>', () => {
suiteSetup(() => {
});
test('is sk-datepicker rendered', (done) => {
const element = document.getElementById('skDatePicker');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkDatePicker);
done();
});
});
test('is sk-datepicker2 templated', (done) => {
let element = document.getElementById('skDatePicker2');
let el = element.shadowRoot.querySelector('#skDatePickerInternal');
chai.assert(el.innerHTML === 'SkDatePicker2');
done();
});
});
</script>
</body>
</html>