Missing html templates in karma.conf

[stewones]

the plugin karma-ng-html2js-preprocessor is not working properly. as seen in #500

$ gulp test
  Error: Unexpected request: GET app/components/leadForm/leadForm.tpl.html

  No more request expected
      at $httpBackend (c:/dev/gen3/bower_components/angular-mocks/angular-
js:1227)
      at sendReq (c:/dev/gen3/bower_components/angular/angular.js:9668)
      at c:/dev/gen3/bower_components/angular/angular.js:9383
      at processQueue (c:/dev/gen3/bower_components/angular/angular.js:132

      at c:/dev/gen3/bower_components/angular/angular.js:13264
      at c:/dev/gen3/bower_components/angular/angular.js:14466
      at c:/dev/gen3/bower_components/angular/angular.js:14282
      at c:/dev/gen3/src/app/components/leadForm/leadForm.directive.spec.j

directive

angular.module('gen3').directive('leadForm', /*@ngInject*/ function() {
        return {      
            replace: true,
            templateUrl: 'app/components/leadForm/leadForm.tpl.html'
        }
    })

template

lidless, wreathed in flame, 2 times

spec

'use strict';
describe('<lead-form> component', function() {
    var $compile,
        $rootScope;
    beforeEach(module('gen3'));
    beforeEach(inject(function(_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));
    it('Replaces the element with the appropriate content', function() {
        var element = $compile('<lead-form></lead-form>')($rootScope);
        $rootScope.$digest();
        expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
    });
});

yo-rc

{
  "generator-gulp-angular": {
    "version": "0.11.0",
    "props": {
      "angularVersion": "~1.3.15",
      "angularModules": [],
      "jQuery": {
        "key": "none"
      },
      "resource": {
        "key": "none",
        "module": null
      },
      "router": {
        "key": "none",
        "module": null
      },
      "ui": {
        "key": "none",
        "module": null
      },
      "cssPreprocessor": {
        "key": "none",
        "extension": "css"
      },
      "jsPreprocessor": {
        "key": "none",
        "extension": "js",
        "srcExtension": "js"
      },
      "htmlPreprocessor": {
        "key": "none",
        "extension": "html"
      },
      "bootstrapComponents": {
        "name": null,
        "version": null,
        "key": null,
        "module": null
      },
      "foundationComponents": {
        "name": null,
        "version": null,
        "key": null,
        "module": null
      },
      "paths": {
        "src": "src",
        "dist": "dist",
        "e2e": "e2e",
        "tmp": ".tmp"
      }
    }
  }
}

My suggestion to fix
according by this sample, i realized that i need to append the html templates in karma.conf
here i solve this way

 return wiredep(wiredepOptions).js
    .concat([
      path.join(conf.paths.src, '/app/**/*.module.js'),
      path.join(conf.paths.src, '/app/**/*.js'),
      path.join(conf.paths.src, '/**/*.spec.js'),
      path.join(conf.paths.src, '/**/*.mock.js'),
      path.join(conf.paths.src, '/**/*.html') //adding templates        
    ]);

i can make a PR if it is all right

[dereklin]

what line number does this go inside karma.conf? Or is it in some other file?

 return wiredep(wiredepOptions).js
    .concat([
      path.join(conf.paths.src, '/app/**/*.module.js'),
      path.join(conf.paths.src, '/app/**/*.js'),
      path.join(conf.paths.src, '/**/*.spec.js'),
      path.join(conf.paths.src, '/**/*.mock.js'),
      path.join(conf.paths.src, '/**/*.html') //adding templates        
    ]);

this is how my unit-tests.js looks like:

'use strict';

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var wiredep = require('wiredep');
var karma = require('karma');
var concat = require('concat-stream');
var _ = require('lodash');

module.exports = function(options) {
  function listFiles(callback) {
    var wiredepOptions = _.extend({}, options.wiredep, {
      dependencies: true,
      devDependencies: true
    });
    var bowerDeps = wiredep(wiredepOptions);

    var specFiles = [
      options.src + '/**/*.spec.js',
      options.src + '/**/*.mock.js'
    ];

    var htmlFiles = [
      options.src + '/**/*.html'
    ];

    var srcFiles = [
      options.src + '/app/**/*.js'
    ].concat(specFiles.map(function(file) {
      return '!' + file;
    }));


    gulp.src(srcFiles)
      .pipe($.angularFilesort())
      .pipe(concat(function(files) {
        callback(bowerDeps.js
          .concat(_.pluck(files, 'path'))
          .concat(htmlFiles)
          .concat(specFiles));
      }));
  }

  function runTests (singleRun, done) {
    listFiles(function(files) {
      karma.server.start({
        configFile: __dirname + '/../karma.conf.js',
        files: files,
        singleRun: singleRun,
        autoWatch: !singleRun
      }, done);
    });
  }

  gulp.task('test', ['scripts'], function(done) {
    runTests(true, done);
  });
  gulp.task('test:auto', ['watch'], function(done) {
    runTests(false, done);
  });
};

[stewones]

you need to append html templates in karma.conf
path.join(conf.paths.src, '/**/*.html') //adding templates
otherwise, the plugin karma-ng-html2js-preprocessor not works properly

[dereklin]

@stewones My karma.conf.js looks like this: where do I add the new line?:

'use strict';

module.exports = function(config) {

  var configuration = {
    autoWatch : false,

    frameworks: ['jasmine'],

    ngHtml2JsPreprocessor: {
      stripPrefix: 'src/',
      moduleName: 'gulpAngular'
    },

    browsers : ['PhantomJS'],

    plugins : [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    preprocessors: {
      'src/**/*.html': ['ng-html2js']
    }
  };

  // This block is needed to execute Chrome on Travis
  // If you ever plan to use Chrome and Travis, you can keep it
  // If not, you can safely remove it
  // https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
  if(configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
    configuration.customLaunchers = {
      'chrome-travis-ci': {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    };
    configuration.browsers = ['chrome-travis-ci'];
  }

  config.set(configuration);
};

[stewones]

Sounds like you are trying another generator version, look at my yo-rc above, i am using 0.11

[dereklin]

@stewones I am using 0.11 as well. In fact, I just updated my generator-gulp-angular to just make sure:

{
  "generator-gulp-angular": {
    "version": "0.11.0",
    "props": {
      "angularVersion": "~1.3.4",
      "angularModules": [
        {
          "key": "animate",
          "module": "ngAnimate"
        }
      ],
      "jQuery": {
        "key": "jquery2"
      },
      "resource": {
        "key": "none",
        "module": null
      },
      "router": {
        "key": "ui-router",
        "module": "ui.router"
      },
      "ui": {
        "key": "bootstrap",
        "module": null,
        "name": "bootstrap"
      },
      "bootstrapComponents": {
        "key": "ui-bootstrap",
        "module": "ui.bootstrap"
      },
      "cssPreprocessor": {
        "key": "stylus",
        "extension": "styl"
      },
      "jsPreprocessor": {
        "key": "none",
        "extension": "js",
        "srcExtension": "js"
      },
      "htmlPreprocessor": {
        "key": "none",
        "extension": "html"
      },
      "foundationComponents": {
        "name": null,
        "version": null,
        "key": null,
        "module": null
      },
      "paths": {
        "src": "src",
        "dist": "dist",
        "e2e": "e2e",
        "tmp": ".tmp"
      }
    }
  }
}

[stewones]

@dereklin okay, now check your karma.conf for listFiles(), it should look like this.

function listFiles() {
    var wiredepOptions = _.extend({}, conf.wiredep, {
        dependencies: true,
        devDependencies: true
    });

    return wiredep(wiredepOptions).js
        .concat([
            path.join(conf.paths.src, '/app/**/*.module.js'),
            path.join(conf.paths.src, '/app/**/*.js'),
            path.join(conf.paths.src, '/**/*.spec.js'),
            path.join(conf.paths.src, '/**/*.mock.js'),
            path.join(conf.paths.src, '/**/*.html') //<---- //add this line  
        ]);
}

Maybe you have to pull generator from master, if you do not have this method.

[dereklin]

I downloaded generator-gulp-angular as zip and manually installed it to my machine. Now I see the same karma.conf.js. I added the line for html. But I am still getting:

        No more request expected
            at $httpBackend (C:/project/itaApp/bower_components/angular-mocks/an
gular-mocks.js:1212)

[dereklin]

Oh boy, I missed mocking my main app: module('mainApp'); It works now. Thanks @stewones

[Swiip]

Seems like a broke this when I made a new version of the karma conf. The PR of @zckrs should fix it.