Skip to content

Commit

Permalink
Update README and tests with comments from Juicy/imported-template/pu…
Browse files Browse the repository at this point in the history 
…ll/31

 - reset mock server,
 - don't use mock server if mockable by static files,
 - add pre-test control expectation to ensure conditions,
 - few typographical changes.
  • Loading branch information
@tomalec
tomalec committed Oct 2, 2017
1 parent c924951 commit 44523a3
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 40 deletions.
21 changes: 11 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
==============
> Declarative way for client-side includes
`<juicy-html>` is a custom element that lets you load HTML partials from JS objects and external files into your DOM. It acts more or less, as `include` statement known in many other languages. It also provides data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.
`<juicy-html>` is a custom element that lets you load HTML partials from JS objects and external files into your DOM. It acts more or less, as `include` statement known in many other languages. It also provides a simple data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.

### External files
To load HTML from external file all you need is:
Expand Down Expand Up @@ -100,18 +100,19 @@ Please note, that loaded `<script>` and `<style>` will be executed every time HT

Attribute | Options | Default | Description
--- | --- | --- | ---
`html` | *string* | `""` | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.
`href` | *string* | `""` | Path of a partial to be loaded. Setting this one will remove `html` attribute.
`model`(_optional_) | *Object|String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every root node of loaded document
`html` | *String* | `""` | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.
`href` | *String* | `""` | Path of a partial to be loaded. Setting this one will remove `html` attribute.
`model`(_optional_) | *Object/String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every root node of loaded document

## Properties

Property | Type | Default | Description
--- | --- | --- | ---
`model` | *Object* | `undefined` | See [attributes](#Attributes)
`html` | *string* | `""` | See [attributes](#Attributes)
`href` | *string* | `""` | See [attributes](#Attributes)
`pending` | *XMLHttpRequest* | | pending XHR if any
Property | Type | Default | Description
--- | --- | --- | ---
`model` | *Object* | `undefined` | See [attributes](#Attributes), plays nice with Polymer data-binding
`html` | *String* | `""` | See [attributes](#Attributes)
`href` | *String* | `""` | See [attributes](#Attributes)
`pending` | *XMLHttpRequest* | | pending XHR if any
`stampedNodes` | *Array* | `[]` | Array of stamped nodes.

Please note, that properties are available after element is upgraded.
To provide a state before element is upgraded, please use attributes.
Expand Down
16 changes: 3 additions & 13 deletions test/content-legacy/deprecation-warning.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<test-fixture id="juicy-html-with-content">
<template>
<!-- nest to workaround test-fixture bug -->
<div><template is="juicy-html" content="/mock/smth">
<div><template is="juicy-html" content="../mock/smth.html">
</template></div>
</template>
</test-fixture>
Expand All @@ -31,7 +31,7 @@

<script>
describe('<juicy-html>', function () {
var myEl, changedEl, server, infoSpy, warnSpy, errorSpy;
var myEl, changedEl, infoSpy, warnSpy, errorSpy;
beforeEach(function () {
infoSpy = sinon.spy(console, 'info');
infoSpy.displayName = 'console.info';
Expand All @@ -45,16 +45,6 @@
warnSpy.restore();
errorSpy.restore();
});
before(function () {
var server = sinon.fakeServer.create();
server.xhr.useFilters = true;
server.xhr.addFilter(function (method, url) {
//whenever the this returns true the request will not faked
return !url.match(/mock\//);
});
server.respondWith('GET', '/mock/smth', [200, {"Content-Type": "text/html"}, '<div id="smth">smth</div>']);
server.autoRespond = true;
});
context('when element is attached with content attribute', function () {
beforeEach(function (done) {
myEl = fixture('juicy-html-with-content').querySelector('template[is="juicy-html"]');
Expand All @@ -70,7 +60,7 @@
context('when content attribute is changed', function () {
beforeEach(function (done) {
myEl = fixture('juicy-html-without-content').querySelector('template[is="juicy-html"]');
myEl.setAttribute('content', '/mock/smth');
myEl.setAttribute('content', '../mock/smth.html');
// wait for (faked) XHR
setTimeout(done, 100);
});
Expand Down
12 changes: 11 additions & 1 deletion test/content-legacy/inline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@
});

it('should remove stamped nodes after content is cleared', function(){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
myEl.setAttribute('content', null);
expect(myEl.nextElementSibling).to.be.null;
expect(myEl.previousElementSibling).to.be.null;
Expand All @@ -50,8 +54,11 @@
expect(myEl.parentNode.children.length).to.equal(2);
});

it('should remove stamped nodes after it\s detached from DOM', function(done){
it('should remove stamped nodes after it\'s detached from DOM', function(done){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
parent.removeChild(myEl);
setTimeout(function waitForDetachedPolyfill() {
expect(parent.children.length).to.be.equal(0);
Expand All @@ -63,6 +70,9 @@
// https://github.com/Juicy/juicy-html/issues/17
it('should remove stamped nodes after `content` attribute is removed', function(){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
myEl.removeAttribute('content');
expect(parent.children.length).to.be.equal(1);
expect(parent.childNodes.length).to.be.equal(1);
Expand Down
17 changes: 9 additions & 8 deletions test/content-legacy/no-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<test-fixture id="juicy-html-with-content">
<template>
<!-- nest to workaround test-fixture bug -->
<div><template is="juicy-html" content="/mock/smth">
<div><template is="juicy-html" content="/mock/smth.html">
</template></div>
</template>
</test-fixture>
Expand All @@ -31,7 +31,7 @@
<test-fixture id="juicy-html-200-empty">
<template>
<!-- nest to workaround test-fixture bug -->
<div><template is="juicy-html" content="/mock/200">
<div><template is="juicy-html" content="../mock/200">
</template></div>
</template>
</test-fixture>
Expand All @@ -53,17 +53,18 @@
errorSpy.restore();
});
before(function () {
var server = sinon.fakeServer.create();
server = sinon.fakeServer.create();
server.xhr.useFilters = true;
server.xhr.addFilter(function (method, url) {
//whenever the this returns true the request will not faked
return !url.match(/mock\//);
//whenever this returns true the request will not faked
return !url.match(/mock\/204/);
});
server.respondWith('GET', '/mock/204', [204, {"Content-Type": "text/html"}, '']);
server.respondWith('GET', '/mock/200', [200, {"Content-Type": "text/html"}, '']);
server.respondWith('GET', '/mock/smth', [200, {"Content-Type": "text/html"}, '<div id="smth">smth</div>']);
server.autoRespond = true;
});
after(function (){
server.restore();
});
context('when external file returns <code>204 No Content</code>', function () {
beforeEach(function (done) {

Expand Down Expand Up @@ -91,7 +92,7 @@
beforeEach(function (done) {
myEl = fixture('juicy-html-200-empty').querySelector('template[is="juicy-html"]');
changedEl = fixture('juicy-html-with-content').querySelector('template[is="juicy-html"]');
changedEl.setAttribute('content', '/mock/200');
changedEl.setAttribute('content', '../mock/200');
// wait for (faked) XHR
setTimeout(done, 100);
});
Expand Down
9 changes: 9 additions & 0 deletions test/content-legacy/skipping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,23 @@
sinon.spy(myEl, 'skipStampingPendingFile');
});
it('to another url, skipStampingPendingFile method should get called', function(){
// pre-test conditions
expect(myEl.skipStampingPendingFile).not.to.be.called;
// actual test
myEl.setAttribute('content', '../../partials/page_1.html');
expect(myEl.skipStampingPendingFile).to.be.calledOnce;
});
it('to a string, skipStampingPendingFile method should get called', function(){
// pre-test conditions
expect(myEl.skipStampingPendingFile).not.to.be.called;
// actual test
myEl.setAttribute('content', 'blah');
expect(myEl.skipStampingPendingFile).to.be.calledOnce;
});
it('to `null`, skipStampingPendingFile method should get called', function(){
// pre-test conditions
expect(myEl.skipStampingPendingFile).not.to.be.called;
// actual test
myEl.setAttribute('content', null);
expect(myEl.skipStampingPendingFile).to.be.calledOnce;
});
Expand Down
12 changes: 11 additions & 1 deletion test/inline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
});

it('should remove stamped nodes after html is cleared', function(){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
myEl.setAttribute('html', null);
expect(myEl.nextElementSibling).to.be.null;
expect(myEl.previousElementSibling).to.be.null;
Expand All @@ -52,8 +56,11 @@
expect(myEl.parentNode.children.length).to.equal(2);
});

it('should remove stamped nodes after it\s detached from DOM', function(done){
it('should remove stamped nodes after it\'s detached from DOM', function(done){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
parent.removeChild(myEl);
setTimeout(function waitForDetachedPolyfill() {
expect(parent.children.length).to.be.equal(0);
Expand All @@ -65,6 +72,9 @@
// https://github.com/Juicy/juicy-html/issues/17
it('should remove stamped nodes after `html` attribute is removed', function(){
var parent = myEl.parentNode;
// pre-test conditions
expect(parent.children.length).to.be.equal(2);
// actual test
myEl.removeAttribute('html');
expect(parent.children.length).to.be.equal(1);
expect(parent.childNodes.length).to.be.equal(1);
Expand Down
Empty file added test/mock/200
View file
Empty file.
1 change: 1 addition & 0 deletions test/mock/smth.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div id="smth">smth</div></template>
15 changes: 8 additions & 7 deletions test/no-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<test-fixture id="juicy-html-with-href">
<template>
<!-- nest to workaround test-fixture bug -->
<div><template is="juicy-html" href="/mock/smth">
<div><template is="juicy-html" href="./mock/smth">
</template></div>
</template>
</test-fixture>
Expand All @@ -31,7 +31,7 @@
<test-fixture id="juicy-html-200-empty">
<template>
<!-- nest to workaround test-fixture bug -->
<div><template is="juicy-html" href="/mock/200">
<div><template is="juicy-html" href="./mock/200">
</template></div>
</template>
</test-fixture>
Expand All @@ -53,17 +53,18 @@
errorSpy.restore();
});
before(function () {
var server = sinon.fakeServer.create();
server = sinon.fakeServer.create();
server.xhr.useFilters = true;
server.xhr.addFilter(function (method, url) {
//whenever the this returns true the request will not faked
//whenever this returns true the request will not faked
return !url.match(/mock\//);
});
server.respondWith('GET', '/mock/204', [204, {"Content-Type": "text/html"}, '']);
server.respondWith('GET', '/mock/200', [200, {"Content-Type": "text/html"}, '']);
server.respondWith('GET', '/mock/smth', [200, {"Content-Type": "text/html"}, '<div id="smth">smth</div>']);
server.autoRespond = true;
});
after(function () {
server.restore();
});
context('when external file returns <code>204 No Content</code>', function () {
beforeEach(function (done) {

Expand Down Expand Up @@ -91,7 +92,7 @@
beforeEach(function (done) {
myEl = fixture('juicy-html-200-empty').querySelector('template[is="juicy-html"]');
changedEl = fixture('juicy-html-with-href').querySelector('template[is="juicy-html"]');
changedEl.setAttribute('href', '/mock/200');
changedEl.setAttribute('href', './mock/200');
// wait for (faked) XHR
setTimeout(done, 100);
});
Expand Down

0 comments on commit 44523a3

Please sign in to comment.