Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

我”码”由我不由天——谈谈前端测试的作用与实践

22 views

Published on

详情:https://lzane.com/talk#我-码-由我不由天-谈谈前端测试的作用与实践
李泽帆 / lzane
RTC Dev Meetup:前端技术专场 / Sat, 31 Aug 2019 / 深圳南山区虚拟大学园触梦社区

Published in: Internet
  • Be the first to comment

  • Be the first to like this

我”码”由我不由天——谈谈前端测试的作用与实践

  1. 1. 我“码”由我不由天 谈谈前端测试的作⽤与实践 李 泽 帆 @ L Z A N E
  2. 2. ✈ 🌅 👫
  3. 3. 📲
  4. 4. 👨💻😠
  5. 5. 👨💻😡
  6. 6. 👨💻
  7. 7. 李泽帆(靓仔)@LZANE 毕业于中⼭⼤学 腾讯CDC前端⼯程师
  8. 8. 感兴趣的东⻄ Web开发 数据科学 / Data Science 计算机视觉 / CV 智能家居 / Smart Home 指弹吉他 / Fingerstyle guitar ⻄藏 / Tibet …
  9. 9. 测试的分类 单元测试、集成测试、端对端测试
  10. 10. 2个单元测试 0个集成测试 0个端对端测试
  11. 11. 前端测试的作⽤ 提升信⼼、开发阶段实时反馈、时间更有价值
  12. 12. 消除恐惧,提升信⼼ 紧急修复线上bug • 修bug -> 测试通过 -> 发布 • 不再牵⼀发⽽动全身
  13. 13. 消除恐惧,提升信⼼ 重构,让代码更好 IN IN IN OUT OUT OUT
  14. 14. IF IN IN IN OUT OUT OUT OUT
  15. 15. IN IN IN OUT OUT OUT
  16. 16. IN-A IN-B IN-C OUT-A OUT-B OUT-C
  17. 17. IN-A IN-B IN-C OUT-A OUT-B OUT-C IN-A IN-B IN-C OUT-A OUT-B OUT-C IN-A IN-B IN-C OUT-A OUT-B OUT-C IN-A IN-B IN-C OUT-A OUT-B OUT-C
  18. 18. Before you start refactoring, make sure you have a solid suite of tests. These tests must be self-checking. — Martin Fowler
  19. 19. 开发阶段实时反馈 没有单元测试和集成测试
  20. 20. 开发阶段实时反馈
  21. 21. 时间更有意义,更有价值 • debug⼤部分时候是⼀次性⼯作 • 写测试则能为团队留下资产
  22. 22. 更多测试的作⽤ • 指导写出更好的代码(Good code are also easy to test) • 测试即⽂档(对开发⽽⾔) • 对需求的理解,明确正在写的功能 • 减少上下⽂切换
  23. 23. 前端测试的实践 测试的组成、测试驱动开发TDD
  24. 24. 测试框架 • 运⾏库 • 断⾔库 • mock
  25. 25. ⼀个测试的组成
  26. 26. Make it fail
  27. 27. Make it pass
  28. 28. Format it
  29. 29. Make it fail Again
  30. 30. Make it pass
  31. 31. TDD的⼏个准则 • Write only enough of a unit test to fail. • Write only enough production code to make the failing unit test pass. • 测试失败 => 写业务代码 • 测试通过 => 写测试代码
  32. 32. 测试被常问的问题 浪费时间?哪些代码需要写测试?代码覆盖率?…
  33. 33. 浪费时间? • debug修bug,跟其他⼈解释代码的时间 -> 写测试的时间 • 减少返⼯,减少上下⽂切换的次数 The results of the case studies indicated that the pre-release defect density of the four products decreased between 40% and 90% relative to similar projects that did not use the TDD practice. Subjectively, the teams experienced a 15–35% increase in initial development time after adopting TDD. ⼀份来⾃微软的报告
  34. 34. 哪些代码需要测试?颗粒度? • 公共API,⿊盒测试 • 会被多次调⽤的组件 • 复杂的逻辑
  35. 35. 测试覆盖率?coverage • 看被测试部分的重要性,重要的部分80% • CI配置threshold, 只增不减策略
  36. 36. ✈ 🌅 👫
  37. 37. 💏
  38. 38. 参考 【书籍】Refactoring: Improving the Design of Existing Code (2nd Edition) by Martin Fowler 【书籍】Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin 【⽂章】 An Overview of JavaScript Testing in 2019 ( https://medium.com/welldone-software/ an-overview-of-javascript-testing-in-2019-264e19514d0a ) 【课程】JavaScript Testing Practices and Principles by Kent C. Dodds ( https:// frontendmasters.com/courses/testing-practices-principles/ )
  39. 39. Q&A Github: @LZANE Blog: www.lzane.com Email: cn.zanelee@gmail.com

×