diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index 21b3fdd297..1e8772ef56 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -74,8 +74,16 @@ class NodeLibrarySidebarTab { await this.nodeLibraryTree.waitFor({ state: 'visible' }) } - async toggleFirstFolder() { - await this.page.locator('.p-tree-node-toggle-button').nth(0).click() + getFolder(folderName: string) { + return this.page.locator( + `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.folder-label:has-text("${folderName}")))` + ) + } + + getNode(nodeName: string) { + return this.page.locator( + `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.node-label:has-text("${nodeName}")))` + ) } } diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts index 0bee05801e..2b3ebbc3f7 100644 --- a/browser_tests/menu.spec.ts +++ b/browser_tests/menu.spec.ts @@ -59,29 +59,65 @@ test.describe('Menu', () => { expect(newChildrenCount).toBe(initialChildrenCount + 1) }) - test('Sidebar node preview and drag to canvas', async ({ comfyPage }) => { - // Open the sidebar - const tab = comfyPage.menu.nodeLibraryTab - await tab.open() - await tab.toggleFirstFolder() + test.describe('Node library sidebar', () => { + test('Node preview and drag to canvas', async ({ comfyPage }) => { + // Open the sidebar + const tab = comfyPage.menu.nodeLibraryTab + await tab.open() + await tab.getFolder('sampling').click() - // Hover over a node to display the preview - const nodeSelector = '.p-tree-node-leaf' - await comfyPage.page.hover(nodeSelector) + // Hover over a node to display the preview + const nodeSelector = '.p-tree-node-leaf' + await comfyPage.page.hover(nodeSelector) - // Verify the preview is displayed - const previewVisible = await comfyPage.page.isVisible( - '.node-lib-node-preview' - ) - expect(previewVisible).toBe(true) + // Verify the preview is displayed + const previewVisible = await comfyPage.page.isVisible( + '.node-lib-node-preview' + ) + expect(previewVisible).toBe(true) - const count = await comfyPage.getGraphNodesCount() - // Drag the node onto the canvas - const canvasSelector = '#graph-canvas' - await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector) + const count = await comfyPage.getGraphNodesCount() + // Drag the node onto the canvas + const canvasSelector = '#graph-canvas' + await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector) - // Verify the node is added to the canvas - expect(await comfyPage.getGraphNodesCount()).toBe(count + 1) + // Verify the node is added to the canvas + expect(await comfyPage.getGraphNodesCount()).toBe(count + 1) + }) + + test('Bookmark node', async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', []) + + // Open the sidebar + const tab = comfyPage.menu.nodeLibraryTab + await tab.open() + await tab.getFolder('sampling').click() + + // Bookmark the node + await tab + .getNode('KSampler (Advanced)') + .locator('.bookmark-button') + .click() + + // Verify the bookmark is added to the bookmarks tab + expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual( + ['KSampler (Advanced)'] + ) + // Verify the bookmark node with the same name is added to the tree. + expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2) + }) + + test('Ignores unrecognized node', async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', ['foo']) + + // Open the sidebar + const tab = comfyPage.menu.nodeLibraryTab + await tab.open() + + expect(await tab.getFolder('sampling').count()).toBe(1) + expect(await tab.getNode('foo').count()).toBe(0) + await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', []) + }) }) test('Can change canvas zoom speed setting', async ({ comfyPage }) => { diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue index 216c9b40b4..4aad2fbafe 100644 --- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue +++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue @@ -148,14 +148,20 @@ const toggleBookmark = (bookmark: string) => { } } const bookmarkedRoot = computed(() => { - const bookmarkNodes = bookmarks.value.map((bookmark: string) => { - const parts = bookmark.split('/') - const nodeName = parts.pop() - const category = parts.join('/') - const nodeDef = _.clone(nodeDefStore.nodeDefsByDisplayName[nodeName]) - nodeDef.category = category - return nodeDef - }) + const bookmarkNodes = bookmarks.value + .map((bookmark: string) => { + const parts = bookmark.split('/') + const displayName = parts.pop() + const category = parts.join('/') + const srcNodeDef = nodeDefStore.nodeDefsByDisplayName[displayName] + if (!srcNodeDef) { + return null + } + const nodeDef = _.clone(srcNodeDef) + nodeDef.category = category + return nodeDef + }) + .filter((nodeDef) => nodeDef !== null) return buildNodeDefTree(bookmarkNodes) })