From 678b5832f75b3cd6e58bebcf23a78cde11321168 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 12 Jul 2018 12:08:07 +0800
Subject: [PATCH] init

---
 .babelrc                                 | 14 +++++++++++-
 .eslintrc.js                             |  1 +
 .gitignore                               |  1 +
 jest.config.js                           | 22 +++++++++++++++++++
 package.json                             |  7 +++++-
 src/components/Counter.vue               | 17 +++++++++++++++
 src/components/Hamburger/index.vue       |  9 ++++----
 src/views/layout/components/Navbar.vue   |  2 +-
 tests/unit/components/Breadcrumb.spec.js | 24 +++++++++++++++++++++
 tests/unit/components/Counter.spec.js    | 24 +++++++++++++++++++++
 tests/unit/components/Hamburger.spec.js  | 27 ++++++++++++++++++++++++
 tests/unit/sum.js                        |  4 ++++
 tests/unit/sum.spec.js                   |  6 ++++++
 13 files changed, 151 insertions(+), 7 deletions(-)
 create mode 100644 jest.config.js
 create mode 100644 src/components/Counter.vue
 create mode 100644 tests/unit/components/Breadcrumb.spec.js
 create mode 100644 tests/unit/components/Counter.spec.js
 create mode 100644 tests/unit/components/Hamburger.spec.js
 create mode 100644 tests/unit/sum.js
 create mode 100644 tests/unit/sum.spec.js

diff --git a/.babelrc b/.babelrc
index a2a380f..e108b1b 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,5 +8,17 @@
     }],
     "stage-2"
   ],
-  "plugins":["transform-vue-jsx", "transform-runtime"]
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": [
+        ["env", {
+          "targets": {
+            "node": "current"
+          }
+        }]
+      ]
+    }
+  }
 }
+
diff --git a/.eslintrc.js b/.eslintrc.js
index 54790a4..1fd443f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     browser: true,
     node: true,
     es6: true,
+    jest: true
   },
   extends: 'eslint:recommended',
   // required to lint *.vue files
diff --git a/.gitignore b/.gitignore
index 78a0ead..851d2cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+tests/coverage/
 
 # Editor directories and files
 .idea
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..7a250ed
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
+  ],
+  // collectCoverageFrom: ['src/utils/**/*.{js,vue}'],
+  'coverageDirectory': './tests/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ]
+}
diff --git a/package.json b/package.json
index a14328b..0496375 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "build": "node build/build.js",
     "build:report": "npm_config_report=true node build/build.js",
     "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint"
+    "test": "jest"
   },
   "dependencies": {
     "axios": "0.17.1",
@@ -23,10 +23,12 @@
     "vuex": "3.0.1"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.20",
     "autoprefixer": "7.2.3",
     "babel-core": "6.26.0",
     "babel-eslint": "8.0.3",
     "babel-helper-vue-jsx-merge-props": "2.0.3",
+    "babel-jest": "^23.4.0",
     "babel-loader": "7.1.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-runtime": "6.23.0",
@@ -45,6 +47,8 @@
     "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
+    "jest": "^23.4.0",
+    "jest-serializer-vue": "^2.0.2",
     "node-notifier": "5.1.2",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "3.2.0",
@@ -61,6 +65,7 @@
     "uglifyjs-webpack-plugin": "1.1.3",
     "url-loader": "0.6.2",
     "vue-loader": "13.7.2",
+    "vue-jest": "^2.6.0",
     "vue-style-loader": "3.0.3",
     "vue-template-compiler": "2.5.10",
     "webpack": "3.10.0",
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
new file mode 100644
index 0000000..0fff10f
--- /dev/null
+++ b/src/components/Counter.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>Count: {{ counter }}</h1>
+
+    <button @click="counter++" jest="increment-button">+1</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      counter: 0
+    }
+  }
+}
+</script>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index fbdf72c..4ff0165 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -19,10 +19,11 @@ export default {
     isActive: {
       type: Boolean,
       default: false
-    },
-    toggleClick: {
-      type: Function,
-      default: null
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
     }
   }
 }
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index eb36b1a..e188315 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
-    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <hamburger class="hamburger-container" @toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
     <breadcrumb></breadcrumb>
     <el-dropdown class="avatar-container" trigger="click">
       <div class="avatar-wrapper">
diff --git a/tests/unit/components/Breadcrumb.spec.js b/tests/unit/components/Breadcrumb.spec.js
new file mode 100644
index 0000000..5b63d0e
--- /dev/null
+++ b/tests/unit/components/Breadcrumb.spec.js
@@ -0,0 +1,24 @@
+// import { shallowMount } from '@vue/test-utils'
+// import Breadcrumb from '@/components/Breadcrumb.vue'
+
+// describe('Breadcrumb.vue', () => {
+//   const wrapper = shallowMount(Breadcrumb)
+
+//   it('toggle', () => {
+//     expect(wrapper.vm.counter).toBe(0)
+//     wrapper.find('[jest="increment-button"]').trigger('click')
+//     expect(wrapper.vm.counter).toBe(1)
+//   })
+
+//   // it('渲染正确', () => {
+//   //   expect(wrapper.html()).toContain('<span class="count">0</span>')
+//   // })
+
+//   it('是一个按钮', () => {
+//     expect(wrapper.contains('button')).toBe(true)
+//   })
+
+//   // it('snapshot test', () => {
+//   //   expect(wrapper.element).toMatchSnapshot()
+//   // })
+// })
diff --git a/tests/unit/components/Counter.spec.js b/tests/unit/components/Counter.spec.js
new file mode 100644
index 0000000..f03588a
--- /dev/null
+++ b/tests/unit/components/Counter.spec.js
@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import Counter from '@/components/Counter.vue'
+
+describe('test Counter.vue', () => {
+  const wrapper = shallowMount(Counter)
+
+  it('increments counter', () => {
+    expect(wrapper.vm.counter).toBe(0)
+    wrapper.find('[jest="increment-button"]').trigger('click')
+    expect(wrapper.vm.counter).toBe(1)
+  })
+
+  // it('渲染正确', () => {
+  //   expect(wrapper.html()).toContain('<span class="count">0</span>')
+  // })
+
+  it('是一个按钮', () => {
+    expect(wrapper.contains('button')).toBe(true)
+  })
+
+  // it('snapshot test', () => {
+  //   expect(wrapper.element).toMatchSnapshot()
+  // })
+})
diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js
new file mode 100644
index 0000000..a9db80d
--- /dev/null
+++ b/tests/unit/components/Hamburger.spec.js
@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils'
+import Hamburger from '@/components/Hamburger/index.vue'
+
+describe('Hamburger.vue', () => {
+  it('toggle click', () => {
+    const wrapper = shallowMount(Hamburger)
+
+    const mockFn = jest.fn()
+    wrapper.vm.$on('toggleClick', mockFn)
+
+    // 触发按钮的点击事件
+    wrapper.find('.hamburger').trigger('click')
+    expect(mockFn).toBeCalled()
+  })
+
+  // it('渲染正确', () => {
+  //   expect(wrapper.html()).toContain('<span class="count">0</span>')
+  // })
+
+  // it('是一个按钮', () => {
+  //   expect(wrapper.contains('button')).toBe(true)
+  // })
+
+  // it('snapshot test', () => {
+  //   expect(wrapper.element).toMatchSnapshot()
+  // })
+})
diff --git a/tests/unit/sum.js b/tests/unit/sum.js
new file mode 100644
index 0000000..44b6e3a
--- /dev/null
+++ b/tests/unit/sum.js
@@ -0,0 +1,4 @@
+function sum(a = 1, b = 1) {
+  return a + b
+}
+module.exports = sum
diff --git a/tests/unit/sum.spec.js b/tests/unit/sum.spec.js
new file mode 100644
index 0000000..fa4db83
--- /dev/null
+++ b/tests/unit/sum.spec.js
@@ -0,0 +1,6 @@
+import sum from './sum'
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3)
+})
+