New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aurelia-Cli and Wallaby #784

Closed
zedL opened this Issue Sep 11, 2016 · 15 comments

Comments

Projects
None yet
4 participants
@zedL

zedL commented Sep 11, 2016

I cant get it to work with aurelia-cli created project.

I made a new aurelia project with the aurelia-cli.
I choose following settings:

  • web
  • typescript
  • sass
  • unit tests (jasmin + karma)
  • vs code

Wallaby.js configuration file

I tried the default TypeScript configuration examples, but the sample default test (app.spec.ts) not running.

module.exports = function (wallaby) {

  return {
    files: [
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'test/unit/setup.ts', load: false}
    ],

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

    debug: true
  };
};

Code editor or IDE name and version

Visual Studio Code v1.5.1x

OS name and version

Windows 10

Thank you for your help.

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Sep 12, 2016

Member

Wallaby.js (for browser) works by compiling/precessing your code (if required), possibly using some module bundlers (like webpack or browserify), possibly using some special loaders (like require.js or system.js), then internally generating a sandbox (an HTML page) where some of your scripts are included as is via script tag, others by configured loaders/bundlers, etc. Finally your tests get executed.

Your current config is using load: false flag for your files and tests, so wallaby is not including your files via script tags into the sandbox. As nothing else is configured to load anything - nothing happens.

In order to make something happening, you need to have a look into how karma/aurelia-cli runs the tests. So you could configure wallaby to do something similar.

After a closer look, you may see that aurelia-cli is compiling TypeScript to AMD and Karma config is using requirejs and Chrome as a runner, so you'll need to set up wallaby.js in a similar way:

Below is the minimal wallaby config to get the generated project test running:

module.exports = function () {

  return {
    files: [
      {pattern: 'scripts/require.js', instrument: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'test/unit/setup.ts', load: false}
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(require('path').join(__dirname, 'node_modules')));
    },

    setup: function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        paths: {
          'aurelia-pal': '/node_modules/aurelia-pal/dist/amd/aurelia-pal',
          'aurelia-pal-browser': '/node_modules/aurelia-pal-browser/dist/amd/aurelia-pal-browser',
          'aurelia-polyfills': '/node_modules/aurelia-polyfills/dist/amd/index'
        }
      });

      require(['/test/unit/setup.js'].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }
  };
};

Note that I didn't put the require.js config into a separate file, like the wallaby docs example does, but just have it in the setup function that runs before tests.

In the function, I'm specifying the paths to the used modules, and then require-ing /test/unit/setup.js file and test files similar to how /test/aurelia-karma.js is doing it.

Next, require.js will be requesting the specified node/aurelia modules (those in requirejs.config({paths: {...})) from wallaby web server (where the sandbox page is served from), as you may see from the Wallaby Console output channel in VS Code if you turn on the debug: true setting. So we'll either need to list those files in the files section, or, which is a more efficient and less verbose solution, specify a middleware function to tell wallaby's server to just serve the files from your local project's node-modules folder. Just like I did in the config above.

Hope it makes sense so far. If you know run wallaby with the config, you'll get the test passing (and you may try breaking it as well):

vsc

Now, when I said it was the "minimal" wallaby config, I meant that you may need to add more node/aurelia modules as you add more features/tests and starting depending on other parts of aurelia.

I'm not an expert in aurelia and the last time I looked into it, aurelia-cli simply didn't exist yet, but from what I can see, the required modules can be retrieved from the /aurelia_project/aurelia.json file to avoid duplicating them in wallaby.js setup function.

Because wallaby setup function is executed in the browser context, as opposed to the rest of the config that gets executed by node.js (just like karma config), the setup function can be supplied as a string (in fact wallaby converts it to a string anyway).

So let's just use it and provide all the aurelia modules to the setup function by simply only leaving a placeholder in the setup function and replacing it with a list of modules (pairs of "name": "path"), taken from the aurelia_project/aurelia.json file. The resulting config will look like:

module.exports = function () {

  var path = require('path');
  var aureliaJson = require('./aurelia_project/aurelia.json');

  return {

    debug: true,

    files: [
      {pattern: 'node_modules/bluebird/js/browser/bluebird.core.js', instrument: false},
      {pattern: 'scripts/require.js', instrument: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'test/unit/setup.ts', load: false}
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(path.join(__dirname, 'node_modules')));
    },

    setup: (function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        packages: [
          // packages
        ]
      });

      require(["test/unit/setup.js"].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }).toString().replace("// packages", aureliaJson.build.bundles[1].dependencies.reduce(function (prev, curr) {
      var moduleName, modulePath, moduleMain;
      if (curr.path) {
        moduleName = moduleMain = curr.name;
        modulePath = path.relative(
          __dirname,
          path.resolve(__dirname, "aurelia_project", curr.path))
          .split('\\').join('/');
        if (curr.main) {
          moduleMain = curr.main;
        }
      }
      else {
        moduleName = curr;
        var packageJson = require(__dirname + '/node_modules/' + moduleName + '/package.json');
        if (packageJson.jspm) {
          moduleMain = packageJson.jspm.main;
          modulePath = 'node_modules/' + moduleName + '/' + packageJson.jspm.directories.dist;
        }
        else {
          moduleMain = path.basename(packageJson.main, '.js');
          packageJson.main = packageJson.main.split('/');
          packageJson.main.pop();
          modulePath = 'node_modules/' + moduleName + '/' + packageJson.main.join('/');
        }
      }
      return prev
        + '{ name: ' + JSON.stringify(moduleName)
        + ', location: ' + JSON.stringify(modulePath)
        + ', main: ' + JSON.stringify(moduleMain)
        + '},';
    }, ''))
  };
};

The answer ended up a bit longer than I expected, but hope it make sense and is shedding some light on to how wallaby.js works and how to approach configuring it.

Member

ArtemGovorov commented Sep 12, 2016

Wallaby.js (for browser) works by compiling/precessing your code (if required), possibly using some module bundlers (like webpack or browserify), possibly using some special loaders (like require.js or system.js), then internally generating a sandbox (an HTML page) where some of your scripts are included as is via script tag, others by configured loaders/bundlers, etc. Finally your tests get executed.

Your current config is using load: false flag for your files and tests, so wallaby is not including your files via script tags into the sandbox. As nothing else is configured to load anything - nothing happens.

In order to make something happening, you need to have a look into how karma/aurelia-cli runs the tests. So you could configure wallaby to do something similar.

After a closer look, you may see that aurelia-cli is compiling TypeScript to AMD and Karma config is using requirejs and Chrome as a runner, so you'll need to set up wallaby.js in a similar way:

Below is the minimal wallaby config to get the generated project test running:

module.exports = function () {

  return {
    files: [
      {pattern: 'scripts/require.js', instrument: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'test/unit/setup.ts', load: false}
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(require('path').join(__dirname, 'node_modules')));
    },

    setup: function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        paths: {
          'aurelia-pal': '/node_modules/aurelia-pal/dist/amd/aurelia-pal',
          'aurelia-pal-browser': '/node_modules/aurelia-pal-browser/dist/amd/aurelia-pal-browser',
          'aurelia-polyfills': '/node_modules/aurelia-polyfills/dist/amd/index'
        }
      });

      require(['/test/unit/setup.js'].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }
  };
};

Note that I didn't put the require.js config into a separate file, like the wallaby docs example does, but just have it in the setup function that runs before tests.

In the function, I'm specifying the paths to the used modules, and then require-ing /test/unit/setup.js file and test files similar to how /test/aurelia-karma.js is doing it.

Next, require.js will be requesting the specified node/aurelia modules (those in requirejs.config({paths: {...})) from wallaby web server (where the sandbox page is served from), as you may see from the Wallaby Console output channel in VS Code if you turn on the debug: true setting. So we'll either need to list those files in the files section, or, which is a more efficient and less verbose solution, specify a middleware function to tell wallaby's server to just serve the files from your local project's node-modules folder. Just like I did in the config above.

Hope it makes sense so far. If you know run wallaby with the config, you'll get the test passing (and you may try breaking it as well):

vsc

Now, when I said it was the "minimal" wallaby config, I meant that you may need to add more node/aurelia modules as you add more features/tests and starting depending on other parts of aurelia.

I'm not an expert in aurelia and the last time I looked into it, aurelia-cli simply didn't exist yet, but from what I can see, the required modules can be retrieved from the /aurelia_project/aurelia.json file to avoid duplicating them in wallaby.js setup function.

Because wallaby setup function is executed in the browser context, as opposed to the rest of the config that gets executed by node.js (just like karma config), the setup function can be supplied as a string (in fact wallaby converts it to a string anyway).

So let's just use it and provide all the aurelia modules to the setup function by simply only leaving a placeholder in the setup function and replacing it with a list of modules (pairs of "name": "path"), taken from the aurelia_project/aurelia.json file. The resulting config will look like:

module.exports = function () {

  var path = require('path');
  var aureliaJson = require('./aurelia_project/aurelia.json');

  return {

    debug: true,

    files: [
      {pattern: 'node_modules/bluebird/js/browser/bluebird.core.js', instrument: false},
      {pattern: 'scripts/require.js', instrument: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'test/unit/setup.ts', load: false}
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(path.join(__dirname, 'node_modules')));
    },

    setup: (function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        packages: [
          // packages
        ]
      });

      require(["test/unit/setup.js"].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }).toString().replace("// packages", aureliaJson.build.bundles[1].dependencies.reduce(function (prev, curr) {
      var moduleName, modulePath, moduleMain;
      if (curr.path) {
        moduleName = moduleMain = curr.name;
        modulePath = path.relative(
          __dirname,
          path.resolve(__dirname, "aurelia_project", curr.path))
          .split('\\').join('/');
        if (curr.main) {
          moduleMain = curr.main;
        }
      }
      else {
        moduleName = curr;
        var packageJson = require(__dirname + '/node_modules/' + moduleName + '/package.json');
        if (packageJson.jspm) {
          moduleMain = packageJson.jspm.main;
          modulePath = 'node_modules/' + moduleName + '/' + packageJson.jspm.directories.dist;
        }
        else {
          moduleMain = path.basename(packageJson.main, '.js');
          packageJson.main = packageJson.main.split('/');
          packageJson.main.pop();
          modulePath = 'node_modules/' + moduleName + '/' + packageJson.main.join('/');
        }
      }
      return prev
        + '{ name: ' + JSON.stringify(moduleName)
        + ', location: ' + JSON.stringify(modulePath)
        + ', main: ' + JSON.stringify(moduleMain)
        + '},';
    }, ''))
  };
};

The answer ended up a bit longer than I expected, but hope it make sense and is shedding some light on to how wallaby.js works and how to approach configuring it.

@zedL

This comment has been minimized.

Show comment
Hide comment
@zedL

zedL Sep 12, 2016

It just works and I can use my favorite tooling :) Thank you very much.

zedL commented Sep 12, 2016

It just works and I can use my favorite tooling :) Thank you very much.

@zedL

This comment has been minimized.

Show comment
Hide comment
@zedL

zedL Oct 5, 2016

Hello,

when I want to test a self written component I get following error:

​​Uncaught Error: Script error for "aurelia-pal-browser", needed by: /test/unit/setup.js​​
​​http://requirejs.org/docs/errors.html#scripterror​​
  at ​scripts/require.js:7​
​​Uncaught Error: Script error for "aurelia-polyfills", needed by: /test/unit/setup.js​​
​​http://requirejs.org/docs/errors.html#scripterror​​
  at ​scripts/require.js:7​

Can you help here?

zedL commented Oct 5, 2016

Hello,

when I want to test a self written component I get following error:

​​Uncaught Error: Script error for "aurelia-pal-browser", needed by: /test/unit/setup.js​​
​​http://requirejs.org/docs/errors.html#scripterror​​
  at ​scripts/require.js:7​
​​Uncaught Error: Script error for "aurelia-polyfills", needed by: /test/unit/setup.js​​
​​http://requirejs.org/docs/errors.html#scripterror​​
  at ​scripts/require.js:7​

Can you help here?

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Oct 5, 2016

Member

Sure, please share a repo with your wallaby config and the component with the error, happy to have a look.

Member

ArtemGovorov commented Oct 5, 2016

Sure, please share a repo with your wallaby config and the component with the error, happy to have a look.

@zedL

This comment has been minimized.

Show comment
Hide comment
@zedL

zedL Oct 9, 2016

Hello,

I had some time to setup a repo.
https://github.com/zedL/wallaby-aurelia

There is a locale-selector element that I want to test.

Thanks a lot.
René

zedL commented Oct 9, 2016

Hello,

I had some time to setup a repo.
https://github.com/zedL/wallaby-aurelia

There is a locale-selector element that I want to test.

Thanks a lot.
René

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Oct 10, 2016

Member

Hi, thanks for the repo.

I have sent you the pull request with the updated wallaby config: zedL/wallaby-aurelia#1. The idea is to use require.js modules as some of the aurelia packages are using relative paths with multiple AMD files.

Member

ArtemGovorov commented Oct 10, 2016

Hi, thanks for the repo.

I have sent you the pull request with the updated wallaby config: zedL/wallaby-aurelia#1. The idea is to use require.js modules as some of the aurelia packages are using relative paths with multiple AMD files.

@jeremy-holt

This comment has been minimized.

Show comment
Hide comment
@jeremy-holt

jeremy-holt Jan 16, 2017

Hi, I tried the above running AspNetCore, Aurelia-CLI, Typescript - having set up the project using au new --here and it didn't work.

I made a couple of changes - it was unable to find require.js in the generated html file, and for anyone interested this wallaby.js works just fine:

/* eslint-env node  */
/* global requirejs */

module.exports = function () {


  var path = require('path');
  var aureliaJson = require('./aurelia_project/aurelia.json');

  return {

    debug: true,

    files: [
      { pattern: 'node_modules/bluebird/js/browser/bluebird.core.js', instrument: false },
      { pattern: 'node_modules/requirejs/require.js', instrument: false },
      { pattern: 'src/**/*.ts', load: false },
      { pattern: 'test/unit/setup.ts', load: false }
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(path.join(__dirname, 'node_modules')));
    },

    setup: (function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        packages: [
          // packages
        ]
      });

      require(['/test/unit/setup.js'].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }).toString()
      .replace(
        '// packages',
        aureliaJson.build.bundles[1].dependencies.reduce(function (prev, curr) {
          var moduleName, modulePath, moduleMain;
          if (curr.path) {
            moduleName = moduleMain = curr.name;
            modulePath = path.relative(
              __dirname,
              path.resolve(__dirname, 'aurelia_project', curr.path))
              .split('\\').join('/');
            if (curr.main) {
              moduleMain = curr.main;
            }
          }
          else {
            moduleName = moduleMain = curr;
            modulePath = 'node_modules/' + moduleName + '/dist/amd';
          }
          return prev
            + '{ name: ' + JSON.stringify(moduleName)
            + ', location: ' + JSON.stringify(modulePath)
            + ', main: ' + JSON.stringify(moduleMain)
            + '},';
        }, ''))
  };
};

I hope it helps someone
Jeremy

jeremy-holt commented Jan 16, 2017

Hi, I tried the above running AspNetCore, Aurelia-CLI, Typescript - having set up the project using au new --here and it didn't work.

I made a couple of changes - it was unable to find require.js in the generated html file, and for anyone interested this wallaby.js works just fine:

/* eslint-env node  */
/* global requirejs */

module.exports = function () {


  var path = require('path');
  var aureliaJson = require('./aurelia_project/aurelia.json');

  return {

    debug: true,

    files: [
      { pattern: 'node_modules/bluebird/js/browser/bluebird.core.js', instrument: false },
      { pattern: 'node_modules/requirejs/require.js', instrument: false },
      { pattern: 'src/**/*.ts', load: false },
      { pattern: 'test/unit/setup.ts', load: false }
    ],

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

    env: {
      kind: 'electron'
    },

    middleware: function (app, express) {
      app.use('/node_modules',
        express.static(path.join(__dirname, 'node_modules')));
    },

    setup: (function (wallaby) {
      wallaby.delayStart();

      requirejs.config({
        packages: [
          // packages
        ]
      });

      require(['/test/unit/setup.js'].concat(wallaby.tests), function () {
        wallaby.start();
      });
    }).toString()
      .replace(
        '// packages',
        aureliaJson.build.bundles[1].dependencies.reduce(function (prev, curr) {
          var moduleName, modulePath, moduleMain;
          if (curr.path) {
            moduleName = moduleMain = curr.name;
            modulePath = path.relative(
              __dirname,
              path.resolve(__dirname, 'aurelia_project', curr.path))
              .split('\\').join('/');
            if (curr.main) {
              moduleMain = curr.main;
            }
          }
          else {
            moduleName = moduleMain = curr;
            modulePath = 'node_modules/' + moduleName + '/dist/amd';
          }
          return prev
            + '{ name: ' + JSON.stringify(moduleName)
            + ', location: ' + JSON.stringify(modulePath)
            + ', main: ' + JSON.stringify(moduleMain)
            + '},';
        }, ''))
  };
};

I hope it helps someone
Jeremy

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 16, 2017

Member

@jeremy-holt Awesome, thanks a lot for sharing Jeremy! I have added the link to your solution to our docs.

Member

ArtemGovorov commented Jan 16, 2017

@jeremy-holt Awesome, thanks a lot for sharing Jeremy! I have added the link to your solution to our docs.

@zedL

This comment has been minimized.

Show comment
Hide comment
@zedL

zedL Jan 20, 2017

Hello again!
Currently I use typescript-collections in my aurelia cli project.
When I want to test a service class, wallaby show following errors:

​​​​​0 failing tests, 0 passing​​​​​
​​​​​​​​​​
​​Uncaught Error: Module name "arrays" has not been loaded yet for context: _. Use require([])​​
​​http://requirejs.org/docs/errors.html#notloaded​​
 at ​node_modules/requirejs/require.js:143​
​​Uncaught TypeError: Cannot read property 'Dictionary' of undefined​​
​​at http://localhost:53458/__wallaby__/jasmine@2.4.1/framework.js:14​​

Aurelias karma/jasmin test working fine.

Here is a repo that shows the problem.
https://github.com/zedL/wallaby-typescript-collections

Would be nice if you could help again.

René

zedL commented Jan 20, 2017

Hello again!
Currently I use typescript-collections in my aurelia cli project.
When I want to test a service class, wallaby show following errors:

​​​​​0 failing tests, 0 passing​​​​​
​​​​​​​​​​
​​Uncaught Error: Module name "arrays" has not been loaded yet for context: _. Use require([])​​
​​http://requirejs.org/docs/errors.html#notloaded​​
 at ​node_modules/requirejs/require.js:143​
​​Uncaught TypeError: Cannot read property 'Dictionary' of undefined​​
​​at http://localhost:53458/__wallaby__/jasmine@2.4.1/framework.js:14​​

Aurelias karma/jasmin test working fine.

Here is a repo that shows the problem.
https://github.com/zedL/wallaby-typescript-collections

Would be nice if you could help again.

René

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 23, 2017

Member

@zedL Thanks for putting together the repo! Here's what's happening in your case: you're referencing index entry point for the typescript-collections module, so when require.js loads it, it's getting the CommonJs version of the module.

Luckily, in this case the typescript-collections module has a UMD dist, so fixing the issue is easy: zedL/wallaby-typescript-collections#1.

Karma/jasmine works because it runs on the output of the aurelia-cli build. The build can process CommonJs modules and includes them into one of your bundles. Wallaby (with your current config) is just trying to use require.js to load all modules, without any special build steps.

Having said that, wallaby is also capable of running any build steps that are required. So for example, one may write an extension to wallaby.js (a postprocessor), similar to wallaby-webpack. So if some of the modules that you're using don't expose UMD/AMD built dist, you may build them dynamically by creating the postprocessor and invoking aurelia-cli API from it. However, it's trivial to implement and obviously adds some processing time to your test runs, so I'd rather try using existing UMD/AMD builds, if modules expose some.

Member

ArtemGovorov commented Jan 23, 2017

@zedL Thanks for putting together the repo! Here's what's happening in your case: you're referencing index entry point for the typescript-collections module, so when require.js loads it, it's getting the CommonJs version of the module.

Luckily, in this case the typescript-collections module has a UMD dist, so fixing the issue is easy: zedL/wallaby-typescript-collections#1.

Karma/jasmine works because it runs on the output of the aurelia-cli build. The build can process CommonJs modules and includes them into one of your bundles. Wallaby (with your current config) is just trying to use require.js to load all modules, without any special build steps.

Having said that, wallaby is also capable of running any build steps that are required. So for example, one may write an extension to wallaby.js (a postprocessor), similar to wallaby-webpack. So if some of the modules that you're using don't expose UMD/AMD built dist, you may build them dynamically by creating the postprocessor and invoking aurelia-cli API from it. However, it's trivial to implement and obviously adds some processing time to your test runs, so I'd rather try using existing UMD/AMD builds, if modules expose some.

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 23, 2017

Member

@zedL Also I'm going to suggest the same thing as in my comment here:

Another possibly better solution to try is to switch from require.js to webpack for testing. I know aurelia-cli doesn't use it and is using its own build system, but perhaps it's going to be easier to use existing wallaby.js integration with webpack than to write a proper postprocessor for aurelia-cli.

For example, just using the bits from your existing config and adding basic required stuff for webpack from the docs, this config (which is much simpler than the existing one BTW) works for you shared project (and doesn't need any special handling for non UMD/AMD modules at all):

var wallabyWebpack = require('wallaby-webpack');
var wallabyPostprocessor = wallabyWebpack({
  entryPatterns: ['test/unit/setup.js', 'test/unit/**/*.spec.js']
});

module.exports = function () {
  return {
    files: [
      { pattern: 'src/**/*.ts', load: false },
      { pattern: 'test/unit/setup.ts', load: false }
    ],

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

    env: {
      kind: "electron"
    },

    postprocessor: wallabyPostprocessor,

    setup: function () {
      window.__moduleBundler.loadTests();
    },

    debug: true
  };
};

plus

npm i --save-dev webpack wallaby-webpack
Member

ArtemGovorov commented Jan 23, 2017

@zedL Also I'm going to suggest the same thing as in my comment here:

Another possibly better solution to try is to switch from require.js to webpack for testing. I know aurelia-cli doesn't use it and is using its own build system, but perhaps it's going to be easier to use existing wallaby.js integration with webpack than to write a proper postprocessor for aurelia-cli.

For example, just using the bits from your existing config and adding basic required stuff for webpack from the docs, this config (which is much simpler than the existing one BTW) works for you shared project (and doesn't need any special handling for non UMD/AMD modules at all):

var wallabyWebpack = require('wallaby-webpack');
var wallabyPostprocessor = wallabyWebpack({
  entryPatterns: ['test/unit/setup.js', 'test/unit/**/*.spec.js']
});

module.exports = function () {
  return {
    files: [
      { pattern: 'src/**/*.ts', load: false },
      { pattern: 'test/unit/setup.ts', load: false }
    ],

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

    env: {
      kind: "electron"
    },

    postprocessor: wallabyPostprocessor,

    setup: function () {
      window.__moduleBundler.loadTests();
    },

    debug: true
  };
};

plus

npm i --save-dev webpack wallaby-webpack
@zedL

This comment has been minimized.

Show comment
Hide comment
@zedL

zedL Jan 25, 2017

@ArtemGovorov thank you for the excellent support

zedL commented Jan 25, 2017

@ArtemGovorov thank you for the excellent support

@MartinMason

This comment has been minimized.

Show comment
Hide comment
@MartinMason

MartinMason Jul 31, 2018

I've not been been able to test the simplest custom element, https://aurelia.io/docs/testing/components#getting-started,) using StageComponent through webpack. I've tried the wallaby config from here, https://github.com/stevies/aurelia-testing-sample/blob/master/wallaby.js. However, while using RequireJS will struggle to handle commonjs modules, SystemJS does not have the same issue. I've been able to use a brute force method similar to the RequireJS approach, to get wallaby working with an aurelia-cli app. It's not very pretty and would rather use the suggested webpack approach. Can anyone tell me what I'm doing incorrectly with the webpack approach? This repo has both the working systemjs configuration and the non-functional webpack configuration that I just can't get to work. https://github.com/SoftwareMasons/aurelia-cli-wallaby

MartinMason commented Jul 31, 2018

I've not been been able to test the simplest custom element, https://aurelia.io/docs/testing/components#getting-started,) using StageComponent through webpack. I've tried the wallaby config from here, https://github.com/stevies/aurelia-testing-sample/blob/master/wallaby.js. However, while using RequireJS will struggle to handle commonjs modules, SystemJS does not have the same issue. I've been able to use a brute force method similar to the RequireJS approach, to get wallaby working with an aurelia-cli app. It's not very pretty and would rather use the suggested webpack approach. Can anyone tell me what I'm doing incorrectly with the webpack approach? This repo has both the working systemjs configuration and the non-functional webpack configuration that I just can't get to work. https://github.com/SoftwareMasons/aurelia-cli-wallaby

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Aug 1, 2018

Member

@MartinMason Aurelia webpack integration needs PLATFORM.moduleName(...) for all resources that you reference. I have sent you the pull request with the changes required to make the webpack config work.

Member

ArtemGovorov commented Aug 1, 2018

@MartinMason Aurelia webpack integration needs PLATFORM.moduleName(...) for all resources that you reference. I have sent you the pull request with the changes required to make the webpack config work.

@MartinMason

This comment has been minimized.

Show comment
Hide comment
@MartinMason

MartinMason Aug 1, 2018

@ArtemGovorov You're the best! Had tried everything except the fs: "empty" line in the config file.

MartinMason commented Aug 1, 2018

@ArtemGovorov You're the best! Had tried everything except the fs: "empty" line in the config file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment