ci(fes-cli): 替换测试框架为karma,支持覆盖测试

packages/fes-cli/bin/index.js

@@ -62,18 +62,30 @@ commander.command('build')
 commander
     .command('test:unit')
     .description('单元测试')
-    .option('-w, --watch', 'run in watch mode')
-    .option('-g, --grep', 'only run tests matching <pattern>')
-    .option('-s, --slow', "'slow' test threshold in milliseconds")
-    .option('-t, --timeout', 'timeout threshold in milliseconds')
-    .option('-b, --bail', 'bail after first test failure')
-    .option('-r, --require', 'require the given module before running tests')
-    .option('--include', 'include the given module into test bundle')
-    .option('--inspect-brk', 'Enable inspector to debug the tests')
-    .action(() => {
+    .option('--port', '<integer> Port where the server is running.')
+    .option('--auto-watch', 'Auto watch source files and run on change.')
+    .option('--detached', 'Detach the server.')
+    .option('--no-auto-watch', 'Do not watch source files.')
+    .option('--log-level', '<disable | error | warn | info | debug> Level of logging.')
+    .option('--colors', 'Use colors when reporting and printing logs.')
+    .option('--no-colors', 'Do not use colors when reporting or printing logs.')
+    .option('--reporters', 'List of reporters (available: dots, progress, junit, growl, coverage).')
+    .option('--browsers', 'List of browsers to start (eg. --browsers Chrome,ChromeCanary,Firefox).')
+    .option('--capture-timeout', '<integer> Kill browser if does not capture in given time [ms].')
+    .option('--single-run', 'Run the test when browsers captured and exit.')
+    .option('--no-single-run', 'Disable single-run.')
+    .option('--report-slower-than', '<integer> Report tests that are slower than given time [ms].')
+    .option('--fail-on-empty-test-suite', 'Fail on empty test suite.')
+    .option('--no-fail-on-empty-test-suite', 'Do not fail on empty test suite.')
+    .option('--fail-on-failing-test-suite', 'Fail on failing test suite.')
+    .option('--no-fail-on-failing-test-suite', 'Do not fail on failing test suite.')
+    .option('--coverage', '是否进行覆盖测试')
+    .action((options) => {
         const test = require('../build/tasks/test');
         const config = generateConfig('build', commander.env || 'dev');
-        test(config, process.argv.slice(3));
+        test(config, process.argv.slice(3), {
+            coverage: options.coverage
+        });
     });
 
 commander.parse(process.argv);

packages/fes-cli/build/configs/karma.conf.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-dynamic-require */
+const path = require('path');
+const fs = require('fs');
+const webpackConfig = require('./webpack.test.config.js');
+const generateConfig = require('../helpers/config');
+const log = require('../helpers/log');
+
+const configs = generateConfig();
+
+
+let projectKarmaConfig;
+const projectKarmaConfigFile = path.resolve(configs.folders.PROJECT_DIR, 'karma.config.js');
+if (fs.existsSync(projectKarmaConfigFile)) {
+    log.message('[fes] 加载项目karma配置');
+    projectKarmaConfig = require(projectKarmaConfigFile);
+}
+
+module.exports = function (config) {
+    const defaultConfig = projectKarmaConfig || {
+        test: ['test/**/*.spec.js'],
+        coverage: ['src/components/**/*', 'src/helpers/**/*']
+    };
+    const testFiles = defaultConfig.test || [];
+    const coverageFiles = config.coverage ? (defaultConfig.coverage || []) : [];
+    const files = [].concat(testFiles, coverageFiles);
+    const preprocessors = {};
+    testFiles.forEach((item) => {
+        preprocessors[item] = ['webpack', 'sourcemap'];
+    });
+    coverageFiles.forEach((item) => {
+        preprocessors[item] = ['webpack', 'coverage'];
+    });
+    const reporters = [];
+    if (files.length) {
+        reporters.push('mocha');
+    }
+    if (coverageFiles.length) {
+        reporters.push('coverage-istanbul');
+    }
+    config.set({
+        basePath: configs.folders.PROJECT_DIR,
+        frameworks: ['mocha'],
+        files,
+        preprocessors,
+        webpack: webpackConfig,
+        reporters,
+        coverageIstanbulReporter: {
+            dir: path.join(configs.folders.PROJECT_DIR, '.coverage'),
+            reports: ['lcov', 'text'],
+            fixWebpackSourcePaths: true
+        },
+        browsers: ['Chrome']
+    });
+};

packages/fes-cli/build/configs/webpack.config.js

@@ -11,6 +11,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const autoprefixer = require('autoprefixer');
 const browsers = require('../helpers/browser');
 const log = require('../helpers/log');
@@ -324,6 +325,7 @@ module.exports = function webpackConfig(configs, webpack, mode) {
         devtool: isDev && 'cheap-module-eval-source-map',
 
         plugins: [
+            new HardSourceWebpackPlugin(),
 
             /* config.plugin('progress') */
             new webpack.ProgressPlugin(),

packages/fes-cli/build/configs/webpack.test.config.js

@@ -1,23 +1,58 @@
 const path = require('path');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const nodeExternals = require('webpack-node-externals');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
-const isCoverage = process.env.NODE_ENV === 'coverage';
-
 const generateConfig = require('../helpers/config');
 
 const configs = generateConfig();
 
+const presets = [
+    [
+        require.resolve('@babel/preset-env'),
+        {
+            modules: false
+        }
+    ]
+];
+const plugins = [
+    [
+        require.resolve('@babel/plugin-transform-runtime'),
+        {
+            corejs: {
+                version: 3,
+                proposals: true
+            },
+            useESModules: true,
+            absoluteRuntime: configs.folders.CLI_DIR // 这里是指fes-cli的目录
+        }
+    ],
+    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    require.resolve('@babel/plugin-syntax-dynamic-import')
+];
+
+const cssloaders = [
+    {
+        loader: require.resolve('vue-style-loader'),
+        options: {
+            sourceMap: false,
+            shadowMode: false
+        }
+    },
+    {
+        loader: require.resolve('css-loader'),
+        options: {
+            sourceMap: false,
+            importLoaders: 2
+        }
+    }
+];
+
 const webpackConfig = {
     mode: 'development',
     output: {
         path: configs.folders.PROJECT_DIST_DIR,
         publicPath: '/dist/',
         filename: '[name].js',
-        chunkFilename: '[id].js',
-        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
-        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
+        chunkFilename: '[id].js'
     },
     resolve: {
         extensions: ['.js', '.vue', '.fes', '.json'],
@@ -29,28 +64,31 @@ const webpackConfig = {
             vue$: 'vue/dist/vue.esm.js'
         },
         modules: [
-            'node_modules',
             path.join(configs.folders.CLI_DIR, 'node_modules'),
-            path.join(configs.folders.PROJECT_DIR, 'node_modules')
+            path.join(configs.folders.PROJECT_DIR, 'node_modules'),
+            'node_modules'
         ]
     },
-    externals: [nodeExternals()],
     module: {
-        rules: [].concat(
-            isCoverage
-                ? {
-                    test: /\.js$/,
-                    include: path.resolve('packages'), // instrument only testing sources with Istanbul, after ts-loader runs
-                    loader: 'istanbul-instrumenter-loader',
-                    query: {
-                        esModules: true
+        rules: [
+            {
+                test: /\.js$/,
+                include: path.resolve(configs.folders.PROJECT_DIR, 'src'), // instrument only testing sources with Istanbul, after ts-loader runs
+                loader: 'istanbul-instrumenter-loader',
+                query: {
+                    esModules: true
+                }
+            },
+            {
+                test: /\.m?js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets,
+                        plugins
                     }
                 }
-                : [],
-            {
-                test: /\.(jsx?|babel|es6)$/,
-                exclude: /(node_modules|bower_components)/,
-                loader: 'babel-loader'
             },
             {
                 test: /\.vue$/,
@@ -62,23 +100,140 @@ const webpackConfig = {
                     optimizeSSR: false
                 }
             },
+            /* config.module.rule('images') */
+            {
+                test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
+                use: [
+                    {
+                        loader: require.resolve('url-loader'),
+                        options: {
+                            limit: 4096,
+                            fallback: {
+                                loader: 'file-loader',
+                                options: {
+                                    name: 'img/[name].[ext]'
+                                }
+                            }
+                        }
+                    }
+                ]
+            },
+
+            /* config.module.rule('svg') */
+            {
+                test: /\.(svg)(\?.*)?$/,
+                use: [
+                    {
+                        loader: require.resolve('file-loader'),
+                        options: {
+                            name: 'img/[name].[ext]'
+                        }
+                    }
+                ]
+            },
+
+            /* config.module.rule('media') */
+            {
+                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                use: [
+                    {
+                        loader: require.resolve('url-loader'),
+                        options: {
+                            limit: 4096,
+                            fallback: {
+                                loader: require.resolve('file-loader'),
+                                options: {
+                                    name: 'media/[name].[ext]'
+                                }
+                            }
+                        }
+                    }
+                ]
+            },
+
+            /* config.module.rule('fonts') */
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+                use: [
+                    {
+                        loader: require.resolve('url-loader'),
+                        options: {
+                            limit: 4096,
+                            fallback: {
+                                loader: require.resolve('file-loader'),
+                                options: {
+                                    name: 'fonts/[name].[ext]'
+                                }
+                            }
+                        }
+                    }
+                ]
+            },
+
+            /* config.module.rule('css') */
             {
                 test: /\.css$/,
-                loaders: ['style-loader', 'css-loader']
+                use: cssloaders
             },
+
+            /* config.module.rule('scss') */
             {
-                test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
-                loader: 'url-loader',
-                query: {
-                    limit: 10000,
-                    name: path.posix.join('static', '[name].[hash:7].[ext]')
-                }
+                test: /\.scss$/,
+                use: cssloaders.concat([
+                    {
+                        loader: require.resolve('sass-loader'),
+                        options: {
+                            sourceMap: false
+                        }
+                    }
+                ])
+            },
+
+            /* config.module.rule('sass') */
+            {
+                test: /\.sass$/,
+                use: cssloaders.concat([
+                    {
+                        loader: require.resolve('sass-loader'),
+                        options: {
+                            sourceMap: false,
+                            indentedSyntax: true
+                        }
+                    }
+                ])
+            },
+
+            /* config.module.rule('less') */
+            {
+                test: /\.less$/,
+                use: cssloaders.concat([
+                    {
+                        loader: require.resolve('less-loader'),
+                        options: {
+                            sourceMap: false,
+                            javascriptEnabled: true
+                        }
+                    }
+                ])
+            },
+
+            /* config.module.rule('stylus') */
+            {
+                test: /\.styl(us)?$/,
+                use: cssloaders.concat([
+                    {
+                        loader: require.resolve('stylus-loader'),
+                        options: {
+                            sourceMap: false,
+                            preferPathResolver: 'webpack'
+                        }
+                    }
+                ])
             }
-        )
+        ]
     },
     plugins: [new VueLoaderPlugin(), new ProgressBarPlugin()],
-    target: 'node',
-    devtool: 'inline-cheap-module-source-map'
+    devtool: '#inline-source-map'
 };
 
 module.exports = webpackConfig;

packages/fes-cli/build/helpers/config.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 
 function generateConfig(command, env) {
     // cli目录
-    const CLI_DIR = path.dirname(path.dirname(fs.realpathSync(process.argv[1])));
+    const CLI_DIR = process.env.cliPath || path.dirname(path.dirname(fs.realpathSync(process.argv[1])));
     // 解决git-bash目录问题
     const PROJECT_DIR = process.env.PWD || process.cwd();
     const FES_DIR = path.resolve(PROJECT_DIR, './node_modules/@webank/fes-core');

packages/fes-cli/build/helpers/setup.js

@@ -1,4 +0,0 @@
-require('jsdom-global')();
-
-// https://github.com/vuejs/vue-test-utils/issues/936
-window.Date = Date;

packages/fes-cli/build/tasks/test.js

@@ -1,38 +1,22 @@
-const fs = require('fs-extra');
 const execa = require('execa');
-const path = require('path');
 const log = require('../helpers/log');
 
 module.exports = function (config, rawArgv) {
-    const testDir = path.join(config.folders.PROJECT_DIR, 'test');
-    if (fs.pathExistsSync(testDir)) {
-        const bin = require.resolve('mochapack/bin/mochapack');
-        const argv = [
-            // ...nodeArgs,
-            bin,
-            '--recursive',
-            '--require',
-            require.resolve('../helpers/setup.js'),
-            '--webpack-config',
-            require.resolve('../configs/webpack.test.config.js'),
-            ...rawArgv,
-            `${testDir}/**/*.spec.js`
-        ];
-        const child = execa('node', argv, {
-            cwd: config.folders.CLI_DIR,
-            encoding: 'utf8',
-            stdio: 'inherit'
-        });
-        child.on('error', (e) => {
-            log.error('执行test失败：');
-            log.error(JSON.stringify(e));
-        });
-        child.on('exit', (code) => {
-            if (code !== 0) {
-                log.message(`mochapack进程退出，code ${code}.`);
-            }
-        });
-    } else {
-        log.warn('测试目录不存在，请在项目根目录创建目录test');
-    }
+    const bin = require.resolve('karma/bin/karma');
+    const argv = [
+        bin,
+        'start',
+        require.resolve('../configs/karma.conf.js'),
+        ...rawArgv
+    ];
+    const child = execa('node', argv, {
+        cwd: config.folders.CLI_DIR,
+        env: Object.assign(process.env, { cliPath: config.folders.CLI_DIR }),
+        encoding: 'utf8',
+        stdio: 'inherit'
+    });
+    child.on('error', (e) => {
+        log.error('[ERROR] test命令执行失败');
+        log.error(JSON.stringify(e));
+    });
 };

packages/fes-cli/package.json

@@ -35,6 +35,7 @@
         "@babel/runtime-corejs3": "^7.11.2",
         "@intervolga/optimize-cssnano-plugin": "^1.0.6",
         "@soda/friendly-errors-webpack-plugin": "^1.7.1",
+        "hard-source-webpack-plugin": "^0.13.1",
         "autoprefixer": "^8.1.0",
         "babel-loader": "^8.0.6",
         "body-parser": "^1.5.2",
@@ -60,14 +61,11 @@
         "hash-sum": "^2.0.0",
         "html-webpack-plugin": "^3.2.0",
         "http-proxy": "^1.12.0",
-        "jsdom": "^16.4.0",
-        "jsdom-global": "^3.0.2",
         "json-templater": "^1.2.0",
         "less": "^3.12.2",
         "less-loader": "^7.0.1",
         "mini-css-extract-plugin": "^0.8.0",
         "mocha": "^7.2.0",
-        "mochapack": "^2.0.5",
         "mockjs": "^1.1.0",
         "morgan": "^1.2.2",
         "node-plus-string": "^1.0.1",
@@ -79,6 +77,16 @@
         "prompts": "^2.3.0",
         "sass-loader": "^10.0.2",
         "style-loader": "^1.0.0",
+        "istanbul-instrumenter-loader": "^3.0.1",
+        "karma": "^5.2.3",
+        "karma-chrome-launcher": "^3.1.0",
+        "karma-coverage": "^2.0.3",
+        "karma-coverage-istanbul-reporter": "^3.0.3",
+        "karma-mocha": "^2.0.1",
+        "karma-mocha-reporter": "^2.2.5",
+        "karma-sourcemap-loader": "^0.3.8",
+        "karma-spec-reporter": "0.0.32",
+        "karma-webpack": "^4.0.2",
         "stylus": "^0.54.8",
         "stylus-loader": "^3.0.2",
         "tar": "^6.0.5",

packages/fes-doc/docs/.vuepress/config.js

@@ -20,8 +20,8 @@ module.exports = {
         nav: [
             { text: "指南", link: "/guide/" },
             { text: "API参考", link: "/api/" },
-            { text: "组件", link: "/ui/" }
-            // { text: "CLI", link: "/cli/" }
+            { text: "组件", link: "/ui/" },
+            { text: "CLI", link: "/cli/" }
         ],
         sidebar: {
             "/guide/": [
@@ -38,7 +38,8 @@ module.exports = {
                         "/guide/route",
                         "/guide/permisson",
                         "/guide/i18n",
-                        "/guide/option"
+                        "/guide/option",
+                        "/guide/unit"
                     ]
                 },
                 {

packages/fes-doc/docs/cli/README.md

@@ -0,0 +1,75 @@
+---
+sidebarDepth: 3
+sidebar: auto
+title: CLI命令
+---
+
+## init
+初始化一个fes的项目模板，使用最新版本的`fes-template`
+```shell
+fes init [name]
+```
+
+## dev      
+开发调试，启动本地服务
+```shell
+fes dev
+```
+
+### 参数
+
+#### env
+配置使用什么环境，对应着`fes.config.js`中的`env`
+```shell
+fes dev --env=develop
+```
+
+## build
+编译打包
+```shell
+fes build
+```
+### 参数
+
+#### env
+配置使用什么环境，对应着`fes.config.js`中的`env`
+```shell
+fes dev --env=prod
+```
+
+## test:unit
+单元测试
+```shell
+fes test:unit
+```
+
+### 参数
+
+#### single-run
+是否只执行一次，默认是`watch`模式，文件更新后会执行一次测试
+```shell
+fes test:unit --single-run
+```
+
+#### coverage
+是否进行覆盖测试
+```shell
+fes test:unit --coverage
+```
+#### 其他参数
+单元测试使用`karma`来管理测试，支持`karma`的所有参数，使用如下命令查看完整参数：
+```
+fes test:unit -h
+```
+
+## route
+编译路由，根据`pages`下组件目录生成路由
+```shell
+fes update
+```
+
+## components
+编译公共组件，componets下的组件自动注入到全局组件
+```shell
+fes components
+```

packages/fes-doc/docs/guide/unit.md

@@ -0,0 +1,52 @@
+# 单元测试
+
+## 准备工作
+
+升级`@webank/fes-cli`到0.4.1以上
+```shell
+npm i -g @webank/fes-cli
+```
+或者在项目目录执行
+```shell
+npm i @webank/fes-cli --save-dev
+```
+
+## 配置
+通过项目根目录`karma.config.js`配置单元测试，如果不存在此文件则默认使用如下配置
+```js
+module.exports = {
+    test: ['test/**/*.spec.js'],
+    coverage: ['src/components/**/*', 'src/helpers/**/*']
+};
+```
+- test 需要测试的脚本
+- coverage 需要覆盖测试的文件
+
+## 单元测试
+配置项目的`package.json`
+```json
+{
+    "scripts": {
+        "test": "fes test:unit --single-run",
+    },
+}
+```
+在项目目录执行
+```shell
+npm run test
+```
+
+
+## 覆盖测试
+配置项目的`package.json`
+```json
+{
+    "scripts": {
+        "cover": "fes test:unit --single-run --coverage",
+    },
+}
+```
+在项目目录执行
+```shell
+npm run cover
+```

packages/fes-template/.eslintrc.js

@@ -1,5 +1,9 @@
 
 module.exports = {
+    env: {
+        "mocha": true,
+        "es6": true
+    },
     extends: [
         '@webank/eslint-config-webank/vue',
     ],

packages/fes-template/.gitignore

@@ -3,6 +3,7 @@
 .git
 .vscode
 .cache
+.coverage
 /dist
 .history
-/node_modules
+/node_modules

packages/fes-template/karma.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    test: ['test/**/*.spec.js'],
+    coverage: ['src/components/**/*', 'src/helpers/**/*']
+};

packages/fes-template/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "build": "fes build",
     "dev": "fes dev",
-    "test": "fes test:unit"
+    "test": "fes3 test:unit --single-run",
+    "cover": "fes3 test:unit --single-run --coverage",
+    "lint": "eslint -c ./.eslintrc.js --fix  --ext .js,.vue,.fes ./src"
   },
   "keywords": [
     "管理端",
@@ -19,6 +21,8 @@
     ".eslintrc.js",
     ".gitignore",
     "fes.config.js",
+    "karma.config.js",
+    "webpack.config.js",
     "mock.js",
     "package.json",
     "README.md",

packages/fes-template/src/helpers/utils.js

@@ -0,0 +1,8 @@
+export const add = function add(x, y) {
+    return x + y;
+};
+
+
+export const cf = function cf(x, y) {
+    return x * y;
+};

packages/fes-template/test/components/Counter.spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { expect } from 'chai';
-import Counter from '../src/components/Counter.vue';
+import Counter from '@/components/Counter.vue';
 
 describe('Counter.vue', () => {
     it('increments count when button is clicked', async () => {

packages/fes-template/test/helpers/utils.spec.js

@@ -0,0 +1,12 @@
+import { expect } from 'chai';
+import { add, cf } from '@/helpers/utils';
+
+describe('utils.js', () => {
+    it('1+2 = 3', () => {
+        expect(add(1, 2)).to.equal(3);
+    });
+
+    it('1*2 = 2', () => {
+        expect(cf(1, 2)).to.equal(2);
+    });
+});