Storybook Coverage Viewer Addon - Create UI for Displaying Coverage Data

[valentinpalkovic]

To provide a seamless user experience, we need to develop a Storybook addon UI that can display the coverage data collected from Vitest. This UI should present comprehensive and detailed coverage information for each component, including all relevant files, in a user-friendly and interactive manner. The goal is to allow developers to quickly understand the test coverage of their components and identify areas that need more testing.

Tasks

Design UI Layout

• Design a rudimentary layout of the coverage addon tab in Storybook.
• Ensure the layout includes sections for overall component coverage, detailed file-by-file coverage, and visual indicators for covered vs. uncovered code.

Implement Coverage Summary Section

• Create a section in the addon tab to display overall component coverage metrics (e.g., statements, branches, functions, lines).
• Use visual indicators (e.g., progress bars, color coding) to highlight the coverage percentages.

Implement Detailed File Coverage View

• Develop a view to display detailed coverage information for each file associated with the component.
• Include line-by-line coverage indicators, showing which lines are covered and which are not.

Real-Time Coverage Updates

• Integrate with the WebSocket client to receive real-time coverage updates.
• Ensure the UI updates dynamically to reflect the latest coverage data as it is received.

Acceptance Criteria

• A rudimentary UI for the coverage addon tab in Storybook is implemented.
• The UI displays overall component coverage metrics and detailed file-by-file coverage information.
• The UI updates in real-time to reflect the latest coverage data received via WebSocket.

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically

1. In addons/coverage/src/index.ts, register the addon:

import { addons, types } from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from './constants';
import { CoveragePanel } from './CoveragePanel';

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Coverage',
    render: CoveragePanel,
  });
});

2. Create addons/coverage/src/CoveragePanel.tsx for the UI:

import React from 'react';
import { useParameter } from '@storybook/api';
import { PARAM_KEY } from './constants';

export const CoveragePanel: React.FC = () => {
  const coverageData = useParameter(PARAM_KEY, null);
  return (
    <div>
      {coverageData ? (
        <pre>{JSON.stringify(coverageData, null, 2)}</pre>
      ) : (
        <p>No coverage data available</p>
      )}
    </div>
  );
};

3. Update addons/coverage/src/constants.ts:

export const ADDON_ID = 'storybook/coverage';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = 'coverage';

4. Modify addons/coverage/src/preview.ts to set coverage data:

import { addons } from '@storybook/addons';
import { PARAM_KEY } from './constants';

addons.setConfig({
  [PARAM_KEY]: window.__coverage__ || null,
});

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.

Edit Issue Bot Settings

[valentinpalkovic]

Completed