Webpack + external files issue.

[WRidder]

I would like to add wallabyjs support to a project of mine consisting of a Backgrid plugin

Construction is somewhat as follows:

• src file is packed using webpack (it requires jquery, backbone, backgrid and underscore)
• the plugin adds an attribute (Backgrid.extension.ColumnManager) to the existing backgrid instance

However, when loading the tests using wallabyjs the plugin isn't added to the existing backgrid object.

Configuration
wallaby.js

var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./config/webpack.wallaby');
var webpackPostprocessor = wallabyWebpack(webpackConfig);

module.exports = function () {
    return {
        files: [
            {
                pattern: "node_modules/jquery/dist/jquery.min.js",
                instrument: false
            },
            {
                pattern: "node_modules/underscore/underscore-min.js",
                instrument: false
            },
            {
                pattern: "node_modules/backbone/backbone-min.js",
                instrument: false
            },
            {
                pattern: "node_modules/backgrid/lib/backgrid.js",
                instrument: false
            },
            {
                pattern: "src/*.js",
                load: false
            }
        ],

        tests: [
            {
                pattern: 'test/*.js',
                load: false
            }
        ],
        //debug: true,
        postprocessor: webpackPostprocessor,
        bootstrap: function () {
            // Backgrid/jquery etc are available here if a console.log is used.
            window.__moduleBundler.loadTests();
        }
    }
};

webpack.wallaby.js

"use strict";
var webpack = require("webpack");

module.exports = function() {
  return {
    externals: {
        "jquery": "jQuery",
        "backbone": "Backbone",
        "underscore": "_",
        "backgrid": "Backgrid"
    }
  };
};

Part of wallaby.js output:

22 failing tests, 0 passing

test/test.js Backgrid.Extension.ColumnManager - Visibility management uses the given columns [3 ms]

    TypeError: 'undefined' is not an object (evaluating 'Backgrid.Extension.ColumnManager.prototype')
        at test/test.js:35

This basically means that the plugin doesn't register itself to the Backgrid object. However; does this maybe have to do with the order in which files are loaded?

[ArtemGovorov]

plugin isn't added to the existing backgrid object

You have load: false set for your source files and I can't the place in your tests where the plugin is added to existing backgrid object. You most likely need to require('../src/Backgrid.ColumnManager') it from your test(s).

[WRidder]

Alright, I removed the load: false portion in the files array and added require('../src/Backgrid.ColumnManager.js') to my tests file. Now it works just as expected.

Thanks again for the great support!

[ArtemGovorov]

@WRidder I think load: false should not be removed (if you're still using webpack).

I have found another issue in the config:
var webpackPostprocessor = wallabyWebpack(webpackConfig);
should be var webpackPostprocessor = wallabyWebpack(webpackConfig()); as webpackConfig is a function.

So, here is the config where it works for me:

var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./config/webpack.wallaby');
var webpackPostprocessor = wallabyWebpack(webpackConfig());

module.exports = function () {
    return {
        files: [
            {
                pattern: "node_modules/jquery/dist/jquery.min.js",
                instrument: false
            },
            {
                pattern: "node_modules/underscore/underscore-min.js",
                instrument: false
            },
            {
                pattern: "node_modules/backbone/backbone-min.js",
                instrument: false
            },
            {
                pattern: "node_modules/backgrid/lib/backgrid.js",
                instrument: false
            },
            {
                pattern: "src/*.js",
                load: false
            }
        ],

        tests: [
            {
                pattern: 'test/*.js',
                load: false
            }
        ],
        //debug: true,
        postprocessor: webpackPostprocessor,
        bootstrap: function () {
            // Backgrid/jquery etc are available here if a console.log is used.
            window.__moduleBundler.loadTests();
        }
    }
};

and in your test file I'm doing: require('../src/Backgrid.ColumnManager');

Have sent you the pull request.

[ArtemGovorov]

@WRidder With the config I have pasted above (and sent in my PR) you don't actually need those changes to Backgrid.ColumnManager.js that as I see you've made to your code.

[ArtemGovorov]

@WRidder Oh, and thanks for you support! :)

[WRidder]

You are right indeed. That was a dumb error (regarding loading the webpack config). Thanks for the suggestion; works well now :)