From 41c5408a4a6347a360ec250c1ae0f62d40585559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <sgomes@google.com>
Date: Fri, 11 Sep 2015 13:37:45 +0100
Subject: [PATCH] Adding a mocha:closure gulp task, to test closure-compiled
 JS.

Also reorders mocha task to only happen after JS tasks,
and improves two unit tests by moving code in "describe" blocks to
"before" blocks.
---
 gulpfile.js       | 23 ++++++++++++++++++++---
 test/index.html   | 17 +----------------
 test/unit/menu.js | 13 +++++++++----
 test/unit/tabs.js | 43 ++++++++++++++++++++++++++-----------------
 4 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 53084661..9a87955b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -270,20 +270,22 @@ gulp.task('metadata', function() {
 });
 
 // Build Production Files, the Default Task
-gulp.task('default', ['clean', 'mocha'], function(cb) {
+gulp.task('default', ['clean'], function(cb) {
   runSequence(
     ['styles', 'styles-grid'],
     ['scripts'],
+    ['mocha'],
     cb);
 });
 
 // Build production files and microsite
-gulp.task('all', ['clean', 'mocha'], function(cb) {
+gulp.task('all', ['clean'], function(cb) {
   runSequence(
     ['default', 'styletemplates'],
     ['styles:gen'],
     ['jshint', 'jscs', 'scripts',  'assets', 'demos', 'pages',
      'templates', 'images', 'styles-grid', 'metadata'],
+    ['mocha'],
     ['zip'],
     cb);
 });
@@ -295,7 +297,22 @@ gulp.task('mocha', ['styles'], function() {
     .pipe($.mochaPhantomjs({reporter: 'tap'}));
 });
 
-gulp.task('test', ['jshint', 'jscs', 'mocha']);
+gulp.task('mocha:closure', ['closure'], function() {
+  return gulp.src('./test/index.html')
+    .pipe($.replace('src="../dist/material.js"',
+        'src="../dist/material.closure.min.js"'))
+    .pipe($.rename('temp.html'))
+    .pipe(gulp.dest('./test'))
+    .pipe($.mochaPhantomjs({reporter: 'tap'}))
+    .on('finish', function() {
+      del('test/temp.html', {'force': true});
+    })
+    .on('error', function() {
+      del('test/temp.html', {'force': true});
+    });
+});
+
+gulp.task('test', ['jshint', 'jscs', 'mocha', 'mocha:closure']);
 
 gulp.task('test:visual', function() {
   browserSync({
diff --git a/test/index.html b/test/index.html
index 8604bea4..49347ab1 100644
--- a/test/index.html
+++ b/test/index.html
@@ -41,22 +41,7 @@
     return bound;
   };
 </script>
-<script src="../src/mdlComponentHandler.js"></script>
-<script src="../src/button/button.js"></script>
-<script src="../src/checkbox/checkbox.js"></script>
-<script src="../src/data-table/data-table.js"></script>
-<script src="../src/icon-toggle/icon-toggle.js"></script>
-<script src="../src/layout/layout.js"></script>
-<script src="../src/progress/progress.js"></script>
-<script src="../src/radio/radio.js"></script>
-<script src="../src/ripple/ripple.js"></script>
-<script src="../src/slider/slider.js"></script>
-<script src="../src/spinner/spinner.js"></script>
-<script src="../src/switch/switch.js"></script>
-<script src="../src/tabs/tabs.js"></script>
-<script src="../src/textfield/textfield.js"></script>
-<script src="../src/tooltip/tooltip.js"></script>
-<script src="../src/menu/menu.js"></script>
+<script src="../dist/material.js"></script>
 <script>
   // mocha.ui('bdd');
   mocha.setup('bdd');
diff --git a/test/unit/menu.js b/test/unit/menu.js
index 3bd7d404..ab4f31bc 100644
--- a/test/unit/menu.js
+++ b/test/unit/menu.js
@@ -30,10 +30,15 @@ describe('MaterialMenu', function () {
   });
 
   describe ('visibility API', function () {
-    var parent = document.createElement('div'); // parent must exist for MaterialMenu.init()
-    var el = document.createElement('ul');
-    parent.appendChild(el)
-    componentHandler.upgradeElement(el, 'MaterialMenu');
+    var parent;
+    var el;
+
+    before(function() {
+      parent = document.createElement('div'); // parent must exist for MaterialMenu.init()
+      el = document.createElement('ul');
+      parent.appendChild(el)
+      componentHandler.upgradeElement(el, 'MaterialMenu');
+    });
 
     it('should start the showing animation on show()', function(done) {
       expect($(el.parentElement)).to.not.have.class('is-visible');
diff --git a/test/unit/tabs.js b/test/unit/tabs.js
index b2a260e4..58c7c39b 100644
--- a/test/unit/tabs.js
+++ b/test/unit/tabs.js
@@ -33,24 +33,33 @@ describe('MaterialTabs', function () {
   });
 
   describe('Click on the tabs', function () {
-    var el = document.createElement('div');
-    el.innerHTML = '' +
-    '<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
-    '  <div class="mdl-tabs__tab-bar">' +
-    '   <a href="#content1" id="tab1" class="mdl-tabs__tab">1</a>' +
-    '   <a href="#content2" id="tab2" class="mdl-tabs__tab">2</a>' +
-    '   <a href="#content3" id="tab3" class="mdl-tabs__tab">3</a>' +
-    ' </div>' +
-    ' <div class="mdl-tabs__panel" id="content1"></div>' +
-    ' <div class="mdl-tabs__panel" id="content2"></div>' +
-    ' <div class="mdl-tabs__panel" id="content3"></div>' +
-    '</div>';
-    componentHandler.upgradeElement(el, 'MaterialTabs');
 
-    var tab1 = el.querySelector('#tab1');
-    var tab2 = el.querySelector('#tab2');
-    var content1 = el.querySelector('#content1');
-    var content2 = el.querySelector('#content2');
+    var el;
+    var tab1;
+    var tab2;
+    var content1;
+    var content2;
+
+    before(function() {
+      el = document.createElement('div');
+      el.innerHTML = '' +
+      '<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
+      '  <div class="mdl-tabs__tab-bar">' +
+      '   <a href="#content1" id="tab1" class="mdl-tabs__tab">1</a>' +
+      '   <a href="#content2" id="tab2" class="mdl-tabs__tab">2</a>' +
+      '   <a href="#content3" id="tab3" class="mdl-tabs__tab">3</a>' +
+      ' </div>' +
+      ' <div class="mdl-tabs__panel" id="content1"></div>' +
+      ' <div class="mdl-tabs__panel" id="content2"></div>' +
+      ' <div class="mdl-tabs__panel" id="content3"></div>' +
+      '</div>';
+      componentHandler.upgradeElement(el, 'MaterialTabs');
+
+      tab1 = el.querySelector('#tab1');
+      tab2 = el.querySelector('#tab2');
+      content1 = el.querySelector('#content1');
+      content2 = el.querySelector('#content2');
+    });
 
     it('Should activate no tab by default', function (done) {
       window.setTimeout(function () {