如何测试不通过就阻止代码git提交
安装husky：cnpm i husky --save
配置husky，在package.json
"husky": { "hooks": { "pre-commit": "npm test", "pre-push": "npm test", "...": "..." } }
当然这是文档的，我们要按我们所需的改成
"husky": { "hooks": { "pre-commit": "npm run test:unit" } }
代表再提交（commit）前先执行npm run test:unit
??验证：
修改测试代码文件kaikeba.spec.js
由
it('测试新建完毕后，create生命周期后的数据',() => {//created let vm = new Vue(KaiKeBaComp).$mount() expect(vm.msg).toBe('aftermounted') })
改为
it('测试新建完毕后，create生命周期后的数据',() => {//created let vm = new Vue(KaiKeBaComp).$mount() expect(vm.msg).toBe('aftermounted1') })
这样测试肯定是不通过的
这时，我们来提交代码，add后再commit
那么我们再将测试文件改回来，让测试可以通过
如图：测试通过，代码也commit提交了
E2E测试
e2e针对应用，站在测试人员的角度，没有什么mount 加载，只有按钮 页面，输入框，文本等
借⽤浏览器器的能力，站在⽤户测试⼈员的角度，输⼊框，点击按钮等，完全模拟用户，这个和具体的框架关系不大，完全模拟浏览器行为
?将views下的Home组件的
<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>
代码恢复
?看看tests目录下e2e目录下的spec下的test.js，有这么一段
// https://docs.cypress.io/api/introduction/api.html describe('My First Test', () => { it('Visits the app root url', () => { cy.visit('/') cy.contains('h1', 'Welcome to Your Vue.js App') }) })
这是测试代码，如果我们不做前面的恢复操作的话，测试肯定是不通过的
?执行npm run test:e2e，进行测试
项目会启动，并且会弹出一个有ok的弹窗，我们直接确定，还会有测试文件的js，选择对应的测试文件点进去
这样就已经测试通过了
?再来测试一个about页
// https://docs.cypress.io/api/introduction/api.html describe('My First Test', () => { it('Visits the app root url', () => { //访问根目录 cy.visit('/') cy.contains('h1', 'Welcome to Your Vue.js App') }) it('测试about页', () => { //访问about cy.visit('about') cy.contains('h1', 'This is an about page') }) })
结果是这个样子
后测的about，就最后打开了about页，也停留在了about页面
这些都是页面某个元素的文本的测试，那么我们再来个交互试试，在我们的KaiKeBa组件上有个点击事件，我们来试试
// https://docs.cypress.io/api/introduction/api.html describe('My First Test', () => { it('Visits the app root url', () => { //访问根目录 cy.visit('/') cy.contains('h1', 'Welcome to Your Vue.js App') }) it('测试about页', () => { //访问about cy.visit('about') cy.contains('h1', 'This is an about page') }) it('KaiKeBa组件',() => { //访问根目录 cy.visit('/') cy.contains('#msg','aftermounted') cy.get('button').click()//点击button元素 cy.contains('#msg','click over') }) })
左边那一条条可以点击，点击不同的项，也会进入不同的事件状态，例如我点了CONTAINS，文本变成了click over
题外话：测试页面前后差异，或者两个页面的差异可以用page-monitor；地址： https://github.com/fouber/page-monitor
