Merge pull request #466 from ElemeFE/unittest

Unittest

.eslintignore

@@ -3,3 +3,4 @@ fecha.js
 release.sh
 node_modules
 lib
+coverage

.gitignore

@@ -9,3 +9,4 @@ lib
 examples/element-ui
 fe.element/element-ui
 .npmrc
+coverage

.travis.yml

@@ -1,5 +1,20 @@
 sudo: false
 language: node_js
 node_js:
-  - "5"
-script: make dist
+  - 5
+cache:
+  bundler: true
+  directories:
+    - node_modules # NPM packages
+    - travis_phantomjs
+before_install:
+  # Upgrade PhantomJS to v2.1.1.
+  - "export PHANTOMJS_VERSION=2.1.1"
+  - "export PATH=$PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64/bin:$PATH"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then rm -rf $PWD/travis_phantomjs; mkdir -p $PWD/travis_phantomjs; fi"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then wget https://github.com/Medium/phantomjs/releases/download/v$PHANTOMJS_VERSION/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -O $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2; fi"
+  - "if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs; fi"
+  - "phantomjs --version"
+script:
+  - "make dist"
+  - "npm t"

build/config.js

@@ -35,3 +35,27 @@ exports.vue = {
 };
 
 exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date.\js/;
+
+exports.postcss = function(webapck) {
+  return [
+    require('postcss-salad')({
+      browser: ['ie > 8', 'last 2 version'],
+      features: {
+        'partialImport': {
+          addDependencyTo: webapck
+        },
+        'bem': {
+          'shortcuts': {
+            'component': 'b',
+            'modifier': 'm',
+            'descendent': 'e'
+          },
+          'separators': {
+            'descendent': '__',
+            'modifier': '--'
+          }
+        }
+      }
+    })
+  ];
+};

build/cooking.demo.js

@@ -28,29 +28,7 @@ cooking.set({
   sourceMap: true,
   alias: config.alias,
   extends: ['vue2', 'lint'],
-  postcss: function(webapck) {
-    return [
-      require('postcss-salad')({
-        browser: ['ie > 8', 'last 2 version'],
-        features: {
-          'partialImport': {
-            addDependencyTo: webapck
-          },
-          'bem': {
-            'shortcuts': {
-              'component': 'b',
-              'modifier': 'm',
-              'descendent': 'e'
-            },
-            'separators': {
-              'descendent': '__',
-              'modifier': '--'
-            }
-          }
-        }
-      })
-    ];
-  }
+  postcss: config.postcss
 });
 
 cooking.add('loader.md', {

build/cooking.test.js

@@ -0,0 +1,25 @@
+var path = require('path');
+var cooking = require('cooking');
+var config = require('./config');
+var projectRoot = path.resolve(__dirname, '../');
+var ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+cooking.set({
+  entry: './src/index.js',
+  extends: ['vue2'],
+  minimize: false,
+  alias: config.alias,
+  postcss: config.postcss,
+  sourceMap: '#inline-source-map'
+});
+
+cooking.add('vue.loaders.js', 'isparta');
+cooking.add('loader.js.exclude', config.jsexclude);
+cooking.add('preLoader.js', {
+  test: /\.js$/,
+  loader: 'isparta-loader',
+  include: path.resolve(projectRoot, 'src')
+});
+
+cooking.add('plugins.process', new ProgressBarPlugin());
+module.exports = cooking.resolve();

examples/docs/zh-cn/development.md

@@ -25,7 +25,11 @@ npm run bootstrap
 registry=https://registry.npm.taobao.org
 ```
 
-然后再运行 `npm run bootstrap` 安装依赖。
+然后再运行
+
+```shell
+PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs npm run bootstrap
+```
 
 ### 启动开发环境
 

examples/docs/zh-cn/time-picker.md

@@ -127,7 +127,7 @@
   export default {
     data() {
       return {
-        value1: '',
+        value1: '14:30',
         value2: new Date(2016, 9, 10, 18, 40),
         value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
@@ -142,7 +142,8 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 只读 | boolean | — | false |
 | placeholder | 占位内容 | string | — | — |
-| format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
+| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
+| value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |
 | align | 对齐方式 | string | left, center, right | left |
 | picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object | — | {} |
 

package.json

@@ -19,7 +19,9 @@
     "pub:all": "npm run dist:all && lerna publish",
     "build:utils": "babel src/utils --out-dir lib/utils",
     "clean": "rimraf lib && rimraf packages/*/lib",
-    "lint": "eslint src/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet"
+    "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
+    "test:watch": "karma start test/unit/karma.conf.js",
+    "test": "karma start test/unit/karma.conf.js --single-run"
   },
   "repository": {
     "type": "git",
@@ -31,6 +33,7 @@
     "vue",
     "components"
   ],
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/ElemeFE/element/issues"
   },
@@ -50,6 +53,7 @@
     "babel-plugin-syntax-jsx": "^6.8.0",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
     "babel-preset-es2015": "^6.14.0",
+    "chai": "^3.5.0",
     "cheerio": "^0.18.0",
     "cooking": "^1.1.0",
     "cooking-lint": "^0.1.3",
@@ -66,15 +70,30 @@
     "highlight.js": "^9.3.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.22.0",
+    "inject-loader": "^3.0.0-beta2",
+    "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
+    "karma": "^1.3.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.2.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-sinon-chai": "^1.2.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.8.0",
     "lerna": "2.0.0-beta.18",
+    "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
     "markdown-it-container": "^2.0.0",
+    "mocha": "^3.1.1",
+    "phantomjs-prebuilt": "^2.1.13",
     "postcss": "^5.1.2",
     "postcss-loader": "^0.11.1",
     "postcss-salad": "^1.0.5",
     "rimraf": "^2.5.4",
+    "sinon": "^1.17.6",
+    "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
     "theaterjs": "^3.0.0",
     "uppercamelcase": "^1.1.0",

packages/date-picker/src/basic/time-spinner.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="el-time-spinner">
-    {{hours}}
     <div
       @mouseenter="emitSelectRange('hours')"
       @mousewheel="handleScroll('hour')"

packages/date-picker/src/panel/time-select.vue

@@ -9,9 +9,7 @@
           v-for="item in items"
           :class="{ selected: value === item.value, disabled: item.disabled }"
           :disabled="item.disabled"
-          @click="handleClick(item)">
-          {{ item.value }}
-        </div>
+          @click="handleClick(item)">{{ item.value }}</div>
       </div>
     </div>
   </transition>

test/unit/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  }
+}

test/unit/index.js

@@ -0,0 +1,14 @@
+// Polyfill fn.bind() for PhantomJS
+/* eslint-disable no-extend-native */
+Function.prototype.bind = require('function-bind');
+require('packages/theme-default/src/index.css');
+
+// require all test files (files that ends with .spec.js)
+const testsContext = require.context('./specs', true, /\.spec$/);
+testsContext.keys().forEach(testsContext);
+
+// 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 srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
+srcContext.keys().forEach(srcContext);

test/unit/karma.conf.js

@@ -0,0 +1,31 @@
+var webpackConfig = require('../../build/cooking.test');
+
+// no need for app entry during tests
+delete webpackConfig.entry;
+
+module.exports = function(config) {
+  config.set({
+    // to run in additional browsers:
+    // 1. install corresponding karma launcher
+    //    http://karma-runner.github.io/0.13/config/browsers.html
+    // 2. add it to the `browsers` array below.
+    browsers: ['PhantomJS'],
+    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' }
+      ]
+    }
+  });
+};

test/unit/specs/time-picker.spec.js

@@ -0,0 +1,101 @@
+import { createTest } from '../util';
+import TimePicker from 'packages/time-picker';
+import Vue from 'vue';
+
+describe('TimePicker', () => {
+  it('create', () => {
+    const vm = createTest(TimePicker, {
+      placeholder: 'test',
+      readonly: true
+    });
+    expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
+    expect(vm.$el.querySelector('input').getAttribute('readonly')).to.ok;
+  });
+
+  it('format', () => {
+    const vm = createTest(TimePicker, {
+      format: 'HH-mm-ss',
+      value: new Date(2016, 9, 10, 18, 40)
+    });
+    expect(vm.$el.querySelector('input').value).to.equal('18-40-00');
+  });
+
+  it('default value', done => {
+    const vm = createTest(TimePicker, {
+      value: new Date(2016, 9, 10, 18, 40)
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    Vue.nextTick(_ => {
+      const times = vm.picker.$el.querySelectorAll('.active');
+
+      expect(times[0].textContent).to.equal('18');
+      expect(times[1].textContent).to.equal('40');
+      expect(times[2].textContent).to.equal('0');
+      done();
+    });
+  });
+
+  it('select time', done => {
+    const vm = createTest(TimePicker, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    Vue.nextTick(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursElm = list[0];
+      const minutesElm = list[1];
+      const secondsElm = list[2];
+      const hourElm = hoursElm.querySelectorAll('.el-time-spinner__item')[4];
+      const minuteElm = minutesElm.querySelectorAll('.el-time-spinner__item')[36];
+      const secondElm = secondsElm.querySelectorAll('.el-time-spinner__item')[20];
+
+      hourElm.click();
+      minuteElm.click();
+      secondElm.click();
+
+      Vue.nextTick(_ => {
+        const date = vm.picker.currentDate;
+
+        expect(hourElm.classList.contains('active')).to.true;
+        expect(minuteElm.classList.contains('active')).to.true;
+        expect(secondElm.classList.contains('active')).to.true;
+        expect(date.getHours()).to.equal(4);
+        expect(date.getMinutes()).to.equal(36);
+        expect(date.getSeconds()).to.equal(20);
+        done();
+      });
+    });
+  });
+
+  it('selectableRange', done => {
+    const vm = createTest(TimePicker, {
+      pickerOptions: {
+        selectableRange: '18:30:00 - 20:30:00'
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursElm = list[0];
+      const disabledHours = [].slice
+        .call(hoursElm.querySelectorAll('.disabled'))
+        .map(node => Number(node.textContent));
+
+      expect(disabledHours).to.not.include.members([18, 19, 20]);
+      done();
+    }, 500);
+  });
+});

test/unit/specs/time-select.spec.js

@@ -0,0 +1,81 @@
+import { createTest, createVue } from '../util';
+import TimeSelect from 'packages/time-select';
+import Vue from 'vue';
+
+describe('TimeSelect', () => {
+  it('should render correct contents', done => {
+    const vm = createTest(TimeSelect, {
+      pickerOptions: {
+        start: '08:30',
+        step: '00:15',
+        end: '18:30'
+      },
+      placeholder: 'test'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    Vue.nextTick(_ => {
+      expect(vm.picker.start).to.equal('08:30');
+      expect(vm.picker.end).to.equal('18:30');
+      expect(vm.picker.step).to.equal('00:15');
+      expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
+      done();
+    });
+  });
+
+  it('select time', done => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-time-select ref="compo" v-model="value">
+          </el-time-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    Vue.nextTick(_ => {
+      const items = vm.$refs.compo.picker.$el.querySelectorAll('.time-select-item');
+      const target = items[4];
+      const time = target.textContent;
+
+      target.click();
+      Vue.nextTick(_ => {
+        expect(vm.value).to.equal(time);
+        done();
+      });
+    });
+  });
+
+  it('set default value', done => {
+    const vm = createTest(TimeSelect, {
+      value: '14:30'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      expect(input.value).to.equal('14:30');
+      expect(vm.picker.$el.querySelector('.selected')).to.be.ok;
+      expect(vm.picker.$el.querySelector('.selected').textContent).to.equal('14:30');
+      done();
+    }, 500);
+  });
+});

test/unit/util.js

@@ -0,0 +1,48 @@
+import Vue from 'vue/dist/vue';
+import Element from 'main/index.js';
+
+Vue.use(Element);
+
+let id = 0;
+
+const createElm = function() {
+  const elm = document.createElement('div');
+
+  elm.id = 'app' + ++id;
+  document.body.appendChild(elm);
+
+  return elm;
+};
+
+/**
+ * 创建一个 Vue 的实例对象
+ * @param  {Object|String}  Compo   组件配置，可直接传 template
+ * @param  {Boolean=false} mounted 是否添加到 DOM 上
+ * @return {Object} vm
+ */
+exports.createVue = function(Compo, mounted = false) {
+  const elm = createElm();
+
+  if (Object.prototype.toString.call(Compo) === '[object String]') {
+    Compo = { template: Compo };
+  }
+  return new Vue(Compo).$mount(mounted === false ? null : elm);
+};
+
+/**
+ * 创建一个测试组件实例
+ * @link http://vuejs.org/guide/unit-testing.html#Writing-Testable-Components
+ * @param  {Object}  Compo          - 组件对象
+ * @param  {Object}  propsData      - props 数据
+ * @param  {Boolean=false} mounted  - 是否添加到 DOM 上
+ * @return {Object} vm
+ */
+exports.createTest = function(Compo, propsData = {}, mounted = false) {
+  if (propsData === true || propsData === false) {
+    mounted = propsData;
+    propsData = {};
+  }
+  const elm = createElm();
+  const Ctor = Vue.extend(Compo);
+  return new Ctor({ propsData }).$mount(mounted === false ? null : elm);
+};