jeffling / wallaby-webpack

webpack preprocessor for wallabyjs
25 stars 8 forks source link

No compile-time errors generated when testing Typescript. #18

Closed danimbrogno closed 8 years ago

danimbrogno commented 8 years ago

Hi, I'm using wallaby-webpack along with wallaby-atom to test my angular2 project.

I've setup my config by following the angular2-wallaby-webpack-starter.

I've noticed that I'm not seeing any errors when my tests should be throwing compiler errors. Is this expected behaviour, is there any workaround so I can get a notification if my tests are using invalid types? The tests are written in TypeScript.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
        "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors":true,
        "types": [
      "core-js",
      "hammerjs",
      "jasmine",
      "node",
      "protractor",
      "selenium-webdriver",
      "source-map",
      "uglify-js",
      "webpack"
    ],
        "outDir": "./build"
    },
  "paths": [],
  "lib": [
    "dom",
    "es6"
  ],
    "exclude": ["node_modules","dist"],
    "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
    "compileOnSave": false,
  "buildOnSave": false,
    "atom": {
        "rewriteTsConfig":false,
        "formatOnSave": true
    }
}

wallaby.js

var wallabyWebpack = require('wallaby-webpack');

var webpackPostprocessor = wallabyWebpack({
  entryPatterns: [
    'config/spec-bundle.js',
    'src/**/*spec.js'
  ],
  module: {
    loaders: [
      {test: /\.css$/, loaders: ['to-string-loader','css-loader']},
            {test: /\.scss$/, loaders: ['raw-loader','sass-loader']},
      {test: /\.html$/, loaders: ['raw-loader']},
      {test: /karma-require/, loaders: ['raw-loader']}
    ]
  }
});

module.exports = function () {

  return {
    files: [
      {pattern: 'config/spec-bundle.js', load: false},
      {pattern: 'config/karma-require.js', load: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'src/**/*.css', load: false},
            {pattern: 'src/**/*.scss', load: false},
      {pattern: 'src/**/*.html', load: false},
      {pattern: 'src/**/*.spec.ts', ignore: true}
    ],

    tests: [
      {pattern: 'src/**/*.spec.ts', load: false}
    ],

    testFramework: 'jasmine',

    env: {
      runner: require('phantomjs-prebuilt').path,
      params: { runner: '--web-security=false' }
    },

        debug: true,

    postprocessor: webpackPostprocessor,

    setup: function () {

      window.__moduleBundler.loadTests();

    }
  };
};
ArtemGovorov commented 8 years ago

Hi,

I've noticed that I'm not seeing any errors when my tests should be throwing compiler errors.

This is expected behaviour. Tests themselves are compiled to JavaScript so they can't throw any compilation errors, only TypeScript compiler can.

Generally speaking, it's out of wallaby.js scope to provide TypeScript compilation errors.

Normally a TypeScript plugin for your code editor does the job, highlights the errors in the editor, provides nice lists of errors, etc. For example, in Atom (if you're using Atom) atom-typescript plugin does a very good job.

Wallaby's job is to run the tests and report runtime errors, and if the TypeScript compiler can produce valid JavaScript (and it can produce valid JavaScript with invalid type errors), then wallaby can run your tests (and as the matter of fact, your real app can run too).

Having said that, there's a way to configure TypeScript compiler not to emit JavaScript on compilation errors, so you may do this:

module.exports = function (wallaby) {

  return {
    ...
    compilers: {
      '**/*.ts': wallaby.compilers.typeScript({ noEmitOnError: true })
    },

    ...

  };
};

Note that while with the setting wallaby will fail to run the tests as you'd expect, and will provide a list of errors from the compiler, the output will not be as nice as the proper TypeScript plugin that will highlight the errors right in your editor (you wouldn't want to get the compilation feedback from 2 different sources anyway).

Hope it makes sense.