oe-ui-misc
Version:
collection of miscellaneous oe-ui Polymer components
143 lines (122 loc) • 5.37 kB
HTML
<!--
©2016-2017 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
Bangalore, India. All Rights Reserved.
-->
<html>
<head>
<title>oe-breadcrumb test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<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/sinon/pkg/sinon.js"></script>
<script type="module" src="../oe-breadcrumb.js"></script>
<script>
var data = [
{ label: "Home", path: "/home" },
{ label: "Sub Level 1", path: "/sub1" },
{ label: "Sub Level 2", path: "/" }
];
var data_1 = [
{ label: "Home", path: "/home" },
{ label: "Sub Level 1", path: "/sub1" },
{ label: "Sub Level 2", path: "/sub2" },
{ label: "Sub Level 3", path: "/sub3" },
{ label: "Sub Level 4", path: "/sub4" },
{ label: "Sub Level 5", path: "/" }
];
</script>
</head>
<body>
<test-fixture id="BasicFixture">
<template>
<oe-breadcrumb></oe-breadcrumb>
</template>
</test-fixture>
<test-fixture id="OverflowFixture">
<template>
<oe-breadcrumb></oe-breadcrumb>
</template>
</test-fixture>
<test-fixture id="FullPathFixture">
<template>
<oe-breadcrumb></oe-breadcrumb>
</template>
</test-fixture>
<test-fixture id="ComputedFullPathFixture">
<template>
<oe-breadcrumb></oe-breadcrumb>
</template>
</test-fixture>
<script type="module">
import { DomApi } from "@polymer/polymer/lib/legacy/polymer.dom";
import '@polymer/iron-test-helpers/test-helpers.js';
import '@polymer/iron-test-helpers/mock-interactions.js';
suite('oe-breadcrumb', function () {
test('on setting 3 values they all are displayed', function (done) {
var ele = fixture('BasicFixture');
ele.set('list', data);
flush(function () {
setTimeout(function () {
var breadcrumbElements = ele.shadowRoot.querySelectorAll(".breadcrumb li");
assert.equal(breadcrumbElements[0].textContent, "Home");
assert.equal(breadcrumbElements[1].textContent, "Sub Level 1");
assert.equal(breadcrumbElements[2].textContent, "Sub Level 2");
done();
}, 200);
});
});
test('on setting more than 3 the menu appears', function (done) {
var ele = fixture('OverflowFixture');
ele.set('list', data_1);
flush(function () {
setTimeout(function () {
var breadcrumbOverflowList = ele.shadowRoot.querySelectorAll(".OverflowSection");
var breadcrumbFirstElement = breadcrumbOverflowList[0].querySelector("paper-item");
assert.equal(breadcrumbFirstElement.textContent, "Sub Level 1");
var breadcrumbSecondElement = breadcrumbOverflowList[1].querySelector("paper-item");
assert.equal(breadcrumbSecondElement.textContent, "Sub Level 2");
var breadcrumbThirdElement = breadcrumbOverflowList[2].querySelector("paper-item");
assert.equal(breadcrumbThirdElement.textContent, "Sub Level 3");
var breadcrumbFourthElement = breadcrumbOverflowList[3].querySelector("paper-item");
assert.equal(breadcrumbFourthElement.textContent, "Sub Level 4");
done();
}, 200);
});
});
test('on clicking on last item fires the data with full path', function (done) {
var ele = fixture('FullPathFixture');
ele.set('list', data);
ele.addEventListener('oe-breadcrumb-selected', function (event) {
assert.isTrue((event.detail.fullPath == "/home/sub1/"), 'clicking on last element gives the full path');
done();
});
flush(function () {
var breadcrumbBasicList = ele.shadowRoot.querySelectorAll(".breadcrumb li");
var breadcrumbThirdElement = breadcrumbBasicList[2];
MockInteractions.tap(breadcrumbThirdElement);
});
});
test('on clicking on any menu item fires the computed full path', function (done) {
var ele = fixture('ComputedFullPathFixture');
ele.set('list', data_1);
ele.addEventListener('oe-breadcrumb-selected', function (event) {
assert.isTrue((event.detail.fullPath == "/home/sub1/sub2/sub3"), 'clicking on last element gives the full path');
done();
});
flush(function () {
var breadcrumbOverflowList = ele.shadowRoot.querySelectorAll(".OverflowSection");
var breadcrumbThirdElement = breadcrumbOverflowList[2].querySelector("paper-item");
MockInteractions.tap(breadcrumbThirdElement);
});
});
});
</script>
</body>
</html>