HSLdevcom
Should the example data be component specific?
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.
This is not an easy problem.
Ideally the components would be nice short clean pure render functions that could have simple example data inlined in the example itself. More complex components will obviously require more complex test data. Compositional components possibly require a composition of the test data of the individual simple components. Most components also have more than one example so they require multiple example data.
The point of having components is to have self-contained units. So I don't quite like splitting the example data out of the component. Also if the example is with the code (like with query fragments etc.) then it is much more likely to be maintained. However all the different concerns "pollute" the component code file.
I think I'd still vote for going to mostly inlining and option 1.
For the composition of the example data, the individual components could have named exports for the data, and the container components could compose from those.
