Unit test component angular

Question

I am trying to unit test my component controller and I am getting following errors. Can anyone tell me, what's wrong here?

My dependencies:

• angular 1.5.6
• angular-mocks 1.5.7
• mocha 2.5.3
• karma 0.13.22

Errors:

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)

Component:

"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

You need to provide for $componentController function the $element because you are using it in the controller definition. You can define smtg similar in you unit test with:

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