HSLdevcom / HSLdevcom/digitransit-ui
Should the example data be component specific?
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 267
- Forks
- 145
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 75
Description
Now all example data for component tests is included in ExampleData.js. I assume the original reason has something to do with having a central place for example data e.g. in order not to duplicate it. I find this a bit undesirable, as it is not clear what components are using which bits and pieces of the example data. It would be much clearer if every component would include component specific example data that would not be shared by other components. Also, having a separate bit of example data for each component would make it easy to see what data the component expects to receive from the API / in the props.
I would think we could:
- Inline the example data to the component file like we do with Relay fragments.
- Name the exports in the ExampleData.js file with the name of the component that the data belongs to.
- Put the data to the same folder with a naming convention like component.example.js.
The problem with the first option is that example data can be quite long, so inlining it is probably not desirable. The second option might be desirable if we do not wish to add additional files. However, when doing refactors / deleting components it is not so obvious that the data should be deleted from the central file. The third option, where we have a separate file with the name of the component included, would make it clear that the file belongs together with the component. Also, we could move the component specific usage examples to the example file, if we'd want to, so that the component file itself would stay clean.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with app/component/documentation/ExampleData.js and inspect the component tests that consume it. First resolve which of the three proposed organization options the project wants; done means example data is clearly associated with its component without unnecessary duplication and the affected tests still pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, testing
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100