skinny-widgets
Version:
skinnable web components widgets collection
116 lines (101 loc) • 4.79 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-tabs id="skTabs">
<sk-tab title="foo">
some foo tab contents
</sk-tab>
<sk-tab title="bar">
some bar tab contents
</sk-tab>
<sk-tab title="baz">
some baz tab contents
</sk-tab>
</sk-tabs>
<sk-tabs id="skTabs2">
<sk-tab title="foo">
some foo tab contents
</sk-tab>
<template id="SkTabsTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
.ant-tabs-nav-wrap, .ant-tabs-nav {
max-height: 40px;
}
</style>
<div class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-line">
<div class="ant-tabs-bar ant-tabs-top-bar ant-tabs-small-bar" role="tablist" tabindex="0">
<div class="ant-tabs-nav-container">
<span class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled" unselectable="unselectable">
<span class="ant-tabs-tab-prev-icon">
<i aria-label="icon: left" class="anticon anticon-left ant-tabs-tab-prev-icon-target">
<svg aria-hidden="true" class="" data-icon="left" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span
class="ant-tabs-tab-next ant-tabs-tab-btn-disabled" unselectable="unselectable">
<span class="ant-tabs-tab-next-icon">
<i aria-label="icon: right"
class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg
aria-hidden="true" class="" data-icon="right" fill="currentColor" focusable="false" height="1em"
viewBox="64 64 896 896" width="1em"><path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
<div class="ant-tabs-nav-wrap">
<div class="ant-tabs-nav-scroll">
<div class="ant-tabs-nav ant-tabs-nav-animated">
<div>
</div>
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
style="display: block; transform: translate3d(0px, 0px, 0px); width: 66px;"></div>
</div>
</div>
</div>
</div>
</div>
<div role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" tabindex="0"></div>
<div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">
</div>
<div role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" tabindex="0"></div>
</div>
<div id="skTabs2Internal">SkTabs2</div>
</template>
</sk-tabs>
<script type="module">
import { whenSkRendered } from '../node_modules/sk-core/src/rd-util.js';
import { SkTabs } from '../node_modules/sk-tabs/src/sk-tabs.js';
customElements.define('sk-tabs', SkTabs);
suite('<sk-tabs>', () => {
suiteSetup(() => {
});
test('is sk-tabs rendered', (done) => {
const element = document.getElementById('skTabs');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkTabs);
done();
});
});
test('is sk-tabs2 templated', (done) => {
let element = document.getElementById('skTabs2');
element.whenRendered(() => {
let el = element.shadowRoot.querySelector('#skTabs2Internal');
chai.assert(el.innerHTML === 'SkTabs2');
done();
});
});
});
</script>
</body>
</html>