Update 2.vue单元测试和组件通信(石瑶).md

2.vue单元测试和组件通信(石瑶).md

--- "a/2.vue\345\215\225\345\205\203\346\265\213\350\257\225\345\222\214\347\273\204\344\273\266\351\200\232\344\277\241(\347\237\263\347\221\266).md"
+### 主题
+### 主题
+Vue单元测试和组件通信
+
+
+#### 单元测试
+
+基于 vue-cli 3.0 的脚手架，然后 vue create name 创建一个文件名。推荐使用自己配置
+
+测试框架选 mocha + chai 断言库 jest（我没有用过） 不需要手动引入断言库。
+
+
+```
+.
+├── build                                       // webpack配置文件
+├── src                                         // 源码目录
+│  ├── components                               // 组件
+│    
+│── test
+│   ├── specs								    // 测试脚本目录
+│   |   ├──  HelloWorld.spec.js				    // 测试脚本 需要将测试代码放在这里
+|   |   |
+|   |   |
+├── index.html                                  // 入口html文件
+.
+
+```
+
+
+#### 测试脚本代码
+
+假设有这样的Vue代码
+
+```
+<template>
+  <div>{{msg}}</div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  
+  props: {
+    msg: String
+  },
+  
+  data () {
+    return {
+      name: 'name'
+    }
+  }，
+  
+  methods: {
+    setName(name) {
+      this.name = name;
+    }
+  }
+}
+</script>
+
+```
+
+
+
+
+
+测试脚本里面包含一个或多个describe块 称为测试套件
+
+```
+import Vue from 'vue';
+import HelloWorld from '@/component/HelloWorld.vue';
+
+// data 属性
+describe('HelloWorld.vue', () => {
+  const Cotr = Vue.extend(HelloWorld);
+  // 一个测试套件里面包含一个或多个it块 称为测试用例 
+  it('renders props.msg when passed', () => {
+    const vm = new Cotr().$mount();
+    expect(vm.name).to.equal('name');
+  });
+    
+  // methods 方法  
+  it('给setMessage方法设置参数', () => {
+    vm.setName('张三')
+    expect(vm.name).to.equal('张三')
+  });
+  
+  it('测试data数据', () => {
+    const Cotr = Vue.extend(HelloWorld)
+    const propData = { msg: 'hello' }
+    const vm = new Cotr({ propsData: propData }).$mount()
+
+    expect(vm.$el.textContent).to.equal('hello')
+    
+  })
+  
+  // 异步更新
+  it('异步更新', done => {
+    const vm = new Cotr().$mount();
+    vm.msg = 'hello vue'
+    Vue.nextTick(_ => {
+      expect(vm.$el.textContent).to.equal('hello vue')
+    })
+    done()
+  })
+  
+});
+
+
+
+```
\ No newline at end of file