skinny-widgets
Version:
skinnable web components widgets collection
147 lines (126 loc) • 5.4 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"
></sk-config>
<sk-select id="skSelect" value="apple">
<option value="orange">orange</option>
<option value="apple">Apple</option>
</sk-select>
<sk-select id="skGroupSelect">
<optgroup label="empty">
</optgroup>
<optgroup label="fruit">
<option value="orange">orange</option>
<option value="apple">Apple</option>
</optgroup>
</sk-select>
<sk-select id="skSelect2">
<option value="orange">orange2</option>
<option value="apple">Apple2</option>
<template id="SkSelectTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
.ant-select {
min-width: 16em;
}
</style>
<div class="ant-select ant-select-enabled">
<div class="ant-select-selection" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">--</div>
</div>
<span class="ant-select-arrow" unselectable="on" style="user-select: none;">
<i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg>
</i>
</span>
</div>
</div>
<div style="display: inline-block;">
<div>
<div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft ant-select-dropdown-hidden">
<div style="overflow: auto; transform: translateZ(0px);">
<ul role="listbox" class="ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
</ul>
</div>
</div>
</div>
</div>
<div id="skSelect2Internal">SkSelect2</div>
</template>
</sk-select>
<script type="module">
import { whenSkRendered } from '../node_modules/sk-core/src/rd-util.js';
import { SkConfig } from '../node_modules/sk-core/src/sk-config.js';
import { SkSelect } from '../node_modules/sk-select/src/sk-select.js';
customElements.define('sk-config', SkConfig);
customElements.define('sk-select', SkSelect);
suite('<sk-select>', () => {
suiteSetup(() => {
});
test('is sk-select rendered', (done) => {
let element = document.getElementById('skSelect');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkSelect);
done();
});
});
test('is sk-select disabled', (done) => {
let element = document.getElementById('skSelect');
element.whenRendered(() => {
element.setAttribute('disabled', 'disabled');
let selectEl;
if (element.theme === 'antd') {
selectEl = element.shadowRoot.querySelector('.ant-select-disabled');
chai.assert(selectEl);
} else {
selectEl = element.shadowRoot.querySelector('select');
chai.assert(selectEl.getAttribute('disabled'));
}
done();
});
});
test('is sk-select value', (done) => {
let value = 'orange';
let element = document.getElementById('skSelect');
element.whenRendered(() => {
element.setAttribute('value', value);
let selectEl;
if (element.theme === 'antd') {
selectEl = element.shadowRoot.querySelector('.ant-select-selection-selected-value');
chai.assert(selectEl.innerHTML === value);
} else {
selectEl = element.shadowRoot.querySelector('select');
chai.assert(selectEl.selectedOptions[0].value === value);
}
done();
});
});
test('is sk-select2 templated', (done) => {
let element = document.getElementById('skSelect2');
element.whenRendered(() => {
let el = element.shadowRoot.querySelector('#skSelect2Internal');
chai.assert(el.innerHTML === 'SkSelect2');
done();
});
});
});
</script>
</body>
</html>