Using QUnit for AMD testing

gulp/tasks/dist.js

@@ -24,7 +24,7 @@ gulp.task('slimDist', function() {
     // Single entry point to browserify
     return gulp.src('src/main.js')
         .pipe(browserify())
-        /*.pipe(browserify({standalone: 'mermaid'})) 
+        /*.pipe(browserify({standalone: 'mermaid'}))
          .on('prebundle', function(bundle) {
          // Keep these external for the slim version.
          slim_ext_libs.forEach(function(lib) {
@@ -68,13 +68,14 @@ gulp.task('mermaid.slim',function() {
     return gulp.src('src/mermaid.js')
         .pipe(browserify({
             external: ['d3'],
-            entry:'src/mermaid.js'
+            entry:'src/mermaid.js',
+            standalone: 'mermaid'
         }))
         .pipe(rename('mermaid.slim.js'))
         // .on('prebundle', function(bundle){
         //     EXTERNALS.forEach(function(external){
         //       if(external.expose){
-        //         bundle.require(external.require, {expose: external.expose} ) 
+        //         bundle.require(external.require, {expose: external.expose} )
         //       }
         //       else{
         //         bundle.require(external.require)
@@ -92,7 +93,8 @@ gulp.task('mermaid',function() {
 
     return gulp.src('src/mermaid.js')
         .pipe(browserify({
-            entry:'src/mermaid.js'
+            entry:'src/mermaid.js',
+            standalone: 'mermaid'
         }))
         .pipe(rename('mermaid.js'))
         .pipe(gulp.dest('./dist/'))

gulp/tasks/test.js

@@ -14,14 +14,17 @@ var insert = require('gulp-insert');
 var jshint = require('gulp-jshint');
 var stylish = require('jshint-stylish');
 
+var qunit = require('gulp-qunit');
+var bower = require('gulp-bower');
+
 // Using gulp-jshint and jshint-stylish
 gulp.task('lint', function() {
     return gulp.src(['./src/**/*.js', '!**/parser/*.js'])
         .pipe(jshint())
         .pipe(jshint.reporter(stylish));
 });
 
-gulp.task('test',['coverage','tape','jasmine']);
+gulp.task('test',['coverage','tape','jasmine','qunit']);
 
 gulp.task('jasmine',['jison','lint'], function () {
     return gulp.src(['src/**/*.spec.js'])
@@ -44,4 +47,14 @@ gulp.task('coverage', function (cb) {
                 .pipe(istanbul.writeReports()) // Creating the reports after tests runned
                 .on('end', cb);
         });
-});
+});
+
+gulp.task('qunit', ['usageTestsBower'], function() {
+    return gulp.src('test/usageTests/requireTest.html')
+        .pipe(qunit());
+});
+
+gulp.task('usageTestsBower', function() {
+    return bower({cwd: 'test/usageTests'})
+        .pipe(gulp.dest('test/usageTests/bower_components'));
+});

package.json

@@ -14,7 +14,7 @@
     "mermaid": "./bin/mermaid.js"
   },
   "scripts": {
-    "test": "gulp test"
+    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
   },
   "repository": {
     "type": "git",
@@ -46,6 +46,7 @@
     "foundation": "^4.2.1-1",
     "front-matter": "^0.2.0",
     "gulp": "~3.8.9",
+    "gulp-bower": "0.0.10",
     "gulp-browserify": "^0.5.0",
     "gulp-bump": "^0.1.11",
     "gulp-concat": "~2.4.1",
@@ -61,6 +62,7 @@
     "gulp-jshint": "^1.9.0",
     "gulp-less": "^3.0.1",
     "gulp-livereload": "^3.8.0",
+    "gulp-qunit": "~1.2.1",
     "gulp-rename": "~1.2.0",
     "gulp-shell": "^0.2.10",
     "gulp-tag-version": "^1.2.1",

test/usageTests/bower.json

@@ -15,6 +15,7 @@
   ],
   "dependencies": {
     "requirejs": "~2.1.16",
-    "mermaid": "~0.4.0"
+    "mermaid": "~0.4.0",
+    "qunit": "~1.18.0"
   }
 }

test/usageTests/reqJsApp.js

@@ -1,22 +1,28 @@
 require.config({
-    baseUrl: '.',
     paths: {
-        // the left side is the module ID,
-        // the right side is the path to
-        // the jQuery file, relative to baseUrl.
-        // Also, the path should NOT include
-        // the '.js' file extension. This example
-        // is using jQuery 1.9.0 located at
-        // js/lib/jquery-1.9.0.js, relative to
-        // the HTML page.
-        mermaid: 'bower_components/mermaid/dist/mermaid.full'
+        mermaid: '../../dist/mermaid'
+    },
+    shim: {
+        mermaid: {
+            exports: 'mermaid'
+        }
     }
 });
 
-// Start the main app logic.
-requirejs(['simple','mermaid'],
-    function   (simple) {
-        //jQuery, canvas and the app/sub module are all
-        //loaded and can be used here now.
-        mermaid.init();
-    });
+require([], function (){
+    QUnit.module('requireTest.html');
+
+    QUnit.test('using mermaid in requirejs', function (assert){
+        var done = assert.async();
+        require(['mermaid'], function (mermaid) {
+            assert.ok(mermaid, 'mermaid is not null');
+            mermaid.init();
+            assert.equal(window.d3.selectAll('path')[0].length, 8,
+                'drew 8 paths');
+            done();
+        });
+    });
+
+    QUnit.load();
+    QUnit.start();
+});

test/usageTests/requireTest.html

@@ -2,41 +2,26 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="bower_components/qunit/qunit/qunit.css" />
+    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
 
-    <script data-main="reqJsApp.js" src="bower_components/requirejs/require.js"></script>
+    <script src="bower_components/qunit/qunit/qunit.js"></script>
     <script>
-        var mermaid_config = {
-            startOnLoad:true
-        }
+        QUnit.config.autostart = false;
     </script>
+
+    <script data-main="reqJsApp.js" src="bower_components/requirejs/require.js"></script>
 </head>
-    <body>
-        TEST 0.4.1
-    <div class="mermaid">
-        graph TD;
-        sq[Square shape2] --> ci((Circle shape // Начало)) 
-    </div>
-    <h1>Shapes</h1>
-        <div class="mermaid">
-            info
-        </div>
-    <div class="mermaid">
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D 
-        </div>
+
+<body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>
     <div class="mermaid">
-        graph TD;
-            sq[Square shape]-->ci((Circle shape)); 
-            od>Odd shape]---|Two line<br>edge comment|ro;
-            od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
-            di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
-            di-->ro2(Rounded square shape);
-            e((Inner circle URL))-->f(,.?!+-*ز);
-            style e red;
+        graph LR
+            A-->B
+            B-->C
+            C-->A
+            D-->C
     </div>
-
-    </body>
+</body>
 </html>