# 任务 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](/files/-M4rZy4sXhHYQeY7xaqO)

TDD, no more debug.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/01-project-shoppingcart/07-driven-components-styling-development.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.