Karma not working with NgDescribe

gnud commented 7 years ago

I tried running the tests using gulp watch or gulp tdd or karma start, none of tests pass. I removed all the tests and left with one test which came with the repo, but it crashed as well.

Following are the configs and logs:

$ karma start

27 04 2017 18:05:30.725:INFO [framework.browserify]: registering rebuild (autoWatch=true)
27 04 2017 18:05:33.054:INFO [framework.browserify]: 8225 bytes written (1.48 seconds)
27 04 2017 18:05:33.061:INFO [framework.browserify]: bundle built
27 04 2017 18:05:33.067:WARN [karma]: No captured browser, open http://localhost:9876/
27 04 2017 18:05:33.093:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
27 04 2017 18:05:33.126:INFO [launcher]: Starting browser PhantomJS
27 04 2017 18:05:33.797:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket wXb8g0DVyZcvTW4-AAAA with id 92913389
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
27 04 2017 18:05:36.182:WARN [reporter]: SourceMap position not found for trace: TypeError: undefined is not an object (evaluating 'deps.element.find') in http://localhost:9876/absolute/tmp/340fd0d84888149df6953a873eceeb67.browserify?b0baa919f6f31e6ca234ec7a9fdea8dd84a805f1 (line 10)
PhantomJS 2.1.1 (Linux 0.0.0) Test login-form component Should have email and password inputs FAILED
        /home/damjan/myproject/public/js/vendor.js:14509:53
        forEach@/home/damjan/myproject/public/js/vendor.js:10141:24
        loadModules@/home/damjan/myproject/public/js/vendor.js:14469:12
        createInjector@/home/damjan/myproject/public/js/vendor.js:14391:30
        WorkFn@/home/damjan/myproject/node_modules/angular-mocks/angular-mocks.js:3120:60
        inject@/home/damjan/myproject/node_modules/angular-mocks/angular-mocks.js:3100:46
        injectDeps@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:3483:33
        Error: missing $compile {} in /home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js (line 2949)
        lazyAss@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:2949:16
        setupElement@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:3489:11
        /home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:3534:23
        TypeError: undefined is not an object (evaluating 'deps.element.find') in /tmp/340fd0d84888149df6953a873eceeb67.browserify (line 10)
        /tmp/340fd0d84888149df6953a873eceeb67.browserify:10:32 <- /home/damjan/myproject/tests/angular/app/components/login-form.component.spec.js:7:32
        Error: cannot find injected dependency $rootScope (or alias) $rootScope in {} in /home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js (line 2949)
        lazyAss@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:2949:16
        deleteInjectedDependency@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:3570:13
        forEach@[native code]
        deleteDependencies@/home/damjan/myproject/node_modules/ng-describe/dist/ng-describe.js:3565:31
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.071 secs / 1.732 secs)

The original test, which it's not different than the ./artisans ng:component mycomponent what generates as spec.js file.

ngDescribe({
    name: 'Test nav-sidebar component',
    modules: 'app',
    inject: ['$scope', '$rootScope'], // without this it complains about the $rootScope missing
    element: '<nav-sidebar></nav-sidebar>',
    tests: function (deps) {

        it('Should run the test', () => {

        });
    }
});

I'm using Laravel 5.2 and angular 1.5.x.

package.json

{
  "private": true,
  "devDependencies": {
    "angular-mocks": "^1.5.2",
    "bower": "^1.7.9",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-babel-preprocessor": "~4.0.0",
    "karma-browserify": "^4.0.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "karma-ngannotate-preprocessor": "^0.1.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "laravel-elixir-karma": "^0.2.2",
    "ng-describe": "^1.8.0",
    "phantomjs-prebuilt": "^2.1.6",
    "stringify": "^3.1.0",
    "vinyl-buffer": "~1.0.0",
    "vinyl-source-stream": "~1.0.0"
  },
  "dependencies": {
    "angular-mocks": "^1.5.11",
    "babel": "^4.0.2",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babelify": "^5.0.3",
    "bower": "^1.7.9",
    "browserify": "~8.1.3",
    "eslint": "^1.10.3",
    "eslint-plugin-angular": "^0.15.0",
    "gulp": "^3.8.8",
    "gulp-add-src": "^0.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-concat-sourcemap": "^1.3.1",
    "gulp-cssnano": "^2.1.1",
    "gulp-eslint": "^1.1.1",
    "gulp-filter": "^1.0.2",
    "gulp-htmlmin": "^1.3.0",
    "gulp-if": "^1.2.5",
    "gulp-ng-annotate": "^1",
    "gulp-ng-html2js": "^0.2.0",
    "gulp-notify": "^2.0.0",
    "gulp-phpcs": "^1.0.0",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1",
    "gulp-uglify": "^1",
    "gulp-util": "^3.0.3",
    "laravel-elixir": "^4.2.1",
    "laravel-elixir-karma": "^0.2.2",
    "main-bower-files": "^2.1.0",
    "underscore": "^1.8.3",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1",
    "webpack-stream": "^3.1.0"
  },
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "postinstall": "bower install && gulp --production"
  }
}

bower.json

{
  "name": "laravel-angularjs-admin",
  "authors": [
    "Alex Quiambao <alexquiambao@gmail.com>"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^2.2.3",
    "angular": "~1.5.x",
    "angular-ui-router": "~0.2.15",
    "ngstorage": "~0.3.10",
    "restangular": "~1.5.2",
    "angular-loading-bar": "~0.9.0",
    "satellizer": "^0.14.0",
    "angular-bootstrap": "^1.3.1",
    "bootstrap": "^3.3.6",
    "AdminLTE": "admin-lte#^2.3.3",
    "angular-chart.js": "^0.10.0",
    "angular-acl": "^0.1.5",
    "angular-datatables": "^0.5.4",
    "sweetalert": "^1.1.3",
    "checklist-model": "^0.9.0",
    "angular-translate": "^2.15.1",
    "angular-translate-loader-static-files": "^2.15.1",
    "angular-translate-loader-url": "^2.15.1",
    "angular-mocks": "1.5"
  },
  "resolutions": {
    "angular": "~1.5.x"
  }
}

Does someone know what I made wrong ?

LoganLehman commented 7 years ago

I am having these same issues

Charly-T commented 7 years ago

Some time passed but I've got the same issue and I found out how to run it properly.

In my case, I got Error: need $controller service {} but testing controller instead of directive. My fault was on the karma-unit.conf.js

I was adding my application files like this:

        //Application code
        'app/app.js',
        'app/components/**/*-module.js',
        'app/states/app-states.js',
        'app/components/**/*.js',
        //test files
        'app/components/**/*.spec.js',

And the expression 'app/components/**/*.js', was getting the spec files before the controllers'. I fix it by explicitly setting the file name end like this:

        //Application code
        'app/app.js',
        'app/states/app-states.js',
        'app/components/**/*-module.js',
        'app/components/**/*-controller.js',
        'app/components/**/*-service.js'
        //test files
        'app/components/**/*.spec.js',

Finally i got it working. I hope my answer is useful for someone.

silverbux / laravel-angular-admin

Karma not working with NgDescribe #100