Merge pull request #21 from bit-docs/20-no-content-tabs

Don’t show the HTML tab when it’s empty

Author: chasenlehara

demo_frame.js

@@ -30,9 +30,13 @@ module.exports = function(node) {
 		var html = getHTML.call(this, demoEl);
 		var js = getJS.call(this, sourceEl);
 
-		var dataForHtml = node.querySelector("[data-for=html] > pre code, [data-for=html] > div > pre code");
-		dataForHtml.innerHTML = escape(html);
-		prettify(dataForHtml);
+		if (html && html.trim()) {
+			var dataForHtml = node.querySelector("[data-for=html] > pre code, [data-for=html] > div > pre code");
+			dataForHtml.innerHTML = escape(html);
+			prettify(dataForHtml);
+
+			show(node.querySelector("[data-tab=html]"));
+		}
 
 		if (js) {
 			var dataForJS = node.querySelector("[data-for=js] > pre code, [data-for=js] > div > pre code");

demo_frame.stache

@@ -1,7 +1,7 @@
 module.exports = `
 	<ul>
 		<li class="tab" data-tab="demo">Demo</li>
-		<li class="tab" data-tab="html">HTML</li>
+		<li class="tab" data-tab="html" style="display:none">HTML</li>
 		<li class="tab" data-tab="js" style="display:none;">JS</li>
 	</ul>
 	<div class="tab-content" data-for="demo">

demo_tpl.js

@@ -281,6 +281,38 @@ describe("bit-docs-tag-demo", function() {
 			});
 		});
 
+		describe("without html", function() {
+			before(function() {
+				return ctx.browser.newPage().then(function(p) {
+					ctx.page = p;
+					return ctx.page.goto(
+						"http://127.0.0.1:8081/test/temp/withoutHtml.html"
+					);
+				});
+			});
+
+			after(function() {
+				return ctx.page.close().then(function() {
+					ctx.page = null;
+				});
+			});
+
+			describe("HTML", function() {
+				// expect no content
+				dataForHtml("");
+
+				it("tab is hidden", function() {
+					return ctx.page
+						.evaluate(function() {
+							return document.querySelector('[data-tab="html"]').style.display;
+						})
+						.then(function(display) {
+							assert.equal(display, "none", "html tab is hidden");
+						});
+				});
+			});
+		});
+
 		describe("without js", function() {
 			before(function() {
 				return ctx.browser.newPage().then(function(p) {
@@ -448,8 +480,8 @@ describe("bit-docs-tag-demo", function() {
 						};
 					})
 					.then(function(r) {
-						assert.equal(r.wrappers, 6, "four wrappers exists");
-						assert.equal(r.injected, 6, "four injected into wrappers");
+						assert.equal(r.wrappers, 7, "demo wrappers exist");
+						assert.equal(r.injected, 7, "demos injected into wrappers");
 					});
 			});
 		});

test.js

@@ -0,0 +1,9 @@
+<div id="demo-html">
+
+</div>
+
+<script id="demo-source">
+	var div = document.createElement("div");
+	div.textContent = "it worked!";
+	document.body.appendChild(div);
+</script>

test/demos/demo-without-html.html

@@ -13,6 +13,7 @@ function makeWrapper(path) {
 function allDemos() {
 	return [
 		"demo-with-ids",
+		"demo-without-html",
 		"demo-without-ids",
 		"demo-without-js",
 		"demo-complex",
@@ -30,6 +31,10 @@ var docMap = Promise.resolve({
 		name: "withIds",
 		body: makeWrapper("demo-with-ids")
 	},
+	withoutHtml: {
+		name: "withoutHtml",
+		body: makeWrapper("demo-without-html")
+	},
 	withoutIds: {
 		name: "withoutIds",
 		body: makeWrapper("demo-without-ids")