skinny-widgets
Version:
skinnable web components widgets collection
96 lines (75 loc) • 3.41 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>
<script src="../compat/dialog-polyfill.js"></script>
</head>
<body>
<sk-config
theme="jquery"
base-path="../src"
theme-path="/node_modules/sk-theme-jquery"
></sk-config>
<sk-dialog id="skDialog" title="Some Title" type="confirm">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved,
resized and closed with the 'x' icon.</p>
</sk-dialog>
<sk-dialog id="skDialog2" title="Some Title" type="confirm">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved,
resized and closed with the 'x' icon.</p>
<template id="SkDialogTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div tabindex="-1" role="dialog"
class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable"
aria-describedby="dialog" aria-labelledby="ui-id-1"
style="display: block;">
<div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
<span id="ui-id-1" class="ui-dialog-title">​</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span></button>
</div>
<div id="dialog" class="ui-dialog-content ui-widget-content"
style="width: auto; max-height: none; height: auto;">
</div>
<div class="ui-dialog-footer">
</div>
</div>
<div id="skDialog2Internal">SkDialog2</div>
</template>
</sk-dialog>
<script type="module">
import { whenSkRendered } from '../node_modules/sk-core/src/rd-util.js';
import { SkDialog } from '../node_modules/sk-dialog/src/sk-dialog.js';
customElements.define('sk-dialog', SkDialog);
suite('<sk-dialog>', () => {
suiteSetup(() => {
});
test('is sk-dialog rendered', (done) => {
const element = document.getElementById('skDialog');
element.whenRendered(() => {
chai.assert.instanceOf(element, SkDialog);
done();
});
});
test('is sk-dialog open', (done) => {
const element = document.getElementById('skDialog');
element.whenRendered(() => {
element.open();
chai.assert(element.hasAttribute('open'));
done();
});
});
test('is sk-dialog2 templated', (done) => {
let element = document.getElementById('skDialog2');
let el = element.impl.dialog.querySelector('#skDialog2Internal');
chai.assert(el.innerHTML === 'SkDialog2');
done();
});
});
</script>
</body>
</html>