Uploaded image for project: 'Zanata'
  1. ZNTA-1905

Rearrange test and storybook directory structure for frontend

    Details

    • Tested Version/s:
      None
    • Sprint:
      17.09
    • Story Points:
      0.5

      Description

      There are a few changes we can make in the frontend directory structures to make things more consistent:

      • Move tests into the directory of the component under test. There are a few different patterns that would work:
        1. .../MyComponent/_tests_/foo.js
        2. .../MyComponent/MyComponent.test.js
        3. .../MyComponent/.test.js
      • Move component story.js files under the test directory
        • To exclude them from coverage without having a specific coverage exclusion for storybook files.
        • .../MyComponent/_tests_/story.js

      File lookup can be easier if the component name is included in the filename for tests, stories, etc. so we may want to go with MyComponent.test.js and MyComponent.story.js

      The overall contents of a component directory may look something like:

      components/
      ├── MyComponent/
      │   ├── index.js (Redux connection of the component)
      │   ├── component.js (the React component definition)
      │   ├── MyComponent.story.js (storybook chapter for the component)
      │   └── MyComponent.test.js (unit tests for the component)
      └── SimpleComponent/
          ├── index.js (the React component definition, no connection required)
          ├── SimpleComponent.story.js
          └── SimpleComponent.test.js
      

      Or like this:

      components/
      ├── MyComponent/
      │   ├── index.js (Redux connection of the component)
      │   ├── component.js (the React component definition)
      │   └── __tests__/
      │       ├── MyComponent.story.js (storybook chapter for the component)
      │       └── MyComponent.test.js (unit tests for the component)
      └── SimpleComponent/
          ├── index.js (the React component definition, no connection required)
          └── __tests__/
              ├── SimpleComponent.story.js
              └── SimpleComponent.test.js
      

      Requirements

      • Move/rename all test and storybook files to the decided-upon file structure.
      • Update config for Jest so it has the minimum possible amount of filename exclusions.
      • All tests must still run and pass.
      • All defined component stories must still be shown in the running storybook.

      Technical Notes

      Config option for Jest to ignore the story files: testPathIgnorePatterns

      Check whether Jest treats all non-test files as eligible for coverage, or just those not in _tests_ directories. A coverage exclusion for the story files may still be needed even if they are in _tests_.

        Attachments

          Activity

            People

            • Assignee:
              damason David Mason
              Reporter:
              damason David Mason
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: