As a beginner in AngularJS, I have just built a component that consists of 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',
});
To test the controller, I have come up with the following test which verifies if the beer passed into the scope matches the one retrieved by calling: BeerSelection.getBeerSelected():
describe('BeerDetailController', function() {
it('returns the selected beer', function() {
beforeEach(module('beerDetail'));
let $controller;
let scope;
let rootScope;
let createController;
let beerSelection;
let beerSelected = {
"id": 192,
"name": "Punk IPA 2007 - 2010",
};
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
createController = function () {
return $controller('BeerDetailController',
{'BeerSelection': beerSelection},
{'$scope': scope},
{'$rootScope': rootScope}
);
spyOn(beerSelection, 'getBeerSelected').and.returnValues(beerSelected);
};
}));
expect(scope.beer).toEqual(beerSelected);
});
});
However, running the test prompts the following error message:
Expected undefined to equal Object({ id: 192, name: 'Punk IPA 2007 - 2010' })
What could be causing this issue?