Einheit Test Komponente Winkel

Question

Ich versuche, meine Komponente Controller Unit-Test und ich bekomme folgende Fehler. Kann mir jemand sagen, was ist hier falsch?

Meine Abhängigkeiten:

• Winkel 1.5.6
• Winkel Mocks 1.5.7
• Mokka 2.5.3
• Karma 0.13.22

Fehler:

modalCleanup component "before all" hook: workFn FAILED 
    Error: [$injector:unpr] Unknown provider: $elementProvider <- $element 
    http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element 
     at /home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:230:13 
     at /home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4664:20 
     at Object.getService [as get] (/home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4817:40) 
     at /home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4669:46 
     at getService (/home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4817:40) 
     at injectionArgs (/home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4841:59) 
     at Object.instantiate (/home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:4883:19) 
     at $controller (/home/mixtape/web/repo/mailer/server/public/assets/js/vendor.js:10411:29) 
     at /home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:2345:13 

     at $componentController (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:2388:15) 
    Error: Declaration Location 
     at Object.window.inject.angular.mock.inject [as inject] (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:3171:26) 
     at Suite.<anonymous> (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:3271:24) 
     at Object.<anonymous> (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:3260:2) 
     at __webpack_require__ (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:20:30) 
     at Object.<anonymous> (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:63:96) 
     at __webpack_require__ (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:20:30) 
     at Object.<anonymous> (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:4611:75) 
     at __webpack_require__ (/home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:20:30) 
     at /home/mixtape/web/repo/mailer/server/public/assets/js/specs.js:55:18 
    Chrome 51.0.2704 (Linux 0.0.0): Executed 78 of 78 (1 FAILED) (0.437 secs/0.118 secs) 

Komponente:

"use strict"; 

import template from "./template.html"; 
import "./style.styl"; 

export default { 
template: template, 
controller: function(MailboxesApi, ErrorHandler, MailboxesStore, Notify, LettersStore, $element, $state, $rootScope) { 
    "ngInject"; 

Object.defineProperty(this, "removing", { 
    get: function() { 
    return MailboxesApi.removing; 
    } 
}); 

$rootScope.$on("modal.cleanup.open",() => this.open()); 

this.close =() => { 
    $element.removeClass("w-cleanup_opened"); 
    $element.off("click"); 
}; 

this.open =() => { 
    $element.addClass("w-cleanup_opened"); 
    $element.on("click",() => this.close()); 
}; 

this.preventBubbling = e => e.stopPropagation(); 

this.confirmHandler =() => { 
    let selected = MailboxesStore.selected; 

    MailboxesApi.cleanup(selected) 
    .then(() => { 

     LettersStore.deselectAll(); 
     LettersStore.removeAll(selected); 
     this.close(); 
     Notify.add("The mailbox was successfully cleaned!"); 
     $state.reload(); 

    }, err => { 
     this.close(); 

     ErrorHandler.handle(err); 
    }); 
}; 

} 
}; 

Test:

"use strict"; 

describe("modalCleanup component", function() { 
let modalCleanupController, $componentController; 

angular.mock.module.sharedInjector(); 

before(angular.mock.module("app")); 

before(angular.mock.module(function($urlRouterProvider) { 
    $urlRouterProvider.deferIntercept(); 
})); 

before(angular.mock.inject(function(_$componentController_) { 
    $componentController = _$componentController_; 
modalCleanupController = $componentController("modalCleanup", null); 
    })); 

it("test...", function() {}); 

}); 

Answer 1

Sie benötigen für $ Component funktionieren die $ Element zu schaffen, weil Sie es in der Controller-Definition verwenden. Sie können smtg ähnlich in Ihrem Unit-Test definieren mit:

var element = angular.element('<button></button>'); 
modalCleanupController = $componentController("modalCleanup", { 
    //create an empty scope 
    $scope: {}, 
    $element: element 
});