web-dev-qa-db-fra.com

$ scopeProvider <- $ scope / Fournisseur inconnu

Je teste mon application angulaire avec du jasmin ( http://jasmine.github.io/2.0/ ) et j'obtiens la prochaine erreur: fournisseur inconnu: $ scopeProvider <- $ scope je sais, qu'il est incorrect de construire des dépendances avec scope dans les filtres, les services, les usines, etc., mais j'utilise $ scope dans le contrôleur! Pourquoi ai-je cette erreur? le contrôleur ressemble

testModule.controller('TestCont', ['$filter', '$scope', function($filter, $scope){

        var doPrivateShit = function(){
            console.log(10);
        };

        this.lol = function(){
            doPrivateShit();
        };

        this.add = function(a, b){
            return a+b;
        };

        this.upper = function(a){
            return $filter('uppercase')(a);
        }   

        $scope.a = this.add(1,2);

        $scope.test = 10;

        $scope.search = {

        };
    }]);

et le code de mon test:

'use strict';

describe('testModule module', function(){
    beforeEach(function(){
        module('testModule');
    });

    it('should uppercase correctly', inject(function($controller){
        var testCont = $controller('TestCont');
        expect(testCont.upper('lol')).toEqual('LOL');
        expect(testCont.upper('jumpEr')).toEqual('JUMPER');
        expect(testCont.upper('123azaza')).toEqual('123AZAZA');
        expect(testCont.upper('111')).toEqual('111');
    }));
});
javascriptangularjsunit-testingtestingjasmine
18
Foker

Vous devez saisir manuellement un $scope à votre contrôleur:

describe('testModule module', function() {
    beforeEach(module('testModule'));

    describe('test controller', function() {
        var scope, testCont;

        beforeEach(inject(function($rootScope, $controller) {
            scope = $rootScope.$new();
            testCont = $controller('TestCont', {$scope: scope});
        }));

        it('should uppercase correctly', function() {
            expect(testCont.upper('lol')).toEqual('LOL');
            expect(testCont.upper('jumpEr')).toEqual('JUMPER');
            ...
        });
    });
});
34
Swoogan

Normalement, un $ scope sera disponible en tant que paramètre injectable uniquement lorsque le contrôleur est attaché au DOM.

Vous devez en quelque sorte associer le contrôleur au DOM (je ne connais pas du tout le jasmin).

1
Dan Ochiana

Je suis un tutoriel vidéo d'Egghead (lien ci-dessous) qui suggère cette approche:

describe("hello world", function () {
    var appCtrl;
    beforeEach(module("app"))
    beforeEach(inject(function ($controller) {
        appCtrl = $controller("AppCtrl");
    }))

    describe("AppCtrl", function () {
        it("should have a message of hello", function () {
            expect(appCtrl.message).toBe("Hello")
        })
    })
})

Manette:

var app = angular.module("app", []);

app.controller("AppCtrl",  function () {
    this.message = "Hello";
});

Je le poste parce que dans la réponse sélectionnée, nous créons une nouvelle portée. Cela signifie que nous ne pouvons pas tester les variables de portée du contrôleur, non?

lien vers le didacticiel vidéo (1 min): https://egghead.io/lessons/angularjs-testing-a-controller

0
Guy