Merge pull request #1 from SomMeri/jasmine

Refactoring browser unit tests into grunt-contrib-jasmine

Author: jonschlinkert

.gitignore

@@ -16,3 +16,6 @@ test/browser/less.js
 test/browser/test-runner-*.htm
 test/sourcemaps/*.map
 test/sourcemaps/*.css
+
+# grunt
+.grunt

Gruntfile.js

@@ -28,12 +28,6 @@ module.exports = function(grunt) {
       test: {
         command: 'node test/less-test.js'
       },
-      browser: {
-        command: 'node test/browser-test-prepare.js'
-      },
-      phantom: {
-        command: 'phantomjs test/browser/phantom-runner.js'
-      },
       benchmark: {
         command: 'node benchmark/less-benchmark.js'
       }
@@ -115,6 +109,105 @@ module.exports = function(grunt) {
       }
     },
 
+    connect: {
+      server: {
+        options: {
+          port: 8081
+        }
+      }
+    },
+
+    jasmine: {
+      options: {
+        keepRunner: true,
+        host: 'http://localhost:8081/',
+        vendor: 'test/browser/common.js',
+        template: 'test/browser/test-runner-template.tmpl'
+      },
+      main: {
+        //src is used to build list of less files to compile
+        src: ['test/less/*.less', '!test/less/javascript.less', '!test/less/urls.less'], 
+        options: {
+          helpers: 'test/browser/runner-main-options.js',
+          specs: 'test/browser/runner-main-spec.js',
+          outfile: 'test/browser/test-runner-main.html'
+        }
+      },
+      legacy: {
+        src: ['test/less/legacy/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-legacy-options.js',
+          specs: 'test/browser/runner-legacy-spec.js',
+          outfile: 'test/browser/test-runner-legacy.html'
+        }
+      },
+      errors: {
+        src: ['test/less/errors/*.less', '!test/less/errors/javascript-error.less'], 
+        options: {
+          timeout: 20000,
+          helpers: 'test/browser/runner-errors-options.js',
+          specs: 'test/browser/runner-errors-spec.js',
+          outfile: 'test/browser/test-runner-errors.html'
+        }
+      },
+      noJsErrors: { 
+        src: ['test/less/no-js-errors/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-no-js-errors-options.js',
+          specs: 'test/browser/runner-no-js-errors-spec.js',
+          outfile: 'test/browser/test-runner-no-js-errors.html'
+        }
+      },
+      browser: {
+        src: ['test/browser/less/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-browser-options.js',
+          specs: 'test/browser/runner-browser-spec.js',
+          outfile: 'test/browser/test-runner-browser.html'
+        }
+      },
+      relativeUrls: {
+        src: ['test/browser/less/relative-urls/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-relative-urls-options.js',
+          specs: 'test/browser/runner-relative-urls-spec.js',
+          outfile: 'test/browser/test-runner-relative-urls.html'
+        }
+      },
+      rootpath: {
+        src: ['test/browser/less/rootpath/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-rootpath-options.js',
+          specs: 'test/browser/runner-rootpath-spec.js',
+          outfile: 'test/browser/test-runner-rootpath.html'
+        }
+      },
+      rootpathRelative: {
+        src: ['test/browser/less/rootpath-relative/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-rootpath-relative-options.js',
+          specs: 'test/browser/runner-rootpath-relative-spec.js',
+          outfile: 'test/browser/test-runner-rootpath-relative.html'
+        }
+      },
+      production: {
+        src: ['test/browser/less/production/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-production-options.js',
+          specs: 'test/browser/runner-production-spec.js',
+          outfile: 'test/browser/test-runner-production.html'
+        }
+      },
+      modifyVars: {
+        src: ['test/browser/less/modify-vars/*.less'], 
+        options: {
+          helpers: 'test/browser/runner-modify-vars-options.js',
+          specs: 'test/browser/runner-modify-vars-spec.js',
+          outfile: 'test/browser/test-runner-modify-vars.html'
+        }
+      }
+    },
+
     // Before running tests, clean out the results
     // of any previous tests. (this will need to be
     // setup based on configuration of browser tests.
@@ -162,13 +255,18 @@ module.exports = function(grunt) {
     'uglify:beta'
   ]);
 
+    // Run all tests
+  grunt.registerTask('browserTest', [
+    'connect:server',
+    'jasmine'
+  ]);
+
   // Run all tests
   grunt.registerTask('test', [
     'jshint:lib',
     'clean',
-    'shell:test'
-  //   'shell:browser',
-  //   'shell:phantom'
+    'shell:test',
+    'browserTest'
   ]);
 
   // Run benchmark

build/build.yml

@@ -19,7 +19,7 @@ lib: lib/less
 # General
 # =================================
 prepend:
-  browser: build/require.js
+  browser: [build/require.js, build/browser-header.js]
   rhino:   build/require-rhino.js
 
 append:
@@ -45,6 +45,8 @@ less:
   to_css   : <%= build.lib %>/to-css-visitor.js
   extend   : <%= build.lib %>/extend-visitor.js
   browser  : <%= build.lib %>/browser.js
+  source_map_output  : <%= build.lib %>/source-map-output.js
+  to_css_visitor  : <%= build.lib %>/to-css-visitor.js
 
   # glob all files in ./lib/less/tree directory
   treedir  : <%= build.lib %>/tree/*.js
@@ -72,6 +74,8 @@ browser:
   - <%= build.less.join %>
   - <%= build.less.to_css %>
   - <%= build.less.extend %>
+  - <%= build.less.source_map_output %>
+  - <%= build.less.to_css_visitor %>
 
   # append browser-specific code
   - <%= build.append.browser %>
@@ -99,6 +103,8 @@ rhino:
   - <%= build.less.colors %>
   - <%= build.less.treedir %> # glob all files
   - <%= build.less.tree %>
+  - <%= build.less.source_map_output %>
+  - <%= build.less.to_css_visitor %>
 
   # append rhino-specific code
   - <%= build.append.rhino %>
@@ -143,4 +149,4 @@ tree:
   - <%= build.lib %>/tree/unicode-descriptor.js
   - <%= build.lib %>/tree/url.js
   - <%= build.lib %>/tree/value.js
-  - <%= build.lib %>/tree/variable.js
+  - <%= build.lib %>/tree/variable.js

dist/less-1.4.2.min.js

@@ -41,7 +41,16 @@
   "devDependencies": {
     "diff": "~1.0",
     "jshint": "~2.1.4",
-    "http-server": "~0.5.5"
+    "http-server": "~0.5.5",
+    "grunt": "~0.4.1",
+    "matchdep": "~0.1.2",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-jshint": "~0.6.0",
+    "grunt-contrib-uglify": "~0.2.2",
+    "grunt-shell": "~0.3.1",
+    "grunt-contrib-connect": "~0.3.0",
+    "grunt-contrib-jasmine": "~0.5.1"
   },
   "keywords": [
     "compile less",

package.json

@@ -1,7 +1,15 @@
-/*if not async then phantomjs fails to run the webserver and the test concurrently*/
-var less = { async: true, strictMath: true };
-
 /* record log messages for testing */
+var logAllIds = function() {
+  var allTags = document.head.getElementsByTagName('style');
+  var ids = [];
+  for (var tg = 0; tg< allTags.length; tg++) {
+    var tag = allTags[tg];
+    if (tag.id) {
+      console.log(tag.id);
+    }   
+  }
+};
+
 var logMessages = [],
     realConsoleLog = console.log;
 console.log = function(msg) {
@@ -33,11 +41,23 @@ var testSheet = function(sheet) {
     it(sheet.id + " should match the expected output", function() {
         var lessOutputId =  sheet.id.replace("original-", ""),
             expectedOutputId = "expected-" + lessOutputId,
-            lessOutput = document.getElementById(lessOutputId).innerText,
+            lessOutputObj,
+	    lessOutput,
             expectedOutputHref = document.getElementById(expectedOutputId).href,
             expectedOutput = loadFile(expectedOutputHref);
 
+        // Browser spec generates less on the fly, so we need to loose control
         waitsFor(function() {
+	    lessOutputObj = document.getElementById(lessOutputId);
+	    // the type condition is necessary because of inline browser tests
+            return lessOutputObj!==null && lessOutputObj.type==="text/css";
+        }, "generation of " + lessOutputId + "", 700);
+
+	runs(function() {
+            lessOutput = lessOutputObj.innerText;
+        });
+
+	waitsFor(function() {
             return expectedOutput.loaded;
         }, "failed to load expected outout", 10000);
 
@@ -48,23 +68,37 @@ var testSheet = function(sheet) {
     });
 };
 
+//TODO: do it cleaner - the same way as in css
+function extractId(href) {
+    return href.replace(/^[a-z-]+:\/+?[^\/]+/, '' )  // Remove protocol & domain
+               .replace(/^\//,                 '' )  // Remove root /
+               .replace(/\.[a-zA-Z]+$/,        '' )  // Remove simple extension
+               .replace(/[^\.\w-]+/g,          '-')  // Replace illegal characters
+               .replace(/\./g,                 ':'); // Replace dots with colons(for valid id)
+}
+
 var testErrorSheet = function(sheet) {
     it(sheet.id + " should match an error", function() {
         var lessHref =  sheet.href,
-            id = sheet.id.replace(/^original-less:/, "less-error-message:"),
+	    id = "less-error-message:"+extractId(lessHref),
+//            id = sheet.id.replace(/^original-less:/, "less-error-message:"),
             errorHref = lessHref.replace(/.less$/, ".txt"),
             errorFile = loadFile(errorHref),
-            actualErrorElement = document.getElementById(id),
+            actualErrorElement,
             actualErrorMsg;
 
-        describe("the error", function() {
-            expect(actualErrorElement).not.toBe(null);
-        });
-            
-        actualErrorMsg = actualErrorElement.innerText
+        // Less.js sets 10ms timer in order to add error message on top of page.
+        waitsFor(function() {
+	        actualErrorElement = document.getElementById(id);
+            return actualErrorElement!==null;
+        }, "error message was not generated", 70);
+
+        runs(function() {
+          actualErrorMsg = actualErrorElement.innerText
                 .replace(/\n\d+/g, function(lineNo) { return lineNo + " "; })
                 .replace(/\n\s*in /g, " in ")
                 .replace("\n\n", "\n");
+        });
 
         waitsFor(function() {
             return errorFile.loaded;
@@ -123,4 +157,4 @@ var loadFile = function(href) {
     }, 3000);
   }
 
-})();
+})();

test/browser-test-prepare.js

@@ -1,21 +1,21 @@
-@import "http://localhost:8081/browser/less/imports/modify-this.css";
+@import "http://localhost:8081/test/browser/less/imports/modify-this.css";
 
-@import "http://localhost:8081/browser/less/imports/modify-again.css";
+@import "http://localhost:8081/test/browser/less/imports/modify-again.css";
 .modify {
-  my-url: url("http://localhost:8081/browser/less/imports/a.png");
+  my-url: url("http://localhost:8081/test/browser/less/imports/a.png");
 }
 .modify {
-  my-url: url("http://localhost:8081/browser/less/imports/b.png");
+  my-url: url("http://localhost:8081/test/browser/less/imports/b.png");
 }
 @font-face {
   src: url("/fonts/garamond-pro.ttf");
-  src: local(Futura-Medium), url(http://localhost:8081/browser/less/relative-urls/fonts.svg#MyGeometricModern) format("svg");
+  src: local(Futura-Medium), url(http://localhost:8081/test/browser/less/relative-urls/fonts.svg#MyGeometricModern) format("svg");
 }
 #shorthands {
   background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
 }
 #misc {
-  background-image: url(http://localhost:8081/browser/less/relative-urls/images/image.jpg);
+  background-image: url(http://localhost:8081/test/browser/less/relative-urls/images/image.jpg);
 }
 #data-uri {
   background: url(data:image/png;charset=utf-8;base64,
@@ -29,8 +29,8 @@
   background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
 }
 .comma-delimited {
-  background: url(http://localhost:8081/browser/less/relative-urls/bg.jpg) no-repeat, url(http://localhost:8081/browser/less/relative-urls/bg.png) repeat-x top left, url(http://localhost:8081/browser/less/relative-urls/bg);
+  background: url(http://localhost:8081/test/browser/less/relative-urls/bg.jpg) no-repeat, url(http://localhost:8081/test/browser/less/relative-urls/bg.png) repeat-x top left, url(http://localhost:8081/test/browser/less/relative-urls/bg);
 }
 .values {
-  url: url('http://localhost:8081/browser/less/relative-urls/Trebuchet');
+  url: url('http://localhost:8081/test/browser/less/relative-urls/Trebuchet');
 }

test/browser/common.js

@@ -1,4 +1,5 @@
 @import "https://www.github.com/cloudhead/imports/modify-this.css";
+
 @import "https://www.github.com/cloudhead/imports/modify-again.css";
 .modify {
   my-url: url("https://www.github.com/cloudhead/imports/a.png");