Unit testing (#155)：自动化测试

* feat: 单元测试 LIcon组件

* feat:自动化测试

* fix:更新travis node版本

Author: GongJS

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - "10"
+addons:
+  chrome: stable
+sudo: required
+before_script:
+  - "sudo chown root /opt/google/chrome/chrome-sandbox"
+  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
+script: npm run test:unit

jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    'jest-serializer-vue'
+  ],
+  testMatch: [
+    '**/tests/unit/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  testURL: 'http://localhost/',
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ]
+}

package.json

@@ -6,10 +6,11 @@
     "serve": "node script/plugin-get-config.js && vue-cli-service serve",
     "build": "node script/plugin-get-config.js && vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "plugin-new": "node script/plugin-new.js",
+    "commitizen": "commitizen init cz-conventional-changelog --save-dev --save-exact",
     "plugin-init": "node script/plugin-init.js",
+    "plugin-new": "node script/plugin-new.js",
     "plugin-reconfig": "node script/plugin-get-config.js",
-    "commitizen": "commitizen init cz-conventional-changelog --save-dev --save-exact"
+    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -29,9 +30,13 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",
     "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-plugin-unit-jest": "^3.7.0",
     "@vue/cli-service": "^3.4.0",
     "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
     "babel-plugin-component": "^1.1.1",
     "chalk": "^2.4.2",
     "child_process": "^1.0.2",

src/config/index.js

@@ -1,10 +0,0 @@
-const Config = {
-  baseUrl: 'http://dev.koa.7yue.pro/',
-  stagnateTime: 1 * 60 * 60 * 1000, // 无操作停滞时间  默认1小时
-  openAutoJumpOut: true, // 是否开启无操作跳出
-  notLoginRoute: ['login'], // 无需登录即可访问的路由 name,
-  sideBarLevel: 3, // 侧边栏层级限制, 3表示三级, 可设置 2 和 3
-  defaultRoute: '/about', // 默认打开的路由
-}
-
-export default Config

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

tests/unit/LIcon.test.js

@@ -0,0 +1,44 @@
+import {  mount } from '@vue/test-utils'
+import LIcon from '@/components/base/icon/lin-icon.vue'
+
+describe('LIcon', () => {
+  let wrapper, vm;
+  beforeEach(() => {
+    wrapper = mount(LIcon);
+    vm = wrapper.vm
+  });
+  it('Icon.vue', () => {
+    mount(LIcon)
+    expect(LIcon).toBe.ok
+  })
+  it('可以设置 name', () => {
+    wrapper.setProps({ name: 'loading' })
+    const elements = vm.$el.querySelectorAll('use')
+    expect(elements.length).toBe(1)
+    expect(elements[0].getAttribute('xlink:href')).toBe('#icon-loading')
+  })
+  it('可以设置 color', () => {
+    wrapper.setProps({ color: '#ccc' })
+    const elements = vm.$el.querySelectorAll('use')
+    expect(elements.length).toBe(1)
+    expect(elements[0].getAttribute('fill')).toBe('#ccc')
+  })
+  it('可以设置 width', () => {
+    wrapper.setProps({ width: '30px' })
+    expect(wrapper.find('svg').element.style.width).toBe('30px')
+  })
+  it('可以设置 height', () => {
+    wrapper.setProps({ height: '30px' })
+    expect(wrapper.find('svg').element.style.height).toBe('30px')
+  })
+  it('综合测试', () => {
+    wrapper.setProps({ name: 'loading',color: '#ccc', width: '30px', height: '30px' })
+    const elements = vm.$el.querySelectorAll('use')
+    expect(elements.length).toBe(1)
+    expect(elements[0].getAttribute('xlink:href')).toBe('#icon-loading')
+    expect(elements[0].getAttribute('fill')).toBe('#ccc')
+    expect(wrapper.find('svg').element.style.height).toBe('30px')
+    expect(wrapper.find('svg').element.style.width).toBe('30px')
+    vm.$destroy()
+  })
+})