AngularJS Directive not found when attempting to run test?

Question

I'm following the phone-cat angular js example and trying to adapt it for testing in my situation.

My karma.conf.js file:

//jshint strict: false
module.exports = function(config) {
  config.set({

    basePath: './app',

    files: [
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.9/angular-mocks.min.js',

      'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
      'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js',
      'libs/jquery.fileupload.js',
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js',
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js',
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js',
      'https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js',
      '*!(.module|.spec).js',
      '**/*.spec.js',
      '**/components/**'
    ],

    autoWatch: true,

    frameworks: ['jasmine'],

    browsers: ['Chrome'],

    plugins: [
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-jasmine'
    ]
  });
};

This is my folder/file structure:

and this is my test (in file-upload.component.spec.js):

'use strict';

describe('fileupload', function() {

  beforeEach(module('fileUploadApp'));

  // Test the controller
  describe('FileUploadController', function() {

    it('test test', inject(function($componentController) {
      var scope = {};
      console.log("A");
      var ctrl = $componentController('FileUploadController', {
        $scope: scope
      }); // failing on this line
      console.log("B");
    }));
  });
});

When I try to run it I get the following error:

Chrome 66.0.3359 (Windows 10.0.0) fileupload FileUploadController test test FAILED Error: [$injector:unpr] http://errors.angularjs.org/1.6.9/$injector/unpr?p0=FileUploadControllerDirectiveProvider%20%3C-%20FileUploadControllerDirective at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:7:76 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:64 at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:43:309) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:126 at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:43:309) at https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.9/angular-mocks.min.js:1:15984 at UserContext. (W:/AngTest/Test/app/file-upload.component.spec.js:13:18) at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:44:390) at UserContext.o (https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.9/angular-mocks.min.js:1:20792) Error: Declaration Location at e.inject.t.mock.inject (https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.9/angular-mocks.min.js:1:20326) at Suite. (W:/AngTest/Test/app/file-upload.component.spec.js:10:21) at Suite. (W:/AngTest/Test/app/file-upload.component.spec.js:8:3) at W:/AngTest/Test/app/file-upload.component.spec.js:3:1 Chrome 66.0.3359 (Windows 10.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.085 secs / 0 secs)

[$injector:unpr] results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. — Saeed
@Saeed.Ataee I checked to make sure it's spelled correctly and it is, so something else might be going wrong. Perhaps the files array is wrong? — meds
FileUploadControllerDirectiveProvider means your module injection is wrong! — Saeed
@Saeed.Ataee Yes I figure I'm doing something wrong in there somewhere.. If I'm using webpack would the 'sources' tab have the relevant js file visible by name (file-upload.component.js)? — meds
TBH, I don't know what webpack is! But is this really AngularJs?? — Saeed

Petr Averyanov Petr Averyanov · Accepted Answer · 2018-06-11T01:36:35

should be $componentController('fileUpload', ... at least as I guess fileUpload is your component name

AngularJS Directive not found when attempting to run test?

1 Answers