add default prefix to prefixed-css, refactor tests

selaux · Jun 13, 2014 · e21460c · e21460c
1 parent 31b835e
commit e21460c
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 79 deletions.
diff --git a/lib/stylesheet/prefixed-css.js b/lib/stylesheet/prefixed-css.js
@@ -5,11 +5,8 @@ var _ = require('underscore'),
     generateSpriteSheet = getTemplatedStylesheet('prefixed-css');
 
 module.exports = function(layout, filePath, spritePath, options, callback) {
-    if (!options.prefix) {
-        callback('This stylesheet requires a prefix');
-    }
-
     var localOptions = _.clone(options);
+    localOptions.prefix = localOptions.prefix || 'sprite-';
     localOptions.commonWidth = layout.images[0].width;
     localOptions.commonHeight = layout.images[0].height;
 

diff --git a/test/fixtures/stylesheets/css/with-prefix.css b/test/fixtures/stylesheets/css/with-prefix.css
@@ -1,3 +1,3 @@
-.sprite-foo { background-image: url('./images/png/sprite.png'); background-position: 0 0; width: 150px; height: 12px; }
-.sprite-bar { background-image: url('./images/png/sprite.png'); background-position: 0 -12px; width: 150px; height: 24px; }
-.sprite-test { background-image: url('./images/png/sprite.png'); background-position: 0 -36px; width: 150px; height: 12px; }
+.prefix-foo { background-image: url('./images/png/sprite.png'); background-position: 0 0; width: 150px; height: 12px; }
+.prefix-bar { background-image: url('./images/png/sprite.png'); background-position: 0 -12px; width: 150px; height: 24px; }
+.prefix-test { background-image: url('./images/png/sprite.png'); background-position: 0 -36px; width: 150px; height: 12px; }
diff --git a/test/fixtures/stylesheets/less/with-prefix.less b/test/fixtures/stylesheets/less/with-prefix.less
@@ -1,7 +1,7 @@
-@sprite-foo: "0 0 150px 12px";
-@sprite-bar: "0 -12px 150px 24px";
-@sprite-test: "0 -36px 150px 12px";
-.sprite-sprite (@sprite) {
+@prefix-foo: "0 0 150px 12px";
+@prefix-bar: "0 -12px 150px 24px";
+@prefix-test: "0 -36px 150px 12px";
+.prefix-sprite (@sprite) {
     background-image: url('./images/png/sprite.png');
     background-position: ~`@{sprite}.split(' ')[0]` ~`@{sprite}.split(' ')[1]`;
     width: ~`@{sprite}.split(' ')[2]`;

diff --git a/test/fixtures/stylesheets/prefixed-css/no-options.css b/test/fixtures/stylesheets/prefixed-css/no-options.css
@@ -0,0 +1,4 @@
+[class^='sprite-'], [class*=' sprite-'] { background-image:url('./images/png/sprite.png'); }
+.sprite-foo { background-position:0 0; width:150px; height:12px; }
+.sprite-bar { background-position:0 -12px; width:150px; height:24px; }
+.sprite-test { background-position:0 -36px; width:150px; height:12px; }
diff --git a/test/fixtures/stylesheets/prefixed-css/with-prefix.css b/test/fixtures/stylesheets/prefixed-css/with-prefix.css
@@ -1,4 +1,4 @@
-[class^='sprite-'], [class*=' sprite-'] { background-image:url('./images/png/sprite.png'); }
-.sprite-foo { background-position:0 0; width:150px; height:12px; }
-.sprite-bar { background-position:0 -12px; width:150px; height:24px; }
-.sprite-test { background-position:0 -36px; width:150px; height:12px; }
+[class^='prefix-'], [class*=' prefix-'] { background-image:url('./images/png/sprite.png'); }
+.prefix-foo { background-position:0 0; width:150px; height:12px; }
+.prefix-bar { background-position:0 -12px; width:150px; height:24px; }
+.prefix-test { background-position:0 -36px; width:150px; height:12px; }
diff --git a/test/fixtures/stylesheets/sass/with-prefix.sass b/test/fixtures/stylesheets/sass/with-prefix.sass
@@ -1,7 +1,7 @@
-$sprite-foo: 0 0 150px 12px
-$sprite-bar: 0 -12px 150px 24px
-$sprite-test: 0 -36px 150px 12px
-@mixin sprite-sprite($sprite)
+$prefix-foo: 0 0 150px 12px
+$prefix-bar: 0 -12px 150px 24px
+$prefix-test: 0 -36px 150px 12px
+@mixin prefix-sprite($sprite)
     background-image: url('./images/png/sprite.png')
     background-position: nth($sprite, 1) nth($sprite, 2)
     width: nth($sprite, 3)

diff --git a/test/fixtures/stylesheets/scss/with-prefix.scss b/test/fixtures/stylesheets/scss/with-prefix.scss
@@ -1,7 +1,7 @@
-$sprite-foo: 0 0 150px 12px;
-$sprite-bar: 0 -12px 150px 24px;
-$sprite-test: 0 -36px 150px 12px;
-@mixin sprite-sprite($sprite) {
+$prefix-foo: 0 0 150px 12px;
+$prefix-bar: 0 -12px 150px 24px;
+$prefix-test: 0 -36px 150px 12px;
+@mixin prefix-sprite($sprite) {
   background-image: url("./images/png/sprite.png");
   background-position: nth($sprite, 1) nth($sprite, 2);
   width: nth($sprite, 3);

diff --git a/test/fixtures/stylesheets/stylus/with-prefix.stylus b/test/fixtures/stylesheets/stylus/with-prefix.stylus
@@ -1,7 +1,7 @@
-sprite-foo = 0 0 150px 12px
-sprite-bar = 0 -12px 150px 24px
-sprite-test = 0 -36px 150px 12px
-sprite-sprite($sprite)
+prefix-foo = 0 0 150px 12px
+prefix-bar = 0 -12px 150px 24px
+prefix-test = 0 -36px 150px 12px
+prefix-sprite($sprite)
     background-image url('./images/png/sprite.png')
     background-position $sprite[0] $sprite[1]
     width $sprite[2]

diff --git a/test/specs/stylesheet/prefixed-css.js b/test/specs/stylesheet/prefixed-css.js
@@ -1,54 +1,21 @@
 'use strict';
 
 var name = 'prefixed-css',
-    path = require('path'),
+    testTemplatedStylesheet = require('./testTemplatedStylesheet'),
     testUtils = require('../../utils/test.js'),
-    _ = require('underscore'),
     stylesheetGenerator = require('../../../lib/stylesheet/' + name + '.js');
 
-describe('Stylesheet/' + name, function () {
-    var layout = {
-            width: 150,
-            height: 156,
-            images: [
-                { path: '/bla/foo.png', x: 0, y: 0, width: 150, height: 12 },
-                { path: '/foo/bar.png', x: 0, y: 12, width: 150, height: 24 },
-                { path: '/images/test.png', x: 0, y: 36, width: 150, height: 12 }
-            ]
-        },
-        layoutCommon = {
-            width: 150,
-            height: 156,
-            images: [
-                { path: '/bla/foo.png', x: 0, y: 0, width: 150, height: 12 },
-                { path: '/foo/bar.png', x: 0, y: 12, width: 150, height: 12 },
-                { path: '/images/test.png', x: 0, y: 24, width: 150, height: 12 }
-            ]
-        };
+testTemplatedStylesheet(name, 'css', function () {
+    var layoutCommon = {
+        width: 150,
+        height: 156,
+        images: [
+            { path: '/bla/foo.png', x: 0, y: 0, width: 150, height: 12 },
+            { path: '/foo/bar.png', x: 0, y: 12, width: 150, height: 12 },
+            { path: '/images/test.png', x: 0, y: 24, width: 150, height: 12 }
+        ]
+    };
 
-    it('should generate the correct ' + name, function (done) {
-        var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-prefix.css';
-        testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'sprite-' }, done);
-    });
-
-    it('should generate the correct ' + name + ' with a spritePath specified', function (done) {
-        var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-spritePath.css';
-        testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'sprite-', spritePath: '/this/is/my/spritepath.png' }, done);
-    });
-
-    it('should generate the correct ' + name + ' with a custom nameMapping specified', function (done) {
-        var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-nameMapping.css',
-            nameMapping = function (imagePath) {
-                return path.basename(imagePath, path.extname(imagePath)).split("").reverse().join("");
-            };
-        testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'sprite-', nameMapping: nameMapping }, done);
-    });
-
-    it('should generate the correct ' + name + ' with a pixelRatio specified', function (done) {
-        var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-pixelRatio.css';
-        testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'sprite-', pixelRatio: 2 }, done);
-    });
-
     it('should generate the correct ' + name + ' with common width/height', function (done) {
         var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-common-wh.css';
         testUtils.testStylesheetGeneration(stylesheetGenerator, layoutCommon, expectedStylesheetPath, { prefix: 'sprite-' }, done);

diff --git a/test/specs/stylesheet/testTemplatedStylesheet.js b/test/specs/stylesheet/testTemplatedStylesheet.js
@@ -1,12 +1,16 @@
 'use strict';
 
-module.exports = function (name) {
+module.exports = function (name, suffix, additionalTests) {
     var path = require('path'),
         testUtils = require('../../utils/test.js'),
         _ = require('underscore'),
         stylesheetGenerator = require('../../../lib/stylesheet/' + name + '.js');
 
     describe('Stylesheet/' + name, function () {
+        if (!suffix) {
+            suffix = name;
+        }
+
         var layout = {
                 width: 150,
                 height: 156,
@@ -18,31 +22,35 @@ module.exports = function (name) {
             };
 
         it('should generate the correct ' + name + ' without any options', function (done) {
-            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/no-options.' + name;
+            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/no-options.' + suffix;
             testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, {}, done);
         });
 
         it('should generate the correct ' + name + ' with a prefix specified', function (done) {
-            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-prefix.' + name;
-            testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'sprite-' }, done);
+            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-prefix.' + suffix;
+            testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { prefix: 'prefix-' }, done);
         });
 
         it('should generate the correct ' + name + ' with a spritePath specified', function (done) {
-            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-spritePath.' + name;
+            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-spritePath.' + suffix;
             testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { spritePath: '/this/is/my/spritepath.png' }, done);
         });
 
         it('should generate the correct ' + name + ' with a custom nameMapping specified', function (done) {
-            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-nameMapping.' + name,
+            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-nameMapping.' + suffix,
                 nameMapping = function (imagePath) {
                     return path.basename(imagePath, path.extname(imagePath)).split("").reverse().join("");
                 };
             testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { nameMapping: nameMapping }, done);
         });
 
         it('should generate the correct ' + name + ' with a pixelRatio specified', function (done) {
-            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-pixelRatio.' + name;
+            var expectedStylesheetPath = 'test/fixtures/stylesheets/' + name + '/with-pixelRatio.' + suffix;
             testUtils.testStylesheetGeneration(stylesheetGenerator, layout, expectedStylesheetPath, { pixelRatio: 2 }, done);
         });
+
+        if (additionalTests) {
+            additionalTests();
+        }
     });
 };
diff --git a/test/utils/test.js b/test/utils/test.js
@@ -12,7 +12,8 @@ module.exports = {
             spritePath = 'test/fixtures/images/png/sprite.png',
             stylesheetPath =  'test/fixtures/test.file';
 
-        generator(layout, stylesheetPath, spritePath, options, function () {
+        generator(layout, stylesheetPath, spritePath, options, function (err) {
+            expect(err).not.to.be.ok;
             expect(options).to.deep.equal(expectedOptions);
             expect(fs.readFileSync(expectedPath).toString()).to.equal(fs.readFileSync(stylesheetPath).toString());
             fs.unlinkSync(stylesheetPath);