CODEWITHSUNDEEP
javascriptangularjstesting
24x7
24x7

Reputation: 409

Angular JS official tutorial - step 2 Unit testing errors

I'm having trouble completing step two of the official AngularJS tutorial. I'm trying to carry out the instructions on unit testing.

I don't believe I've changed a thing in the source and followed the tutorial to a T. The link to the particular step in the tutorial can be found here.

here's the errors I'm getting from Karma in my console window:

Changed file "/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js".
Chrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneListCtrl should create "phones" model with 2 phones fetched from xhr FAILED
    Expected [ { name : 'Nexus S', snippet : 'Fast just got faster with Nexus S.' }, { name : 'Motorola XOOM™ with Wi-Fi', snippet : 'The Next, Next Generation tablet.' }, { name : 'MOTOROLA XOOM™', snippet : 'The Next, Next Generation tablet.' } ] to equal data [  ].
    Error: Expected [ { name : 'Nexus S', snippet : 'Fast just got faster with Nexus S.' }, { name : 'Motorola XOOM™ with Wi-Fi', snippet : 'The Next, Next Generation tablet.' }, { name : 'MOTOROLA XOOM™', snippet : 'The Next, Next Generation tablet.' } ] to equal data [  ].
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:31:28)
    Error: No pending request to flush !
        at Function.$httpBackend.flush (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:1439:34)
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:32:20)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 1 of 5 (1 FAILED) (0 secs / 0.069 sChrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneListCtrl should set the default value of orderProp model FAILED
    Expected undefined to be 'age'.
    Error: Expected undefined to be 'age'.
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:40:31)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 2 of 5 (2 FAILED) (0 secs / 0.075 sChrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneDetailCtrl should fetch phone detail FAILED
    Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams
    http://errors.angularjs.org/1.2.18/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:78:12
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3741:19
        at Object.getService [as get] (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3746:45
        at getService (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
        at Object.invoke (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3896:13)
        at workFn (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2149:20)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2134:25)
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:55:16)
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:45:3)
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:4:1
    TypeError: Cannot read property 'phone' of undefined
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:66:19)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 3 of 5 (3 FAILED) (0 secs / 0.083 sChrome 35.0.1916 (Mac OS X 10.9.2): Executed 4 of 5 (3 FAILED) (0 secs / 0.086 sChrome 35.0.1916 (Mac OS X 10.9.2) service check the existence of Phone factory FAILED
    Error: [$injector:unpr] Unknown provider: PhoneProvider <- Phone
    http://errors.angularjs.org/1.2.18/$injector/unpr?p0=PhoneProvider%20%3C-%20Phone
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:78:12
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3741:19
        at Object.getService [as get] (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3746:45
        at getService (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
        at Object.invoke (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3896:13)
        at workFn (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2149:20)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2134:25)
        at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/servicesSpec.js:9:46)
        at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/servicesSpec.js:3:1
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 5 of 5 (4 FAILED) (0 secs / 0.088 sChrome 35.0.1916 (Mac OS X 10.9.2): Executed 5 of 5 (4 FAILED) (0.666 secs / 0.088 secs)

Here is my controllers.js file:

'use strict';

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ],
  $scope.name = "Anon";
});
//phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
  function($scope, $routeParams, Phone) {
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
      $scope.mainImageUrl = phone.images[0];
    });

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    }
  }]);

Here's the controllersSpec.js file, I haven't even added in the instructions from the tutorial step 2, because the is already producing errors for me in Karma.

'use strict';

/* jasmine specs for controllers go here */
describe('PhoneCat controllers', function() {

  beforeEach(function(){
    this.addMatchers({
      toEqualData: function(expected) {
        return angular.equals(this.actual, expected);
      }
    });
  });

  beforeEach(module('phonecatApp'));
  beforeEach(module('phonecatServices'));

  describe('PhoneListCtrl', function(){
    var scope, ctrl, $httpBackend;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/phones.json').
          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

      scope = $rootScope.$new();
      ctrl = $controller('PhoneListCtrl', {$scope: scope});
    }));


    it('should create "phones" model with 2 phones fetched from xhr', function() {
      expect(scope.phones).toEqualData([]);
      $httpBackend.flush();

      expect(scope.phones).toEqualData(
          [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
    });


    it('should set the default value of orderProp model', function() {
      expect(scope.orderProp).toBe('age');
    });
  });


  describe('PhoneDetailCtrl', function(){
    var scope, $httpBackend, ctrl,
        xyzPhoneData = function() {
          return {
            name: 'phone xyz',
                images: ['image/url1.png', 'image/url2.png']
          }
        };


    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());

      $routeParams.phoneId = 'xyz';
      scope = $rootScope.$new();
      ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
    }));


    it('should fetch phone detail', function() {
      expect(scope.phone).toEqualData({});
      $httpBackend.flush();

      expect(scope.phone).toEqualData(xyzPhoneData());
    });
  });
});

Any help would be greatly appreciated - I've tried so many different things but can't get it to work. Previous threads on SO didn't help either.

Thanks in advance & all the best!

Upvotes: 0

Views: 687

Answers (1)

fliedonion
fliedonion

Reputation: 952

Probably, the versions of controller.js and controllersSpec.js are step 4 or later step.

The code below is added in step 4.

$scope.orderProp = 'age';

https://docs.angularjs.org/tutorial/step_04

https://github.com/angular/angular-phonecat/compare/step-3...step-4

I think, you need to do Workspace Reset Instructions again. like following:

git checkout -f step-2

Upvotes: 1

Related Questions