aurelia-cli, node, and jasmine

[kvernon]

Issue description or question

I'm running into where I'm trying to test one of Aurelia's bindable decorators. Before this, things went well, but now that I have to verify code for bindables, I can't get this to work. I'm struggling.

In the end, I know I'm doing something wrong... please help!

An additional note, is that I'm using the Aurelia-cli tool.

error:

ReferenceError: define is not defined
    at Object.<anonymous> (.\test\unit\index-tests.js:2:14)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at C:\Users\kelly\Documents\dev\git\frontend-project\node_modules\jasmine\lib\jasmine.js:87:5
    at Array.forEach (native)

Wallaby.js configuration file

module.exports = function (wallaby) {
  return {
    // set `load: false` to all source files and tests processed by webpack
    // (except external files),
    // as they should not be loaded in browser,
    // their wrapped versions will be loaded instead
    files: [
      // {pattern: 'node_modules/babel-polyfill/dist/polyfill.min.js', instrument: false},
      // {pattern: 'node_modules/aurelia-polyfills/dist/commonjs/aurelia-polyfills.js', instrument: false},
      // {pattern: 'node_modules/requirejs/require.js', instrument: false},
      {pattern: "src/**/*.js"},
      {pattern: "src/**/*.html"}
    ],

    tests: [
      'test/unit/**/*tests.js'
    ],

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

    env: {
      // use 'node' type to use node.js or io.js
      type: 'node',
    },
    testFramework: 'jasmine',

    debug: true,
    reportConsoleErrorAsError: true,
    delay: {
      run: 500
    }
  };
};

###.babelrc

{
  "presets": [
    "es2015",
    "es2016"
  ],
  "plugins": [
    "transform-regenerator",
    "transform-async-generator-functions",
    "syntax-async-functions",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-es2015-modules-amd"
  ]
}

###index-tests.js

import {expect} from 'chai'
import sinon from 'sinon'

import {Container} from 'aurelia-dependency-injection';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

import 'aurelia-polyfills';
import {initialize} from 'aurelia-pal-nodejs';
// import {initialize} from 'aurelia-pal-browser'; I have also tried using this instead of aurelia-pal-nodejs
describe('tests', () => {
  beforeAll(() => {
    initialize();
  });

  //no tests in here because everyone of them have been commented out, yet this fails
});

Code editor or IDE name and version

WebStorm V2016.3.2

OS name and version

Windows 10 AU

Thanks,
Kelly

[ArtemGovorov]

There are a couple of issues with your config.

The first issue is that your ES6 modules are transformed to AMD because of this babel plugin: transform-es2015-modules-amd that you have in your .babelrc. AMD emits define function calls, hence the error.

The second issue is that you're using node environment to run your tests (as opposed to be using the default browser one), however I don't see you loading jsdom or similar to emulate window/DOM in node. Besides, I'm not even sure you can run aurelia in node - have never seen anyone doing it, is that something you do without wallaby?

The slightly adjusted config from this repo may work for you. Here the discussion about this config. The only adjustment I have made is to remove the above mentioned transform-es2015-modules-amd plugin from the babel compiler settings.

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({
        "presets": [
          "es2015",
          "es2016"
         ],
         "plugins": [
           "transform-regenerator",
           "transform-async-generator-functions",
           "syntax-async-functions",
           "transform-decorators-legacy",
           "transform-class-properties"
         ]
      })
    },

    postprocessor: wallabyPostprocessor,

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

plus

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

[kvernon]

Hi @ArtemGovorov,

So my problem was right down to the window not being found... or at least one of them while devving in node/mocha, which is why I had switched to jasmine. So after all of this going down the deep dark rabbit hole, I went back to node:

module.exports = function (wallaby) {
  return {
    // set `load: false` to all source files and tests processed by webpack
    // (except external files),
    // as they should not be loaded in browser,
    // their wrapped versions will be loaded instead
    files: [
      // {pattern: 'node_modules/babel-polyfill/dist/polyfill.min.js', instrument: false},
      // {pattern: 'node_modules/aurelia-polyfills/dist/commonjs/aurelia-polyfills.js', instrument: false},
      {pattern: 'node_modules/requirejs/require.js', instrument: false},
      {pattern: "src/**/*.js"},
      {pattern: "src/**/*.html"}
    ],

    tests: [
      //'test/unit/**/*tests.js'
      'test/unit/**/search/*tests.js'
    ],

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

    env: {
      // use 'node' type to use node.js or io.js
      type: 'node',
    },
    testFramework: 'mocha',

    debug: true,
    reportConsoleErrorAsError: true,
    delay: {
      run: 500
    }
  };
};

After resetting a couple of tests, I found the issue to be:

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\kelly\Documents\dev\git\frontend-project\node_modules\aurelia-pal-browser\dist\commonjs\aurelia-pal-browser.js:21:13)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Users\kelly\Documents\dev\git\frontend-project\node_modules\aurelia-bootstrapper\dist\commonjs\aurelia-bootstrapper.js:12:26)
    at Module._compile (module.js:435:26)

which is in direct correlation with aurelia-bootstrapper (which you can also see). It still goes into not having a window rep, like you called out.

Finally, to address your node message. For me, my ideal is to use node/mocha, and it's been working. In the end the aurelia cli compiles the project into something browser safe. Of course this means trying to get test libraries to align; including wallabyjs.

As a side note, I really do wish it was easier to understand the setup area of wallaby. Right now, we go look at docs, but there isn't, I feel, enough information over what's exposed through the setup.

In either case, this should still be closed.

Thanks,
Kelly

[ArtemGovorov]

ReferenceError: window is not defined

Yep, I did mention it's going to happen with the env: {type: 'node'}. You'll need jsdom or similar to emulate window/DOM in node. This isn't wallaby specific part of the setup though, you'd need it with plain mocha in node, or any other test runner.

my ideal is to use node/mocha, and it's been working

If plain node/mocha is working for you, then wallaby.js can also work. You'll just need to load/require your mocha --require hooks in the setup function, I'm assuming you're loading/initializing jsdom somewhere to make aurelia work in node. So if you have a working setup with node/mocha and it's working for you, please share the sample repo with it, and I'll create a similar working wallaby config for you.

As a side note, I really do wish it was easier to understand the setup area of wallaby. Right now, we go look at docs, but there isn't, I feel, enough information over what's exposed through the setup.

Thanks for the feedback. Could you please share what else in your opinion can we add to the docs to make it better?

[kvernon]

Thanks again for your help @ArtemGovorov. I do appreciate it, and I love wallaby.

I'd be happy to share doc ideas. Where would you like me to share doc questions and suggestions? I know the importance of closing a topic/issue/bug/feature request.

Cheers,
Kelly

[ArtemGovorov]

@kvernon Thanks!
Please feel free to create a separate issue with the docs improvement suggestions, or send us an email to hello@wallabyjs.com, whichever way works better for you.