vojtajina / ng-directive-testing Goto Github PK

Hi!

In my application I have a template that lives here:
app/views/angular/my_template.html

In my directive I load the template via:

templateUrl: '/angular/my_template.html'

This difference is due to the way Rails routes and loads templates.

My karma.conf.js includes:

files = [
  JASMINE,
  JASMINE_ADAPTER,
  // Angular Libs
  'vendor/assets/javascripts/angular.js',
  'spec/javascripts/lib/angular/angular-mocks.js',
  // jQuery
  'vendor/assets/javascripts/jquery/jquery-1.9.1.js',
  // Application Code
  'app/assets/javascripts/angular/**/*.js',
  // Test Files
  'spec/javascripts/controllers/**/*_spec.js',
  'spec/javascripts/directives/**/*_spec.js',
  // templates
  'app/views/angular/*.html'
];

preprocessors = {
  'app/views/angular/**/*.html': 'html2js'
};
........

In my directive test I load template module:

beforeEach(module('app/views/angular/my_template.html'));

However, I get an error:
Error: Unexpected request: GET /angular/my_template.html

If I change the templateUrl to:

templateUrl: 'app/views/angular/my_template.html'

the tests work great. I can make my app serve this url so the actual directive will work but it deviates from the norm.

Is there a way to to handle this different is routing vs file location? Am I missing somehting or is directive testing not meant to handle this situation?

Thanks!

-Ryan

I get SyntaxError: Parse error at my directive line where I want to use a "&" one-way binding from a parent directive's method

myApp.directive('datasourceDeleteBtn', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<a href="#">&#x2715</a>',
        scope: {
            datasourceIndex: '@',
            removeParentDiv: '&'
        },
        link: link
    };

    function link(scope, element, attr) {

        element.bind('click', function(event) {
            event.preventDefault();
            scope.deleteDatasource(scope.datasourceIndex);
        });

        // Notify parent directive
        scope.deleteDatasource = function(datasource_index) {
            // conditional stuff that happens not included
            // {} required for passing values to "&" parent scope method
            scope.removeParentDiv({datasource_index});
        };
    }
}]);

HTML

<parent-div ng-repeat> // this is just a mockup not literal
<datasource-delete-btn datasource-index="{{$index}}" remove-parent-div="removeParentDiv()"></datasource-delete-btn>
</parent-div>

The parent div of the ng-repeat that passes removeParentDiv

// parentDiv directive has this
        scope.datasources = [];
        scope.removeDatasourcePicker = function(index) {
            scope.datasources.splice(index, 1);  // ie take it out
        };

It seems the problem is that Jasmine does not like the { }. Removing the brackets results in the test going through (with typical errors since & requires {}).

This might be a bug in angular itself, but you might know the problem given we used the same setup as you did for tabs directives.

If we use two-way data binding on the pane directive's attributes (name: '=', title: '=') while it still works in the browser, the attributes are not picked up when run in the test environment using Angular Mock. Looking at a break in the link function, the scope is aware of its variables, but has null values for them. Using name: '@', title: '@' works fine in both environments.

Bug in Angular? Angular Mock? Something specific to this configuration?

Thanks!

On windows getting an illegal token error when running the tests.

Uncaught SyntaxError: Unexpected token 
ILLEGAL at C:/zend/Apache2/htdocs/GitHub/ng-directive-testing/tpl/pane.html.js:3

I basically downloaded the repo and then just ran

karma run

I'm guessing this might be an issue with the $compile function?

C:\Users\owner\Documents\GitHub\ng-directive-testing [master]> karma start karma.conf.js
WARN [karma]: Port 9876 in use
WARN [karma]: Port 9100 in use
INFO [karma]: Karma server started at http://localhost:9877/
INFO [launcher]: Starting browser Chrome
INFO [karma]: To run via this server, use "karma run --runner-port 9101"
INFO [Chrome 26.0 (Windows)]: Connected on socket id d5i-aG6rs-VWa4-YmdAq
Chrome 26.0 (Windows) ERROR
Uncaught SyntaxError: Unexpected token <
at C:/Users/owner/Documents/GitHub/ng-directive-testing/tpl/pane.html:1
Chrome 26.0 (Windows): Executed 0 of 0 ERROR (0.965 secs / 0 secs)

Here it is with PhantomJS as the test browser instead of Chrome, if that makes any never-you-mind:

PhantomJS 1.9 (Windows) ERROR
SyntaxError: Parse error
at C:/Users/owner/Documents/GitHub/ng-directive-testing/tpl/pane.html:1
PhantomJS 1.9 (Windows): Executed 0 of 0 ERROR (1.166 secs / 0 secs)

I see the code at https://github.com/karma-runner/karma-ng-html2js-preprocessor but I have no idea how to integrate it into your example.

Thank you.

Hi Vojta,

Nice work on Karma, i'm enjoying using it so thanks. Could you give an example of testing directives which use templateUrl please?

I'm using jasmine-jquery. Would you recommend using jasmine.getFixtures or to use.

module(<template-path>)

I've not got either of these solutions working yet.

Thanks so much for the repo, it provides a great intro. I'm finding some challenges with more complex directives, however, and have a similar question to the one discussed here: https://groups.google.com/forum/#!msg/angular/0t5UxUSoQbw/jVQeCzS79okJ

How would you suggest mocking out the parent directive controller for the element you're trying to test. Or is it really better to always have to wrap the element in the parent directive?

It would be very helpful :)

I am getting following error

Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://10.158.61.26:65203/wd/hub
[launcher] Error: SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)

The version details used are as follows
"npm": "3.8.0",
"node": "5.7.1",
protractor : 3.1.1