karma-jspm icon indicating copy to clipboard operation
karma-jspm copied to clipboard

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

Open timkindberg opened this issue 9 years ago • 15 comments

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.

timkindberg avatar Jun 29 '15 15:06 timkindberg

Are you using the beta of [email protected]? If so that is using the new [email protected] 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.

maxwellpeterson-wf avatar Jun 29 '15 15:06 maxwellpeterson-wf

Yes I am using [email protected] 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.

timkindberg avatar Jun 30 '15 00:06 timkindberg

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

maxwellpeterson-wf avatar Jun 30 '15 00:06 maxwellpeterson-wf

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

timkindberg avatar Jun 30 '15 00:06 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

> [email protected] 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/[email protected]",
    "angular-animate": "github:angular/[email protected]",
    "angular-aria": "github:angular/[email protected]",
    "angular-cookies": "github:angular/[email protected]",
    "angular-mocks": "github:angular/[email protected]",
    "angular-sanitize": "github:angular/[email protected]",
    "angular-touch": "github:angular/[email protected]",
    "angular-ui-router": "github:angular-ui/[email protected]",
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "core-js": "npm:[email protected]",
    "css": "github:systemjs/[email protected]",
    "es6-shim": "github:es-shims/[email protected]",
    "hannahhoward/a1atscript": "github:hannahhoward/[email protected]",
    "json": "github:systemjs/[email protected]",
    "systemjs/plugin-css": "github:systemjs/[email protected]",
    "systemjs/plugin-text": "github:systemjs/[email protected]",
    "text": "github:systemjs/[email protected]",
    "typescript": "github:mhegazy/[email protected]",
    "github:angular-ui/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:angular/[email protected]": {
      "angular": "github:angular/[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    }
  }
});

timkindberg avatar Jun 30 '15 01:06 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;
    });
  }));

timkindberg avatar Jun 30 '15 02:06 timkindberg

I have exactly the same problem with 404 error.

martinmicunda avatar Jun 30 '15 10:06 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/'
        }

martinmicunda avatar Jun 30 '15 11:06 martinmicunda

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

timkindberg avatar Jul 01 '15 23:07 timkindberg

same here...

martinmicunda avatar Jul 02 '15 08:07 martinmicunda

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.

omerts avatar Jul 08 '15 09:07 omerts

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 [email protected] 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

timkindberg avatar Jul 08 '15 11:07 timkindberg

@timkindberg, I am working on it right now.

omerts avatar Jul 08 '15 11:07 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

omerts avatar Jul 08 '15 12:07 omerts

@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.

jeremytrawls avatar Aug 17 '15 14:08 jeremytrawls