@moduware/morph-ripple
Version:
General ripple animation element for Polymorph Components
109 lines (79 loc) • 3.04 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>morph-ripple test</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="../node_modules/wct-browser-legacy/browser.js"></script>
<script type="module" src="../morph-ripple.js"></script>
</head>
<body>
<test-fixture id="BasicTestFixture">
<template>
<morph-ripple></morph-ripple>
</template>
</test-fixture>
<test-fixture id="FunctionTestFixture">
<template>
<morph-ripple></morph-ripple>
</template>
</test-fixture>
<script type="module">
describe('morph-ripple', function() {
// testing default morph-ripple properties
context('Default properties', function() {
// declare variable for ripple in this context only
let ripple, spy;
// Create a test fixture
beforeEach(function() {
// assigning ripple fixture for this context. This will automatically removed on the teardown phase of this test context
ripple = fixture('BasicTestFixture');
// stubbing showRipple method of our morph-ripple
spy = sinon.stub(ripple, "showRipple");
});
afterEach(function () {
ripple.showRipple.restore(); // Unwraps the spy
});
it('instantiating the button on android platform with default properties works', function() {
// testing for default colors and which platform was set in html markup
expect(ripple).to.be.ok;
});
it('showRipple() method is called when morph-ripple is clicked', async function() {
await ripple.updateComplete;
let mouseDown = new Event('down');
ripple.dispatchEvent(mouseDown);
// Count # of calls to showRipple
expect(spy.calledOnce).to.be.true;
});
});
context('showRipple(e)', () => {
let element;
beforeEach(function() {
element = fixture('FunctionTestFixture');
})
it('Should call showRipple() without error', async () => {
await element.updateComplete;
var event = new CustomEvent('click', {
detail: { dx: 200 }
});
element.showRipple(event);
expect(element).to.be.ok;
});
});
// cleanUp()
context('cleanUp()', () => {
let element;
beforeEach(function () {
element = fixture('FunctionTestFixture');
})
it('Should call showRipple() without error', async () => {
await element.updateComplete;
element.cleanUp();
expect(element).to.be.ok;
});
});
});
</script>
</body>
</html>