mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
7f30d6b6a5
## Summary Add rounded square dot shape and "(Iterative)" tooltip for list-type output slots in Vue nodes, matching litegraph's visual indicator. ## Changes - **What**: `SlotConnectionDot.vue` renders `rounded-[1px]` instead of `rounded-full` when slot shape is `RenderShape.GRID`. `OutputSlot.vue` appends "(Iterative)" to the tooltip for these slots. <img width="807" height="542" alt="Screenshot 2026-02-10 at 03 38 42" src="https://github.com/user-attachments/assets/137b60c5-ac3b-457f-a52d-58f5f28a59ea" /> ## Review Focus - i18n key added for the iterative suffix ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8766-feat-add-visual-indicator-for-list-output-slots-3036d73d3650813aad85ce094d29c42b) by [Unito](https://www.unito.io)
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
|
|
import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
|
|
|
|
import SlotConnectionDot from './SlotConnectionDot.vue'
|
|
|
|
const defaultSlot: INodeSlot = {
|
|
name: 'output',
|
|
type: 'IMAGE',
|
|
boundingRect: [0, 0, 0, 0]
|
|
}
|
|
|
|
function mountDot(slotData?: INodeSlot) {
|
|
return mount(SlotConnectionDot, {
|
|
props: { slotData }
|
|
})
|
|
}
|
|
|
|
describe('SlotConnectionDot', () => {
|
|
it('renders circle shape by default', () => {
|
|
const wrapper = mountDot(defaultSlot)
|
|
|
|
const dot = wrapper.find('.slot-dot')
|
|
expect(dot.classes()).toContain('rounded-full')
|
|
expect(dot.element.tagName).toBe('DIV')
|
|
})
|
|
|
|
it('renders rounded square for GRID shape', () => {
|
|
const wrapper = mountDot({
|
|
...defaultSlot,
|
|
shape: RenderShape.GRID
|
|
})
|
|
|
|
const dot = wrapper.find('.slot-dot')
|
|
expect(dot.classes()).toContain('rounded-[1px]')
|
|
expect(dot.classes()).not.toContain('rounded-full')
|
|
expect(dot.element.tagName).toBe('DIV')
|
|
})
|
|
})
|