fix(tests): performance improvements and fixes to jasmine testing

Refactor internal test utils to angular-material-spec.js
Publish material mocks `angular-material-mocks.js` to work with angular-mocks.js for 3rd party unit testing.
Removed module wrappers around all components
- now only has a single module wrapper protecting all the angular material code
Replaced use of `Function.bind( )` with `angular.bind()`
Fixed tests runs with uncompiled source **or** compiled, deployed `angular-material.js`
Use angular-material-mocks.js to decorate $$rAF.throttle(), force $mdAria.expectWithText() to be synchronous, and disable the generation of Theme CSS rules.
Major testing speed improvements by disabling Theme CSS generation.
Theme improvements: test existence of Theme CSS rule before regenerating.
Now works with Safari, Firefox, PhantomJS, and Chrome browser testing.

Author: ThomasBurleson

config/karma.conf.js

@@ -1,54 +1,59 @@
 
 module.exports = function(config) {
-  
+
   var UNCOMPILED_SRC = [
-      'config/test-utils.js',
-      'src/core/**/*.js',
-
-      // Test utilities, source, and specifications.
-      // We are explicit like this because we don't want to put
-      // demos in the tests, and Karma doesn't support advanced
-      // globbing.
-      'src/components/*/*.js',
-      'src/components/*/js/*.js'
+
+    // To enabled use of `gulp karma-watch`,
+    // don't use the dist/angular-material.js
+    //
+    //'dist/angular-material.js',   // Un-minified source
+
+
+    // Test utilities, source, and specifications.
+    // We are explicit like this because we don't want to put
+    // demos in the tests, and Karma doesn't support advanced
+    // globbing.
+
+    'src/core/**/*.js',
+    'src/components/*/*.js',
+    'src/components/*/js/*.js',
+
+    'src/**/*.spec.js'
+
   ];
 
   var COMPILED_SRC = [
-    // Minified source
-    'dist/angular-material.min.js',
-
-    // Test utilties and specifications
-    'config/test-utils.js',
+    'dist/angular-material.min.js',   // Minified source
     'src/**/*.spec.js'
   ];
-  
-  // releaseMode is a custom configuration option.
-  var testSrc = process.env.KARMA_TEST_COMPRESSED ? COMPILED_SRC : UNCOMPILED_SRC;
-  var dependencies = process.env.KARMA_TEST_JQUERY ? 
-      ['node_modules/jquery/dist/jquery.js'] : [];
 
-  dependencies = dependencies.concat([
-    'node_modules/angular/angular.js',
-    'node_modules/angular-animate/angular-animate.js',
-    'node_modules/angular-aria/angular-aria.js',
-    'node_modules/angular-mocks/angular-mocks.js',
-    'config/test-utils.js'
-  ]);
+  var dependencies = process.env.KARMA_TEST_JQUERY ? ['node_modules/jquery/dist/jquery.js'] : [];
+      dependencies = dependencies.concat([
+        'node_modules/angular/angular.js',
+        'node_modules/angular-animate/angular-animate.js',
+        'node_modules/angular-aria/angular-aria.js',
+        'node_modules/angular-mocks/angular-mocks.js',
+        'src/spec/angular-material-mocks.js',
+        'src/spec/angular-material-spec.js'
+      ]);
+
+  var testSrc = process.env.KARMA_TEST_COMPRESSED ? COMPILED_SRC : UNCOMPILED_SRC;
 
   config.set({
 
     basePath: __dirname + '/..',
     frameworks: ['jasmine'],
     files: dependencies.concat(testSrc),
 
+    logLevel:'warn',
     port: 9876,
     reporters: ['progress'],
     colors: true,
 
     // Continuous Integration mode
     // enable / disable watching file and executing tests whenever any file changes
     autoWatch: false,
-    singleRun: false,
+    singleRun: true,
 
     // Start these browsers, currently available:
     // - Chrome
@@ -58,7 +63,30 @@ module.exports = function(config) {
     // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
     // - PhantomJS
     // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
-    browsers: ['Chrome']
+    browsers: ['Chrome'],
+
+    // you can define custom flags
+    customLaunchers: {
+      Chrome_without_security: {
+        base: 'Chrome',
+        flags: ['--disable-web-security']
+      },
+      PhantomJS_without_security: {
+        base: 'PhantomJS',
+        options : {
+          onResourceRequested : function (request) {
+              console.log('Request ' + JSON.stringify(request, undefined, 4));
+          },
+          onError : function (msg, trace) {
+              console.log(msg);
+              trace.forEach(function(item) {
+                  console.log('  ', item.file, ':', item.line);
+              });
+          }
+        },
+        flags: ['--web-security=no', '--proxy-type=none', '--remote-debugger-port=9000', '--remote-debugger-autorun=yes']
+      }
+    }
   });
 
 };

config/test-utils.js

@@ -7,11 +7,11 @@ module.exports = {
   ' * v' + VERSION + '\n' +
   ' */\n',
   jsBaseFiles: [
-    'src/core/**/*.js',
-    '!src/core/**/*.spec.js'
+    'src/core/**/*.js'
   ],
   jsFiles: [
-    'src/**/*.js'
+    'src/**/*.js',
+    '!src/**/*.spec.js'
   ],
   themeBaseFiles: [
     'src/core/style/variables.scss',

gulp/config.js

@@ -8,40 +8,40 @@ if (IS_RELEASE_BUILD) {
 require('./docs/gulpfile')(gulp, IS_RELEASE_BUILD);
 
 gulp.task('build-all-modules', function() {
-  return series(gulp.src(['src/components/*', 'src/core/'])
-      .pipe(through2.obj(function(folder, enc, next) {
-        var moduleId = folder.path.indexOf('components') > -1
-            ? 'material.components.' + path.basename(folder.path)
-            : 'material.' + path.basename(folder.path);
-        var stream = (IS_RELEASE_BUILD && BUILD_MODE.useBower)
-            ? series(buildModule(moduleId, true), buildModule(moduleId, false))
-            : buildModule(moduleId, false);
-        stream.on('end', function() { next(); });
-      })),
-      themeBuildStream()
-          .pipe(BUILD_MODE.transform())
-          .pipe(gulp.dest(path.join(BUILD_MODE.outputDir, 'core')))
-  );
+  return series(
+    gulp.src(['src/core/', 'src/components/*' ])
+        .pipe(through2.obj(function(folder, enc, next) {
+          var moduleId = folder.path.indexOf('components') > -1
+              ? 'material.components.' + path.basename(folder.path)
+              : 'material.' + path.basename(folder.path);
+          var stream = (IS_RELEASE_BUILD && BUILD_MODE.useBower)
+              ? series(buildModule(moduleId, true), buildModule(moduleId, false))
+              : buildModule(moduleId, false);
+          stream.on('end', function() { next(); });
+        })),
+    themeBuildStream()
+      .pipe(gulp.dest(path.join(BUILD_MODE.outputDir, 'core'))
+  )).pipe(BUILD_MODE.transform());
 });
 
 function buildModule(module, isRelease) {
   if ( module.indexOf(".") < 0) {
     module = "material.components." + module;
   }
-
-  var name = module.split('.').pop();
   gutil.log('Building ' + module + (isRelease && ' minified' || '') + ' ...');
 
+  var name = module.split('.').pop();
   utils.copyDemoAssets(name, 'src/components/', 'dist/demos/');
 
-  return utils.filesForModule(module)
-    .pipe(filterNonCodeFiles())
-    .pipe(gulpif('*.scss', buildModuleStyles(name)))
-    .pipe(gulpif('*.js', buildModuleJs(name)))
-    .pipe(BUILD_MODE.transform())
-    .pipe(insert.prepend(config.banner))
-    .pipe(gulpif(isRelease, buildMin()))
-    .pipe(gulp.dest(BUILD_MODE.outputDir + name));
+  var stream = utils.filesForModule(module)
+        .pipe(filterNonCodeFiles())
+        .pipe(gulpif('*.scss', buildModuleStyles(name)))
+        .pipe(gulpif('*.js', buildModuleJs(name)))
+        .pipe(insert.prepend(config.banner))
+        .pipe(gulpif(isRelease, buildMin()))
+        .pipe(gulp.dest(BUILD_MODE.outputDir + name));
+
+  return stream;
 
 
   function buildMin() {
@@ -175,6 +175,7 @@ global.buildJs = function buildJs(isRelease) {
   return series(jsBuildStream, themeBuildStream())
     .pipe(concat('angular-material.js'))
     .pipe(insert.prepend(config.banner))
+    .pipe(BUILD_MODE.transform())
     .pipe(gulp.dest(config.outputDir))
     .pipe(gulpif(isRelease, lazypipe()
       .pipe(uglify, { preserveComments: 'some' })

gulpfile.js

@@ -84,7 +84,7 @@ exports.readModuleDemos = function(moduleName, fileTasks) {
           name: path.basename(file.path),
           label: path.basename(file.path),
           fileType: path.extname(file.path).substring(1),
-          outputPath: 'demo-partials/' + name + '/' + path.basename(demoFolder.path) + '/' + path.basename(file.path),
+          outputPath: 'demo-partials/' + name + '/' + path.basename(demoFolder.path) + '/' + path.basename(file.path)
         };
       }
     }));
@@ -259,9 +259,8 @@ exports.hoistScssVariables = function() {
 exports.cssToNgConstant = function(ngModule, factoryName) {
   return through2.obj(function(file, enc, next) {
 
-    var template = '(function(){ \n angular.module("%1").constant("%2", "%3"); \n})();';
-    var output = file.contents.toString().replace(/\n/g, '')
-      .replace(/\"/,'\\"');
+    var template = 'angular.module("%1").constant("%2", "%3"); \n';
+    var output = file.contents.toString().replace(/\n/g, '').replace(/\"/,'\\"');
 
     var jsFile = new gutil.File({
       base: file.base,

scripts/gulp-utils.js

@@ -60,7 +60,7 @@ describe('<md-contact-chips>', function() {
         });
 
         var matches = autocompleteCtrl.matches;
-        expect(matches.length).toBe(2);
+        expect(matches.length).toBe(3);
       }));
 
       /* it('should not filter when disabled', inject(function($timeout) {