wallabyjs / public

Repository for Wallaby.js questions and issues
http://wallabyjs.com
760 stars 45 forks source link

angular2 webpack2 wallabyjs setup doesnt work #1057

Closed yaroslavya closed 7 years ago

yaroslavya commented 7 years ago

Issue description or question

Created a setup for the angular2 with the wallabyjs and have some strange errors like "Runtime error: ReferenceError: Can't find variable: Map" Couple of errors are in the errors section below. I have also created a repo that reproduce the bug: https://github.com/yaroslavya/ng2-wallaby Note, that build is successful and karma tests are running normally without any errors. Thats why Im not sure what is wrong in my setup. Took the config mostly from my previous experiement with AngularClass setup. Let me know if you need more info or anything.

ERRORS:

ReferenceError: Can't find variable: Map at test/unit/simple.test.ts:1

ReferenceError: Can't find variable: Map at http://localhost:63197/__modules/26.js?1488911230353:80

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
// if you use the webpack defined variable ENV in any components
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';

var webpackPostprocessor = wallabyWebpack({
    entryPatterns: [
        'test/vendor.ts',
        'test/unit/simple.test.js'
    ],

    module: {
        loaders: [
            // if you use templateUrl in your components and want to inline your templates uncomment the below line
            //{test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/},

            // if importing .scss files in your component styleUrls uncomment the following line
            //{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
            { test: /\.css$/, loader: 'raw-loader'},
            { test: /\.json$/, loader: 'json-loader'},
            { test: /\.html$/, loader: 'raw-loader'},
            { test: /karma-require/, loader: 'null-loader'},
            { test: /\.scss$/, loader: "null-loader"},
            { test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: "file-loader?name=./files/[name].[ext]"},
            { test: /\.(svg|gif)$/, loader: "url-loader"}
        ]
    },
    plugins: [
        new DefinePlugin({
            'ENV': JSON.stringify(ENV)
        })
    ]
});

module.exports = function () {

    return {
        files: [
            {pattern: 'test/vendor.ts', load: false},
            {pattern: 'test/karma-require.js', load: false},
            {pattern: 'src/**/*.ts', load: false},
            {pattern: 'src/**/*.css', load: false},
            {pattern: 'src/**/*.html', load: false},
            {pattern: 'src/**/*.json', load: false},
            {pattern: 'src/app/**/*.ts', ignore: true},
            {pattern: 'test/**/*test.ts', ignore: true},
            {pattern: 'src/**/*.d.ts', ignore: true}
        ],

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

        testFramework: 'jasmine',

        postprocessor: webpackPostprocessor,

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

        debug: true
    };
};

Code editor or IDE name and version

WebStorm 2016.3.1

OS name and version

Windows 7

ArtemGovorov commented 7 years ago

Thanks for the repo. I have sent you the PR.

The major issue was that the vendor file in the entry patterns needs to have .js as specified in the docs. The error is actually displayed after those that you have listed:

Specified entry pattern "test/vendor.ts" does not match any file.

Apart from fixing the error, I have added .scss pattern to the wallaby webpack config and the files list as your app is using them. I have also add the template loader, though you're nt using templateUrls yet, but juts in case if you do use them in future.

Please also note that as you're using node-sass loader to compile .scss file, you'll need to change the node.js version in Run Configuration that wallaby WebStorm integration is using by default to point to your system node:

screen shot 2017-03-08 at 11 29 08 am