任务 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 vs debug
TDD, no more debug.
最近更新 2yr ago