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('