This article was organized in 2017 to solve the problems encountered in ES6 replacement in gridmanager version 2.3.0.

The text is as follows

After replacement, it was found that the original test coverage decreased from 72% to 24%. Through the local test of coverage html, it is found that the code used to overwrite the target file is the converted code of babel.

Solution

Because the grid manager uses karma in the web pack environment, the following steps will be based on karma, web pack.

1. Install the required plug-ins:

npm install --save-dev babel-plugin-istanbul
npm install --save-dev karma-babel-preprocessor
npm install --save-dev karma-sourcemap-loader

2. Modify package.json

"scripts": {
    "test": "NODE_ENV=test karma start"
}

3. Add configuration item in. babelrc

"env": {
    "test": {
      "plugins": ["istanbul"]
    }
}

4. Modify karma.conf.js

preprocessors: {
    'src/js/*.js': ['webpack', 'sourcemap', 'coverage'],
    'test/*_test.js': ['webpack', 'sourcemap']
}
// ...
webpack: {
  // ...
  devtool: 'inline-source-map'
}

Full configuration used in GirdManager

.babelrc

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

karma.conf.js

const path = require('path');
module.exports = function (config) {
    // karma config: http://karma-runner.github.io/1.0/config/configuration-file.html
    // karma-coverage: https://www.npmjs.com/package/karma-coverage
    config.set({
        // Will be used to resolve all schema base paths (for example, files, exclusion)
        basePath: '',
 
        // Use framework
        // Available framework: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],
 
        // List of files to test
        files: [
            'test/*_test.js'
        ],
 
        // Use port
        port: 9876,
 
        // Use color in output log
        colors: true,
 
        // Continuous integration mode: if it is configured to be true, the test will run continuously, and 0 (success) or 1 (failure) will be returned after the completion. Example: Done. Your build exited with 0
        singleRun: true,
 
 
        // log level
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
 
        // Whether to listen for file changes
        autoWatch: true,
 
        // Configure the environment for starting unit tests
        browsers: ['PhantomJS'],
 
        captureTimeout: 60000,
 
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],
 
        // Preprocessing
        preprocessors: {
            // Src/js/*.js will be packaged by webpack when it is invoked from test/*_test.js, so src/js/*.js does not need to be played through webpack.
            'src/js/*.js': ['sourcemap', 'coverage'],
            'test/*_test.js': ['webpack']
        },
        // optionally, configure the reporter
        coverageReporter: {
            reporters: [
                // generates ./coverage/chart/*.html
                { type: 'html', subdir: 'chart' },
                // generates ./coverage/lcov.info
                {type:'lcovonly', subdir: '.'},
                // generates ./coverage/coverage-final.json
                {type:'json', subdir: '.'}
            ]
        },
 
        // webpack config: https://github.com/webpack-contrib/karma-webpack
        webpack: {
            //Portal file configuration
            entry: {
                js: './test/index_test.js'
            },
            resolve:{
                extensions: [".js"] //Add these suffixes when the module of requrie cannot be found
            },
            module: {
                rules: [
                    {
                        test: /.js?$/,
                        use: ['babel-loader?{"presets":["es2015"]}'],
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src'), path.join(__dirname, 'test')]
                    },
                    {
                        test:/.css$/,
                        loader:'style-loader!css-loader'
                    },
                    {
                        test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
                        use: 'url-loader?limit=15000&mimetype=application/font-woff&prefix=fonts'
                    },
                    {
                        test: /.ttf(?v=d+.d+.d+)?$/,
                        use: 'url-loader?limit=15000&mimetype=application/octet-stream&prefix=fonts'
                    },
                    {
                        test: /.eot(?#w+)?$/,
                        use: 'url-loader?limit=15000&mimetype=application/vnd.ms-fontobject&prefix=fonts'
                    },
                    {
                        test: /.svg(#w+)?$/,
                        use: 'url-loader?limit=15000&mimetype=image/svg+xml&prefix=fonts'
                    }
                ]
            }
        },
 
        webpackMiddleware: {noInfo: false}, // no webpack output
 
        // How many browsers does Karma have to launch in parallel
        concurrency: Infinity
    });
};

To view the recent full implementation, please visit GridManager