Executing Typescript Jasmine tests via Webpack (Terminal) to test Angular2

问题

Currently I'm trying to get Jasmine to run along with Webpack, to execute tests written in typescript to test Angular2 Apps in the Terminal.

I researched yesterday which packages are available for testing, and while angular2 has their own approach *1, I looked for other tools than the recommended jasmine-core or jasmines native package jasmine.

I found jasmine-node which is outdated for 2 years now. Currently investigating the Webpack+Angular2 with Jasmine testing package *2

After reading Become a Ninja with Angular2 *3 by Ninja Squad I have no satisfying information on how to combine the 3~5 toolchains.

Getting to Run Jasmine with Webpack

Then i started to ignore typescript, to at least get jasmine and webpack get to work together. I found the Jasmine Webpack Plugin *4 and started to follow the instructions.

Currently I'm stuck with getting to work webpack to execute Jasmine. I added another entry point:

entry: {
    'vendor': './src/vendor.ts',
    'main': './src/main.ts', // our angular app
    'test': './src/spec.ts' // Testing with jasmine
},

I added the JasmineWebpackPlugin:

plugins.push(new jasmineWebpackPlugin());

Now I try to combine my setting with the settings from the angular webpack starter pack *5

I only get errors, can't build anymore.

Errors in npm-debug.log

14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at EventEmitter.emit (events.js:185:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at ChildProcess.emit (events.js:185:7)
14 verbose stack     at maybeClose (internal/child_process.js:821:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

Additional Infos

Node Version: 5.5.0

npm: 3.3.12

OS: Windows 7 64-Bit

My dependencies:

  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "es7-reflect-metadata": "^1.4.0",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.0",
    "exports-loader": "0.6.2",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.4",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "imports-loader": "^0.6.4",
    "jasmine-core": "2.4.1",
    "jasmine-webpack-plugin": "^0.1.1",
    "json-loader": "^0.5.3",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.1",
    "karma-coverage": "^0.5.3",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-sourcemap-loader": "^0.3.6",
    "karma-webpack": "1.7.0",
    "node.extend": "^1.1.3",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "protractor": "^3.0.0",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.2",
    "rimraf": "^2.4.4",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "ts-loader": "^0.7.2",
    "tsconfig-lint": "^0.4.3",
    "tslint": "^3.2.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "^1.7.3",
    "typings": "^0.6.1",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.12.1",
    "webpack-war-archiver-plugin": "0.0.1"
  },

Thank you a lot for your time in advance. I do my best to wrap my head around all these new tools, especially webpack/jasmine.

    > webpack-dev-server --config webpack-test-config.js --progress --profile --colors --display-error-details --display-cached --inline --debug

 70% 1/1 build modules node_modules\webpack\lib\NormalModuleFactory.js:72
                        var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
                                              ^

TypeError: Cannot read property 'replace' of undefined
    at node_modules\webpack\lib\NormalModuleFactory.js:72:26
    at node_modules\webpack\lib\NormalModuleFactory.js:28:4
    at node_modules\webpack\lib\NormalModuleFactory.js:159:3
    at NormalModuleFactory.applyPluginsAsyncWaterfall (node_modules\tapable\lib\Tapable.js:75:69)
    at NormalModuleFactory.create (node_modules\webpack\lib\NormalModuleFactory.js:144:8)
    at node_modules\webpack\lib\Compilation.js:214:11
    at node_modules\webpack\node_modules\async\lib\async.js:181:20
    at Object.async.forEachOf.async.eachOf (node_modules\webpack\node_modules\async\lib\async.js:233:13)
    at Object.async.forEach.async.each (node_modules\webpack\node_modules\async\lib\async.js:209:22)
    at Compilation.addModuleDependencies (node_modules\webpack\lib\Compilation.js:185:8)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "jasmine"<
npm ERR! node v5.5.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! jasmine: `webpack-dev-server --config webpack-test-config.js --progress --profile --colors --display-error-details --display-cached --inline --debug`
npm ERR! Exit status 1

Can't post more than 2 Links, so I'm listing the links here.

*1: angular.io/docs/ts/latest/testing/jasmine-testing-101.html

*2: angularclass.github.io/angular2-webpack-starter/

*3: books.ninja-squad.com/angular2

*4: github.com/iredelmeier/jasmine-webpack-plugin

*5: github.com/AngularClass/angular2-webpack-starter/blob/master/webpack.test.config.js

回答1:

I was taking a look at the angular2 - webpack starter kit again. It worked after I created an extra file for the tests and copied the spec-bundle.js, which is very important!

Another thing that I had to learn is, that jasmine alone won't do it. Karma is the tool that manages all the tasks that are needed in order to start the testing.

Including: Setting up PhantomJS, directing webpack to compile typescript files launching istanbul executing jasmine