Comfy-Org / Comfy-Org/ComfyUI_frontend

Add Storybook stories for Vue node components

Open
#8,731 0 comments 0 reactions 1 assignee Claimed by @DrJKL View on GitHub
area:testing developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Context

As identified in PR #8574, we need Storybook coverage for Vue node components to prevent regressions in node styling and behavior.

## Scope

Add Storybook stories for node components in `src/renderer/extensions/vueNodes/components/`, including:

- **InputSlot.vue** - covering various states:
- Default with label
- Dot-only mode (reroute nodes with empty names)
- With/without localized names
- Different input types

- **OutputSlot.vue** - covering various states:
- Default with label
- Dot-only mode (reroute nodes with empty names)
- With/without localized names

- **Reroute nodes** - specifically testing:
- Empty string slot names (should show no labels, only connection dots)
- Interaction with NO_TITLE flag from #7589
- Minimal appearance (no 'Input 0'/'Output 0' fallback labels)

## Related

- PR #8574 - Fixes reroute node styling by hiding slot labels for empty names
- Comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/8574#discussion_r1925848362
- Requested by: @DrJKL

## Acceptance Criteria

- [ ] Stories created following ComponentName.stories.ts pattern
- [ ] Cover Default, Disabled, and relevant variant states
- [ ] Include visual regression tests for dot-only/minimal reroute appearance
- [ ] Test both explicit dotOnly prop and derived hasNoLabel behavior

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-8731-Add-Storybook-stories-for-Vue-node-components-3016d73d365081af9addcf3c60e378f5) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.