Karma + PhantomJS TypeError: undefined ist kein Objekt (evauling scope.jackpot)

Question

Ich bin immer noch sehr neu im Komponententest, und um ehrlich zu sein, gibt es nichts, was ich überhaupt testen könnte, aber ich kann nicht bauen Meine App, es sei denn, ich habe mindestens einen Testfall, also habe ich versucht, den einfachsten Testfall auf dem kleinsten Codeblock des Controllers zu erstellen, und es scheint nicht zu funktionieren.

Ich glaube, es ist ein Fehler in meinem Testfall, und nicht in meinem Controller-Code selbst, denn wenn ich meine App im Browser mit grunt serve anzeigen, zeigt die Konsole keine Fehler.

Dies ist der Fehler, den es gibt mir:

PhantomJS 2.1.1 (Linux 0.0.0) Controller: MainCtrl should attach a list of jackpot to the scope FAILED 
/home/elli0t/Documents/Yeoman Projects/monopoly/app/bower_components/angular/angular.js:3746:53 
forEach@[native code] 
forEach@/home/elli0t/Documents/Yeoman Projects/monopoly/app/bower_components/angular/angular.js:323:18 
loadModules@/home/elli0t/Documents/Yeoman Projects/monopoly/app/bower_components/angular/angular.js:3711:12 
createInjector@/home/elli0t/Documents/Yeoman Projects/monopoly/app/bower_components/angular/angular.js:3651:22 
workFn@/home/elli0t/Documents/Yeoman Projects/monopoly/app/bower_components/angular-mocks/angular-mocks.js:2138:60 
TypeError: undefined is not an object (evaluating 'scope.jackpot') in /home/elli0t/Documents/Yeoman Projects/monopoly/test/spec/controllers/main.js (line 20) 
/home/elli0t/Documents/Yeoman Projects/monopoly/test/spec/controllers/main.js:20:17 
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.04 secs/0.007 secs) 

Dies ist mein Testfall:

it('should attach a list of jackpot to the scope', function() { 
    expect(scope.jackpot.length).toBe(2); 
    }); 

Und dies ist der Code-Block bin ich versucht, auf den Test auszuführen:

var countInJackpot = localStorageService.get('jackpot'); 
$scope.jackpot = countInJackpot || [ 
    { 
    letter: '$', 
    prize: '$1,000,000 Cash', 
    numbers: ['$611A','$612B','$613C','$614D','$615E','$616F','$617G','$618F'], 
    count: [0,0,0,0,0,0,0,0] 
    }, 
    { 
    letter: '?', 
    prize: '$500,000 Vacation Home', 
    numbers: ['?619A','?620B','?621C','?622D','?632E','?624F','?625G','?626H'], 
    count: [0,0,0,0,0,0,0,0] 
    } 
]; 

Für den Moment möchte ich wirklich nur 1 einfachen Testfall schreiben, damit ich die App bauen kann. Momentan studiere ich Komponententests, aber ich fühle mich immer noch nicht bereit, selbst komplexere Testfälle zu schreiben. Ich werde das für später speichern.

Ich habe bei Bedarf den gesamten Inhalt der Dateien als Referenz beigefügt und kann den Inhalt der Datei "karma.conf.js" bei Bedarf einfügen.

My gist

Ich weiß, dass dieser Fehler auf dieser Seite in vielen anderen Fragen gekommen ist, habe ich durch sie heute den ganzen Tag suchen und keiner von ihnen hat mir geholfen, mit diesem Problem, damit ich meine eigene Post. Wenn weitere Informationen benötigt werden, um dieses Problem zu lösen, lassen Sie es mich wissen. Vielen Dank!

Answer 1

Ich würde erwarten, dass Sie beide Fälle der localStorageService haben wollen und keine Daten haben. Um dies zu tun, ein Spion für localStorageService (siehe Spies) erstellen und schreiben Sie Ihre Tests wie dieser ...

'use strict'; 

describe('Controller: MainCtrl', function() { 

var scope, localStorageService, localData; 

beforeEach(function() { 
    localData = {}; 

    module('monopolyApp'); 

    localStorageService = jasmine.createSpyObj('localStorageService', ['get', 'set']); 
    localStorageService.get.and.callFake(function(key) { 
     return localData[key]; 
    }); 

    inject(function($rootScope) { 
     scope = $rootScope.$new(); 
    }); 
}); 

it('assigns jackpots from local storage if present', inject(function($controller) { 
    localData.jackpot = 'whatever, does not matter'; 

    $controller('MainCtrl', { 
     $scope: scope, 
     localStorageService: localStorageService 
    }); 

    expect(localStorageService.get).toHaveBeenCalledWith('jackpot'); 
    expect(scope.jackpot).toBe(localData.jackpot); 
})); 

it('assigns jackpots from default array if none present in local storage', inject(function($controller) { 
    $controller('MainCtrl', { 
     $scope: scope, 
     localStorageService: localStorageService 
    }); 

    expect(localStorageService.get).toHaveBeenCalledWith('jackpot'); 
    expect(scope.jackpot.length).toEqual(2); 

    // maybe include some other checks like 
    expect(scope.jackpot[0].letter).toEqual('$'); 
    expect(scope.jackpot[1].letter).toEqual('?'); 
})); 

}); 

Answer 2

In Ihrem Testfall sollte Umfang $ Umfang sein?

ODER

Sie haben wahrscheinlich nicht Setup Ihre Umgebung Tests in Ihrem Controller zu laden.

Hier ist ein Beispiel von mir auf einen Controller testen ... Angular macht das Setup ein wenig zweifelhaft zu lernen, aber sobald Sie den Fluss verstehen. Es ist ziemlich toll :)

Ich werde versuchen und so viele Kommentare hinzufügen, um jedes Stück zu erklären, wie ich kann ... aber lassen Sie mich wissen, wenn Sie Klärung brauchen. Sie könnten Jasmin verwenden, aber denken Sie daran, das ist mocha, ich benutze die eckige Bibliothek, die über die karma.conf geladen wurde.

describe('myController', function() { 
    var $scope, 
    createController; 

    // Runs before each test. Re-extantiating the controller we want to test. 
    beforeEach(inject(function($injector) { 
    // Get hold of a scope (i.e. the root scope) 
    $scope = $injector.get('$rootScope'); 

    // The $controller service is used to create instances of controllers 
    var $controller = $injector.get('$controller'); 

    createController = function() { 
     // Creates the controller instance of our controller. 
     // We are injecting $scope so we will have access to it 
     // after the controllers code runs 
     return $controller('myCtrl', { 
     '$scope': $scope 
     }); 
    }; 
    })); 

    describe('#myFunction', function() { 
    it('jackpot should contain two objects', function() { 
     expect($scope.jackpot.length).to.equal(2); 
    }); 
    }); 
}); 

Hoffnung, die geholfen hat. Hier sind einige der Ressourcen, die ich gelernt habe :) Viel Glück!

• https://quickleft.com/blog/angularjs-unit-testing-for-real-though/
• http://jaketrent.com/post/run-single-mocha-test/