Merge pull request #12 from mike-goodwin/techjeffharris-master

Techjeffharris master

components/carousel.pug

@@ -7,37 +7,37 @@ mixin carousel-caption(item)
 			p #{item.p}
 		unless !item.button
 			p
-				a.btn.btn-lg.btn-primary(href="#{item.button.url}" role="button") #{item.button.caption}
+				a.btn.btn-lg.btn-primary(href=item.button.url role="button") #{item.button.caption}
 
 //- carousel
 mixin carousel(id,items)
-	.carousel.slide(id="carousel-#{id}",data-ride="carousel")
+	.carousel.slide(id="carousel-" + id ,data-ride="carousel")
 		//- Indicators
 		ol.carousel-indicators
 			each item,index in items
 				if(index === 0)
-					li.active(data-target="#carousel-#{id}", data-slide-to="#{index}")
+					li.active(data-target="#carousel-" + id, data-slide-to=index)
 				else
-					li(data-target="#carousel-#{id}", data-slide-to="#{index}")
+					li(data-target="#carousel-" + id, data-slide-to=index)
 
 
 		//- Wrapper for slides
 		.carousel-inner(role="listbox")
 			each item,index in items
 				if(index === 0)
 					.item.active
-						img(src="#{item.image}")
+						img(src=item.image)
 						+carousel-caption(item)
-							
+
 				else
 					.item
-						img(src="#{item.image}")
+						img(src=item.image)
 						+carousel-caption(item)
 
 		//-  Controls
-		a.left.carousel-control(href="#carousel-#{id}", role="button", data-slide="prev")
+		a.left.carousel-control(href="#carousel-" + id, role="button", data-slide="prev")
 			+icon("chevron-left")
 			span.sr-only Previous
-		a.right.carousel-control(href="#carousel-#{id}", role="button", data-slide="next")
+		a.right.carousel-control(href="#carousel-" + id, role="button", data-slide="next")
 			+icon("chevron-right")
 			span.sr-only Next

components/panels.pug

@@ -1,37 +1,38 @@
 //- panel
 mixin panel(type,title)
-	.panel(class="panel-#{type}")
-		.panel-heading
-			h3.panel-title= title
-		.panel-body
-			block
+    .panel(class="panel-" + type)
+        if undefined !== title
+            .panel-heading
+                h3.panel-title= title
+        .panel-body
+            block
 
 //- panel-default
 mixin panel-default(title)
-	+panel("default",title)
-		block
+    +panel("default",title)
+        block
 
 //- panel-primary
 mixin panel-primary(title)
-	+panel("primary",title)
-		block
-		
+    +panel("primary",title)
+        block
+
 //- panel-success
 mixin panel-success(title)
-	+panel("success",title)
-		block
-		
+    +panel("success",title)
+        block
+
 //- panel-info
 mixin panel-info(title)
-	+panel("info",title)
-		block
+    +panel("info",title)
+        block
 
 //- panel-warning
 mixin panel-warning(title)
-	+panel("warning",title)
-		block
-		
+    +panel("warning",title)
+        block
+
 //- panel-danger
 mixin panel-danger(title)
-	+panel("danger",title)
-		block
+    +panel("danger",title)
+        block

components/toggle.pug

@@ -1,6 +1,6 @@
 //- toggle
 mixin toggle(type,text)
-	button.btn(class="btn-#{type}",type="button",data-toggle="button",aria-pressed="false",autocomplete="off")
+	button.btn(class="btn-" + type,type="button",data-toggle="button",aria-pressed="false",autocomplete="off")
 		= text
 
 //- toggle-primary
@@ -35,12 +35,12 @@ mixin toggle-danger(text)
 mixin checkbox-toggle(type,items,active)
 	.btn-group(data-toggle="buttons")
 		each item,index in items
-			if(index === active)
-				label.btn.active(class="btn-#{type}")
+			if index === active 
+				label.btn.active(class="btn-" + type)
 					input(type="checkbox",autocomplete="off",checked) 
 					|  #{item.caption}
 			else
-				label.btn(class="btn-#{type}")
+				label.btn(class="btn-" + type)
 					input(type="checkbox",autocomplete="off") 
 					|  #{item.caption}
 
@@ -74,12 +74,12 @@ mixin radio-toggle(type,name,items,active)
 	.btn-group(data-toggle="buttons")
 		each item,index in items
 			if(index === active)
-				label.btn.active(class="btn-#{type}")
-					input(type="radio",name="#{name}",autocomplete="off",checked) 
+				label.btn.active(class="btn-" + type)
+					input(type="radio",name=name,autocomplete="off",checked) 
 					|  #{item.caption}
 			else
-				label.btn(class="btn-#{type}")
-					input(type="radio",name="#{name}",autocomplete="off") 
+				label.btn(class="btn-" + type)
+					input(type="radio",name=name,autocomplete="off") 
 					|  #{item.caption}
 
 //- radio-toggle-primary

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pug-bootstrap",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Bootstrap framework written completely using mixins in pug",
   "main": "bootstrap.pug",
   "scripts": {

test/carousel.js

@@ -2,6 +2,44 @@ var pug = require("pug");
 var assert = require("assert");
 var path = require("path");
 
-describe("Carousel", function() {
+var items = [
+        {
+        h1: 'heading 0',
+        p: 'para 0',
+        button: {
+            url: 'button url 0',
+            caption: 'button caption 0'
+        }
+    },
+    {
+        p: 'para 1',
+        button: {
+            url: 'button url 1',
+            caption: 'button caption 1'
+        }
+    },
+    {
+        h1: 'heading 2',
+        button: {
+            url: 'button url 2',
+            caption: 'button caption 2'
+        }
+    },
+    {
+        h1: 'heading 3',
+        p: 'para 3'
+    }
+];
 
+var locals = {
+    id: 'carousel-id',
+    items: items
+};
+
+describe("Carousel", function () {
+    fn = pug.compileFile(path.join(__dirname,"fixtures/carousel/carousel.pug"));
+    actual = '<div class="carousel slide" id="carousel-carousel-id" data-ride="carousel"><ol class="carousel-indicators"><li class="active" data-target="#carousel-carousel-id" data-slide-to="0"></li><li data-target="#carousel-carousel-id" data-slide-to="1"></li><li data-target="#carousel-carousel-id" data-slide-to="2"></li><li data-target="#carousel-carousel-id" data-slide-to="3"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img/><div class="carousel-caption"><h1>heading 0</h1><p>para 0</p><p><a class="btn btn-lg btn-primary" href="button url 0" role="button">button caption 0</a></p></div></div><div class="item"><img/><div class="carousel-caption"><p>para 1</p><p><a class="btn btn-lg btn-primary" href="button url 1" role="button">button caption 1</a></p></div></div><div class="item"><img/><div class="carousel-caption"><h1>heading 2</h1><p><a class="btn btn-lg btn-primary" href="button url 2" role="button">button caption 2</a></p></div></div><div class="item"><img/><div class="carousel-caption"><h1>heading 3</h1><p>para 3</p></div></div></div><a class="left carousel-control" href="#carousel-carousel-id" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-carousel-id" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>';
+    it("should generate a carousel", function() {
+        assert.equal(actual, fn(locals));
+    });
 });

test/fixtures/carousel/carousel.pug

@@ -0,0 +1,3 @@
+include ../../../components/icons
+include ../../../components/carousel
++carousel(id,items)

test/fixtures/panels/panel-danger.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-danger(title)

test/fixtures/panels/panel-default.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-default(title)

test/fixtures/panels/panel-info.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-info(title)

test/fixtures/panels/panel-primary.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-primary(title)

test/fixtures/panels/panel-success.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-success(title)

test/fixtures/panels/panel-warning.pug

@@ -0,0 +1,2 @@
+include ../../../components/panels.pug
++panel-warning(title)

test/fixtures/toggles/checkbox-toggle-danger.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-danger(items,active)

test/fixtures/toggles/checkbox-toggle-default.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-default(items,active)

test/fixtures/toggles/checkbox-toggle-info.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-info(items,active)

test/fixtures/toggles/checkbox-toggle-primary.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-primary(items,active)

test/fixtures/toggles/checkbox-toggle-success.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-success(items,active)

test/fixtures/toggles/checkbox-toggle-warning.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++checkbox-toggle-warning(items,active)

test/fixtures/toggles/radio-toggle-danger.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-danger(name,items,active)

test/fixtures/toggles/radio-toggle-default.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-default(name,items,active)

test/fixtures/toggles/radio-toggle-info.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-info(name,items,active)

test/fixtures/toggles/radio-toggle-primary.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-primary(name,items,active)

test/fixtures/toggles/radio-toggle-success.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-success(name,items,active)

test/fixtures/toggles/radio-toggle-warning.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++radio-toggle-warning(name,items,active)

test/fixtures/toggles/toggle-danger.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-danger(caption)

test/fixtures/toggles/toggle-default.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-default(caption)

test/fixtures/toggles/toggle-info.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-info(caption)

test/fixtures/toggles/toggle-primary.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-primary(caption)

test/fixtures/toggles/toggle-success.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-success(caption)

test/fixtures/toggles/toggle-warning.pug

@@ -0,0 +1,2 @@
+include ../../../components/toggle.pug
++toggle-warning(caption)

test/panels.js

@@ -0,0 +1,82 @@
+var assert = require('assert');
+var pug = require('pug');
+var fs = require('fs');
+var path = require('path');
+
+// Write fixture data
+var mixins = ["panel-default", "panel-primary", "panel-success", "panel-info", "panel-warning", "panel-danger"];
+mixins.forEach(function (m) {
+    var fileTemplate = `include ../../../components/panels.pug
++${m}(title)`;
+    var fileName = `${m}.pug`;
+    fs.writeFileSync(path.join(__dirname, "fixtures/panels", fileName), fileTemplate);
+});
+
+var testData = [
+    {
+        suite: 'panel-default mixin',
+        spec: 'should render a default panel',
+        fixture: 'panel-default.pug',
+        locals: { title: "Default Panel" },
+        actual: '<div class="panel panel-default">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    },
+    {
+        suite: 'panel-danger mixin',
+        spec: 'should render a danger panel',
+        fixture: 'panel-danger.pug',
+        locals: { title: "Danger Panel" },
+        actual: '<div class="panel panel-danger">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    },
+    {
+        suite: 'panel-info mixin',
+        spec: 'should render a info panel',
+        fixture: 'panel-info.pug',
+        locals: { title: "Info Panel" },
+        actual: '<div class="panel panel-info">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    },
+    {
+        suite: 'panel-primary mixin',
+        spec: 'should render a primary panel',
+        fixture: 'panel-primary.pug',
+        locals: { title: "Primary Panel" },
+        actual: '<div class="panel panel-primary">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    },
+    {
+        suite: 'panel-success mixin',
+        spec: 'should render a danger panel',
+        fixture: 'panel-success.pug',
+        locals: { title: "Success Panel" },
+        actual: '<div class="panel panel-success">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    },
+    {
+        suite: 'panel-warning mixin',
+        spec: 'should render a warning panel',
+        fixture: 'panel-warning.pug',
+        locals: { title: "Warning Panel" },
+        actual: '<div class="panel panel-warning">[HEADING]<div class="panel-body"></div></div>',
+        heading: '<div class="panel-heading"><h3 class="panel-title">[TITLE]</h3></div>'
+    }
+];
+
+describe('Panels', function () {
+    testData.forEach(function (item) {
+        describe(item.suite, function () {
+            it(item.spec + ' (with supplied title)', function () {
+                var fn = pug.compileFile(path.join(__dirname, "fixtures/panels", item.fixture));
+                var heading = item.heading.replace('[TITLE]', item.locals.title);
+                var actual = item.actual.replace('[HEADING]', heading);
+                assert.equal(actual, fn(item.locals));
+            });
+            it(item.spec + ' (with default title)', function () {
+                var fn = pug.compileFile(path.join(__dirname, "fixtures/panels", item.fixture));
+                var actual = item.actual.replace('[HEADING]', '');
+                assert.equal(actual, fn());
+            });
+        });
+    });
+});