skinny-widgets
Version:
skinnable web components widgets collection
81 lines (68 loc) • 2.93 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-alert id="skAlert">SkAlert</sk-alert>
<sk-alert id="skAlert2">
<template id="SkAlertTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.min.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<style>
.ant-alert-close-icon {
border: none;
background-color: initial;
right: 5px;
}
.ant-alert.ant-alert-no-icon {
padding: 10px 16px 10px 15px;
}
</style>
<div data-show="true" class="ant-alert ant-alert-no-icon">
<span class="ant-alert-message"><slot></slot></span>
<span class="ant-alert-description"></span>
<button type="button" class="ant-alert-close-icon" tabindex="0"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></button>
</div>
<div id="skAlert2Internal">SkAlert2</div>
</template>
SkAlert2
</sk-alert>
<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 { SkAlert } from '../node_modules/sk-alert/src/sk-alert.js';
customElements.define('sk-config', SkConfig);
customElements.define('sk-alert', SkAlert);
suite('<sk-alert>', () => {
suiteSetup(() => {
});
test('is sk-alert rendered', (done) => {
const element = document.getElementById('skAlert');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkAlert);
done();
});
});
test('is sk-alert2 templated', (done) => {
let element = document.getElementById('skAlert2');
element.whenRendered(() => {
let el = element.el.querySelector('#skAlert2Internal');
chai.assert(el.innerHTML === 'SkAlert2');
done();
});
});
});
</script>
</body>
</html>