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

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

## 练习目标

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

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

```javascript
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 下组件的行为：

```javascript
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 方案：

```javascript
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](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M4rZuNAWx3V-pb-Ikl4%2F-M4rZy4sXhHYQeY7xaqO%2Ftdd%20vs%20debug.png?generation=1586849113342626\&alt=media)

TDD, no more debug.

参考资料：[Physics of Test Driven Development | James Grenning's Blog](http://blog.wingman-sw.com/physics-of-test-driven-development)