BDD

Author: csxiaoyaojianxian

13-自动化测试&mock数据/README.md

@@ -6,24 +6,35 @@
 2. jest
 
 ## 2. TDD (Test-Driven Development) 测试驱动开发
+多用于单元测试
+1. 先写测试再写代码
+2. 一般结合单元测试使用，是白盒测试
+3. 重点在测试代码
+4. 安全感低
+5. 速度快
 
-`Red-Green Development`
+比如此案例用 "shallowMount"
 
+`Red-Green Development`
 1. 编写测试用例
 2. 运行测试，测试用例无法通过测试
 3. 编写代码，使测试用例通过测试
 4. 优化代码，完成开发
 5. 重复上述步骤
 
 **优势：**
-
 1. 长期减少回归BUG
 2. 代码质量更好（组织、可维护性）
 3. 测试覆盖率高
 4. 错误测试代码不容易出现
 
 
 ## 3. BDD (Behavior Driven Development) 行为驱动开发
-
-
-
+多用于集成测试
+1. 先写代码再写测试
+2. 一般结合集成测试使用，是黑盒测试
+3. 测试重点在 UI（DOM）
+4. 安全感高
+5. 速度慢
+
+比如此案例用 "mount"

13-自动化测试&mock数据/jest-vue/README.md

@@ -6,4 +6,7 @@ testPathIgnorePatterns
 
 修复eslint语法
 
-npm run lint --fix
+npm run lint --fix
+
+## 配置 vuex
+npm install vuex --save

13-自动化测试&mock数据/jest-vue/package-lock.json

@@ -7,11 +7,13 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit --watch",
+    "test:integration": "vue-cli-service test:unit --watch",
     "test:cov": "vue-cli-service test:unit --coverage"
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

13-自动化测试&mock数据/jest-vue/package.json

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { findTestWrapper } from '@/utils/testUtils'
+import TodoList from '@/containers/TodoList/TodoList'
+import store from '@/store'
+
+it(`
+  1. 用户会在 header 输入框输入内容
+  2. 用户会点击回车按钮
+  3. 列表项应该增加用户输入内容的列表项
+`, () => {
+  // 不能用 shallowMount 渲染，shallowMount 用于单元测试
+  // const wrapper = shallowMount(TodoList)
+  // 此处要使用 mount 渲染组件树
+  const wrapper = mount(TodoList, { store }) // 传入 store
+  const inputElem = findTestWrapper(wrapper, 'header-input').at(0)
+  const content = 'csxiaoyao'
+  inputElem.setValue(content)
+  inputElem.trigger('change')
+  inputElem.trigger('keyup.enter')
+  const listItems = findTestWrapper(wrapper, 'list-item')
+  expect(listItems.length).toBe(1)
+  // 因为会包含 '-' 删除按钮
+  expect(listItems.at(0).text()).toContain(content)
+})