Done: tests

vvasilev- · vvasilev- · commit 092b66a304f4 · 2015-06-01T09:54:43.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+/test/build/*.css
+/test/build/*.png
diff --git a/index.js b/index.js
@@ -36,6 +36,7 @@ var TEMPLATES         = {
  * @type {Object}
  */
 var defaults = {
+	baseUrl       : './',
 	externalStyle : false,
 	spritePath    : null,
 	spriteName    : 'sprite.png',
@@ -479,7 +480,7 @@ function updateReferences(images, opts, sprites, css) {
 
 				if (image) {
 					// Fix path to the sprite
-					image.spriteRef = path.relative(path.dirname(css.source.input.file), image.spritePath);
+					image.spriteRef = path.relative(path.resolve(opts.baseUrl, '.'), image.spritePath);
 					image.spriteRef = image.spriteRef.replace(path.sep, '/', 'g');
 
 					backgroundImage = postcss.decl({
diff --git a/package.json b/package.json
@@ -26,5 +26,13 @@
 		"mkdirp": "^0.5.1",
 		"q": "^1.4.0",
 		"spritesmith": "^1.3.1"
+	},
+	"devDependencies": {
+		"tape": "^4.0.0",
+		"tap-spec": "^3.0.0",
+		"postcss": "^0.9.0"
+	},
+	"scripts": {
+		"test": "node ./test/index.js | ./node_modules/.bin/tap-spec"
 	}
 }
diff --git a/test/build/.gitkeep b/test/build/.gitkeep
diff --git a/test/expectations/external.css b/test/expectations/external.css
@@ -0,0 +1,14 @@
+.circle,
+.square { background: no-repeat; background-image: url(sprite.retina.png); }
+
+.circle { background-position: 0 0; width: 25px; height: 25px; }
+.square { background-position: -25px 0; width: 25px; height: 25px; }
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	.circle,
+	.square { background: no-repeat; background-image: url(sprite.retina.@2x.png); background-size: 50px 25px; }
+	
+	.circle { background-position: 0 0; width: 25px; height: 25px; }
+	.square { background-position: -25px 0; width: 25px; height: 25px; }
+}
+
diff --git a/test/expectations/style.basic-color.css b/test/expectations/style.basic-color.css
@@ -0,0 +1,2 @@
+.selector-a { background-image: url(sprite.basic-color.png); background-position: 0 0; }
+.selector-b { background-image: url(sprite.basic-color.png); background-position: -25px 0; background-color: #000; }
diff --git a/test/expectations/style.basic.css b/test/expectations/style.basic.css
@@ -0,0 +1,2 @@
+.selector-a { background-image: url(sprite.basic.png); background-position: 0 0; }
+.selector-b { background-image: url(sprite.basic.png); background-position: -25px 0; }
diff --git a/test/expectations/style.fg.css b/test/expectations/style.fg.css
@@ -0,0 +1,9 @@
+.selector-a { background-image: url(sprite.fg.png); background-position: 0 0; }
+.selector-b { background-image: url(sprite.fg.png); background-position: -25px 0; }
+.selector-c { background: #fff url(not-exist.png) no-repeat 0 0; }
+
+@media (max-width: 767px) {
+	.selector-a { background-image: url(sprite.fg.retina.png); background-position: 0 0; }
+	.selector-b { background-image: url(sprite.fg.retina.png); background-position: -50px 0; }
+	.selector-c { background-image: url(not-exist@2x.png); }
+}
diff --git a/test/expectations/style.retina.css b/test/expectations/style.retina.css
@@ -0,0 +1,7 @@
+.selector-a { background-image: url(sprite.retina.png); background-position: 0 0; }
+.selector-b { background-image: url(sprite.retina.png); background-position: -25px 0; }
+
+@media (max-width: 767px) {
+	.selector-a { background-image: url(sprite.retina.@2x.png); background-position: 0 0; background-size: 50px 25px; }
+	.selector-b { background-image: url(sprite.retina.@2x.png); background-position: -25px 0; background-size: 50px 25px; }
+}
diff --git a/test/fixtures/circle.png b/test/fixtures/circle.png
diff --git a/test/fixtures/circle@2x.png b/test/fixtures/circle@2x.png
diff --git a/test/fixtures/square.png b/test/fixtures/square.png
diff --git a/test/fixtures/square@2x.png b/test/fixtures/square@2x.png
diff --git a/test/fixtures/style.basic-color.css b/test/fixtures/style.basic-color.css
@@ -0,0 +1,2 @@
+.selector-a { background-image: url(circle.png); }
+.selector-b { background: #000 url(square.png) no-repeat 0 0; }
diff --git a/test/fixtures/style.basic.css b/test/fixtures/style.basic.css
@@ -0,0 +1,2 @@
+.selector-a { background-image: url(circle.png); }
+.selector-b { background: url(square.png) no-repeat 0 0; }
diff --git a/test/fixtures/style.fg.css b/test/fixtures/style.fg.css
@@ -0,0 +1,9 @@
+.selector-a { background-image: url(circle.png); }
+.selector-b { background: url(square.png) no-repeat 0 0; }
+.selector-c { background: #fff url(not-exist.png) no-repeat 0 0; }
+
+@media (max-width: 767px) {
+	.selector-a { background: url(circle@2x.png) no-repeat 0 0; }
+	.selector-b { background: url(square@2x.png) no-repeat 0 0; }
+	.selector-c { background-image: url(not-exist@2x.png); }
+}
diff --git a/test/fixtures/style.retina.css b/test/fixtures/style.retina.css
@@ -0,0 +1,7 @@
+.selector-a { background-image: url(circle.png); }
+.selector-b { background: url(square.png) no-repeat 0 0; }
+
+@media (max-width: 767px) {
+	.selector-a { background: url(circle@2x.png) no-repeat 0 0; }
+	.selector-b { background: url(square@2x.png) no-repeat 0 0; }
+}
diff --git a/test/index.js b/test/index.js
@@ -0,0 +1,181 @@
+'use strict';
+
+/**
+ * Module dependencies.
+ */
+var path       = require('path');
+var fs         = require('fs');
+var tape       = require('tape');
+var postcss    = require('postcss');
+var plugin     = require('../');
+var pluginName = require('../package.json').name;
+var testRoot   = path.resolve(__dirname, '.');
+
+/**
+ * Tests.
+ */
+tape('should use PostCSS Plugin API', function(t) {
+	t.plan(2);
+	t.ok(plugin().postcssVersion, 'should be able to access PostCSS version');
+	t.equal(plugin().postcssPlugin, pluginName, 'should be able to access plugin name');
+});
+
+tape('should create a sprite and update references in stylesheet', function(t) {
+	t.plan(2);
+
+	var pluginOpts = {
+		baseUrl   : path.resolve(testRoot, './build'),
+		spriteName: 'sprite.basic.png',
+		spritePath: path.resolve(testRoot, './build'),
+		verbose   : true
+	};
+	var processOpts = {
+		from  : path.resolve(testRoot, './fixtures/style.basic.css'),
+		to    : path.resolve(testRoot, './build/style.basic.css'),
+		expect: path.resolve(testRoot, './expectations/style.basic.css')
+	};
+
+	var processor   = postcss([plugin(pluginOpts)]);
+	var css         = fs.readFileSync(processOpts.from, { encoding: 'utf8' });
+	var expectation = fs.readFileSync(processOpts.expect, { encoding: 'utf8' });
+
+	processor
+		.process(css, processOpts)
+		.then(function(result) {
+			t.ok(path.resolve(pluginOpts.spritePath, pluginOpts.spriteName), 'sprite created');
+			t.equal(result.css, expectation, 'stylesheet updated');
+		});
+});
+
+tape('should extract hex color as background-color', function(t) {
+	t.plan(2);
+
+	var pluginOpts = {
+		baseUrl   : path.resolve(testRoot, './build'),
+		spriteName: 'sprite.basic-color.png',
+		spritePath: path.resolve(testRoot, './build'),
+		verbose   : true
+	};
+	var processOpts = {
+		from  : path.resolve(testRoot, './fixtures/style.basic-color.css'),
+		to    : path.resolve(testRoot, './build/style.basic-color.css'),
+		expect: path.resolve(testRoot, './expectations/style.basic-color.css')
+	};
+
+	var processor   = postcss([plugin(pluginOpts)]);
+	var css         = fs.readFileSync(processOpts.from, { encoding: 'utf8' });
+	var expectation = fs.readFileSync(processOpts.expect, { encoding: 'utf8' });
+
+	processor
+		.process(css, processOpts)
+		.then(function(result) {
+			t.ok(path.resolve(pluginOpts.spritePath, pluginOpts.spriteName), 'sprite created');
+			t.equal(result.css, expectation, 'stylesheet updated, color extracted');
+		});
+});
+
+tape('should create retina sprite and update references in stylesheet', function(t) {
+	t.plan(3);
+
+	var pluginOpts = {
+		baseUrl   : path.resolve(testRoot, './build'),
+		spriteName: 'sprite.retina.png',
+		spritePath: path.resolve(testRoot, './build'),
+		verbose   : true,
+		retina    : true
+	};
+	var processOpts = {
+		from  : path.resolve(testRoot, './fixtures/style.retina.css'),
+		to    : path.resolve(testRoot, './build/style.retina.css'),
+		expect: path.resolve(testRoot, './expectations/style.retina.css')
+	};
+
+	var processor   = postcss([plugin(pluginOpts)]);
+	var css         = fs.readFileSync(processOpts.from, { encoding: 'utf8' });
+	var expectation = fs.readFileSync(processOpts.expect, { encoding: 'utf8' });
+
+	processor
+		.process(css, processOpts)
+		.then(function(result) {
+			t.ok(path.resolve(pluginOpts.spritePath, pluginOpts.spriteName), 'sprite created');
+			t.ok(path.resolve(pluginOpts.spritePath, 'sprite.retina.@2x.png'), 'sprite@2x created');
+			t.equal(result.css, expectation, 'stylesheet updated');
+		});
+});
+
+tape('should create external stylesheet and respect retina', function(t) {
+	t.plan(4);
+
+	var pluginOpts = {
+		baseUrl      : path.resolve(testRoot, './build'),
+		externalStyle: path.resolve(testRoot, './build/external.css'),
+		spriteName   : 'sprite.retina.png',
+		spritePath   : path.resolve(testRoot, './build'),
+		verbose      : true,
+		retina       : true
+	};
+	var processOpts = {
+		from          : path.resolve(testRoot, './fixtures/style.retina.css'),
+		to            : path.resolve(testRoot, './build/style.retina.css'),
+		expect        : path.resolve(testRoot, './expectations/style.retina.css'),
+		expectExternal: path.resolve(testRoot, './expectations/external.css'),
+	};
+
+	var processor           = postcss([plugin(pluginOpts)]);
+	var css                 = fs.readFileSync(processOpts.from, { encoding: 'utf8' });
+	var expectation         = fs.readFileSync(processOpts.expect, { encoding: 'utf8' });
+	var expectationExternal = fs.readFileSync(processOpts.expectExternal, { encoding: 'utf8' });
+	var outputExternal;
+
+	processor
+		.process(css, processOpts)
+		.then(function(result) {
+			outputExternal = fs.readFileSync(pluginOpts.externalStyle, { encoding: 'utf8' });
+
+			t.ok(path.resolve(pluginOpts.spritePath, pluginOpts.spriteName), 'sprite created');
+			t.ok(path.resolve(pluginOpts.spritePath, 'sprite.retina.@2x.png'), 'sprite@2x created');
+			t.equal(result.css, expectation, 'stylesheet updated');
+			t.equal(outputExternal, expectationExternal, 'external stylesheet created');
+		});
+});
+
+tape('should filter and group images', function(t) {
+	t.plan(3);
+
+	var pluginOpts = {
+		baseUrl   : path.resolve(testRoot, './build'),
+		spriteName: 'sprite.fg.png',
+		spritePath: path.resolve(testRoot, './build'),
+		verbose   : true,
+		groupBy   : function(image) {
+			// our custom retina grouper
+			var regex = /@\d+x/gi;
+
+			if (regex.test(image.url)) {
+				return 'retina';
+			}
+
+			return null;
+		},
+		filterBy   : function(image) {
+			return !/not-exist/gi.test(image.url);
+		}
+	};
+	var processOpts = {
+		from  : path.resolve(testRoot, './fixtures/style.fg.css'),
+		to    : path.resolve(testRoot, './build/style.fg.css'),
+		expect: path.resolve(testRoot, './expectations/style.fg.css')
+	};
+
+	var processor   = postcss([plugin(pluginOpts)]);
+	var css         = fs.readFileSync(processOpts.from, { encoding: 'utf8' });
+	var expectation = fs.readFileSync(processOpts.expect, { encoding: 'utf8' });
+
+	processor
+		.process(css, processOpts)
+		.then(function(result) {
+			t.ok(path.resolve(pluginOpts.spritePath, pluginOpts.spriteName), 'sprite created');
+			t.ok(path.resolve(pluginOpts.spritePath, 'sprite.fg.retina.png'), 'sprite@retina created');
+			t.equal(result.css, expectation, 'stylesheet updated');
+		});
+});

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`node_modules`
	`2`	`+/test/build/*.css`
	`3`	`+/test/build/*.png`
Original file line number	Diff line number	Diff line change
`@@ -26,5 +26,13 @@`
`26`	`26`	`"mkdirp": "^0.5.1",`
`27`	`27`	`"q": "^1.4.0",`
`28`	`28`	`"spritesmith": "^1.3.1"`
	`29`	`+ },`
	`30`	`+ "devDependencies": {`
	`31`	`+ "tape": "^4.0.0",`
	`32`	`+ "tap-spec": "^3.0.0",`
	`33`	`+ "postcss": "^0.9.0"`
	`34`	`+ },`
	`35`	`+ "scripts": {`
	`36`	`+ "test": "node ./test/index.js \| ./node_modules/.bin/tap-spec"`
`29`	`37`	`}`
`30`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+.selector-a { background-image: url(sprite.basic-color.png); background-position: 0 0; }`
	`2`	`+.selector-b { background-image: url(sprite.basic-color.png); background-position: -25px 0; background-color: #000; }`