From: Jeanie Chung Date: Tue, 17 Feb 2015 23:35:18 +0000 (-0800) Subject: Added some more spec tests for the grid. Added subcolumn functionality. X-Git-Tag: v2.0.0-rc.1~140 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=507790988f7a5cd64a5ec4b37d15603f4e2c38cc;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Added some more spec tests for the grid. Added subcolumn functionality. --- diff --git a/html/index.html b/html/index.html index faa6e659..e87b9c0f 100644 --- a/html/index.html +++ b/html/index.html @@ -88,17 +88,11 @@
- - - -

This is 10 Columns

- - - -

This is 10 Columns

- + + + Forever alone - + diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js index 15633534..b226b445 100644 --- a/output/gulp-zurb-inky/index.js +++ b/output/gulp-zurb-inky/index.js @@ -7,7 +7,8 @@ var Inky = function Inky () { "row", "container", "columns", - "button" + "button", + "subcolumns" ]; }; @@ -147,7 +148,7 @@ Inky.prototype = { output = '
' + inner + '
'; break; // TODO: This is super messed up right now - case 'subcolumn': + case 'subcolumns': var subColSize = ''; if ($(component).attr('small')) { @@ -156,7 +157,13 @@ Inky.prototype = { if ($(component).attr('large')) { subColSize += 'large' + '-' + $(component).attr('large') + ' '; } - output = '' + inner + ''; + + if ($(component).next()[0].name !== 'subcolumns') { + output = '' + inner + ''; + } + else { + output = '' + inner + ''; + } break; case 'container': @@ -182,7 +189,7 @@ Inky.prototype = { }, // Description: - // Returns output for column elements + // Returns output for column elements. TODO: this could be refactored to handle both cols and subcols // // Arguments: // col (obj), siblings (str): the initial target column and its siblings within the same row @@ -217,9 +224,17 @@ Inky.prototype = { colSize += 'large' + '-' + $(col).attr('large') + ' '; } - wrapperHTML += '
'; - wrapperHTML += inner; - wrapperHTML += '
'; + wrapperHTML += ''; + + // subcolumns do not need an extra td + if ($(col).children()[0] && $(col).children()[0].name !== 'subcolumns') { + wrapperHTML += ''; + } + else { + wrapperHTML += inner; + } + + wrapperHTML += '
' + inner + '
'; $(col).replaceWith(wrapperHTML); }); diff --git a/spec/columns.js b/spec/columns.js deleted file mode 100644 index c6e0b2d2..00000000 --- a/spec/columns.js +++ /dev/null @@ -1,21 +0,0 @@ -/* global describe, it, expect */ - -"use strict"; - -var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky'); -var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio'); - -describe("the grid", function () { - - beforeEach(function() { - // var str = inky.getHTML(); - var $ = cheerio.load("
Hello
"); - }); - it("returns the correct column syntax", function () { - var $ = cheerio.load('

This is 10 Columns

This is 2 Columns

'); - $ = inky.releaseTheKraken($); - expect($.html()).toEqual('

This is 10 Columns

This is 2 Columns

'); - }); - - -}); diff --git a/spec/components.js b/spec/components.js new file mode 100644 index 00000000..ccb04ee0 --- /dev/null +++ b/spec/components.js @@ -0,0 +1,20 @@ +/* global describe, it, expect */ + +"use strict"; + +var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky'); +var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio'); + +describe("the components", function () { + + it("returns basic button syntax", function () { + var $ = cheerio.load('
'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('
Big button
'); + }); + + + + +}); diff --git a/spec/grid.js b/spec/grid.js new file mode 100644 index 00000000..af07340e --- /dev/null +++ b/spec/grid.js @@ -0,0 +1,50 @@ +/* global describe, it, expect */ + +"use strict"; + +var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky'); +var cheerio = require('../node_modules/gulp-zurb-foundation-email/node_modules/cheerio'); + +describe("the grid", function () { + it("returns the correct row syntax", function() { + var $ = cheerio.load('
This is a row!
'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('
This is a row!
'); + }) + + it("returns the correct container syntax", function() { + var $ = cheerio.load('
This is a container!
'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('
This is a container!
'); + }) + + it("returns the correct column syntax", function () { + var $ = cheerio.load('

This is 10 Columns

This is 2 Columns

'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('

This is 10 Columns

This is 2 Columns

'); + }); + + it("nests subcolumns correctly", function() { + var $ = cheerio.load('

I\'m just half of the parent 10 column

I\'m the other half of the parent 10 column

This is 2 Columns

'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('

I'm just half of the parent 10 column

I'm the other half of the parent 10 column

This is 2 Columns

'); + }) + + it("nests rows in containers", function() { + var $ = cheerio.load('
Row in container
'); + + $ = inky.releaseTheKraken($); + expect($.html()).toEqual('
Row in container
'); + }) + + it("will place the 'last' class on the last column", function() { + }) + + it("will place the 'last' class on a solo column", function() { + + }) +}); diff --git a/spec/inky.js b/spec/inky.js index 5462f824..2ec3b509 100644 --- a/spec/inky.js +++ b/spec/inky.js @@ -5,7 +5,7 @@ var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp describe("inky", function () { it("should be targetting custom tags", function () { - expect(inky.getTags()).toEqual([ 'panel', 'row', 'container', 'columns', 'button' ]); + expect(inky.getTags()).toEqual([ 'panel', 'row', 'container', 'columns', 'button', 'subcolumns' ]); }); });