Fix code copy button (#22)

* Fix code copy button

* Adding tests

Author: cherifGsoul

demo_frame.js

@@ -31,15 +31,19 @@ module.exports = function(node) {
 		var js = getJS.call(this, sourceEl);
 
 		if (html && html.trim()) {
-			var dataForHtml = node.querySelector("[data-for=html] > pre code, [data-for=html] > div > pre code");
+			var htmlPre = node.querySelector('[data-for=html] > pre, [data-for=html] > div > pre');
+			var dataForHtml = document.createElement('code');
+			htmlPre.appendChild(dataForHtml);
 			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");
+			var jsPre = node.querySelector('[data-for=js] > pre, [data-for=js] > div > pre');
+			var dataForJS = document.createElement('code');
+			jsPre.appendChild(dataForJS);
 			dataForJS.innerHTML = escape(js);
 			prettify(dataForJS);
 

demo_tpl.js

@@ -1,6 +1,7 @@
-// Note that the space in the <code> </code> blocks is significant:
-// without it, any demo in a page would break the rest of the code
-// examples throughout the page.
+// Leaving the content the of the <pre> empty is significant
+// <code> element will be appended when processing the code highlighting
+// this prevent PrismJS to register "Copy" button for demos at bit-docs-prettify step
+
 
 module.exports = `
 	<ul>
@@ -12,9 +13,9 @@ module.exports = `
 		<iframe></iframe>
 	</div>
 	<div class="tab-content" data-for="html">
-		<pre class="line-numbers language-html"><code> </code></pre>
+		<pre class="line-numbers language-html"></pre>
 	</div>
 	<div class="tab-content" data-for="js">
-		<pre class="line-numbers language-js"><code> </code></pre>
+		<pre class="line-numbers language-js"></pre>
 	</div>
 `;

test.js

@@ -507,5 +507,45 @@ describe("bit-docs-tag-demo", function() {
 					});
 			});
 		});
+
+		describe("Insert code tag", function() {
+			insertCodeFor("html");
+			insertCodeFor("js");
+
+			function insertCodeFor(htmlOrJs) {
+				var tab = htmlOrJs === "html" ? "withoutJs" : "withoutHtml";
+				describe(htmlOrJs, 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/" + tab + ".html"
+							);
+						}).then(function() {
+							return ctx.page.waitForFunction(function() {
+								return !!document.querySelector(".tab.active");
+							});
+						});
+					});
+	
+					after(function() {
+						return ctx.page.close().then(function() {
+							ctx.page = null;
+						});
+					});
+	
+					it("inserts " + htmlOrJs + " code", function() {
+						return ctx.page.evaluate(function(htmlOrJs){
+								return {
+									code: document.querySelector("[data-for=" + htmlOrJs + "] > pre"),
+								}
+							}, htmlOrJs).then(function(r){
+								assert.ok(r.code, "Code inserted at the right spot");
+							})
+					});
+				});
+			}
+		});
 	});
 });