diff --git a/src/components/node/NodePreview.spec.ts b/src/components/node/NodePreview.spec.ts index d7536b0457..e8e629e753 100644 --- a/src/components/node/NodePreview.spec.ts +++ b/src/components/node/NodePreview.spec.ts @@ -1,11 +1,12 @@ import { mount } from '@vue/test-utils' import { createPinia } from 'pinia' import PrimeVue from 'primevue/config' -import { beforeAll, describe, expect, it } from 'vitest' +import { beforeAll, describe, expect, it, vi } from 'vitest' import { createApp } from 'vue' import { createI18n } from 'vue-i18n' import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2' +import * as markdownRendererUtil from '@/utils/markdownRendererUtil' import NodePreview from './NodePreview.vue' @@ -129,4 +130,164 @@ describe('NodePreview', () => { expect(headdot.classes()).toContain('pr-3') }) + + describe('Description Rendering', () => { + it('renders plain text description as HTML', () => { + const plainTextNodeDef: ComfyNodeDefV2 = { + ...mockNodeDef, + description: 'This is a plain text description' + } + + const wrapper = mountComponent(plainTextNodeDef) + const description = wrapper.find('._sb_description') + + expect(description.exists()).toBe(true) + expect(description.html()).toContain('This is a plain text description') + }) + + it('renders markdown description with formatting', () => { + const markdownNodeDef: ComfyNodeDefV2 = { + ...mockNodeDef, + description: '**Bold text** and *italic text* with `code`' + } + + const wrapper = mountComponent(markdownNodeDef) + const description = wrapper.find('._sb_description') + + expect(description.exists()).toBe(true) + expect(description.html()).toContain('Bold text') + expect(description.html()).toContain('italic text') + expect(description.html()).toContain('code') + }) + + it('does not render description element when description is empty', () => { + const noDescriptionNodeDef: ComfyNodeDefV2 = { + ...mockNodeDef, + description: '' + } + + const wrapper = mountComponent(noDescriptionNodeDef) + const description = wrapper.find('._sb_description') + + expect(description.exists()).toBe(false) + }) + + it('does not render description element when description is undefined', () => { + const { description, ...nodeDefWithoutDescription } = mockNodeDef + const wrapper = mountComponent( + nodeDefWithoutDescription as ComfyNodeDefV2 + ) + const descriptionElement = wrapper.find('._sb_description') + + expect(descriptionElement.exists()).toBe(false) + }) + + it('calls renderMarkdownToHtml utility function', () => { + const spy = vi.spyOn(markdownRendererUtil, 'renderMarkdownToHtml') + const testDescription = 'Test **markdown** description' + + const nodeDefWithDescription: ComfyNodeDefV2 = { + ...mockNodeDef, + description: testDescription + } + + mountComponent(nodeDefWithDescription) + + expect(spy).toHaveBeenCalledWith(testDescription) + spy.mockRestore() + }) + + it('handles potentially unsafe markdown content safely', () => { + const unsafeNodeDef: ComfyNodeDefV2 = { + ...mockNodeDef, + description: + 'Safe **markdown** content with `code` blocks' + } + + const wrapper = mountComponent(unsafeNodeDef) + const description = wrapper.find('._sb_description') + + // The description should still exist because there's safe content + if (description.exists()) { + // Should not contain script tags (sanitized by DOMPurify) + expect(description.html()).not.toContain('