text! plugin could not load the HTML template during test

[mech]

I have a text! to load my basic HTML template to use for my Backbone Require.js project at here - https://github.com/mech/front_end_demo

If you run the server, the template will get the properly loaded, but the karma test runner did not seem to be able to load the HTML file. It can somehow only load if I renamed the file to show.js instead of show.html. This conclude that the path is visible, just that it cannot load HTML files?

Error: /base/app/assets/javascripts/src/client/templates/show.html HTTP status: 404

Appreciated for any help.

[cheshire]

I think it happens because the code which looks for "text!" string is not part of require.js, but rather a plugin, and that plugin is not installed in the karma-requirejs (i think). Having the same problem now.

[cheshire]

Actually, all you need to do is to require the "text.js" file (from https://github.com/requirejs/text) before you require the files that include HTML. Should work after that.

[jamilbk]

Same issue here. I fixed it by specifying my requirejs-text plugin in the deps array before my tests in test-main.js.

e.g.:

/*
 * This file prepares RequireJS for loading our tests
 */
var tests = [];

tests.push('/base/lib/public/js/vendor/requirejs-text.js');

for (var file in window.__karma__.files) {
    if (/test\.js$/.test(file)) {
        tests.push(file);
    }
}

requirejs.config({
    baseUrl: '/base/lib/public/js',

    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        serializeObject: ['jquery']
    },

    paths: {
        jquery: 'vendor/jquery',
        underscore: 'vendor/underscore',
        underscore_string: 'vendor/underscore.string',
        backbone: 'vendor/backbone',
        serializeObject: 'vendor/jQuery.serializeObject',
        sjcl: 'vendor/sjcl',
        text:  'vendor/requirejs-text',
        templates: '../templates',
        css: '../css',

        // testing libraries
        chai: '../../../test/browser/js/vendor/chai'
    },

    deps: tests,

    callback: window.__karma__.start
});

[CaptainJojo]

Same issue here. I fixed it by specifying my requirejs-text plugin in the deps array before my tests in test-main.js. But I have an other error

Error: Load timeout for modules: text!../templates/layer/form.html_unnormalized2,text
        http://requirejs.org/docs/errors.html#timeout
        at /space/home/jjalouzot/backbonelayerpaywall/node_modules/requirejs/require.js:141

I don't understand this error

My test-main.js is:

var tests = [];

tests.push('/base/lib/text.js');

for (var file in window.__karma__.files) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (/Spec\.js$/.test(file)) {
      tests.push(file);
      console.log(file);
    }
  }
}

requirejs.config({
    // Karma serves files under the /base directory. So, on the server requests to files
    // will be served up under http://localhost:9876/base/*.
    // The Require.js config for baseUrl gives a starting context for modules that load with relative paths.
    // When setting this value for the Karma server it will need to start with /base. We want the baseUrl for our
    // tests to be the same folder as the base url we have in src/main.js, so that relative requires in the source won’t
    // need to change. So, as we want our base url to be at src/, we need to write /base/src.
    // (http://karma-runner.github.io/0.8/plus/RequireJS.html)
    baseUrl: '/base',
    waitSeconds: 10,
    paths: {
        text: 'lib/text',
        templates: '../templates',
        jquery: 'lib/jquery-min',
        underscore: 'lib/underscore-min',
        backbone: 'lib/backbone-min',
        chai: 'lib/chai',
        chaijquery: 'lib/chai-jquery',
        member: 'src/models/member',
        utils: 'src/utils/utils',
        memberFormView: 'src/views/form',
    },

    shim: {
      'underscore': {
        exports: '_'
      },
      'jquery': {
        exports: '$'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      },
      'chaijquery': ['jquery', 'chai']
    },

    // ask Require.js to load these files (all our tests)
    deps: tests,

    // start test run, once Require.js is done
    callback: window.__karma__.start
});

And the error is produce by this file

define([
  'jquery',
  'backbone',
  'member',
  'text!../templates/layer/form.html'
], function($, Backbone, MemberModel, MemberFormTemplate){

  var MemberFormView = Backbone.View.extend({
    state: 0,
    memberModel: new MemberModel(),

    initialize: function(){ 
      console.log('initialize: '+ this.state);
    },

    events : {
      "submit form": function(e) {
        console.log('event:'+this.state);
        switch (this.state)
        {
          case 0: 
            this.verifEmail(e);
            break;
          case 1:
            this.connect(e);
            break;
          case 2:
            this.registration(e)
            break;
        }
      }
    },

    verifEmail: function(e) {
      e.preventDefault();
      this.memberModel.setEmail(this.$('#email').val());
      var form = this;
      this.memberModel.emailExist(this.exist, form);
    },

    exist: function(form, msg) {
      if (msg.meta.msg == true)
        {    
          form.$('#password').show();
          form.$('#label-password').show();
          form.state = 1;
          console.log(form.state);
        } else {
          form.$('#username').show();
          form.$('#label-username').show();
          form.$('#password').show();
          form.$('#label-password').show();
          form.$('#repassword').show();
          form.$('#label-repassword').show();
          form.state = 2;
        }
    },

    connect: function(e) {
      e.preventDefault();
      console.log('connect');
      this.memberModel.setEmail(this.$('#email').val());
      this.memberModel.setPassword(this.$('#password').val());
      var form = this;
      this.memberModel.connect(this.isconnect, form);
    },

    isconnect: function(form, msg)
    {
      var obj = msg.responseJSON;
      console.log(obj);
      if (obj.meta.status == 401) {
        form.$('#msg').html(obj.meta.msg);
      } else {
        var router =  new Backbone.Router();
        router.navigate("/congratulation", true);
      }
    },

    registration: function(e) {
      e.preventDefault();

      this.memberModel.setEmail(this.$('#email').val());
      this.memberModel.setUsername(this.$('#username').val());
      this.memberModel.setPassword(this.$('#password').val());
      this.memberModel.setRepassword(this.$('#repassword').val());

      if (!this.memberModel.registration())
      {
        this.$('#msg').html('error registration');
      }

      var router =  new Backbone.Router();
      router.navigate("/congratulation", true);
    },

    render: function(){
      this.$el.html(MemberFormTemplate); 
    },

    close: function(){
      this.undelegateEvents();
    }
  });

  return MemberFormView;
});

The project worked directly in web but not in CLI

[dignifiedquire]

Is this still an issue?

[bluebaroncanada]

Just had the issue

[bluebaroncanada]

npm remove karma
npm install karma

[russplaysguitar]

In my case, I had to add the following to karma.conf.js:

    // list of files / patterns to load in the browser
    files: [
      {pattern: '**/*.html', included: false}
    ],