feat(ngMock.$componentController): handle multiple directives with the same name angular#13683

Author: drpicox

src/ngMock/angular-mocks.js

@@ -2185,7 +2185,22 @@ angular.mock.$ComponentControllerProvider = ['$compileProvider', function($compi
   return {
     $get: ['$controller','$injector', function($controller,$injector) {
       return function $componentController(componentName, locals, bindings, ident) {
-        var directiveInfo = $injector.get(componentName + 'Directive')[0];
+        // get all directives associated to the component name
+        var directives = $injector.get(componentName + 'Directive');
+        // look for those directives that are components
+        var candidateDirectives = directives.filter(function(directiveInfo) {
+          // components have controller, controllerAs and restrict:'E' compatible
+          return directiveInfo.controller && directiveInfo.controllerAs && directiveInfo.restrict.indexOf('E') >= 0;
+        });
+        // check if valid directives found
+        if (candidateDirectives.length === 0) {
+          throw new Error('No component found');
+        }
+        if (candidateDirectives.length > 1) {
+          throw new Error('Too many components found');
+        }
+        // get the info of the component
+        var directiveInfo = candidateDirectives[0];
         return $controller(directiveInfo.controller, locals, bindings, ident || directiveInfo.controllerAs);
       };
     }]

test/ngMock/angular-mocksSpec.js

@@ -1938,6 +1938,116 @@ describe('ngMock', function() {
         expect($scope.testCtrl).toBe(ctrl);
       });
     });
+
+    it('should instantiate the controller of the restrict:\'E\' component if there are more directives with the same name but not \'E\' restrictness', function() {
+      function TestController() {
+        this.r = 6779;
+      }
+      module(function($compileProvider) {
+        $compileProvider.directive('test', function() {
+          return { restrict: 'A' };
+        });
+        $compileProvider.component('test', {
+          controller: TestController
+        });
+      });
+      inject(function($componentController, $rootScope) {
+        var ctrl = $componentController('test', { $scope: {} });
+        expect(ctrl).toEqual({ r: 6779 });
+      });
+    });
+
+    it('should instantiate the controller of the restrict:\'E\' component if there are more directives with the same name and \'E\' restrictness but no controller', function() {
+      function TestController() {
+        this.r = 22926;
+      }
+      module(function($compileProvider) {
+        $compileProvider.directive('test', function() {
+          return { restrict: 'E' };
+        });
+        $compileProvider.component('test', {
+          controller: TestController
+        });
+      });
+      inject(function($componentController, $rootScope) {
+        var ctrl = $componentController('test', { $scope: {} });
+        expect(ctrl).toEqual({ r: 22926 });
+      });
+    });
+
+    it('should instantiate the controller of the directive with controller if there are more directives', function() {
+      function TestController() {
+        this.r = 18842;
+      }
+      module(function($compileProvider) {
+        $compileProvider.directive('test', function() {
+          return { };
+        });
+        $compileProvider.directive('test', function() {
+          return { 
+            controller: TestController,
+            controllerAs: '$ctrl'
+          };
+        });
+      });
+      inject(function($componentController, $rootScope) {
+        var ctrl = $componentController('test', { $scope: {} });
+        expect(ctrl).toEqual({ r: 18842 });
+      });
+    });
+
+    it('should fail if there is no directive with restrict:\'E\' compatible and controller', function() {
+      function TestController() {
+        this.r = 31145;
+      }
+      module(function($compileProvider) {
+        $compileProvider.directive('test', function() {
+          return {
+            restrict: 'AC',
+            controller: TestController
+          };
+        });
+        $compileProvider.directive('test', function() {
+          return {
+            restrict: 'E',
+            controller: TestController
+          };
+        });
+        $compileProvider.directive('test', function() {
+          return { restrict: 'E' };
+        });
+      });
+      inject(function($componentController, $rootScope) {
+        expect(function() {
+          $componentController('test', { $scope: {} });
+        }).toThrow('No component found');
+      });
+    });
+
+    it('should fail if there more than two components with same name', function() {
+      function TestController($scope, a, b) {
+        this.$scope = $scope;
+        this.a = a;
+        this.b = b;
+      }
+      module(function($compileProvider) {
+        $compileProvider.directive('test', function() {
+          return {
+            controller: TestController,
+            controllerAs: '$ctrl'
+          };
+        });
+        $compileProvider.component('test', {
+          controller: TestController
+        });
+      });
+      inject(function($componentController, $rootScope) {
+        expect(function() {
+          var $scope = {};
+          $componentController('test', { $scope: $scope, a: 'A', b: 'B' }, { x: 'X', y: 'Y' });
+        }).toThrow('Too many components found');
+      });
+    });
   });
 });