Storybook Coverage Viewer Addon - Create UI for Displaying Coverage Data about storybook

[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