Spec files names "name.spec.js" are not working

[timkindberg]

It tries to load just 'name.spec'. I think there is some logic in this plugin that doesn't allow using more than one dot in the file name.

[maxwellpeterson-wf]

Are you using the beta of jspm@0.16? If so that is using the new SystemJS@0.17 which will require the defaultJSExtensions to be set to true in your config.js.

Try that for now, let me know if it works. Karma-jspm may need to be changed to better support this going forward.

[timkindberg]

Yes I am using jspm@0.16 and have defaultJSExtensions set to true. My other regular src files (e.g. someFile.js) that don't have the .spec.js postfix do not have this problem. I can see in the karma debug browser console that its 404ing on '/path/to/my/component.spec' <-- without .js extension.

[maxwellpeterson-wf]

Could you paste any relevant portions of your karma.conf.js, like the jspm section?

[timkindberg]

I'll have to recreate, I started down a different path. Let me see if I can get it to happen again.

[timkindberg]

Ok got the issue reproduced. Notice that lack of the '.js' extension on any '.spec' file. Also not sure why but it seems ALL my files are getting a 404. Should they be looking in /base/src/...?

Please note I also had to do npm i git+https://github.com/Workiva/karma-jspm to get the latest master. Otherwise I got errors around setting baseURL not more than once.

Here is my console errors from karma/phantomjs.

OF060LC3SDFFT0R:client tk65110$ npm test

> ecomWeb@0.0.1 test /Users/tk65110/repos/clicklist_web/client
> karma start karma.conf.js --no-single-run --auto-watch --reporters mocha

INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket Jg5qq4HFt3kPYpMbCJP4 with id 98695231
WARN [web-server]: 404: /src/appComponent.js
WARN [web-server]: 404: /src/appComponent.spec
WARN [web-server]: 404: /src/components/Carousel/carousel.spec
WARN [web-server]: 404: /src/components/ProductCard/productCard.spec
WARN [web-server]: 404: /src/components/YellowTagPrice/YellowTagPriceComponent.spec
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  Not Found: http://localhost:9876/src/appComponent.js
        Error loading http://localhost:9876/src/appComponent.js
  at undefined

Finished in 0.082 secs / 0 secs

SUMMARY:
✔ 0 tests completed

Here's my files.

karma.config.js

'use strict';

module.exports = function(config) {

  var configuration = {
    jspm: {
      loadFiles: ['src/appComponent.js', 'src/**/*.spec.js']
    },

    singleRun: true,

    autoWatch: false,

    colors: true,

    frameworks: ['jspm', 'mocha', 'sinon', 'sinon-chai'],

    browsers : ['PhantomJS'],

    reporters: ['mocha', 'teamcity'],

    plugins : [
      'karma-jspm',
      'karma-phantomjs-launcher',
      'karma-mocha',
      'karma-mocha-reporter',
      'karma-sinon',
      'karma-sinon-chai',
      'karma-teamcity-reporter',
    ],

    client: {
      mocha: {
        reporter: ['spec'],
        ui: 'bdd'
      }
    },

    mochaReporter: {
      output: 'full'
    }
  };

  config.set(configuration);
};

package.json

{
  "name": "ecomWeb",
  "version": "0.0.1",
  "scripts": {
    "start": "gulp",
    "build": "gulp sass && jspm bundle app dist/app.bundled.js --inject",
    "unbundle": "jspm unbundle",
    "test": "node_modules/.bin/karma start karma.conf.js --no-single-run --auto-watch --reporters mocha",
    "clean": "gulp clean"
  },
  "jspm": {
    "directories": {},
    "dependencies": {
      "angular": "github:angular/bower-angular@^1.4.1",
      "angular-animate": "github:angular/bower-angular-animate@^1.4.1",
      "angular-aria": "github:angular/bower-angular-aria@^1.4.1",
      "angular-cookies": "github:angular/bower-angular-cookies@^1.4.1",
      "angular-mocks": "github:angular/bower-angular-mocks@^1.4.1",
      "angular-sanitize": "github:angular/bower-angular-sanitize@^1.4.1",
      "angular-touch": "github:angular/bower-angular-touch@^1.4.1",
      "angular-ui-router": "github:angular-ui/ui-router@^0.2.15",
      "css": "github:systemjs/plugin-css@^0.1.13",
      "es6-shim": "github:es-shims/es6-shim@^0.32.3",
      "hannahhoward/a1atscript": "github:hannahhoward/a1atscript@^0.3.9",
      "json": "github:systemjs/plugin-json@^0.1.0",
      "text": "github:systemjs/plugin-text@^0.0.2"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.6.4",
      "babel-runtime": "npm:babel-runtime@^5.6.4",
      "core-js": "npm:core-js@^0.9.17"
    }
  },
  "devDependencies": {
    "babelify": "6.0.2",
    "browser-sync": "^2.7.12",
    "browser-sync-spa": "~1.0.2",
    "browserify": "10.1.2",
    "chai": "^2.3.0",
    "chalk": "~0.5.1",
    "concat-stream": "~1.4.7",
    "del": "~1.1.1",
    "event-stream": "^3.3.1",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.2",
    "gulp-util": "3.0.4",
    "jscs": "^1.13.1",
    "jshint-loader": "~0.8.3",
    "jshint-stylish": "~1.0.0",
    "jspm": "^0.16.0-beta.3",
    "karma": "~0.12.31",
    "karma-browserify": "^4.1.2",
    "karma-jspm": "git+https://github.com/Workiva/karma-jspm.git",
    "karma-mocha": "^0.1.10",
    "karma-mocha-reporter": "^1.0.2",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-sinon": "^1.0.4",
    "karma-sinon-chai": "^0.3.0",
    "karma-teamcity-reporter": "^0.1.2",
    "lodash": "^3.9.3",
    "merge-stream": "~0.1.7",
    "mocha": "^2.2.4",
    "node-sass": "^3.2.0",
    "protractor": "~1.7.0",
    "require-dir": "~0.1.0",
    "sinon": "^1.14.1",
    "sinon-chai": "^2.7.0",
    "stringify": "^3.1.0",
    "uglify-save-license": "~0.4.1",
    "vinyl-buffer": "1.0.0",
    "vinyl-source-stream": "1.1.0",
    "watchify": "3.2.1",
    "wiredep": "~2.2.0",
    "wrench": "~1.5.8"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

config.js

System.config({
  "baseURL": "/",
  "defaultJSExtensions": true,
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  "paths": {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*",
    "app": "src"
  },
  "packages": {
    "app": {
      "main": "appComponent",
      "defaultExtension": "js"
    }
  }
});

System.config({
  "map": {
    "angular": "github:angular/bower-angular@1.4.1",
    "angular-animate": "github:angular/bower-angular-animate@1.4.1",
    "angular-aria": "github:angular/bower-angular-aria@1.4.1",
    "angular-cookies": "github:angular/bower-angular-cookies@1.4.1",
    "angular-mocks": "github:angular/bower-angular-mocks@1.4.1",
    "angular-sanitize": "github:angular/bower-angular-sanitize@1.4.1",
    "angular-touch": "github:angular/bower-angular-touch@1.4.1",
    "angular-ui-router": "github:angular-ui/ui-router@0.2.15",
    "babel": "npm:babel-core@5.6.15",
    "babel-runtime": "npm:babel-runtime@5.6.15",
    "core-js": "npm:core-js@0.9.18",
    "css": "github:systemjs/plugin-css@0.1.13",
    "es6-shim": "github:es-shims/es6-shim@0.32.3",
    "hannahhoward/a1atscript": "github:hannahhoward/a1atscript@0.3.9",
    "json": "github:systemjs/plugin-json@0.1.0",
    "systemjs/plugin-css": "github:systemjs/plugin-css@0.1.13",
    "systemjs/plugin-text": "github:systemjs/plugin-text@0.0.2",
    "text": "github:systemjs/plugin-text@0.0.2",
    "typescript": "github:mhegazy/typescript@v1.5-beta2",
    "github:angular-ui/ui-router@0.2.15": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-animate@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-aria@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-cookies@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-mocks@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-sanitize@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:angular/bower-angular-touch@1.4.1": {
      "angular": "github:angular/bower-angular@1.4.1"
    },
    "github:jspm/nodelibs-process@0.1.1": {
      "process": "npm:process@0.10.1"
    },
    "npm:babel-runtime@5.6.15": {
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:core-js@0.9.18": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    }
  }
});

[timkindberg]

Changing these lines to map the expandedGlobs to all start with '/base/' seemed to fix the problem. Again I'm working from master latest commit. I'm not sure if that's the best way to go about fixing the 404 problem though, or if I'm the only one getting the 404s.

init.js - line 105

client.jspm.expandedFiles = flatten(jspm.loadFiles.map(function(file){
    files.push(createServedPattern(basePath + "/" + (file.pattern || file)));
    return expandGlob(file, basePath).map(function(path) {
      return '/base/' + path;
    });
  }));

[martinmicunda]

I have exactly the same problem with 404 error.

[martinmicunda]

one solution could be add proxies to karma.conf.js file but for me it this doesn't execute any tests for some reason...

        proxies: {
            '/src/': '/base/src/',
            '/jspm_packages/': '/base/jspm_packages/'
        }

[timkindberg]

I can't use karma-jspm until I figure out why this is happening... anyone have any clues?

[martinmicunda]

same here...

[omerts]

I found the source for the 404 problem. Karma-jspm's adapter is setting baseURL to be 'base', before the real jspm config.js is loaded, therefore jspm's baseURL is going to be whatever is set in the config.js, and not in the karma-jspms adapter. Trying to figure out how to get it to load correctly.

[timkindberg]

Do it!!!!! I'm blocked by the issue. I do know they had to move the base url setting to the the top to avoid an error that says you can't set baseUrl more than once.

Good luck! On Wed, Jul 8, 2015 at 5:09 AM omerts notifications@github.com wrote:

I found the source for the 404 problem. Karma-jspm's adapter is setting baseURL to be 'base', before the real jspm config.js is loaded, therefore jspm's baseURL is going to be whatever is set in the config.js, and not in the karma-jspms adapter. Trying to figure out how to get it to load correctly.

— Reply to this email directly or view it on GitHub https://github.com/Workiva/karma-jspm/issues/63#issuecomment-119508611.

• Tim

[omerts]

@timkindberg, I am working on it right now.

[omerts]

@timkindberg I have created a pull-request. Will be happy if you can check if it works on your end. https://github.com/Workiva/karma-jspm/pull/67/files

[jeremytrawls]

@omerts I was have the exact same issue and manually integrating your PR to my project has solved my problem!

@timkindberg I'm not sure if you've had a chance to look at @omerts PR, but it works like a charm.