typescript angular nodejs - wallaby config

JuHwon commented 8 years ago

Issue description or question

I am working on a AngularJS / NodeJS Application in TypeScipt and I am having issues to configure wallaby :/ You can check out my stuff here in the wallaby branch: https://github.com/JuHwon/ironcrux/tree/wallaby My test is located in src/server/app.spec.ts

With the current config, my tests fails with wallaby ( they work when i execute them with mocha manually ). It seems that it cannot rly start my server.

I guess i cant just set the environment to node when i want to test my angular stuff too later on. Though When i dont set it - wallaby tells me that it cant find the variable angular. Then when i try to add 'bower_components/**/*.js' it fails at parsing the jquery lib. Is there a better way to import bower components? Since i think that this is not ideal.

Can you help me configuring my wallaby please?

Wallaby.js configuration file

module.exports = function (wallaby) {
    console.log(wallaby);  

    return {
        files: [
            'src/**/*.ts',
            '!src/**/*.spec.ts'  
        ],
        tests: [
            'src/**/*.spec.ts'  
        ],
        testFramework: 'mocha',
        compilers: {
            'src/server/**/*.ts': wallaby.compilers.typeScript({
                typescript: require("typescript"),
                module: 'commonjs',
                target: 'es6'
            }),
            'src/client/**/*.ts': wallaby.compilers.typeScript({
                typescript: require("typescript"),
                target: 'es5'
            })
        },
        env: {
            type: 'node'
        },
        debug: true
    };
};

Code editor or IDE name and version

Visual Studio Code v0.10.11

OS name and version

Windows / Linux

ArtemGovorov commented 8 years ago

First of all, you will need to different wallaby configurations, one for your server, one for your client.

The working config for your server may look like this:

module.exports = function (wallaby) {

  return {
    files: [
      'src/server/**/*.ts',
      'src/client/**/*.html', // required because your server tests request pages
      '!src/**/*.spec.ts'
    ],
    tests: [
      'src/server/**/*.spec.ts'
    ],

    testFramework: 'mocha',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript({
        module: 'commonjs',
        target: 'es6'
      })
    },

    env: {
      type: 'node'
    },

    debug: true
  };
};

Your client wallaby config will look a bit differently. Let me know if this helps.

JuHwon commented 8 years ago

@ArtemGovorov Thank you very much! The server config looks like a charm. Sadly i cant achieve a working client config. :/ My current config looks like this

module.exports = function (wallaby) {

  return {
    files: [
      { pattern: 'bower_components/angular/angular.js', instrument: false },
      { pattern: 'bower_components/angular-mocks/angular-mock.js', instrument: false },
      { pattern: 'bower_components/angular-ui-router/release/angular-ui-router.js', instrument: false },
      { pattern: 'node_modules/chai/chai.js', instrument: false },
      { pattern: 'bower_components/bardjs/dist/bard.js', instrument: false },
      '!src/client/**/*.spec.ts',
      'src/client/app/**/*.html',
      { pattern: 'src/client/**/*.ts', load: true }      
    ],
    tests: [
      { pattern: 'src/client/**/*.spec.ts', load: true }
    ],

    testFramework: 'mocha',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript({
        target: 'es5'
      })
    }

  };
};

I also updated my linked repo. Currently i get the following error:

[Info] Mon, 18 Apr 2016 20:22:35 GMT wallaby:workers Sandbox (active) [0sitx] error: Error: [$injector:nomod] Module 'app.core' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Is there also a way to automatically add all bower components?

ArtemGovorov commented 8 years ago

Thanks for updating the repo. Below is the working config. I have mostly taken it from this pull request.

Bower components are automatically managed just like in your gulp config task (via wiredep).
The Module 'app.core' is not available! was because, just like in your gulp task, you first need to include *.module.tsfiles and then the rest, so I did the same.
Just like in the referenced PR, I have added dynamic compilation of your HTML templates. You'll need to run npm install wallaby-ng-html2js-preprocessor -- save-dev, the package does the same thing as your templates task, but also allows to do it dynamically when you change files.

var wiredep = require('wiredep');
var angularTemplatePreprocessor = require('wallaby-ng-html2js-preprocessor');

module.exports = function (wallaby) {

  return {
    files: wiredep({devDependencies: true, directory: './bower_components/'})['js'].map(function (dep) {
      return {pattern: dep, instrument: false}
    }).concat([
      // test libs
      {pattern: 'node_modules/chai/chai.js', instrument: false},
      {pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false},
      {pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false},

      // app files
      'src/client/app/**/*.html',
      'src/client/**/*.module.ts', // first modules
      'src/client/**/*.ts',        // then the rest
      '!src/client/**/*.spec.ts'
    ]),
    tests: [
      'src/client/**/*.spec.ts'
    ],

    testFramework: 'mocha',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript({
        target: 'es5'
      })
    },

    preprocessors: {
      '**/*.html': function (file) {
        return angularTemplatePreprocessor.transform(file, {stripPrefix: 'src/client/', moduleName: 'app.core'})
      }
    }
  };
};

Let me know if this works for you.

JuHwon commented 8 years ago

Thank you very much. This helped me a lot :+1: Worked like a charm

wallabyjs / public