TypeError: undefined is not an object (evaluating 'scope.awesomeThings')

[mithlesh-kumar]

I am new to yeoman generator-angular, I created project using yo angular. I run grunt serve to launch demo example it works fine. When I try to run grunt test it thrown an error TypeError: undefined is not an object (evaluating 'scope.awesomeThings').

I tried different way to follow Yeoman codelab tutorial, update my code with TODO app example given. This time got the similar issue of undefined is not object TypeError: undefined is not an object (evaluating 'scope.todos').

I not sure what going wrong, I didn't update any configuration file. Please find below exact line of error I am getting

Running "connect:test" (connect) task
Started connect web server on http://localhost:9001

Running "karma:unit" (karma) task
WARN [watcher]: Pattern "/Users/kiwitech/Brand-Portal/test/mock/**/*.js" does not match any file.
INFO [karma]: Karma v0.13.22 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#NDwIB4AQl7giaVxJAAAA with id 29519679
PhantomJS 2.1.1 (Mac OS X 0.0.0) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
    forEach@/Users/kiwitech/Brand-Portal/bower_components/angular/angular.js:322:24
    loadModules@/Users/kiwitech/Brand-Portal/bower_components/angular/angular.js:4548:12
    createInjector@/Users/kiwitech/Brand-Portal/bower_components/angular/angular.js:4470:30
    workFn@/Users/kiwitech/Brand-Portal/bower_components/angular-mocks/angular-mocks.js:2464:60
    /Users/kiwitech/Brand-Portal/bower_components/angular/angular.js:4588:53
    TypeError: undefined is not an object (evaluating 'scope.todos') in /Users/kiwitech/Brand-Portal/test/spec/controllers/main.js (line 20)
    /Users/kiwitech/Brand-Portal/test/spec/controllers/main.js:20:17
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.005 secs / 0.015 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

Thanks for help!!

[gugol2]

You may need to install some other dependencies:

npm install grunt-karma karma karma-phantomjs-launcher karma-jasmine --save-dev

Try this and check if your test passes or the error message change.

[thrinay]

Did someone had a solution on how to fix the error that mithlesh-kumar has faced? At the moment am facing the same issue and couldn't get it resolved.

Thanks a ton for the help

[gugol2]

Under what environment are you working @thrinay?

[thrinay]

Angular itself. I have been using grunt, bower npm and all. Let me provide you my Karma.conf.js file and gruntfile.js file Karma.conf.js:

// Karma configuration // Generated on 2016-07-15

module.exports = function(config) { 'use strict';

config.set({ // enable / disable watching file and executing tests whenever any file changes autoWatch: true,

// base path, that will be used to resolve files and exclude
basePath: '../',

// testing framework to use (jasmine/mocha/qunit/...)
// as well as any additional frameworks (requirejs/chai/sinon/...)
frameworks: [
  'jasmine'
],

// list of files / patterns to load in the browser
files: [
  // bower:js
  'app/bower_components/jquery/dist/jquery.js',
  'app/bower_components/angular/angular.js',
  'app/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js',
  'app/bower_components/angularUtils-pagination/dirPagination.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/bower_components/angular.panels/dist/angular.panels.min.js',
  'app/bower_components/angular-ui-router/release/angular-ui-router.js',
  'app/bower_components/angular-animate/angular-animate.js',
  'app/bower_components/v-accordion/dist/v-accordion.js',
  // endbower
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

// list of files / patterns to exclude
exclude: [
],

// web server port
port: 8080,

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
  'PhantomJS'
],

// Which plugins to enable
plugins: [
  'karma-phantomjs-launcher',
  'karma-jasmine'
],

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,

colors: true,

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,

// Uncomment the following lines if you are using grunt's server to run the tests
// proxies: {
//   '/': 'http://localhost:9000/'
// },
// URL root prevent conflicts with the site root
// urlRoot: '_karma_'

}); };

Gruntfile.js file:

// Generated on 2016-07-15 using generator-angular 0.15.1 'use strict';

// # Globbing // for performance reasons we're only matching one level down: // 'test/spec/{,/}.js' // use this if you want to recursively match all subfolders: // 'test/spec/*/.js'

module.exports = function (grunt) {

// Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt);

// Automatically load required Grunt tasks require('jit-grunt')(grunt, { useminPrepare: 'grunt-usemin', ngtemplates: 'grunt-angular-templates', cdnify: 'grunt-google-cdn' });

// Configurable paths for the application var appConfig = { app: require('./bower.json').appPath || 'app', dist: 'dist' };

// Define the configuration for all the tasks grunt.initConfig({

// Project settings
yeoman: appConfig,

// Watches files for changes and runs tasks based on the changed files
watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
  js: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
    tasks: ['newer:jshint:all', 'newer:jscs:all'],
    options: {
      livereload: '<%= connect.options.livereload %>'
    }
  },
  jsTest: {
    files: ['test/spec/{,*/}*.js'],
    tasks: ['newer:jshint:test', 'newer:jscs:test', 'karma']
  },
  compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass:server', 'postcss:server']
  },
  gruntfile: {
    files: ['Gruntfile.js']
  },
  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= yeoman.app %>/{,*/}*.html',
      '.tmp/styles/{,*/}*.css',
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
    ]
  }
},

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '<%= yeoman.app %>/bower_components',
            connect.static('<%= yeoman.app %>/bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '<%= yeoman.app %>/bower_components',
            connect.static('<%= yeoman.app %>/bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>'
    }
  }
},

// Make sure there are no obvious mistakes
jshint: {
  options: {
    jshintrc: '.jshintrc',
    reporter: require('jshint-stylish')
  },
  all: {
    src: [
      'Gruntfile.js',
      '<%= yeoman.app %>/scripts/{,*/}*.js'
    ]
  },
  test: {
    options: {
      jshintrc: 'test/.jshintrc'
    },
    src: ['test/spec/{,*/}*.js']
  }
},

// Make sure code styles are up to par
jscs: {
  options: {
    config: '.jscsrc',
    verbose: true
  },
  all: {
    src: [
      'Gruntfile.js',
      '<%= yeoman.app %>/scripts/{,*/}*.js'
    ]
  },
  test: {
    src: ['test/spec/{,*/}*.js']
  }
},

// Empties folders to start fresh
clean: {
  dist: {
    files: [{
      dot: true,
      src: [
        '.tmp',
        '<%= yeoman.dist %>/{,*/}*',
        '!<%= yeoman.dist %>/.git{,*/}*'
      ]
    }]
  },
  server: '.tmp'
},

// Add vendor prefixed styles
postcss: {
  options: {
    processors: [
      require('autoprefixer-core')({browsers: ['last 1 version']})
    ]
  },
  server: {
    options: {
      map: true
    },
    files: [{
      expand: true,
      cwd: '.tmp/styles/',
      src: '{,*/}*.css',
      dest: '.tmp/styles/'
    }]
  },
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/styles/',
      src: '{,*/}*.css',
      dest: '.tmp/styles/'
    }]
  }
},

// Automatically inject Bower components into the app
wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//
  },
  test: {
    devDependencies: true,
    src: '<%= karma.unit.configFile %>',
    ignorePath:  /\.\.\//,
    fileTypes:{
      js: {
        block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
          detect: {
            js: /'(.*\.js)'/gi
          },
          replace: {
            js: '\'{{filePath}}\','
          }
        }
      }
  },
  sass: {
    src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    ignorePath: /(\.\.\/){1,2}bower_components\//
  }
},

// Compiles Sass to CSS and generates necessary files if requested
compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    httpImagesPath: '/images',
    httpGeneratedImagesPath: '/images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n'
  },
  dist: {
    options: {
      generatedImagesDir: '<%= yeoman.dist %>/images/generated'
    }
  },
  server: {
    options: {
      sourcemap: true
    }
  }
},

// Renames files for browser caching purposes
filerev: {
  dist: {
    src: [
      '<%= yeoman.dist %>/scripts/{,*/}*.js',
      '<%= yeoman.dist %>/styles/{,*/}*.css',
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
      '<%= yeoman.dist %>/styles/fonts/*'
    ]
  }
},

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},

// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],
    patterns: {
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
    }
  }
},

// The following *-min tasks will produce minified files in the dist folder
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
cssmin: {
  options: {
    rebase: false
  },
  dist: {
    files: {
      '<%= yeoman.dist %>/styles/main.css': [
        '.tmp/styles/{,*/}*.css'
      ]
    }
  }
},
uglify: {
  dist: {
    files: {
      '<%= yeoman.dist %>/scripts/scripts.js': [
        '<%= yeoman.dist %>/scripts/scripts.js'
      ]
    }
  }
},
concat: {
  dist: {}
},

imagemin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/images',
      src: '{,*/}*.{png,jpg,jpeg,gif}',
      dest: '<%= yeoman.dist %>/images'
    }]
  }
},

svgmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/images',
      src: '{,*/}*.svg',
      dest: '<%= yeoman.dist %>/images'
    }]
  }
},

htmlmin: {
  dist: {
    options: {
      collapseWhitespace: true,
      conservativeCollapse: true,
      collapseBooleanAttributes: true,
      removeCommentsFromCDATA: true
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>',
      src: ['*.html'],
      dest: '<%= yeoman.dist %>'
    }]
  }
},

ngtemplates: {
  dist: {
    options: {
      module: 'productionConfigFeApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

// ng-annotate tries to make the code safe for minification automatically
// by using the Angular long form for dependency injection.
ngAnnotate: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

// Replace Google CDN references
cdnify: {
  dist: {
    html: ['<%= yeoman.dist %>/*.html']
  }
},

// Copies remaining files to places other tasks can use
copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '*.html',
        'images/{,*/}*.{webp}',
        'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/{,*/}*.*',
        'json/*',
            'views/KonfigurationView/configFlyout.html'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: '.',
      src: '<%= yeoman.app %>bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

// Run some tasks in parallel to speed up the build process
concurrent: {
  server: [
    'compass:server'
  ],
  test: [
    'compass'
  ],
  dist: [
    'compass:dist',
    'imagemin',
    'svgmin'
  ]
},

// Test settings
karma: {
  unit: {
    configFile: 'test/karma.conf.js',
    singleRun: true
  }
}

});

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'connect:dist:keepalive']); }

grunt.task.run([
  'clean:server',
  'wiredep',
  'concurrent:server',
  'postcss:server',
  'connect:livereload',
  'watch'
]);

});

grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { grunt.log.warn('The server task has been deprecated. Use grunt serve to start a server.'); grunt.task.run(['serve:' + target]); });

grunt.registerTask('test', [ 'clean:server', 'wiredep', 'concurrent:test', 'postcss', 'connect:test', 'karma' ]);

grunt.registerTask('build', [ 'clean:dist', 'wiredep', 'useminPrepare', 'concurrent:dist', 'postcss', 'ngtemplates', 'concat', 'ngAnnotate', 'copy:dist', 'cdnify', 'cssmin', 'uglify', 'filerev', 'usemin', 'htmlmin' ]);

grunt.registerTask('default', [ 'newer:jshint', 'newer:jscs', 'test', 'build' ]); };

Error being displayed: Running "clean:server" (clean) task

1 path cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "wiredep:sass" (wiredep) task

Running "concurrent:test" (concurrent) task

Running "compass:dist" (compass) task
directory .tmp/styles
    write .tmp/styles/autoCompleteGlobal.css (0.003s)
    write .tmp/styles/flyoutGlobal.css (0.01s)
    write .tmp/styles/leistungsbereich.css (0.002s)
    write .tmp/styles/main.css (1.204s)
    write .tmp/styles/v-accordion.css (0.009s)

Running "compass:server" (compass) task

Done, without errors.

Execution Time (2016-08-25 20:18:04 UTC+2)
loading tasks   194ms  ▇▇▇ 6%
compass:dist     1.9s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 62%
compass:server  957ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 31%
Total 3.1s

Running "postcss:server" (postcss) task

5 processed stylesheets created.

Running "postcss:dist" (postcss) task

5 processed stylesheets created.

Running "connect:test" (connect) task Started connect web server on http://localhost:9001

Running "karma:unit" (karma) task 25 08 2016 20:18:08.895:WARN [watcher]: Pattern "/home/thrinay/Dev/production-config-frontend/test/mock/*/.js" does not match any file. 25 08 2016 20:18:08.934:INFO [karma]: Karma v1.2.0 server started at http://localhost:8080/ 25 08 2016 20:18:08.935:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 25 08 2016 20:18:08.941:INFO [launcher]: Starting browser PhantomJS 25 08 2016 20:18:09.225:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#Roz1y3qrm3yUuvrrAAAA with id 74127019 PhantomJS 2.1.1 (Linux 0.0.0) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED app/bower_components/angular/angular.js:4641:53 forEach@app/bower_components/angular/angular.js:321:24 loadModules@app/bower_components/angular/angular.js:4601:12 createInjector@app/bower_components/angular/angular.js:4523:30 workFn@app/bower_components/angular-mocks/angular-mocks.js:3074:60 loaded@http://localhost:8080/context.js:151:17 TypeError: undefined is not an object (evaluating 'MainCtrl.awesomeThings') in test/spec/controllers/main.js (line 21) test/spec/controllers/main.js:21:20 loaded@http://localhost:8080/context.js:151:17 PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.041 secs / 0.01 secs) Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

Execution Time (2016-08-25 20:18:03 UTC+2) loading tasks 176ms ▇▇▇▇ 3% wiredep:app 179ms ▇▇▇▇ 3% concurrent:test 3.5s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 56% postcss:server 522ms ▇▇▇▇▇▇▇▇▇▇ 9% postcss:dist 109ms ▇▇ 2% loading grunt-contrib-connect 77ms ▇▇ 1% loading grunt-karma 838ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 14% karma:unit 632ms ▇▇▇▇▇▇▇▇▇▇▇▇ 10% Total 6.1s

Finally my app structure:

ApplicationFolder: XYZ app .tmp .app --bower_components --images --json --scripts --controllers .js files app.js --styles --views .test --test --spec --controllers --main.js

[mithlesh-kumar]

@gugol2 I tried to install and other dependencies, it doesn't work for me. @thrinay I switch to gulp angular generator.

[kirangsa]

HI, I have came across same situation. I think your problem is evaluating 'scope.todos'. your scope doesn't have todos may be you have bind that value to controller for example this.todos.

Regards, Kiran Gopal

[thrinay]

Hello Kiran,

Thank you for the response, the issue is I have given a wrong controller name in my test file and that is what resulted in giving me back such error. Actual Controller name to be given is : configCtrl, Given Controller name in Test file is ConfigCtrl.