oe-ui-misc
Version:
collection of miscellaneous oe-ui Polymer components
179 lines (144 loc) • 6.05 kB
HTML
<!--
©2018-2019 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
Bangalore, India. All Rights Reserved.
-->
<html>
<head>
<title>oe-markdown-link tests</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="../node_modules/@webcomponents/custom-elements/src/custom-elements.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" src="../oe-markdown-link.js"></script>
</head>
<body>
<template id="README">
Read Me
-------------
loads a mark-down file and displays as content.
Uses Polymer's [marked-element](https://elements.polymer-project.org/elements/marked-element) for rendering.
A wrapper is required since [marked-element](https://elements.polymer-project.org/elements/marked-element) does not
allow specifying a url.
``` html
<oe-markdown-link markdown={{md}} markdown-url={{mdurl}}>
</oe-markdown-link>
```
> **Properties:**
> - **markdown** markdown to render.
> - **maskdownUrl** url to load the markdown data from.
[Details](DETAILS.md)
</template>
<template id="DETAILS">
Details about element
-------------
This section contains details about the element. [Back](README.md)
</template>
<test-fixture id="simple">
<template>
<oe-markdown-link></oe-markdown-link>
</template>
</test-fixture>
<test-fixture id="load-from-url">
<template>
<oe-markdown-link markdown-url="_x/markdown/README.md"></oe-markdown-link>
</template>
</test-fixture>
<script type="module">
import '@polymer/iron-test-helpers/test-helpers.js';
import '@polymer/iron-test-helpers/mock-interactions.js';
suite('<oe-markdown-link>', function () {
var server;
setup(function () {
server = sinon.fakeServer.create();
server.autoRespond = true;
server.respondWith(
'GET',
/_x\/markdown\/.*.md/,
function (req) {
//url ~ _x/markdown/B
var parts = req.url.split('/');
var mdfileName = parts[parts.length - 1];
var mdTemplateId = mdfileName.split('.')[0];
var mdTemplate = document.querySelector('template#' + mdTemplateId);
if (mdTemplate) {
req.respond(200, 'text/html', mdTemplate.innerHTML);
} else {
req.respond(404);
}
}
);
});
teardown(function () {
server.restore();
});
test('element should render provided markdown', function (done) {
var element = fixture('simple');
flush(function(){
expect(element.$._markdown.querySelectorAll('a')).to.be.empty;
element.addEventListener('oe-marked-render-complete', function (evt) { //eslint-disable-line no-unused-vars
expect(element.$._markdown.querySelectorAll('a')).to.not.be.empty;
flush(function(){
var detailsLink = element.$._markdown.querySelectorAll('a[href="DETAILS.md"]');
expect(detailsLink).to.exist;
done();
});
});
var mdTemplate = document.querySelector('template#README');
element.set('markdown', mdTemplate.innerHTML);
});
});
test('element should load and render from markdownUrl', function (done) {
var element = fixture('simple');
expect(element.$._markdown.querySelectorAll('a')).to.be.empty;
flush(function(){
element.addEventListener('oe-marked-render-complete', function (evt) { //eslint-disable-line no-unused-vars
expect(element.$._markdown.querySelectorAll('a')).to.not.be.empty;
var detailsLink = element.$._markdown.querySelectorAll('a[href="DETAILS.md"]');
expect(detailsLink).to.exist;
done();
});
});
element.set('markdownUrl', '_x/markdown/README.md');
});
test('Element should handle simple <a href="local.md" itself', function (done) {
var element = fixture('load-from-url');
var round = 0;
var detailsLink;
element.set('markdownUrl','_x/markdown/README.md')
flush(function(){
element.addEventListener('oe-marked-render-complete', function (evt) { //eslint-disable-line no-unused-vars
if (round == 0) {
//markdown rendered initially
expect(element.markdownUrl).to.equal('_x/markdown/README.md');
detailsLink = element.$._markdown.querySelector('a[href="DETAILS.md"]');
expect(detailsLink).to.exist;
MockInteractions.tap(detailsLink);
round++;
} else if (round == 1) {
//markdown re-rendered due to click on Details link
expect(element.markdownUrl).to.equal('_x/markdown/DETAILS.md');
var readmeLink = element.$._markdown.querySelector('a[href="README.md"]');
expect(readmeLink).to.exist;
MockInteractions.tap(readmeLink);
round++;
} else if (round == 2) {
//clicked on README again
expect(element.markdownUrl).to.equal('_x/markdown/README.md');
detailsLink = element.$._markdown.querySelector('a[href="DETAILS.md"]');
expect(detailsLink).to.exist;
done();
}
});
});
});
});
</script>
</body>
</html>