karma-jspm
karma-jspm copied to clipboard
computmaxer
Not working with typescript
Does not seem to work with typescript files. *.ts files get .js added to their path :
23 07 2015 23:55:18.363:WARN [karma]: No captured browser, open http://localhost:9876/
23 07 2015 23:55:18.370:INFO [karma]: Karma v0.13.3 server started at http://localhost:9876/
23 07 2015 23:55:18.373:INFO [launcher]: Starting browser PhantomJS
23 07 2015 23:55:19.279:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket yEG1qBR1xcB6RFh4AAAA with id 544981
23 07 2015 23:55:19.335:WARN [web-server]: 404: /src/app.ts.js
23 07 2015 23:55:19.336:WARN [web-server]: 404: /src/app.test.ts.js
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
Error loading "src/app.ts" at http://localhost:9876/src/app.ts.js
Not Found: http://localhost:9876/src/app.ts.js
at undefined
https://github.com/kosz/karma-jspm-playground here is my setup
npm install && jspm install
npm start shows a server in which jspm loads ts files properly
also tried appending !
jspm: {
loadFiles: [
'src/app.ts!',
'src/app.test.ts!'
]
},
24 07 2015 00:00:45.508:WARN [watcher]: Pattern "/src/jspmtest/src/app.ts!" does not match any file.
24 07 2015 00:00:45.510:WARN [watcher]: Pattern "src/jspmtest/src/app.test.ts!" does not match any file.
24 07 2015 00:00:45.625:WARN [karma]: No captured browser, open http://localhost:9876/
24 07 2015 00:00:45.632:INFO [karma]: Karma v0.13.3 server started at http://localhost:9876/
24 07 2015 00:00:45.635:INFO [launcher]: Starting browser PhantomJS
24 07 2015 00:00:46.536:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket pZ7HpzvF-szLqflyAAAA with id 41421504
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.001 secs / 0 secs)
It looks like I can get this to work by hacking the adapter.js file in this plugin.
42 function extractModuleName(fileName){
43 return fileName + '!';
44 //return fileName.replace(/\.js$/, "");
45 }
I'm looking for an elegant way to add this functionality and may open a PR.
@kosz
in your config.js
"packages": {
"app": {
"main": "main", "defaultExtension": "ts", "meta": {
"*.ts": {
"loader": "ts"
}, "*.css": {
"loader": "css"
}, "*.json": {
"loader": "json"
}, "*.html": {
"loader": "text"
}
}
}
@robertbaker I have the following configuration :
System.config({
"baseURL": "/",
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime"
]
},
"paths": {
"*": "*.js",
"github:*": "../jspm_packages/github/*.js",
"npm:*": "../jspm_packages/npm/*.js"
},
"packages": {
"app": {
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}, "main": "main"
}
}
});
error I get :
31 07 2015 20:01:31.320:WARN [web-server]: 404: /base/app/app.ts.js
31 07 2015 20:01:31.324:WARN [web-server]: 404: /base/app/app.test.ts.js
Chrome 44.0.2403 (Mac OS X 10.10.2) ERROR
Uncaught Error loading "app/app.ts" at http://localhost:9876/app/app.ts.js
I can fix this by handcoding the changes from this pr inside the karma-jspm code in my node_modules.
@kosz me and you should work together on this. I have a TS project with JSPM too.
I have my config at my root and letting jspm transpile (using plugin-typescript), but I also can compile my ts to .build (where I have a dupe of config and jspm_packages).
Trying to get my unit tests to run which are written in ES6, not having any luck with this or karma-systemjs
@robertbaker we could work together. Sadly the most mature configuration I pulled off so far, is within a private code base which I cannot reference.
However the public sources I've used to pull this off are :
- my https://github.com/kosz/karma-jspm-playground
- Rangle's course on writing Angular 2 like code with Angular 1 https://github.com/rangle/ngcourse-next
- the PR I've opened up on this repo : https://github.com/Workiva/karma-jspm/pull/79
My current status is :
- working : typescript transpiling in the browser with systemjs
- working : typescript/es6 style imports with systemjs in the browser
- working : typescript tests with karma-jspm and Chrome ( as long as my PR fix is hardcoded in node_modules :( )
- not working : typescript/es6 style imports into spec files with karma-jspm
I'll be available throughout the weekend ( + monday, long weekend here ), and probably will get back at fighting with this issue tonight and tomorrow morning. I'll check back here from time to time. I could also do a Hangout if you'd like and if we sync up online.
Sounds good. I'm busy today, but I plan on tonight and tomorrow trying to get tests running.
Same applies to me but I'm going to strip my project down to a setup I can open source and use for test cases and demos. I'm on hangouts
On Sat, Aug 1, 2015, 7:15 AM Cosmin Ronnin [email protected] wrote:
@robertbaker https://github.com/robertbaker we could work together. Sadly the most mature configuration I pulled off so far, is within a private code base which I cannot reference.
However the public sources I've used to pull this off are :
- my https://github.com/kosz/karma-jspm-playground
- Rangle's course on writing Angular 2 like code with Angular 1 https://github.com/rangle/ngcourse-next
- the PR I've opened up on this repo : #79 https://github.com/Workiva/karma-jspm/pull/79
My current status is :
- working : typescript transpiling in the browser with systemjs
- working : typescript/es6 style imports with systemjs in the browser
- working : typescript tests with karma-jspm and Chrome ( as long as my PR fix is hardcoded in node_modules :( )
- not working : typescript/es6 style imports into spec files with karma-jspm
I'll be available throughout the weekend, and probably will get back at fighting with this issue tonight and tomorrow morning. I'll check back here from time to time. I could also do a Hangout if you'd like and if we sync up online.
— Reply to this email directly or view it on GitHub https://github.com/Workiva/karma-jspm/issues/78#issuecomment-126918011.
http://blog.rangle.io/unittests/ interesting info here. I think this is related to the issues I was getting a few days ago with karma-systemjs.
Also I'm going to close my PR. A bit sad it was ignored for more than a week. But also I think it's not the required solution. There are plenty of issues with karma,typescript,systemjs combination, I wish the people who have reserved the npm name 'karma-jspm' could give this issue some love.
@kosz , probably your paths: { '*': '*.js'} cause the issue? The .js is a known issue in systemjs/jspm. A workaround is to do a package to remove it:
packages: {
'src': { defaultExtension: false },
'test': { defaultExtension: false }
}
until jspm 0.17.
btw, why you transpile with babel for js and typescript with ts? It seems redundant.
Check this issue in the SystemJS repo. It seems that if defaultJSExtensions is true in the configuration file, typescript files get a .js extension appended; this is for backward compatibility. false is the mode in which things are going to be working from now on, apparently, but jspm won't be adapted to work like that until version 0.17.
@Emigre awesome! Thanks for your comment. I was able to get karma-jspm with typescript working.
You can't do defaultJSExtensions: false by itself, not until 0.17.
When that is set, then all files are requested as-is, without .js appended to it.
Most npm packages reference code in that way, thus breaking the system.
You could (I haven't try myself) add a package config for jspm_packages to set defaultExtension: 'js' to get around it for the time being.
But I would just keep defaultJSExtensions: true for the time being instead.
What I meant is that the default value of defaultJSExtensions is going to change in 0.17. Or something like that - to be honest I've read it somewhere, at some point, and right now I can't remember the details, sorry.
@dougludlow if it helps, I have an example repo with TypeScript, jspm and karma-jspm, maybe it's interesting for you?... Emigre/angular-example
Also I did this yeoman generator that generates a Typescript + jspm + systemjs project: sword-and-sorcery/generator-magic Hope it helps. Cheers
@Emigre the issue is that the .js extension is being added to files and so they can't be found.
[web-server]: 404: /wwwroot/app/services/drive.service.spec.ts.js
What I did was set defaultJSExtensions: true and then...
packages: {
".tmp": {
"defaultExtension": "ts"
},
"src": {
"main": "main",
"defaultExtension": "ts"
}
},
...and require typescript files with import Whatever from './myFolder/Whatever';
Thanks @Emigre, I've got it working now. My file structure is roughly as follows:
.
├── karma.conf.js
├── package.json
└── wwwroot
├── app
│ ├── app.component.ts
│ ├── app.component.spec.ts
│ └── boot.ts
├── index.html
└── config.js
config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"target": "es5",
"module": "system",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
packages: {
"app": {
"main": "boot",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
},
"*.css": {
"loader": "css"
},
"*.scss": {
"loader": "scss"
}
}
}
},
...
});
karma.conf.js
/* global module */
module.exports = function (config) {
'use strict';
config.set({
basePath: './wwwroot',
singleRun: true,
frameworks: ['jspm', 'jasmine'],
jspm: {
loadFiles: [
'app/**/*.spec.ts'
],
serveFiles: [
'app/**/*!(*.spec).ts'
]
},
proxies: {
'/app/': '/base/app/',
'/jspm_packages/': '/base/jspm_packages/'
},
browsers: ['PhantomJS'],
});
};
For angular2 I had to use PhantomJS2 and include es6-shims in the files collection:
...
files: [
'../node_modules/es6-shim/es6-shim.js',
],
...
browsers: ['PhantomJS2'],
..