Successfully reported this slideshow.

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

0

Share

Loading in …3
×
1 of 45
1 of 45

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

0

Share

Download to read offline

Description

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

Transcript

  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

Description

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

Transcript

  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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×