Add gulpfile.js with tests.

jonkemp · Jan 26, 2015 · 995b053 · 995b053
1 parent 4e69ed9
commit 995b053
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 2 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,25 @@
+'use strict';
+var gulp = require('gulp'),
+    jshint = require('gulp-jshint'),
+    mocha = require('gulp-mocha');
+
+var paths = {
+    scripts: ['./*.js', '!./gulpfile.js']
+};
+
+gulp.task('lint', function() {
+    return gulp.src(paths.scripts)
+        .pipe(jshint())
+        .pipe(jshint.reporter('default'));
+});
+
+gulp.task('test', function() {
+    return gulp.src('./test/*.js')
+        .pipe(mocha({reporter: 'dot'}));
+});
+
+gulp.task('watch', function () {
+    gulp.watch(paths.scripts, ['lint', 'test']);
+});
+
+gulp.task('default', ['lint', 'test', 'watch']);
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "style-selector": "^1.0.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "gulp test"
   },
   "repository": {
     "type": "git",
@@ -28,5 +28,13 @@
   "bugs": {
     "url": "https://github.com/jonkemp/inline-css/issues"
   },
-  "homepage": "https://github.com/jonkemp/inline-css"
+  "homepage": "https://github.com/jonkemp/inline-css",
+  "devDependencies": {
+    "gulp": "^3.8.10",
+    "gulp-jshint": "^1.9.0",
+    "gulp-mocha": "^2.0.0",
+    "gulp-util": "^3.0.2",
+    "mocha": "^2.1.0",
+    "should": "^4.6.1"
+  }
 }
diff --git a/test/expected/multiple/one/out.html b/test/expected/multiple/one/out.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+
+</head>
+<body style="font-family: Arial;">
+<h1 style="border: 1px solid #ccc; color: blue;">Hi</h1>
+<table>
+    <tr>
+        <td class="headline" style="font-size: 24px; padding: 5px;">Some Headline</td>
+    </tr>
+</table>
+</body>
+</html>
diff --git a/test/expected/multiple/two/out.html b/test/expected/multiple/two/out.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+
+</head>
+<body style="font-family: Arial;">
+<h1 style="border: 1px solid #ccc; color: red;">Hi</h1>
+<table>
+    <tr>
+        <td class="headline" style="font-size: 24px; padding: 5px;">Some Headline</td>
+    </tr>
+</table>
+</body>
+</html>
diff --git a/test/expected/out.html b/test/expected/out.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+
+  </head>
+  <body style="font-family: Arial;">
+    <h1 style="border: 1px solid #ccc; color: blue;">Hi</h1>
+    <table>
+      <tr>
+        <td class="headline" style="font-size: 24px; padding: 5px;">Some Headline</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/test/fixtures/file.css b/test/fixtures/file.css
@@ -0,0 +1,13 @@
+body {
+  font-family: Arial;
+}
+h1 {
+  color: blue;
+}
+.headline {
+  font-size: 24px;
+}
+
+td {
+  padding: 5px;
+}
diff --git a/test/fixtures/in.html b/test/fixtures/in.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      h1 {
+        border: 1px solid #ccc;
+      }
+    </style>
+    <link rel="stylesheet" href="file.css"/>
+  </head>
+  <body>
+    <h1>Hi</h1>
+    <table>
+      <tr>
+        <td class="headline">Some Headline</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/test/fixtures/multiple/one/file.css b/test/fixtures/multiple/one/file.css
@@ -0,0 +1,13 @@
+body {
+    font-family: Arial;
+}
+h1 {
+    color: blue;
+}
+.headline {
+    font-size: 24px;
+}
+
+td {
+    padding: 5px;
+}
diff --git a/test/fixtures/multiple/one/in.html b/test/fixtures/multiple/one/in.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        h1 {
+            border: 1px solid #ccc;
+        }
+    </style>
+    <link rel="stylesheet" href="file.css"/>
+</head>
+<body>
+<h1>Hi</h1>
+<table>
+    <tr>
+        <td class="headline">Some Headline</td>
+    </tr>
+</table>
+</body>
+</html>
diff --git a/test/fixtures/multiple/two/file.css b/test/fixtures/multiple/two/file.css
@@ -0,0 +1,13 @@
+body {
+    font-family: Arial;
+}
+h1 {
+    color: red;
+}
+.headline {
+    font-size: 24px;
+}
+
+td {
+    padding: 5px;
+}
diff --git a/test/fixtures/multiple/two/in.html b/test/fixtures/multiple/two/in.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        h1 {
+            border: 1px solid #ccc;
+        }
+    </style>
+    <link rel="stylesheet" href="file.css"/>
+</head>
+<body>
+<h1>Hi</h1>
+<table>
+    <tr>
+        <td class="headline">Some Headline</td>
+    </tr>
+</table>
+</body>
+</html>
diff --git a/test/main.js b/test/main.js
@@ -0,0 +1,44 @@
+/* jshint node: true */
+/* global describe, it */
+
+'use strict';
+
+var should = require('should'),
+    fs = require('fs'),
+    path = require('path'),
+    gutil = require('gulp-util'),
+    inlineCss = require('../index');
+
+function getFile(filePath) {
+    return new gutil.File({
+        path: path.resolve(filePath),
+        cwd: './test/',
+        base: path.dirname(filePath),
+        contents: new Buffer(String(fs.readFileSync(filePath)))
+    });
+}
+
+function compare(fixturePath, expectedPath, options, done) {
+    var file = getFile(fixturePath);
+
+    options.url = 'file://' + file.path;
+
+    inlineCss(file.contents.toString('utf8'), options, function (err, html) {
+        html.should.be.equal(String(fs.readFileSync(expectedPath)));
+
+        done();
+    });
+}
+
+describe('inline-css', function() {
+    it('Should convert linked css to inline css', function(done) {
+        var options = {};
+        compare(path.join('test', 'fixtures', 'in.html'), path.join('test', 'expected', 'out.html'), options, done);
+    });
+
+    it('Should inline css in multiple HTML files', function(done) {
+        var options = {};
+        compare(path.join('test', 'fixtures', 'multiple', 'one', 'in.html'), path.join('test', 'expected', 'multiple', 'one', 'out.html'), options, function () {});
+        compare(path.join('test', 'fixtures', 'multiple', 'two', 'in.html'), path.join('test', 'expected', 'multiple', 'two', 'out.html'), options, done);
+    });
+});