HSLdevcom / HSLdevcom/digitransit-ui

Should the example data be component specific?

Open
#794 3 comments 0 reactions 0 assignees View on GitHub

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:

  1. Inline the example data to the component file like we do with Relay fragments.
  2. Name the exports in the ExampleData.js file with the name of the component that the data belongs to.
  3. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.