From 44f900ef56f405bb2e13553f06a8ef00cad206c4 Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Thu, 3 Oct 2024 00:13:46 -0500 Subject: [PATCH] Typing fixes, initial tests --- browser_tests/documentationSidebar.spec.ts | 63 +++++++++++++++++++++ src/extensions/core/documentationSidebar.ts | 42 +++++++------- src/scripts/app.ts | 1 + 3 files changed, 86 insertions(+), 20 deletions(-) create mode 100644 browser_tests/documentationSidebar.spec.ts diff --git a/browser_tests/documentationSidebar.spec.ts b/browser_tests/documentationSidebar.spec.ts new file mode 100644 index 000000000..b2c51865f --- /dev/null +++ b/browser_tests/documentationSidebar.spec.ts @@ -0,0 +1,63 @@ +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' + +test.describe('Documentation Sidebar', () => { + test('Sidebar registered', async ({ comfyPage }) => { + await expect( + comfyPage.page.locator('.documentationSidebar-tab-button') + ).toBeVisible() + }) + test('Parses help for basic node', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('default') + await comfyPage.page.locator('.documentationSidebar-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container') + //Check that each independently parsed element exists + await expect(docPane).toContainText('Load Checkpoint') + await expect(docPane).toContainText('Loads a diffusion model') + await expect(docPane).toContainText('The name of the checkpoint') + await expect(docPane).toContainText('The VAE model used') + }) + test('Responds to hovering over node', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('default') + await comfyPage.page.locator('.documentationSidebar-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container') + await comfyPage.page.mouse.move(321, 593) + const tooltipTimeout = 500 + await comfyPage.page.waitForTimeout(tooltipTimeout + 16) + await expect(comfyPage.page.locator('.node-tooltip')).not.toBeVisible() + await expect( + comfyPage.page.locator( + '.side-bar-panel > div > div > div > div:nth-child(4)' + ) + ).toBeFocused() + }) + test('Updates when a new node is selected', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('default') + await comfyPage.page.locator('.documentationSidebar-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container') + await comfyPage.page.mouse.click(557, 440) + await expect(docPane).not.toContainText('Load Checkpoint') + await expect(docPane).toContainText('CLIP Text Encode (Prompt)') + await expect(docPane).toContainText('The text to be encoded') + await expect(docPane).toContainText( + 'A conditioning containing the embedded text' + ) + }) + test.describe('Theming', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.ColorPalette', 'dark') + }) + test.afterEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.ColorPalette', 'dark') + }) + test('Responds to a change in theme', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('default') + await comfyPage.page.locator('.documentationSidebar-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container') + await comfyPage.setSetting('Comfy.ColorPalette', 'light') + await expect(docPane).toHaveScreenshot( + 'documentation-sidebar-light-theme.png' + ) + }) + }) +}) diff --git a/src/extensions/core/documentationSidebar.ts b/src/extensions/core/documentationSidebar.ts index aa640d835..e710fe847 100644 --- a/src/extensions/core/documentationSidebar.ts +++ b/src/extensions/core/documentationSidebar.ts @@ -1,8 +1,10 @@ import { app } from '../../scripts/app' -import { api } from '../../scripts/api' import { getColorPalette } from './colorPalette' +import type { CustomSidebarTabExtension } from '../../types/extensionTypes' +import { LiteGraph } from '@comfyorg/litegraph' var helpDOM = document.createElement('div') +var cdef function setCollapse(el, doCollapse) { if (doCollapse) { @@ -36,16 +38,16 @@ function setCollapse(el, doCollapse) { } } } -helpDOM.collapseOnClick = function () { +function collapseOnClick() { let doCollapse = this.children[0].innerHTML == '-' setCollapse(this.parentElement, doCollapse) } //TODO: connect with doc tooltips //If doc sidebar is opened, the current node should not display tooltips, //but navigate the sidebar pane as appropriate. -helpDOM.selectHelp = function (name: string, value?: string) { - if (helpDOM.def[2]?.select) { - return helpDOM.def[2].select(this, name, value) +function selectHelp(name: string, value?: string) { + if (cdef[2]?.select) { + return cdef[2].select(this, name, value) } //attempt to navigate to name in help function collapseUnlessMatch(items, t) { @@ -86,24 +88,24 @@ helpDOM.selectHelp = function (name: string, value?: string) { } } app.tooltipCallback = function (node, name, value) { - if (node != app.graph._nodes[app.graph._nodes.length - 1]) { + if (node != app.canvas.current_node) { return false } if (name == 'DESCRIPTION') { return false } - helpDOM.selectHelp(name, value) + selectHelp(name, value) return true } -function updateNode(node) { +function updateNode(node?) { //Always use latest node. If it lacks documentation, that should be communicated //instead of confusing users by picking a different recent node that does - node ||= app.graph._nodes[app.graph._nodes.length - 1] + node ||= app.canvas.current_node const def = LiteGraph.getNodeType(node.type).nodeData - if (helpDOM.def == def) { + if (cdef == def) { return } - helpDOM.def = def + cdef = def if (Array.isArray(def.description)) { helpDOM.innerHTML = def.description[1] } else { @@ -166,12 +168,12 @@ docStyleElement.innerHTML = documentationStyle document.body.append(docStyleElement) var bringToFront -let documentationSidebar = { - id: 'documentationSidebar', - title: 'Documentation', - icon: 'DocumentationIcon', - type: 'custom', - render: (e) => { +class DocumentationSidebar implements CustomSidebarTabExtension { + id = 'documentationSidebar' + title = 'Documentation' + type + icon = 'DocumentationIcon' + render(e) { if (!bringToFront) { var bringToFront = app.canvas.bringToFront app.canvas.bringToFront = function (node) { @@ -207,9 +209,9 @@ let documentationSidebar = { if (!e?.children?.length) { e.appendChild(helpDOM) } - if (helpDOM.def.description[2]?.render) { - helpDOM.def.description[2].render(e) + if (cdef.description[2]?.render) { + cdef.description[2].render(e) } } } -app.extensionManager.registerSidebarTab(documentationSidebar) +app.extensionManager.registerSidebarTab(new DocumentationSidebar()) diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 2619484a6..9992dbbd6 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -120,6 +120,7 @@ export class ComfyApp { canvas: LGraphCanvas dragOverNode: LGraphNode | null canvasEl: HTMLCanvasElement + tooltipCallback?: (node: LGraphNode, name: string, value?: string) => boolean // x, y, scale zoom_drag_start: [number, number, number] | null lastNodeErrors: any[] | null