Merge pull request #774 from Johann-S/unit_test

Add unit test to Ratchet
twbs · Jan 27, 2016 · 0867027 · 0867027
2 parents 8a32a9a + c95927b
commit 0867027
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,4 @@ docs/.jekyll-metadata
 # Folders to ignore
 node_modules
 bower_components
+.grunt
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -29,6 +29,7 @@ module.exports = function (grunt) {
       docsDistPath:   'docs/dist/',
       docsPath:       'docs/',
       jsPath:         'js/',
+      jsTestPath:     'js/tests/',
       srcPath:        'sass/'
     },
 
@@ -303,6 +304,12 @@ module.exports = function (grunt) {
       },
       docs: {
         src: ['<%= meta.docsAssetsPath %>/js/docs.js', '<%= meta.docsAssetsPath %>/js/fingerblast.js']
+      },
+      tests: {
+        options: {
+          jshintrc: 'js/tests/.jshintrc'
+        },
+        src: 'js/tests/*.js'
       }
     },
 
@@ -318,6 +325,9 @@ module.exports = function (grunt) {
       },
       docs: {
         src: '<%= jshint.docs.src %>'
+      },
+      tests: {
+        src: '<%= jshint.tests.src %>'
       }
     },
 
@@ -394,6 +404,22 @@ module.exports = function (grunt) {
           }
         ]
       }
+    },
+
+    jasmine: {
+      src: '<%= jshint.src.src %>',
+      options: {
+        specs: '<%= jshint.tests.src %>',
+        styles: 'dist/ratchet.min.css',
+        display: 'short',
+        vendor: [
+          '<%= meta.docsAssetsPath %>js/fingerblast.js',
+          '<%= jshint.src.src %>',
+          '<%= meta.jsTestPath %>vendor/touchfaker.min.js'
+          ],
+        outfile: 'js/tests/SpecRunner.html',
+        keepRunner: true
+      }
     }
   });
 
@@ -408,7 +434,7 @@ module.exports = function (grunt) {
   grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint']);
   grunt.registerTask('build', ['dist']);
   grunt.registerTask('default', ['dist']);
-  grunt.registerTask('test', ['dist', 'csslint', 'jshint', 'jscs', 'validate-html']);
+  grunt.registerTask('test', ['dist', 'csslint', 'jshint', 'jscs', 'jasmine', 'validate-html']);
   grunt.registerTask('server', ['dist', 'jekyll:docs', 'connect', 'watch']);
   grunt.registerTask('prep-release', ['dist', 'jekyll:github', 'htmlmin', 'compress']);
 

diff --git a/js/tests/.jshintrc b/js/tests/.jshintrc
@@ -0,0 +1,5 @@
+{
+  "devel"   : true,
+  "es3"     : false,
+  "jasmine" : true
+}
diff --git a/js/tests/SpecRunner.html b/js/tests/SpecRunner.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner</title>
+  <link rel="shortcut icon" type="image/png" href=".grunt/grunt-contrib-jasmine/jasmine_favicon.png">
+
+  <link rel="stylesheet" type="text/css" href="../../.grunt/grunt-contrib-jasmine/jasmine.css">
+
+  <link rel="stylesheet" type="text/css" href="../../dist/ratchet.min.css">
+
+
+</head>
+<body>
+
+
+  <script src="../../.grunt/grunt-contrib-jasmine/es5-shim.js"></script>
+
+  <script src="../../.grunt/grunt-contrib-jasmine/jasmine.js"></script>
+
+  <script src="../../.grunt/grunt-contrib-jasmine/jasmine-html.js"></script>
+
+  <script src="../../.grunt/grunt-contrib-jasmine/json2.js"></script>
+
+  <script src="../../.grunt/grunt-contrib-jasmine/boot.js"></script>
+
+  <script src="../../docs/assets/js/fingerblast.js"></script>
+
+  <script src="../common.js"></script>
+
+  <script src="../modals.js"></script>
+
+  <script src="../popovers.js"></script>
+
+  <script src="../push.js"></script>
+
+  <script src="../segmented-controllers.js"></script>
+
+  <script src="../sliders.js"></script>
+
+  <script src="../toggles.js"></script>
+
+  <script src="vendor/touchfaker.min.js"></script>
+
+  <script src="../common.js"></script>
+
+  <script src="../modals.js"></script>
+
+  <script src="../popovers.js"></script>
+
+  <script src="../push.js"></script>
+
+  <script src="../segmented-controllers.js"></script>
+
+  <script src="../sliders.js"></script>
+
+  <script src="../toggles.js"></script>
+
+  <script src="commonSpec.js"></script>
+
+  <script src="modalsSpec.js"></script>
+
+  <script src="sliderSpec.js"></script>
+
+  <script src="../../.grunt/grunt-contrib-jasmine/reporter.js"></script>
+
+
+</body>
+</html>
diff --git a/js/tests/commonSpec.js b/js/tests/commonSpec.js
@@ -0,0 +1,20 @@
+describe('Common', function () {
+  it('RATCHET namespace is defined', function () {
+    expect(typeof RATCHET !== 'undefined').toBe(true);
+  });
+
+  it('window.CustomEvent exists', function () {
+    expect(typeof window.CustomEvent !== 'undefined').toBe(true);
+  });
+
+  it('RATCHET.getBrowserCapabilities returns an object', function () {
+    var result = RATCHET.getBrowserCapabilities;
+    expect(typeof result === 'object').toBe(true);
+  });
+
+  it('RATCHET.getTransitionEnd returns string', function () {
+    var result = RATCHET.getTransitionEnd;
+    expect(typeof result === 'string').toBe(true);
+    expect(result.length > 0).toBe(true);
+  });
+});
diff --git a/js/tests/modalsSpec.js b/js/tests/modalsSpec.js
@@ -0,0 +1,52 @@
+describe('Modals', function () {
+  beforeEach(function () {
+    var templateModal = [
+        '<a id="linkOpenModal" href="#myModal" class="btn">Open modal</a>',
+        '<div id="myModal" class="modal">',
+          '<header class="bar bar-nav">',
+            '<a id="linkCloseModal" class="icon icon-close pull-right" href="#myModal"></a>',
+            '<h1 class="title">Modal</h1>',
+          '</header>',
+          '<div class="content">',
+            '<p class="content-padded">The contents of my modal go here.</p>',
+          '</div>',
+        '</div>'
+    ].join('');
+    document.body.innerHTML += templateModal;
+  });
+
+  afterEach(function () {
+    var linkModal = document.getElementById('linkOpenModal');
+    var modal = document.getElementById('myModal');
+    linkModal.parentNode.removeChild(linkModal);
+    modal.parentNode.removeChild(modal);
+  });
+
+  it('Modal should fire modalOpen event', function (done) {
+    window.addEventListener('modalOpen', function () {
+      expect(true).toBe(true);
+      done();
+    });
+    var link = document.getElementById('linkOpenModal');
+    var eventTouchEnd = new CustomEvent('touchend', {
+      bubbles: true,
+      cancelable: true
+    });
+    link.dispatchEvent(eventTouchEnd);
+  });
+
+  it('Modal should fire modalClose event', function (done) {
+    var link = document.getElementById('linkOpenModal');
+    var eventTouchEnd = new CustomEvent('touchend', {
+      bubbles: true,
+      cancelable: true
+    });
+    window.addEventListener('modalClose', function () {
+      expect(true).toBe(true);
+      done();
+    });
+    link.dispatchEvent(eventTouchEnd);
+    var closeLink = document.getElementById('linkCloseModal');
+    closeLink.dispatchEvent(eventTouchEnd);
+  });
+});
diff --git a/js/tests/sliderSpec.js b/js/tests/sliderSpec.js
@@ -0,0 +1,32 @@
+describe('Slider', function () {
+  var slider = null;
+  beforeEach(function () {
+    var templateSlider = [
+    '<div class="slider" id="mySlider">',
+      '<div id="mySlider" class="slide-group">',
+        '<div id="firstSlide" class="slide">',
+          '<img src="http://goratchet.com/assets/img/slide-2.jpg">',
+        '</div>',
+        '<div class="slide">',
+          '<img src="http://goratchet.com/assets/img/slide-3.jpg">',
+        '</div>',
+      '</div>',
+    '</div>'
+    ].join('');
+    document.body.innerHTML += templateSlider;
+    slider = document.getElementById('mySlider');
+  });
+
+  afterEach(function () {
+    slider.parentNode.removeChild(slider);
+    slider = null;
+  });
+
+  it('Slider should fire slide event', function (done) {
+    slider.addEventListener('slide', function () {
+      expect(true).toBe(true);
+      done();
+    });
+    TouchFaker.fakeEvent('touchstart', '#firstSlide');
+  });
+});
diff --git a/js/tests/vendor/touchfaker.min.js b/js/tests/vendor/touchfaker.min.js
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "grunt-contrib-watch": "~0.6.1",
     "grunt-csscomb": "~3.1.0",
     "grunt-html": "~5.0.0",
+    "grunt-contrib-jasmine": "~0.9.2",
     "grunt-jekyll": "~0.4.2",
     "grunt-jscs": "~2.6.0",
     "grunt-sass": "~1.1.0",