♻️
前端 TDD（测试驱动开发）
  • README
  • 总-课程目标
  • 总-课程安排
  • Coding
    • 第一题：FizzBuzz 数字游戏
      • 什么是 FizzBuzz？
      • 任务 0：练功前的热身
      • FizzBuzz 项目剖析
      • 任务 1：TDD 初体验
      • 任务 2：先利其器
      • 任务 3：再撸一遍
      • FizzBuzz 项目总结
      • 附录 1：Jest 测试基础及要点
      • 附录 2：Testing Library 组件测试基础
    • 第二题：MarsRover 火星车
      • 任务 1：Tasking 任务分解
      • 火星车实战
      • 火星车 Tasking 任务分解
      • 任务 2：MarsRover 实战演练
      • MarsRover Coding 演示
      • 任务 3：MarsRover 练习
      • MarsRover 项目总结
    • 第三题：CommentBox 留言板
      • CommentBox 项目剖析
      • 任务 1：Cypress E2E 测试
      • 任务 2：测试驱动组件单元接口
      • 任务 3：组件级别的快速反馈
      • 任务 4：由外到内的前端 TDD
      • CommentBox 项目总结
    • 第四题：Bookshelf 魔法书架
      • Bookshelf 项目剖析
      • 任务 1：练习 API 契约测试
      • 任务 2：组件化与数据流管理
      • 任务 3：Redux 数据流测试
      • 任务 4：简化 Redux 项目结构
      • Bookshelf 项目总结
      • 附录 1：什么才是真正的 RESTful 架构？
      • 附录 2：【译】Redux 和 命令模式
      • 附录 3：【译】什么是 Flux 架构？（兼谈 DDD 和 CQRS）
    • 第五题：ShoppingCart 购物车
      • ShoppingCart 项目剖析
      • React 哲学：Thinking in React
      • 任务 1：任务分解 - 驱动组件树拆分
      • 任务 2：综合应用 - 驱动组件接口设计
      • 任务 3：综合应用 - 驱动数据流管理
      • 任务 4：综合应用 - 驱动组件样式开发
      • ShoppingCart 项目总结
由 GitBook 提供支持
在本页
  • 副本简介
  • 副本挑战
  • 时长限制
  • 副本奖励
  • BOSS 掉落
  1. Coding

第三题：CommentBox 留言板

副本简介

CommentBox 留言板是一个非常常见的 UI 组件。通过对简单组件的多次练习，帮助你掌握 TDD 在前端开发中的运用，养成刻意拆分组件的习惯。

副本挑战

  1. 掌握前端多维度测试与 TDD 的基本步骤

  2. 至少练习 3 遍 CommentBox 组件开发

  3. 能在 1 小时内完成 CommentBox 题目

时长限制

6 小时

总时长

任务 1

任务 2

任务 3

任务 4

任务

Cypress

Testing Library

Storybook

Outside-In TDD

6h

2h

1h

1h

2h

副本奖励

  • 掌握 E2E 级别 Cypress 更直观的 UI TDD 测试路径

  • 熟悉单元级别 Testing Library 的行为测试方法与理念

  • 由外至内，完整的前端测试驱动开发 (TDD) “套路”

  • 掌握视觉级别 TDD 验证，重构到 Storybook，穷举 UI Stories

  • UI 重构的挑战：视觉测试，而不是基于 className 或 style 的测试

BOSS 掉落

上一页MarsRover 项目总结下一页CommentBox 项目剖析

最后更新于5年前

Cypress E2E Cheat Sheet.pdf
Testing Library Cheat Sheet.pdf
Visual Testing Handbook.pdf