Question

尝试设置单元测试app/scripts/controllers/about.js（评估AboutCtrl.awesomeThings）：我收到错误，请你帮忙。

 C:\xampp\htdocs\angulargulp>gulp test
     [16:46:06] Using gulpfile C:\xampp\htdocs\angulargulp\gulpfile.js
     [16:46:06] Starting 'start:server:test'...
     [16:46:06] Finished 'start:server:test' after 153 ms
     [16:46:06] Starting 'test'...
     [16:46:07] Server started http://localhost:9001
     [16:46:07] LiveReload started on port 35729
    [16:46:07] Starting Karma server...
     WARN `start` method is deprecated since 0.13. It will be removed in 0.14. Please
      use
       server = new Server(config, [done])
       server.start()
     instead.
     02 09 2016 16:46:08.118:WARN [karma]: No captured browser, open http://localhost
     :8080/
     02 09 2016 16:46:08.129:INFO [karma]: Karma v0.13.22 server started at http://lo
     calhost:8080/
     02 09 2016 16:46:08.151:INFO [launcher]: Starting browser PhantomJS
     02 09 2016 16:46:09.618:INFO [PhantomJS 2.1.1 (Windows 7 0.0.0)]: Connected on s
     ocket /#-mjfYbbHTxf_x72hAAAA with id 48131270
     PhantomJS 2.1.1 (Windows 7 0.0.0) Controller: AboutCtrl should attach a list of
     awesomeThings to the scope FAILED
             C:/xampp/htdocs/angulargulp/app/bower_components/angular/angular.js:4641
     :53
             forEach@C:/xampp/htdocs/angulargulp/app/bower_components/angular/angular
     .js:321:24
             loadModules@C:/xampp/htdocs/angulargulp/app/bower_components/angular/ang
     ular.js:4601:12
             createInjector@C:/xampp/htdocs/angulargulp/app/bower_components/angular/
     angular.js:4523:30
             workFn@C:/xampp/htdocs/angulargulp/app/bower_components/angular-mocks/an
     gular-mocks.js:3074:60
             TypeError: undefined is not an object (evaluating 'AboutCtrl.awesomeThin
     gs') in C:/xampp/htdocs/angulargulp/test/spec/controllers/about.js (line 23)
             C:/xampp/htdocs/angulargulp/test/spec/controllers/about.js:23:21
     PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.01 sec
     PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.006 secs
     / 0.01 secs)

我的karma.conf.js文件

// Generated on 2016-08-19 using generator-angular 0.15.1
'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var openURL = require('open');
var lazypipe = require('lazypipe');
var rimraf = require('rimraf');
var wiredep = require('wiredep').stream;
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var historyApiFallback = require('connect-history-api-fallback');
var browserSync = require("browser-sync").create();
var yeoman = {
  app: require('./bower.json').appPath || 'app',
  dist: 'dist'
};

var paths = {
  scripts: [yeoman.app + '/scripts/**/*.js'],
  styles: [yeoman.app + '/styles/**/*.scss'],
  test: ['test/spec/**/*.js'],
  testRequire: [
    //yeoman.app + '/bower_components/jquery/jquery.js',
    yeoman.app + '/bower_components/angular/angular.js',
    yeoman.app + '/bower_components/angular-route/angular-route.js',
    yeoman.app + '/bower_components/angular-mocks/angular-mocks.js',
    //yeoman.app + '/bower_components/angular-resource/angular-resource.js',
    yeoman.app + '/bower_components/angular-cookies/angular-cookies.js',
    //yeoman.app + '/bower_components/angular-sanitize/angular-sanitize.js',
    'test/mock/**/*.js',
    'test/spec/**/*.js',
    'test/spec/**/*.js'
  ],
  karma: 'test/karma.conf.js',
  views: {
    main: yeoman.app + '/index.html',
    files: [yeoman.app + '/views/**/*.html']
  }
};

////////////////////////
// Reusable pipelines //
////////////////////////

var lintScripts = lazypipe()
  .pipe($.jshint, '.jshintrc')
  .pipe($.jshint.reporter, 'jshint-stylish');

var styles = lazypipe()
  .pipe($.sass, {
    outputStyle: 'expanded',
    precision: 10
  })
  .pipe($.autoprefixer, 'last 1 version')
  .pipe(gulp.dest, '.tmp/styles');

///////////
// Tasks //
///////////

gulp.task('styles', function () {
  return gulp.src(paths.styles)
    .pipe(styles());
});

gulp.task('lint:scripts', function () {
  return gulp.src(paths.scripts)
    .pipe(lintScripts());
});

gulp.task('clean:tmp', function (cb) {
  rimraf('./.tmp', cb);
});

gulp.task('start:client', ['start:server', 'styles'], function () {
  openURL('http://dev.go.com');
});

gulp.task('start:server', ['sass'], function() {
    return browserSync.init(null, {
      open: 'external',
      host: 'dev.go.com',
      livereload: true,
      // Change this to '0.0.0.0' to access the server from outside.
      port: 9000,
      server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]

      },
      notify: false,
      ghostMode: {
          clicks: true,
          location: true,
          forms: true,
          scroll: false
      }
    });
});

/*gulp.task('start:server', function() {
  $.connect.server({
    root: [yeoman.app, '.tmp'],
    livereload: true,
    // Change this to '0.0.0.0' to access the server from outside.
    port: 9000
  });

});*/

gulp.task('start:server:test', function() {
  $.connect.server({
    root: ['test', yeoman.app, '.tmp'],
    livereload: true,
    port: 9001
  });
});





gulp.task('watch',  function () {

  $.watch(paths.styles)
    .pipe($.plumber())
    .pipe(styles())
    .pipe($.connect.reload());

  $.watch(paths.views.files)
    .pipe($.plumber())
    .pipe($.connect.reload());

  $.watch(paths.scripts)
    .pipe($.plumber())
    .pipe(lintScripts())
    .pipe($.connect.reload());

  $.watch(paths.test)
    .pipe($.plumber())
    .pipe(lintScripts());

  gulp.watch('bower.json', ['bower']);


  gulp.task('watch', ['sass', 'browser-sync'], function() {
  gulp.watch(yeoman.app + '/styles/**/*.scss', ['sass']);

})



});

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['lint:scripts'],
    ['start:client'],
    'watch', cb);
});

gulp.task('serve:prod', function() {
  $.connect.server({
    root: [yeoman.dist],
    livereload: true,
    port: 9000
  });
});

gulp.task('test', ['start:server:test'], function () {
  var testToFiles = paths.testRequire.concat(paths.scripts, paths.test);
  return gulp.src(testToFiles)
    .pipe($.karma({
      configFile: paths.karma,
      action: 'watch'
    }));
});

// inject bower components
gulp.task('bower', function () {
  return gulp.src(paths.views.main)
    .pipe(wiredep({
      directory: yeoman.app + '/bower_components',
      ignorePath: '..'
    }))
  .pipe(gulp.dest(yeoman.app + '/views'));
});

///////////


// inject sass components
gulp.task('sass', function () {
    return gulp.src(yeoman.app + '/styles/**/*.scss')
        .pipe(sass({sourcemap: true, style: 'compressed', trace: true}))
        //.pipe(prefix('last 2 versions', '> 1%', 'ie 8', 'Android 2', 'Firefox ESR'))
        .pipe(gulp.dest('app/styles/'))
});

///////////




// Build //
///////////

gulp.task('clean:dist', function (cb) {
  rimraf('./dist', cb);
});

gulp.task('client:build', ['html', 'styles'], function () {
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');

  return gulp.src(paths.views.main)
    .pipe($.useref({searchPath: [yeoman.app, '.tmp']}))
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.minifyCss({cache: true}))
    .pipe(cssFilter.restore())
    .pipe($.rev())
    .pipe($.revReplace())
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('html', function () {
  return gulp.src(yeoman.app + '/views/**/*')
    .pipe(gulp.dest(yeoman.dist + '/views'));
});

gulp.task('images', function () {
  return gulp.src(yeoman.app + '/images/**/*')
    .pipe($.cache($.imagemin({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })))
    .pipe(gulp.dest(yeoman.dist + '/images'));
});

gulp.task('copy:extras', function () {
  return gulp.src(yeoman.app + '/*/.*', { dot: true })
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('copy:fonts', function () {
  return gulp.src(yeoman.app + '/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

gulp.task('build', ['clean:dist'], function () {
  runSequence(['images', 'copy:extras', 'copy:fonts', 'client:build']);
});

gulp.task('default', ['build']);

我的app.js文件：

'use strict';

/**
 * @ngdoc overview
 * @name angulargulpApp
 * @description
 * # angulargulpApp
 *
 * Main module of the application.
 */
angular
  .module('angulargulpApp', [

   // 'ngMessages',
    //'ngResource',

    'ngRoute',
    'ngMock',
    'ngAnimate',
    'ngCookies'
    //'ngSanitize',
    //'ngTouch'
  ])
  .config(function ($routeProvider,$locationProvider) {
   $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
     });

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

我的控制器文件：

'use strict';

/**
 * @ngdoc function
 * @name angulargulpApp.controller:AboutCtrl
 * @description
 * # AboutCtrl
 * Controller of the angulargulpApp
 */
angular.module('angulargulpApp')
  .controller('AboutCtrl', function ($scope,$sce,$rootScope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    //console.log('--------------------------------------'+$scope.awesomeThings.length)

    $scope.open = function () {
        var lt="-37.866963"
      var lg="144.980615"
      //var data  = $sce.trustAsResourceUrl("http://maps.google.com/maps?f=q&amp;geocode=&amp;ie=UTF8&amp;ll=-37.866963,144.980615&amp;spn=0.006223,0.019484&amp;output=embed" );
        //var data  = $sce.trustAsResourceUrl("http://maps.google.com/maps?f=q&amp;geocode=&amp;ie=UTF8&amp;ll="+lt+","+lg+"&amp;spn=0.006223,0.019484&amp;output=embed" );

    var frame= '<iframe id="myUrl" onmouseover="gmap=true" onmouseout="gmap=false" class="iframeBorder" width="505" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;geocode=&amp;ie=UTF8&amp;ll='+lt+','+lg+'&amp;spn=0.006223,0.019484&amp;output=embed"></iframe>'
    $('#googleMap').html(frame) 

    }
    $scope.z = 0;
    $scope.sum = function() {
      $scope.z = $scope.x + $scope.y;
    };

  });

我的规范文件是：

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

  // load the controller's module
  beforeEach(module('angulargulpApp'));

  var AboutCtrl,
      scope;



  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    AboutCtrl = $controller('AboutCtrl', {
      $scope: scope
      // place here mocked dependencies
    });
  }));

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

Answer 1

嗯，使用Jhon papa控制器样式的单元测试没什么不同。

创建控制器时，您无需使用new scope传递$rootScope.$new()。

你可以通过scope:{}; vm只是this。 vm is {}

正确的方法是：

beforeEach(inject(function ($controller, $rootScope) {
    scope = {};
    AboutCtrl = $controller('AboutCtrl', scope);
  }));

TypeError：undefined不是一个对象（评估＆＃39; AboutCtrl.awesomeThin gs＆＃39;）

1 个答案: