Add data-* for end to end test

[abz53378]

Why

See https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269 to know learn is an end-to-end test.

For us, we can make Canner more reliable. For developers, they can also test their CMSes.

Proposed Solution

As mentioned by the article above, using data-* is better than className or id. Since antd is not fully supported data-* attributes, I think to add this attribute on our title HOC(which wraps every component) is OK, so whether the component is customized or imported from other UI frameworks, they will be wrapped in a <div data-testid="">.

DIscussion

1. The data-* attributes should be data-testid, data-e2e or others?
2. What should the value of the attributes be?

• I think it can be data-testid=${refId.toString()}, so every component will have its own testId like posts/0/info/name.

cc @wwwy3y3, @chilijung, @FrankYang0529