Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exclude unnecessarily tracked coverage files #30639

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
+67 −45
Open

Exclude unnecessarily tracked coverage files #30639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1ff069
Manager: Fix panel reactivity
valentinpalkovic Feb 23, 2025
93485f6
Exclude unnecessarily tracked coverage files
kpowkitty Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions code/addons/test/src/node/vitest-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,16 @@ export class VitestManager {
reportOnFailure: true,
reporter: [['html', {}], storybookCoverageReporter],
reportsDirectory: resolvePathInStorybookCache(COVERAGE_DIRECTORY),
exclude: [
'**/*.config.*',
'**/*.workspace.*',
'**/.storybook/**',
'**/.yarn/**',
'**/src/**/!(stories)/**',
'**/src/**/*.stories.*',
Comment on lines +88 to +89
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: The pattern **/src/**/!(stories)/** may be too aggressive - it excludes all source code except stories directories which could hide actual coverage gaps

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am unsure how to get around this. It is including src/ top level directory, which is artificially lowering the coverage test. I want it to exclude src/ but include everything inside src/ (that pertains to testing). Should we have a set directory that these files are expected to go into and have that in documentation, or is there a better way to approach this?

'**/test/**/*.stories.*',
'**/storybook-static/**',
],
}
: { enabled: false }
) as CoverageOptions;
Expand Down
102 changes: 57 additions & 45 deletions code/core/src/manager/container/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,70 @@
import type { FC } from 'react';
import React from 'react';
import React, { useMemo, useState } from 'react';

import { type API_LeafEntry, Addon_TypesEnum } from '@storybook/core/types';
import { Addon_TypesEnum } from '@storybook/core/types';

import { Consumer } from '@storybook/core/manager-api';
import type { API, Combo } from '@storybook/core/manager-api';

import memoize from 'memoizerific';
import { useChannel, useStorybookApi, useStorybookState } from '@storybook/core/manager-api';

import { STORY_PREPARED } from '../../core-events';
import { AddonPanel } from '../components/panel/Panel';

const createPanelActions = memoize(1)((api) => ({
onSelect: (panel: string) => api.setSelectedPanel(panel),
toggleVisibility: () => api.togglePanel(),
togglePosition: () => api.togglePanelPosition(),
}));
const Panel: FC<any> = (props) => {
const api = useStorybookApi();
const state = useStorybookState();
const [story, setStory] = useState(api.getCurrentStoryData());

const getPanels = memoize(1)((api: API, story: API_LeafEntry) => {
const allPanels = api.getElements(Addon_TypesEnum.PANEL);
useChannel(
{
[STORY_PREPARED]: () => {
setStory(api.getCurrentStoryData());
},
},
[]
);

if (!allPanels || !story || story.type !== 'story') {
return allPanels;
}
const { parameters, type } = story ?? {};

const { parameters } = story;
const panelActions = useMemo(
() => ({
onSelect: (panel: string) => api.setSelectedPanel(panel),
toggleVisibility: () => api.togglePanel(),
togglePosition: () => api.togglePanelPosition(),
}),
[api]
);

const filteredPanels: typeof allPanels = {};
Object.entries(allPanels).forEach(([id, panel]) => {
const { paramKey }: any = panel;
if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
return;
}
if (
panel.disabled === true ||
(typeof panel.disabled === 'function' && panel.disabled(parameters))
) {
return;
const panels = useMemo(() => {
const allPanels = api.getElements(Addon_TypesEnum.PANEL);

if (!allPanels || type !== 'story') {
return allPanels;
}
filteredPanels[id] = panel;
});

return filteredPanels;
});

const mapper = ({ state, api }: Combo) => ({
panels: getPanels(api, api.getCurrentStoryData()),
selectedPanel: api.getSelectedPanel(),
panelPosition: state.layout.panelPosition,
actions: createPanelActions(api),
shortcuts: api.getShortcutKeys(),
});

const Panel: FC<any> = (props) => (
<Consumer filter={mapper}>{(customProps) => <AddonPanel {...props} {...customProps} />}</Consumer>
);

const filteredPanels: typeof allPanels = {};
Object.entries(allPanels).forEach(([id, p]) => {
const { paramKey }: any = p;
if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
return;
}
if (p.disabled === true || (typeof p.disabled === 'function' && p.disabled(parameters))) {
return;
}
filteredPanels[id] = p;
});

return filteredPanels;
}, [api, type, parameters]);

return (
<AddonPanel
panels={panels}
selectedPanel={api.getSelectedPanel()}
panelPosition={state.layout.panelPosition}
actions={panelActions}
shortcuts={api.getShortcutKeys()}
{...props}
/>
);
};

export default Panel;