任务 4：综合应用 - 驱动组件样式开发

Hey，你好，我是 JimmyLv 吕靖，这是你开始前端 TDD 练习的第 22 天，恭喜你，ShoppingCart 所有交互上的功能都已经实现了，你的页面上最好还是光秃秃的，否则就是一种浪费。接下来你才应该去实现组件样式，以及全局的页面 Layout 布局，并保证 E2E 测试和组件单元测试的正确性，尽可能快速还原设计稿中所要求的样子而不破坏已有功能交互。

练习目标

使用 Storybook 驱动组件样式开发，快速反馈
使用 Cypress 进行响应式样式测试，覆盖主流分辨率
使用 Cypress 进行浏览器兼容性测试，覆盖主流浏览器

请注意，你需要像之前的手法一样，再次使用重构的手法创建 stories 即将 render() 中的 React 组件提取成函数，放进相对应的 Component.stories.js 文件：

import React from 'react'
import ProductList from './ProductList'
import fakeProducts from '../fixtures/product'
import act from '../common/action'

export default {
  title: 'ProductList',
}

export const empty = () => <ProductList products={[]} />

export const list = () => <ProductList products={fakeProducts} onProductChange={act('handleProductChange')} />

然后你依旧能在原来的 Component.test.js 文件中测试不同 props 下组件的行为：

import { empty, list } from './ProductList.stories'

test('should show empty content when no products', () => {
  const comp = render(empty())

  expect(comp.queryByText('购物车为空')).toBeTruthy()
})

test('should increase product when click "+" button', () => {
  // given
  const comp = render(list())
})

本次任务的练习要求

使用 Cypress 和 Testing Library 自动保障功能回归测试
发现一个 Bug，先补一个单元测试，再对其进行修复
使用一种 CSS-in-JS 方案，将样式组件化，支持复用

推荐使用 styled-components CSS-in-JS 方案：

import styled from 'styled-components'
import { Row } from 'antd'

const ProductRow = styled(Row)`
  margin-left: 86px;
  height: 22px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
`
export const Label = styled.div`
  margin-top: 33px;
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
`
const Counter = styled.button`
  height: 42px;
  font-size: 30px;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  line-height: 42px;
`

也请你思考一下

为什么会有 Bug？前端的 Bug 主要集中在哪些方面？

为什么说 Bug 发现得越早，修复成本越低？

现在是否明白，测试驱动开发与持续集成、持续交付的关系？

想一想你当救火队员的时候，定位问题是不是特别难：

用户的操作问题 or 代码的问题？
前端界面的问题 or 后端 API 的问题？
后端哪个微服务 or 服务中哪个层的问题？

TDD, no more debug.

上一页任务 3：综合应用 - 驱动数据流管理下一页ShoppingCart 项目总结

最后更新于5年前