support karma

README.md

@@ -9,7 +9,9 @@
 
 小程序自定义组件测试工具集。
 
-目前因为小程序独特的运行环境，所以对于小程序自定义组件的单元测试一直没有比较优雅的解决方案，此工具集就是为了解决此痛点而诞生的。将原本小程序自定义组件双线程运行的机制调整成单线程运行，使用 jsdom 来模拟 dom 接口进而进行 dom 树的渲染，借此来完成整个自定义组件树的搭建。
+目前因为小程序独特的运行环境，所以对于小程序自定义组件的单元测试一直没有比较优雅的解决方案，此工具集就是为了解决此痛点而诞生的。将原本小程序自定义组件双线程分离运行的机制调整成单线程模拟运行，利用 dom 环境进行渲染，借此来完成整个自定义组件树的搭建。
+
+运行此工具集需要依赖 js 运行环境和 dom 环境，因此可以采用 jsdom + nodejs（如 jest），也可以采用真实浏览器环境（如 karma）。文档[使用简介](./docs/tutorial.md) 中会提供简单的使用方式介绍。
 
 ## 安装
 

docs/tutorial.md

@@ -1,3 +1,69 @@
+# 框架选择
+
+可搭配大部分流行框架使用，只要其满足 js 运行环境和 dom 环境即可。以下简单介绍下 jest 和 karma：
+
+## jest
+
+jest 是直接在 nodejs 环境进行测试，使用 jsdom 进行 dom 环境的模拟。在使用时需要将 jest 的 `testEnvironment` 配置为 `jsdom`。
+
+> jest 内置 jsdom，所有不需要额外引入。
+
+## karma
+
+karma 可使用浏览器真实环境来运行测试用例，但是因为小程序自定义组件的文件是割裂的，而浏览器环境没有文件系统支持，因此需要做一些特殊处理。
+
+安装 preprocessor：
+
+```
+npm install --save-dev karma-dirname-preprocessor karma-filemap-preprocessor karma-webpack
+```
+
+配置 karma.conf.js 中的 files、preprocessors、webpack 字段：
+
+```js
+module.exports = function(config) {
+    config.set({
+        // 其他配置 ......
+        files: [
+            'node_modules/miniprogram-simulate/build.js', // miniprogram-simulate
+            'test/spec/*.spec.js', // 测试用例
+            'src/component/*', // 组件文件
+        ],
+        preprocessors: {
+            'src/component/*': ['filemap'], // 组件文件使用 filemap 将各个文件内容注入到浏览器
+            'test/spec/*.spec.js': ['webpack', 'dirname'], // 使用 webpack 进行打包，使用 dirname 处理测试用例中的 __dirname 变量
+        },
+        webpack: {
+            optimization: {
+                minimize: false, // 不做压缩，方便调试
+            },
+            node: {
+                __dirname: false, // 不注入 __dirname，由 preprocessor 来处理
+            },
+        },
+        // 其他配置 ......
+    })
+}
+```
+
+然后测试用例如下方式来编写（以使用 mocha + chai 的方式为例）：
+
+```js
+const path = require('path')
+const expect = require('chai').expect
+
+describe('component', () => {
+    it ('should run successfully', () => {
+        const id = simulate.load(path.resolve(__dirname, '../src/component/index'))
+        const comp = simulate.render(id, {prop: 'index.test.properties'})
+
+        comp.attach(document.body) // 挂载在 body 下面
+
+        expect(simulate.match(comp.dom, '<wx-view class="main--index">index.test.properties</wx-view>')).to.equal(true)
+    })
+})
+```
+
 # 使用指南
 
 以下均以 miniprogram-simulate + jest 的方式来介绍。

docs/update.md

@@ -29,4 +29,8 @@
 
 * setData 的回调、事件监听器改为异步触发，以模拟更真实的情况
 
+## 0.2.0
+
+* 支持接入 karma 测试（浏览器环境）
+
 ## next version

index.js

@@ -1 +1 @@
-module.exports = require('./src');
+module.exports = require('./src')

karma.conf.js

@@ -0,0 +1,90 @@
+// Karma configuration
+// Generated on Fri Jan 11 2019 20:11:14 GMT+0800 (CST)
+
+const path = require('path')
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+        './build.js',
+        'test/spec/*.spec.js',
+        'test/comp1/*',
+        'test/comp2/*',
+        'test/comp3/*',
+        'test/comp4/*',
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+        'test/comp1/*': ['filemap'],
+        'test/comp2/*': ['filemap'],
+        'test/comp3/*': ['filemap'],
+        'test/comp4/*': ['filemap'],
+        'test/spec/*.spec.js': ['webpack', 'dirname'],
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity,
+
+    webpack: {
+        optimization: {
+            minimize: false,
+        },
+        node: {
+            __dirname: false,
+        },
+    },
+  })
+}

package.json

@@ -1,12 +1,14 @@
 {
   "name": "miniprogram-simulate",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "tools for miniprogram custom component unit test",
   "main": "index.js",
   "scripts": {
-    "test": "jest ./test/* --silent --bail",
-    "coverage": "jest ./test/* --coverage --bail",
-    "codecov": "jest ./test/* --coverage && codecov",
+    "build": "webpack",
+    "karma": "karma start",
+    "test": "jest ./test/**/*.test.js --silent --bail",
+    "coverage": "jest ./test/**/*.test.js --coverage --bail",
+    "codecov": "jest ./test/***/*.test.js --coverage && codecov",
     "lint": "eslint \"src/**/*.js\" --fix"
   },
   "jest": {
@@ -32,13 +34,24 @@
   "author": "wechat-miniprogram",
   "license": "MIT",
   "devDependencies": {
+    "chai": "^4.2.0",
     "codecov": "^3.1.0",
     "eslint": "^5.12.0",
     "eslint-config-airbnb-base": "13.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^3.8.0",
-    "jest": "^23.6.0"
+    "jest": "^23.6.0",
+    "karma": "^3.1.4",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-dirname-preprocessor": "0.0.4",
+    "karma-filemap-preprocessor": "0.0.2",
+    "karma-mocha": "^1.3.0",
+    "karma-webpack": "^3.0.5",
+    "mocha": "^5.2.0",
+    "webpack": "^4.28.4",
+    "webpack-cli": "^3.2.1"
   },
   "dependencies": {
     "csso": "^3.5.1",

src/api/data.js

@@ -1,8 +1,9 @@
+/* global localStorage */
 const _ = require('./utils')
 
 module.exports = {
   clearStorage(options) {
-    const res = { errMsg: 'clearStorage:ok' }
+    const res = {errMsg: 'clearStorage:ok'}
     try {
       wx.clearStorageSync()
     } catch (err) {
@@ -15,7 +16,7 @@ module.exports = {
     localStorage.clear()
   },
   getStorage(options) {
-    const res = { errMsg: 'getStorage:ok' }
+    const res = {errMsg: 'getStorage:ok'}
     try {
       res.data = wx.getStorageSync(options.key)
     } catch (err) {
@@ -28,7 +29,7 @@ module.exports = {
     return JSON.parse(localStorage.getItem(key))
   },
   getStorageInfo(options) {
-    let res = { errMsg: 'getStorageInfo:ok' }
+    let res = {errMsg: 'getStorageInfo:ok'}
     try {
       const data = wx.getStorageInfoSync()
       res = Object.assign(res, data)
@@ -56,7 +57,7 @@ module.exports = {
     }
   },
   removeStorage(options) {
-    const res = { errMsg: 'removeStorage:ok' }
+    const res = {errMsg: 'removeStorage:ok'}
     try {
       wx.removeStorageSync(options.key)
     } catch (err) {
@@ -69,7 +70,7 @@ module.exports = {
     localStorage.removeItem(key)
   },
   setStorage(options) {
-    const res = { errMsg: 'setStorage:ok' }
+    const res = {errMsg: 'setStorage:ok'}
     try {
       wx.setStorageSync(options.key, options.data)
     } catch (err) {

src/api/index.js

@@ -187,7 +187,7 @@ module.exports = {
 
   // media
   // TOOD
-  
+
   // file
   // TODO
 
@@ -217,27 +217,27 @@ module.exports = {
     })
   },
   openLocation: _.mockAsync('openLocation'),
-  
+
   // device
   // TODO
-  
+
   // open
   ...openApi,
 
   // update
   getUpdateManager() {
     return new UpdateManager()
   },
-  
+
   // worker
   // TODO
-  
+
   // report
   reportMonitor: _.mockSync(null),
-  
+
   // miniprogram
   // TODO
-  
+
   // base
   canIUse: _.mockSync(true),