dashboard template testing

[igorlino]

Hi,

I was currently looking into how gulp-patterns tests, and everything seems fine except when for example we want to test a main layout, like dashboard. (so testing the layout, not the controller)

    el = angular.element(
        '<div ng-include="app/dashboard/dashboard.html" ng-controller="Dashboard as vm"></div>');

    scope = $rootScope;
    var compiledEl = $compile(el)(scope);

    // The spec examines changes to these template parts
    searchElement = compiledEl.find('.dashboard .searchBtn'); // the button to click

What I don't understand is why the compiledEl has no include at all.

This project creates/generates the templates.js file, which includes all layout templates. so the $templateCache is populated. The karma seems to be configured to work with that.

but still, I cannot get the simple dashboard to work.

Any suggestion ?

[ceilino]

forgot to mention, to find out that there is a template: $templateCache.get("app/dashboard/dashboard.html")

returns a result. So I would assume ng-include should get that one.

[ceilino]

ok, found the reason. $compile of a referenced template is of course asynchronous. Therefore, before you do anything with the compiled element you must either A wait... or B force compile to finish by using

//force $compile to finish $rootScope.$apply();

I think it would be good, in any case, to put an example of testing the dashboard layout. This will make gulp-patterns more useful for people who want to also test layouts. I mean, we want to avoid putting much stuff in the controller, but as experience tells, often you want specific changes in the HTML, so its really nice to treat it as a blackbox, therefore the layout test is cool.

I don't create a pull-request anymore because my previous ones were never used.