Proposal: Move tests inside component directories

[fahad19]

Currently

• Components are written in ./components/foo directory
• Tests are found in ./tests/unit/foo

Proposal

• Move source and tests in one place.

Example

Example directory structure:

├── components/
│   ├── Button/
│      ├── index.js
│      ├── index.spec.js
│      ├── snapshots/
└── package.json

Why?

Everything related to a particular component can be found in one place. Developer doesn't have to jump around to find tests. Also easier to see if a certain component is missing tests quickly.

[yurist38]

I like this approach as well! But, in case we have many files in a folder (i.e. some sub-components) I prefer to have test files in the sub-folder. I see that, for example, carousel component has many js files in its folder and I don't really want to see tests files beside them. As for me, it will add a mess to the files structure. I would suggest having a subfolder of tests.

[asci]

Or sub-folders for sub-components?

[yurist38]

@asci or like that. Both options are fine for me. And one more thing: I see an inconsistency in subcomponents structure, i.e. calendar component has subfolders but carousel doesn't. I think we should choose the single way to go and refactor all components (could be done in one step together with moving tests).

[leandrooriente]

@asci approach seems good to me 👍

+ Components
  + DropDown
    - DropDown.js
    - DropDown.scss
    - DropDown.spec.js
    - index.js
    + Option
      - Option.js
      - Option.scss
      - Option.spec.js
      - index.js   
  + Button
    - Button.js
    - Button.scss
    - Button.spec.js
    - index.js

[leandrooriente]

What do you think @iwwwi, @rbardini and @froskie?

[rbardini]

👍 from me, tests should live alongside the code. Also agree with @asci suggestion of subfolders for scoped components.

[AlleeX]

One remark from me

+ Components
  + DropDown
    +  __tests__
      - __snapshots__
      - DropDown.onChange.spec.js
      - DropDown.render.spec.js
    - DropDown.js
    - DropDown.scss
    - index.js

[rbardini]

@AlleeX could you elaborate why separate test files per component method?

[leandrooriente]

I just created a PR using this new directory structure.
It's still working in progress but it's possible to have a better overview of how the project would look.

• Project directories: https://github.com/Travix-International/travix-ui-kit/tree/0e7667516a6135424bb338d2bb0b03c6a3acdf36/components

[iwwwi]

I am also fine with adding the tests with the components folder structure. Subfolders are also good option for subcomponents. Also having tests folder in the components i think is great idea, simply from the perspective if some component's test get too long to be in 1 file, it can be split in multiple files as @AlleeX suggested...