oe-ui-misc
Version:
collection of miscellaneous oe-ui Polymer components
232 lines (204 loc) • 8.21 kB
HTML
<!--
©2018-2019 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
Bangalore, India. All Rights Reserved.
-->
<html>
<head>
<title>oe-widget-container test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/wct-mocha/wct-mocha.js"></script>
<script src="../node_modules/fakerest/dist/FakeRest.min.js"></script>
<script src="../node_modules/sinon/pkg/sinon.js"></script>
<script type="module">
import 'oe-data-table/oe-data-table.js';
import '../oe-widget-container.js';
</script>
</head>
<body>
<test-fixture id="basic-fixture">
<template>
<div style="width: 500px; height: 500px;">
<oe-widget-container>
<paper-card heading="Card 1" data-row=0 data-col=1 data-width=1 data-height=1>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
<paper-card heading="Card 2">
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</oe-widget-container>
</div>
</template>
</test-fixture>
<test-fixture id="name-fixture">
<template>
<div>
<oe-widget-container>
<oe-data-table id="simple-table" label="Simple Table" name="datatable" class="widget-element"></oe-data-table>
</oe-widget-container>
</div>
</template>
</test-fixture>
<script type="module">
import '@polymer/iron-test-helpers/test-helpers.js';
import '@polymer/iron-test-helpers/mock-interactions.js';
import '@polymer/paper-card/paper-card.js';
import 'oe-data-table/oe-data-table.js';
var element, testElement, server; // eslint-disable-line no-unused-vars
suite('oe-widget-container', function () {
setup(function (done) {
server = sinon.fakeServer.create();
server.autoRespond = true;
server.respondImmediately = true;
// server.respondWith('POST', /.*\/.*/, function (req) {
// req.respond(200, {
// 'Content-Type': 'text/html'
// }, 'I am here to help you with travel plans');
// });
var divBasicContainer = fixture('basic-fixture');
setTimeout(done, 1000);
});
teardown(function () {
server.restore();
});
/*test('instantiating the element works', function(done) {
assert.equal(element.is, 'oe-widget-container');
assert.equal(element.columns, 4);
assert.equal(element.enableResize, true);
assert.equal(element.widgetMargin, 6);
expect(element.widgetConfig).to.be.empty;
done();
});
test('test to check isEmpty function', function(done) {
var obj = {};
assert.equal(element.isEmpty(obj), true);
obj = {
"name": "John"
};
assert.equal(element.isEmpty(obj), false);
done();
});
test('rename the name attribute if the names of two widgets are the same', function(done) {
var element = fixture('name-fixture');
flush(function() {
var gridsterNodes = element.$.contentElement.assignedNodes();
var nodeList = [].filter.call(gridsterNodes, function(item) {
if (item.nodeType == Node.ELEMENT_NODE) {
return true;
}
});
flush(function() {
assert.equal(nodeList[0].getAttribute('name'), "card");
assert.equal(nodeList[1].getAttribute('name'), "card1");
done();
});
});
});
test('test to check if the name is generated when the name is not set on the widget', function(done) {
flush(function() {
var gridsterNodes = Polymer.dom(testElement.$.contentElement).getDistributedNodes();
var nodeList = [].filter.call(gridsterNodes, function(item) {
if (item.nodeType == Node.ELEMENT_NODE) {
return true;
}
});
flush(function() {
assert.equal(nodeList[0].getAttribute('name'), "paper-card1");
assert.equal(nodeList[1].getAttribute('name'), "paper-card2");
done();
});
});
});
test('check if the oe-widget-container is initialized using the default config if widgetConfig is not set', function(done) {
flush(function() {
var gridsterNodes = element.$.contentElement.assignedNodes();
var nodeList = [].filter.call(gridsterNodes, function(item) {
if (item.nodeType == Node.ELEMENT_NODE) {
return true;
}
});
flush(function() {
assert.equal(nodeList[0].getAttribute('name'), "chatbot");
assert.equal(nodeList[0].hidden, false);
assert.equal(nodeList[0].getAttribute('data-sizex'), 1);
assert.equal(nodeList[0].getAttribute('data-row'), 1);
assert.equal(nodeList[0].getAttribute('data-col'), 1);
done();
});
});
});*/
test('test to hide/show the resize icon', function (done) {
var divBasicContainer = fixture('basic-fixture');
flush(function () {
element = divBasicContainer.querySelector('oe-widget-container');
element.set('autoArrange', true);
element.set('enableResizing', true);
flush(function () {
var menu = element.querySelector('paper-card');
menu.fire('mouseenter',event);
assert.equal(menu.querySelector('.resize-handler').hidden,false);
done();
});
});
});
test('check the oe-widget-container with oe-data-table', function (done) {
var divBasicContainer = fixture('name-fixture');
flush(function () {
element = divBasicContainer.querySelector('oe-widget-container');
var dataTable = document.getElementById('simple-table');
dataTable.set('columns', [{
key: 'id',
label: 'Id',
type: 'number'
}, {
key: 'name',
label: 'Name',
type: 'string'
}]);
dataTable.set('items', [{
id: 1,
name: 'Admin'
}, {
id: 2,
name: 'Developer'
}, {
id: 3,
name: 'Designer'
}, {
id: 4,
name: 'Tester'
}]);
element.set('enableDragging', true);
element.renderWidgets();
flush(function () {
var gridsterNodes = element.$.contentElement.assignedNodes();
var nodeList = [].filter.call(gridsterNodes, function (item) {
if (item.nodeType == Node.ELEMENT_NODE) {
return true;
}
});
flush(function () {
assert.equal(nodeList[0].getAttribute('name'), 'datatable');
assert.equal(nodeList[0].hidden, false);
assert.equal(nodeList[0].getAttribute('data-height'), 1);
assert.equal(nodeList[0].getAttribute('data-width'), 1);
done();
});
});
});
});
});
</script>
</body>
</html>