♻️
前端 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 提供支持
在本页
  • 业务功能
  • 用户故事 1:书架首页(list + filter)
  • 用户故事 2:书籍详情(detail)
  • 用户故事 3:添加推荐(add)
  • 用户故事 4:推荐列表(list)
  • 用户故事 5:我要评论(add)
  • 用户故事 6:评论排行榜(list)
  • 技能要求
  • 任务拆解
  1. Coding
  2. 第四题:Bookshelf 魔法书架

Bookshelf 项目剖析

上一页第四题:Bookshelf 魔法书架下一页任务 1:练习 API 契约测试

最后更新于5年前

Bookshelf 书架也许跟你的真实业务场景比较接近,而且我这儿特意为你搭了一个移动端的脚手架。这个项目会涵盖典型的 CRUD 操作,期望你通过 TDD 的方式,重新思考什么是前端开发的最佳实践和撸码节奏。

业务功能

这是一个典型的用例即规范(Specification by example)示例,测试用例就是需求说明,下面我将通过用户故事的方式为你列举所有的需求功能点。

用户故事 1:书架首页(list + filter)

作为一名读者,我想在进入首页时看到最新推荐的十本书,从而我能更方便挑选当前最受欢迎的书籍。

作为一名读者,我能在首页点击标签对书籍种类进行筛选,从而我可以根据自己感兴趣的主题挑选书籍。

用户故事 2:书籍详情(detail)

作为一名读者,我想点击书籍封面进入书籍详情页,从而我能更详细得查看书籍内容及其评论列表。

用户故事 3:添加推荐(add)

作为一名用户,我想有一个添加推荐的表单页面,从而我能为别的读者推荐我认为对别人有帮助的书籍。

用户故事 4:推荐列表(list)

作为一名用户,我能看到某个分类下所有推荐书目,从而我能根据分类找到所有相关的书籍。

用户故事 5:我要评论(add)

作为一名读者,我想在书籍详情页进行评论,从而我能够表达我对这本书的喜欢或者更多情感上的表达。

用户故事 6:评论排行榜(list)

作为一名读者,我想看到书籍详情页的评论点赞排行,从而我能够更快找出有价值的评论以供参考。

技能要求

  1. 使用 Pact 编写契约测试,驱动 API 接口设计

  2. 使用 Cypress 编写 E2E 测试,驱动出组件拆分

  3. 使用 Jest 编写 Redux 数据流测试,合理解耦状态管理

  4. 使用 Testing Library 编写组件单元测试,驱动组件接口设计

  5. 使用 Storybook 验证组件样式,根据反馈快速调整 UI Stories

  6. 保持!刻意练习的节奏,重复练习!

任务拆解

本项目分为 4 个任务:

  • 任务 1:API 契约测试

  • 任务 2:组件化与数据流管理

  • 任务 3:Redux 数据流测试

  • 任务 4:简化 Redux 项目结构

TDD生命周期(TDD Lifecycle)
用例即规范(SbE)