diff --git a/.editorconfig b/.editorconfig
index 492fca883..39cb692c8 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -16,7 +16,7 @@ indent_size = 2
 [*.vue]
 indent_size = 2
 
-[*.pcss]
+[*.css]
 indent_size = 2
 
 [Makefile]
diff --git a/.eslintrc.js b/.eslintrc.js
index 84db110c0..ba6d577fe 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,34 +1,148 @@
 module.exports = {
-  root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true
+    },
     sourceType: 'module'
   },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'semi': ['error', 'always'],
-    'space-before-function-paren': ['error', 'never'],
-    'no-useless-escape': 0,
-    'no-extra-boolean-cast': 0,
-    'no-new': 0
+
+  env: {
+    es6: true,
+    node: true
   },
-  "globals": {
-    "zanui": true,
-    "location": true,
-    "Swiper": true,
-    "wysihtml5": true,
-    "wysihtml5ParserRules": true
+
+  plugins: ['vue'],
+
+  globals: {
+    expect: true,
+    sinon: true,
+    zanui: true,
+    document: false,
+    navigator: false,
+    window: false
+  },
+
+  env: {
+    mocha: true
+  },
+
+  rules: {
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, { 'before': true, 'after': true }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
+    'camelcase': [2, { 'properties': 'always' }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, { 'before': false, 'after': true }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': [2, 'allow-null'],
+    'generator-star-spacing': [2, { 'before': true, 'after': true }],
+    'handle-callback-err': [2, '^(err|error)$' ],
+    'indent': [2, 2, { 'SwitchCase': 1 }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
+    'keyword-spacing': [2, { 'before': true, 'after': true }],
+    'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 2,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, { 'max': 1 }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, { 'initialized': 'never' }],
+    'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
+    'semi': [2, 'always'],
+    'semi-spacing': [2, { 'before': false, 'after': true }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
+    'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
+    'array-bracket-spacing': [2, 'never'],
+    'vue/jsx-uses-vars': 2
   }
 }
diff --git a/.gitignore b/.gitignore
index 4c1cab8de..cec8de443 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ lib/*
 node_modules
 example/dist
 dist
+test/unit/coverage
diff --git a/Makefile b/Makefile
index ab0038d6a..1a6b62bb1 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,4 @@
+.PHONY: test
 usage = "\
 Usage:                       make <option> \n\n\
 init componentname           初始化一个新组件，请忽视makefile的报错  \n\n\
@@ -12,3 +13,6 @@ init:
 
 dev:
 	npm run dev
+
+test:
+	npm run test
diff --git a/package.json b/package.json
index f5f08aee5..a45d243a3 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,10 @@
     "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
     "builddocs": "webpack --progress --hide-modules --config  build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
     "clean": "rimraf lib && rimraf packages/*/lib",
-    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
+    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet",
+    "test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
+    "test:watch": "karma start test/unit/karma.conf.js",
+    "coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p  | xargs -I {} open {}  "
   },
   "repository": {
     "type": "git",
@@ -39,6 +42,7 @@
     "vue": "^2.1.8"
   },
   "devDependencies": {
+    "2webpack2": "^1.2.1",
     "autoprefixer": "^6.7.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.17.0",
@@ -63,6 +67,7 @@
     "eslint-plugin-html": "^1.3.0",
     "eslint-plugin-promise": "^1.0.8",
     "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-vue": "^2.0.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
@@ -78,6 +83,8 @@
     "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
     "lerna": "2.0.0-beta.31",
     "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
@@ -100,6 +107,7 @@
     "postcss-utils": "^1.0.1",
     "precss": "^1.4.0",
     "prismjs": "^1.5.1",
+    "progress-bar-webpack-plugin": "^1.9.3",
     "rimraf": "^2.5.4",
     "run-sequence": "^1.2.2",
     "saladcss-bem": "^0.0.1",
diff --git a/test/unit/creater.js b/test/unit/creater.js
new file mode 100644
index 000000000..e35013380
--- /dev/null
+++ b/test/unit/creater.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+let id = 0;
+
+class Creater {
+  constructor(Compo, propsData) {
+    let Ctor = Vue.extend(Compo);
+    this.vue = new Ctor({ propsData });
+    this.el = null;
+  }
+
+  mount() {
+    const elem = exports.createElm();
+    this.vue.$mount(elem);
+    this.el = this.vue.$el;
+  }
+
+  triggerEvent(name, ...opts) {
+    let eventName;
+    let elem = this.el;
+
+    if (/^mouse|click/.test(name)) {
+      eventName = 'MouseEvents';
+    } else if (/^key/.test(name)) {
+      eventName = 'KeyboardEvent';
+    } else {
+      eventName = 'HTMLEvents';
+    }
+    const evt = document.createEvent(eventName);
+
+    evt.initEvent(name, ...opts);
+    elem.dispatchEvent
+      ? elem.dispatchEvent(evt)
+      : elem.fireEvent('on' + name, evt);
+
+    return elem;
+  }
+
+  destroy() {
+    this.el &&
+    this.el.parentNode &&
+    this.el.parentNode.removeChild(this.el);
+  }
+}
+
+exports.createElm = function() {
+  const elm = document.createElement('div');
+
+  elm.id = 'app' + ++id;
+  document.body.appendChild(elm);
+
+  return elm;
+};
+
+exports.createVue = function(Compo, propsData = {}) {
+  return new Creater(Compo, propsData);
+};
diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js
new file mode 100644
index 000000000..e7a38aacc
--- /dev/null
+++ b/test/unit/get-webpack-conf.js
@@ -0,0 +1,132 @@
+const path = require('path');
+const to2 = require('2webpack2');
+// const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const getPostcssPlugin = require('../../build/utils/postcss_pipe');
+
+let webpackConfig = {
+  output: {
+    path: path.resolve(process.cwd(), 'dist'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js'
+  },
+  plugins: [
+    new ProgressBarPlugin()
+  ],
+  postcss: getPostcssPlugin,
+  resolve: {
+    extensions: [
+      '',
+      '.js',
+      '.json',
+      '.vue'
+    ],
+    alias: {
+      src: path.resolve(process.cwd(), 'src'),
+      packages: path.resolve(process.cwd(), 'packages'),
+      examples: path.resolve(process.cwd(), 'examples'),
+      vue$: 'vue/dist/vue.common.js'
+    }
+  },
+  resolveLoader: {},
+  module: {
+    loaders: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: path.resolve(process.cwd()),
+        exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
+        loaders: [
+          'babel-loader'
+        ]
+      },
+      {
+        test: /\.json$/,
+        loaders: [
+          'json-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        loaders: [
+          'style-loader',
+          'css-loader',
+          'postcss-loader'
+        ]
+      },
+      {
+        test: /\.html$/,
+        loaders: [
+          'html-loader?minimize=false'
+        ]
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: 'static/[name].[hash:7].[ext]'
+        }
+      },
+      {
+        test: /\.vue$/,
+        loaders: [
+          'vue-loader'
+        ]
+      }
+    ],
+    preLoaders: [
+      {
+        test: /\.js$/,
+        loader: 'isparta',
+        exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
+        include: /src|packages/
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.vue$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      }
+    ],
+    postLoaders: []
+  },
+  devtool: '#inline-source-map',
+  vue: {
+    loaders: {
+      css: 'vue-style-loader!css-loader?sourceMap',
+      less: 'vue-style-loader!css-loader?sourceMap!less-loader?sourceMap',
+      sass: 'vue-style-loader!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
+      scss: 'vue-style-loader!css-loader?sourceMap!sass-loader?sourceMap',
+      stylus: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
+      styl: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
+      js: 'isparta-loader!eslint-loader'
+    },
+    preserveWhitespace: false
+  },
+  eslint: {
+    emitWarning: true
+  }
+};
+
+module.exports = to2(webpackConfig, {quiet: true, context: true});
diff --git a/test/unit/index.js b/test/unit/index.js
new file mode 100644
index 000000000..2ec49224c
--- /dev/null
+++ b/test/unit/index.js
@@ -0,0 +1,11 @@
+require('packages/zanui-css/src/index.css');
+
+// require all test files (files that ends with .spec.js)
+const testsReq = require.context('./specs', true, /\.spec$/);
+testsReq.keys().forEach(testsReq);
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcReq = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
+srcReq.keys().forEach(srcReq);
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
new file mode 100644
index 000000000..ab02fe3d7
--- /dev/null
+++ b/test/unit/karma.conf.js
@@ -0,0 +1,25 @@
+var webpackConfig = require('./get-webpack-conf');
+
+module.exports = function(config) {
+  config.set({
+    browsers: ['Chrome'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage'],
+    files: ['./index.js'],
+    preprocessors: {
+      './index.js': ['webpack', 'sourcemap']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' }
+      ]
+    },
+    singleRun: false
+  });
+};
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
new file mode 100644
index 000000000..176d69ead
--- /dev/null
+++ b/test/unit/specs/switch.spec.js
@@ -0,0 +1,83 @@
+import Switch from 'packages/switch';
+import { createVue } from '../creater';
+
+describe('Switch', () => {
+  let vm;
+  afterEach(() => {
+    vm && vm.destroy();
+  });
+
+  it('create', () => {
+    vm = createVue(Switch, {
+      checked: true
+    });
+    vm.mount();
+
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--on')).to.true;
+  });
+
+  it('create off switch', () => {
+    vm = createVue(Switch, {
+      checked: false
+    });
+    vm.mount();
+
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+  });
+
+  it('switch click default', done => {
+    vm = createVue({
+      data() {
+        return {
+          checked: false
+        };
+      },
+      components: {
+        'zan-switch': Switch
+      },
+      template: `
+        <zan-switch :checked="checked"></zan-switch>
+      `
+    });
+    vm.mount();
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--off')).to.true;
+    vm.el.click();
+
+    setTimeout(() => {
+      expect(vm.el.classList.contains('zan-switch--off')).to.true;
+      done();
+    });
+  });
+
+  it('switch click', done => {
+    vm = createVue({
+      data() {
+        return {
+          checked: false
+        };
+      },
+      components: {
+        'zan-switch': Switch
+      },
+      template: `
+        <zan-switch :checked="checked" :onChange="handleClick"></zan-switch>
+      `,
+      methods: {
+        handleClick(e) {
+          this.checked = !this.checked;
+        }
+      }
+    });
+    vm.mount();
+    expect(vm.el.classList.contains('zan-switch')).to.true;
+    expect(vm.el.classList.contains('zan-switch--off')).to.true;
+    vm.el.click();
+
+    setTimeout(() => {
+      expect(vm.el.classList.contains('zan-switch--on')).to.true;
+      done();
+    });
+  });
+});