skinny-widgets
Version:
skinnable web components widgets collection
114 lines (93 loc) • 3.5 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>
<div id="counterDisplay"></div>
<sk-button id="skButton" button-type="primary">
<span slot="label">SkButton</span>
</sk-button>
<sk-button id="skButton2">
<template id="SkButtonTpl">
<button id="skButton2Internal">SkButton2</button>
</template>
</sk-button>
<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 { SkButton } from '../node_modules/sk-button/src/sk-button.js';
customElements.define('sk-config', SkConfig);
customElements.define('sk-button', SkButton);
suite('<sk-button>', () => {
suiteSetup(() => {
});
test('is sk-button rendered', (done) => {
let element = document.getElementById('skButton');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkButton);
done();
});
});
test('is sk-button disabled', (done) => {
let element = document.getElementById('skButton');
element.whenRendered(() => {
element.setAttribute('disabled', 'disabled');
let buttonEl = element.shadowRoot.querySelector('button');
console.log(element.implRenderTimest);
chai.assert(buttonEl.getAttribute('disabled'));
done();
});
});
test('is sk-button click with addEventListener', (done) => {
let cnt = 0;
let element = document.getElementById('skButton');
let clickHandler = () => {
counterDisplay.innerHTML = ++cnt;
};
element.addEventListener('click', clickHandler);
element.click();
chai.assert(counterDisplay.innerHTML === '1');
element.click();
element.click();
chai.assert(counterDisplay.innerHTML === '3');
counterDisplay.innerHTML = 0;
element.removeEventListener('click', clickHandler);
done();
});
test('is sk-button click with property method', (done) => {
let cnt = 0;
let element = document.getElementById('skButton');
let clickHandler = function() {
counterDisplay.innerHTML = ++cnt;
};
element.onclick = clickHandler;
element.click();
chai.assert(counterDisplay.innerHTML === '1');
element.click();
element.click();
chai.assert(counterDisplay.innerHTML === '3');
counterDisplay.innerHTML = 0;
element.onclick = null;
done();
});
test('is sk-button2 templated', (done) => {
let element = document.getElementById('skButton2');
let buttonEl = element.shadowRoot.querySelector('#skButton2Internal');
chai.assert(buttonEl.innerHTML === 'SkButton2');
done();
});
});
</script>
</body>
</html>