Jasmine 测试：$scopeProvider <- $scope <-> DetailController

Question

I am new to AngularJS. I have created the following component that contains a template and an associated controller.

angular.
module('beerDetail').
controller('BeerDetailController',  ['BeerSelection', '$scope', '$rootScope',
  function BeerDetailController(BeerSelection, $scope, $rootScope) {

    let beerSelected = BeerSelection.getBeerSelected();

    $scope.ok = () => { $rootScope.modalInstance.close() };
    $scope.beer = beerSelected;
    $scope.foodPairings = beerSelected.food_pairing.join(", ");

    this.getFormattedIngredients = (ingredients) => {...};

    this.getFormattedMethod = (method) => {...};

    $scope.allIngredients = this.getFormattedIngredients(beerSelected.ingredients);
    $scope.method = this.getFormattedMethod(beerSelected.method);
  }
]).
component('beerDetail', {
  templateUrl: '/components/beer-detail/beer-detail.template.html',
  controller: 'BeerDetailController',
});

I would like to test the controller, I have created the following test that check whether the beer passed into the scope is the one provided by calling:

describe('BeerDetailController', function() {

  beforeEach(module('beerDetail'));

  let ctrl;
  let $controller;
  let scope;
  let rootScope;
  let createController;
  let beerSelection;
  let beerSelected = {
    "id": 192,
    "name": "Punk IPA 2007 - 2010",
  };

  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    createController = function () {
      ctrl = $controller('BeerDetailController',
        {'BeerSelection': beerSelection},
        {'$scope': scope},
        {'$rootScope': rootScope}
      );
      spyOn('BeerSelection', 'getBeerSelected').and.returnValues(beerSelected);
    };
  }));

  it('returns the selected beer', function() {

    createController();
    expect(ctrl).toBeDefined();
    expect(scope.beer).toEqual(beerSelected);
    });
  });

I do get the following error however:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- BeerDetailController

Where might the problem may be?

Answer 1

When instantiating a controller, the locals are provided as a single object:

//ERRONEOUS
createController = function () {
  ctrl = $controller('BeerDetailController',
    {'BeerSelection': beerSelection},
    {'$scope': scope},
    {'$rootScope': rootScope}
  );

//CORRECT
createController = function () {
  let locals = {
    'BeerSelection': beerSelection,
    '$scope': scope,
    '$rootScope': rootScope
  };
  ctrl = $controller('BeerDetailController', locals);
};

For more information, see AngularJS $controller Service API Reference

Answer 2

For the line

createController = function () {
  ctrl = $controller('BeerDetailController',....

You should fetch the component controller

//1. inject _$componentController_
//2. var ctrl = _$componentController_('beerDetail', null, bindings);
 it('returns the selected beer', function() {
    expect(ctrl).toBeDefined();
 }); 

Refer to: https://docs.angularjs.org/guide/component#unit-testing-component-controllers

Answer 3

As suggested @georgeawg you have to mention all locals in single object to $controller methods 2nd parameter. But that would not solved whole issue.

Ideally you should be only mocking injectable like here you have to make BeerSelection . That means here you have to mock getBeerSelected method as it has been used by controller directly.

let locals = {
    'BeerSelection': beerSelection,
    '$scope': scope,
    '$rootScope': rootScope
};

And then you have to mock BeerSelection service correctly as below

let beerSelected = {
    "id": 192,
    "name": "Punk IPA 2007 - 2010",
};

//BeerSelection service mocking
let beerSelection = {
    //mocked getBeerSelected method
    getBeerSelected: function() {
      return beerSelected;
    }
};

Plunker Demo