[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","liangpure","page",1,"limit",20,"total","id","31593","avatar_url","https://avatars1.githubusercontent.com/u/10328463?v=4","githubUsername","create_at","2018-01-16 02:52:33.211","score",15,"topic_count","reply_count",2,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":44,"_50":51},"37260","author_id","tab","share","content","## 起因\r\n 因为我们团队开始使用antd的时候，很多组件不能把id和data-\\*的属性传递到真实的dom上去，而QC的自动化测试需要test-id（还要语义化），所以就决定使用className属性来添加测试id。但是添加className，一方面并不方便，我们className属性里面可能有其他操作；另外，也污染源代码。\r\n 所以就有想法做一个自动工具来添加，后面看了[面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒](http://https://cnodejs.org/topic/5a9317d38d6e16e56bb808d1)觉得babel应该能做成这个事情。\r\n\t\r\nemmm..一直拖到最近才把想法实现了一下。可惜，QC部门说用className性能太差了~~（what？其实我并不是很明白为什么说用class就慢了那么多....），还是要用id....真是给令人悲伤的事情...\r\n\r\n 然后我去antd issue列表上找了一下，发现还是有蛮多人提这个问题的，id现在大多数组件都支持了，data-\\*自定义属性也在逐步支持中。\r\n [有关id的讨论](https://github.com/ant-design/ant-design/issues/8305 )\r\n [有关data-\\*的讨论](https://github.com/ant-design/ant-design/issues/8561 )\r\n\r\n## babel-plugin-antd-test-class\r\n### 用data-test手动设置className\r\n```javascript\r\n\r\n\r\n\r\n ↓ ↓ ↓ ↓ ↓ ↓\r\n\r\n\r\n\r\n```\r\n### 通过`FormItem`或者`getFieldDecorator`自动找到语义化的名称\r\n```javascript\r\n}\r\n {...label8Layout}\r\n>\r\n {\r\n getFieldDecorator('custPart')(\r\n \r\n )\r\n }\r\n\r\n\r\n ↓ ↓ ↓ ↓ ↓ ↓\r\n\r\n}\r\n {...label8Layout}\r\n >\r\n {\r\n getFieldDecorator('custPart')(\r\n \r\n )\r\n }\r\n \r\n```\r\n### 给table columns添加className\r\n```javascript\r\nimport { Table } from 'antd'\r\n\r\nconst columns = [{\r\n title: 'line',\r\n dataIndex: 'id'\r\n}, {\r\n title: 'money',\r\n dataIndex: 'money',\r\n className: 'exist-class'\r\n}, {\r\n title: 'condition',\r\n dataIndex: 'condition',\r\n className: isActive && 'active'\r\n}]\r\n\r\n ↓ ↓ ↓ ↓ ↓ ↓\r\n\r\nconst columns = [{\r\n title: 'line',\r\n dataIndex: 'id',\r\n className: \"col-autotest-id\"\r\n}, {\r\n title: 'money',\r\n dataIndex: 'money',\r\n className: \"exist-class col-autotest-money\"\r\n}, {\r\n title: 'condition',\r\n dataIndex: 'condition',\r\n className: (isActive && 'active') + \" col-autotest-condition\"\r\n}]\r\n```\r\n## 最后\r\n放一下代码地址[babel-plugin-antd-test-class](https://github.com/liangpure/babel-plugin-antd-test-class)\r\n可能用不大上了，不过我觉得学习一下babel，ast的知识还是蛮好的。之后别人问起babel插件啥的，不用慌了(～￣▽￣)～","title","开发了一个babel-plugin自动给antd component 添加test className","last_reply_at","2018-10-18 02:00:09.938","good","top",0,"visit_count",2974,"author",{"_13":14,"_22":23}]