[Feature Request]: File Selection: Show coverage for all relevant files

[valentinpalkovic]

To provide comprehensive coverage information, we need to ensure that the coverage reports in the Storybook UI display coverage data for all relevant files associated with a component. This includes not only the main component file but also any related files such as utility modules and stylesheets. The goal is to aggregate and display a complete picture of coverage for each component.

Tasks

Define Relevant Files

• Establish a convention for identifying related files that should be included in the coverage report for a component.
• For example, include files with naming patterns like ComponentName..tsx, ComponentName..js, ComponentName.*.css.

Modify Coverage Data Collection

• Update the Vitest configuration to include coverage collection for all relevant files based on the defined naming conventions.
• Ensure that the coverage data for these files is aggregated correctly in the generated reports.

Integrate Coverage Data in Storybook

• Update the Storybook addon to parse and display coverage data for all relevant files.
• Ensure the UI can handle and display coverage data for multiple files associated with a single component.

(Optional) Handle Edge Cases

• Implement logic to handle cases where related files are not found or do not exist.
• Ensure the system can gracefully handle components with non-standard or unconventional file structures.

Documentation

• Document the naming conventions and configuration steps required to include related files in the coverage reports.
• Provide examples of how to structure projects to ensure comprehensive coverage reporting.

Acceptance Criteria:

• A clear convention for identifying and including related files in coverage reports is established.
• The Vitest configuration has been updated to collect coverage data for all relevant files.
• The Storybook addon is enhanced to display aggregated coverage data for multiple files associated with a component.
• (Optional) Edge cases are handled gracefully, ensuring robust coverage reporting for various project structures.
• Detailed documentation is provided to guide developers in configuring and using the coverage reporting feature.

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To show coverage for all relevant files in the Measure addon, follow these steps:

1. Update src/manager.tsx:

   • Modify the Tool component to include logic for displaying file coverage.

2. Modify src/preview.tsx:

   • Ensure withMeasure decorator includes coverage data.

3. Enhance src/util.ts:

   • Add utility functions to fetch and process coverage data.

4. Extend src/box-model/visualizer.ts:

   • Update drawBoxModel to visualize coverage on the canvas.

5. Adjust src/box-model/labels.ts:

   • Ensure labels reflect coverage information.

6. Update src/box-model/canvas.ts:

   • Modify drawing functions to include coverage highlights.

References

/code/addons/measure /code/addons/measure/src /code/addons/measure/src/box-model /code/addons/measure/src/box-model/canvas.ts /code/addons/measure/src/box-model/labels.ts /code/addons/measure/src/box-model/visualizer.ts /code/addons/measure/src/index.ts /code/addons/measure/src/manager.tsx /code/addons/measure/src/preview.tsx /code/addons/measure/src/util.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)