Directive templateUrl templates tested from Karma

[aaronallport]

Directive templateUrl templates tested from Karma

[aaronallport]

In your karma conf you're pre-fixing your assets with "/base" in the ngHtml2JsPreprocessor section, yet in your directive test spec you have the line "beforeEach(module('views/test-directive.html'))" - have you tried using "/base" for your templates being loaded?

[scottnath]

Hi @aaronallport ,

I've tried it both with and without that link in ngHtml2JsPreprocessor. Either way, this is the error I'm getting:

Running "karma:unit" (karma) task
INFO [karma]: Karma v0.12.16 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket tBnCSQLO6q1iP0j-22HC with id 65483809
WARN [web-server]: 404: /base/app/scripts/views/test-directive.html.js
PhantomJS 1.9.7 (Mac OS X) ERROR: 'There is no timestamp for /base/app/scripts/views/test-directive.html.js!'

PhantomJS 1.9.7 (Mac OS X) ERROR
  Error: Script error for: views/test-directive.html
  http://requirejs.org/docs/errors.html#scripterror
  at /Users/scottnath/development/gitrepos/generator-angular-require-templaturl/node_modules/requirejs/require.js:141


Warning: Task "karma:unit" failed. Use --force to continue.

According to this stackoverflow article, that is happening because of misconfiguration. But, I can't figure out what I'm missing or have wrong in my config file.

Any ideas?

[aaronallport]

That has to be path config - app/scripts/views doesn't look right to me. Your app is set up app/scripts and app/views

[aaronallport]

Put "templates" instead of "views" in your directive test spec when specifying the template as an import dependency ("templates" is listed in the "paths" section of your test requirejs config file). That gets over the test runner not being able to load the file. There is an error being thrown about angular not being a variable - which means that the test runner is able to find the file at least.

[aaronallport]

The next issue is caused by the fact that angular cannot be resolved. This is because karma-ng-html2js-preprocessor wraps the template as an angular module, but not within a define.

If you want to for now, change the file in node_modules/karma-ng-html2js-preprocessor/lib/html2js.js, so that the line beginning var TEMPLATE reads as follows:

var TEMPLATE = 'define([\'angular\'], function(angular) {angular.module(\'%s\', []).run(function($templateCache) {\n' +
    '  $templateCache.put(\'%s\',\n    \'%s\');\n' +
    '});});\n';

Also, the generated module name from the view being passed through the preprocessor is "/views/TEMPLATE-NAME.html", so in your directive test spec where you load the view as a module, you'll need the below:

beforeEach(module('/views/test-directive.html'));

[aaronallport]

Sorry hit the wrong button - I'll make a note to fork and update https://github.com/karma-runner/karma-ng-html2js-preprocessor in the future

[aaronallport]

For info: aaronallport/karma-ng-html2js-define-preprocessor#1 - Shouldn't be too long before this is done

[scottnath]

OK. I've tried a fresh run at this. I did get it to give me a new error, but it still does not work. Below are the exact steps I'm following.

Steps followed

1. yo generator-angular

2. Followed install steps, yes to all except twitter bootstrap

3. Created a directive: yo angular-require:directive myDirective

4. Changed ./scripts/myDirective.js to use a templateUrl. New code:

   ...
   .directive('myDirective', function () {
     return {
       templateUrl: 'views/mydirective.html',
       restrict: 'E'
     };
   ...
   

5. Added the template file to ./views/mydirective.html with dummy text

6. Cleared main.html and added the directive element:

   <my-directive></my-directive>
   

7. Re-ran grunt serve to make sure all is working, it is

8. Changed ./test/directives/mydirectiveSpec.js to test the template

   /*jshint unused: vars */
   define(['angular', 'angular-mocks', 'app', 'views/mydirective.html'], function(angular, mocks, app) {
     'use strict';
   
     describe('Directive: testDirective', function () {
   
       // load the directive's module
       beforeEach(module('templateUrlTestApp.directives.Testdirective'));
   
       var el,
         scope;
   
       beforeEach(module('views/mydirective.html'));
   
   
       beforeEach(inject(function ($rootScope, $compile) {
         el = angular.element('<my-directive></my-directive>');
         scope = $rootScope;
         $compile(el)($rootScope);
         scope.$digest();
       }));
   
       it('should make hidden element visible', inject(function ($compile) {
         expect(el.text()).toBe('Testy testerton');
       }));
     });
   });
   

9. Resulted in (expected) Karma error:

   WARN [web-server]: 404: /base/app/scripts/views/mydirective.html.js
   WARN [web-server]: 404: /base/app/scripts/angular.js
   PhantomJS 1.9.7 (Mac OS X) ERROR: 'There is no timestamp for /base/app/scripts/views/mydirective.html.js!'
   
   PhantomJS 1.9.7 (Mac OS X) ERROR
     Error: Script error for: views/mydirective.html
     http://requirejs.org/docs/errors.html#scripterror
     at /Users/scottnath/development/gitrepos/generator-angular-require-templaturl/node_modules/requirejs/require.js:141
   
   PhantomJS 1.9.7 (Mac OS X) ERROR: 'There is no timestamp for /base/app/scripts/angular.js!'
   

10. Added configurations to ./karma.conf.js:

    ...
    files: [
    ...
        // added this html template pattern:
        {pattern: 'app/views/*.html', included: false },
    ...
    ],
    ...
    // added this pre-processor section
    preprocessors: {
        'app/views/*.html': ['ng-html2js']
    },
    
    // added this ngHtml2JsPreprocessor section
    ngHtml2JsPreprocessor: {
        stripPrefix: 'app/',
    },
    ...
    

11. Added configurations to ./test/test-main.js:

    ...
    requirejs.config({
    ...
        paths: {
        ...
            // added views as templates
            'templates': '../views'
        ...
        },
        shim: {
        ...
            //added specific html file
            'views/test-directive.html': {deps: ['angular']}
        ...
    

12. grunt serve and Karma gives same error as Step-9 above

13. Change ./node_modules/karma-ng-html2js-preprocessor/lib/html2js.js to include bug-fix:

    var TEMPLATE = 'angular.module(\'%s\', []).run(function($templateCache) {\n' +
    '  $templateCache.put(\'%s\',\n    \'%s\');\n' +
    '});\n';
    

    becomes:

    var TEMPLATE = 'define([\'angular\'], function(angular) {angular.module(\'%s\', []).run(function($templateCache) {\n' +
    '  $templateCache.put(\'%s\',\n    \'%s\');\n' +
    '});});\n';
    

14. rerun grunt serve and Karma gives same error as #9 above

15. change ./test/directives/mydirectiveSpec.js to reference "templates" in dependencies:

    define(['angular', 'angular-mocks', 'app', 'templates/mydirective.html'], function(angular, mocks, app) {
    

16. New Karma Error:

    PhantomJS 1.9.7 (Mac OS X) Directive: testDirective should make hidden element visible FAILED
    Error: [$injector:modulerr] Failed to instantiate module templateUrlTestApp.directives.Testdirective due to:
    Error: [$injector:nomod] Module 'templateUrlTestApp.directives.Testdirective' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    

so...my new error says the injection works, but now it can't find the directive itself? Am I reading that correctly?

[scottnath]

By the way, I have pushed the code to this branch:
https://github.com/scottnath/generator-angular-require-templaturl/tree/freshexample

thanks for any help,
Scott

[aaronallport]

In test/spec/directives/mydirectiveSpec.js - when you load your view as a module, it needs a "/" in front of it:

beforeEach(module('views/mydirective.html'));

should be

beforeEach(module('/views/mydirective.html'));

Try that and let me know how it goes. I thought for a minute I hadn't mentioned this but I did in my comment above so I'm not going mad or doing something completely different!

[scottnath]

Thank you, I tried that, same error:

Error: [$injector:modulerr] Failed to instantiate module templateUrlTestApp.directives.Testdirective due to:
...

[aaronallport]

As you've generated a new project for your new branch, your directive needs to be named as per the following in myDirectiveSpec.js:

// load the directive's module
beforeEach(module('generatorAngularRequireTemplaturlApp.directives.Mydirective'));

This will ensure the directive can be loaded.

[scottnath]

Hey @aaronallport - that worked!!

I've run a few more tests on it and done a couple raw installs to make sure I got it all right, and I've got a solution written up here:
https://github.com/scottnath/generator-angular-require-templaturl
with example code to show how it all works.

Thank you for all your help on this!

I'm gonna mark this ticket as closed.

-scott

[aaronallport]

You're welcome Scott - glad it all worked for you.

I'll hopefully get a fix out soon for the https://github.com/karma-runner/karma-ng-html2js-preprocessor issue. In the meantime, I may add a sub-generator to generator-karma to facilitate testing of directives.

Thanks again for raising!

[aaronallport]

This has (finally) been published - https://www.npmjs.org/package/karma-ng-html2js-define-preprocessor