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

Wallaby and aurelia-notification in an aurelia CLI app #966

Closed
spapaseit opened this Issue Jan 22, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@spapaseit

spapaseit commented Jan 22, 2017

Issue description or question

I have a properly setup and working Wallaby config file in an Aurelia CLI app. All tests run without a problem.

When I install aurelia-notification and configure it for use with aurelia cli, and use it in a file by means of an import statement however, Wallaby fails to start giving the following error:

​​Uncaught ReferenceError: module is not defined​​
​​at http://localhost:58470/node_modules/extend//index.js:34​​

Aurelia-notification depends on extend. I've checked and the extend package is in de node_modules folder.

I've made a demo repo for this issue.
As it is configured, if you try and start Wallaby you'll get the aforementioned error.

If you open the file src/batch-upload.js and comment out the following line:

import {Notification} from "aurelia-notification";

Wallaby will start and tests will pass.

I realize that this is probably not a problem with Wallaby, but I haven't been able to figure out how to work around the issue.

Wallaby.js configuration file

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

module.exports = function (wallaby) {

    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/**/*.js", load: false },
            { pattern: "test/stubs/**/*.js", load: false },
            { pattern: "test/unit/setup.js", load: false },
        ],

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

        env: {
            kind: "electron"
        },

        compilers: {
            '**/*.js': wallaby.compilers.babel({
                "presets": [
                    ["es2015", { "loose": true }],
                    "stage-1"
                ],
                plugins: [
                  "syntax-flow",
                  "transform-decorators-legacy",
                  "transform-flow-strip-types",
                  "transform-es2015-modules-amd"
                ]
            })
        },

        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 {
                    // <-- handling non jspm modules
                    moduleMain = path.basename(packageJson.main, '.js');
                    packageJson.main = packageJson.main.split('/');
                    packageJson.main.pop();
                    modulePath = 'node_modules/' + moduleName + '/' + packageJson.main.join('/');
                    console.log("--->" + moduleMain);
                    console.log("--->" + modulePath);
                }
            }
            return prev
              + '{ name: ' + JSON.stringify(moduleName)
              + ', location: ' + JSON.stringify(modulePath)
              + ', main: ' + JSON.stringify(moduleMain)
              + '},';
        }, ''))
    };
};

Code editor or IDE name and version

Visual Studio 2015
Visual Studio Code v1.x

OS name and version

Windows 10 Anniversary Update

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 23, 2017

Member

Thanks for putting together the repo.

Even though I have set you the pull request to fix it for this specific case, there's a deeper issue with the difference between your current wallaby config and how aurelia-cli builds bundles.

So karma/jasmine works in this case because it runs on the output of the aurelia-cli build. The build process handles any encountered 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.

So while aurelia-notification declares the extend module as a (AMD) dependency, there's no AMD/UMD version of the extend module, just the CommonJs one. Which means that you need to configure wallaby to build it with your babel config (to get the AMD version).

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.

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.

Member

ArtemGovorov commented Jan 23, 2017

Thanks for putting together the repo.

Even though I have set you the pull request to fix it for this specific case, there's a deeper issue with the difference between your current wallaby config and how aurelia-cli builds bundles.

So karma/jasmine works in this case because it runs on the output of the aurelia-cli build. The build process handles any encountered 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.

So while aurelia-notification declares the extend module as a (AMD) dependency, there's no AMD/UMD version of the extend module, just the CommonJs one. Which means that you need to configure wallaby to build it with your babel config (to get the AMD version).

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.

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.

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 23, 2017

Member

Another possibly better solution to try is to switch from require.js to webpack for testing.

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):

/* eslint-env node  */

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

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

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

    env: {
      kind: "electron"
    },

    compilers: {
      '**/*.js': wallaby.compilers.babel()
    },

    postprocessor: wallabyPostprocessor,

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

plus

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

ArtemGovorov commented Jan 23, 2017

Another possibly better solution to try is to switch from require.js to webpack for testing.

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):

/* eslint-env node  */

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

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

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

    env: {
      kind: "electron"
    },

    compilers: {
      '**/*.js': wallaby.compilers.babel()
    },

    postprocessor: wallabyPostprocessor,

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

plus

npm i --save-dev webpack wallaby-webpack electron
@spapaseit

This comment has been minimized.

Show comment
Hide comment
@spapaseit

spapaseit Jan 23, 2017

Thanks yet again voor de amazing support on a fantastic tool, @ArtemGovorov. Keep it up!

spapaseit commented Jan 23, 2017

Thanks yet again voor de amazing support on a fantastic tool, @ArtemGovorov. Keep it up!

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