diff --git a/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts b/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts new file mode 100644 index 0000000000..51f95a92ad --- /dev/null +++ b/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts @@ -0,0 +1,102 @@ +import { + comfyExpect as expect, + comfyPageFixture as test +} from '../../../fixtures/ComfyPage' + +test.describe('Advanced Widget Visibility', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true) + await comfyPage.settings.setSetting( + 'Comfy.Node.AlwaysShowAdvancedWidgets', + false + ) + + // Add a ModelSamplingFlux node which has both advanced (max_shift, + // base_shift) and non-advanced (width, height) widgets. + await comfyPage.page.evaluate(() => { + const node = window.LiteGraph!.createNode('ModelSamplingFlux')! + node.pos = [500, 200] + window.app!.graph.add(node) + }) + await comfyPage.vueNodes.waitForNodes() + }) + + function getNode( + comfyPage: Parameters[2]>[0]['comfyPage'] + ) { + return comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux') + } + + function getWidgets( + comfyPage: Parameters[2]>[0]['comfyPage'] + ) { + return getNode(comfyPage).locator('.lg-node-widget') + } + + test('should hide advanced widgets by default', async ({ comfyPage }) => { + const node = getNode(comfyPage) + const widgets = getWidgets(comfyPage) + + // Non-advanced widgets (width, height) should be visible + await expect(widgets).toHaveCount(2) + await expect(node.getByLabel('width', { exact: true })).toBeVisible() + await expect(node.getByLabel('height', { exact: true })).toBeVisible() + + // Advanced widgets should not be rendered + await expect( + node.getByLabel('max_shift', { exact: true }) + ).not.toBeVisible() + await expect( + node.getByLabel('base_shift', { exact: true }) + ).not.toBeVisible() + + // "Show advanced inputs" button should be present + await expect(node.getByText('Show advanced inputs')).toBeVisible() + }) + + test('should show advanced widgets when per-node toggle is clicked', async ({ + comfyPage + }) => { + const node = getNode(comfyPage) + const widgets = getWidgets(comfyPage) + + await expect(widgets).toHaveCount(2) + + // Click the toggle button to show advanced widgets + await node.getByText('Show advanced inputs').click() + + await expect(widgets).toHaveCount(4) + await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible() + await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible() + + // Button text should change to "Hide advanced inputs" + await expect(node.getByText('Hide advanced inputs')).toBeVisible() + + // Click again to hide + await node.getByText('Hide advanced inputs').click() + await expect(widgets).toHaveCount(2) + }) + + test('should show advanced widgets when global setting is enabled', async ({ + comfyPage + }) => { + const node = getNode(comfyPage) + const widgets = getWidgets(comfyPage) + + await expect(widgets).toHaveCount(2) + + // Enable the global setting + await comfyPage.settings.setSetting( + 'Comfy.Node.AlwaysShowAdvancedWidgets', + true + ) + + // All 4 widgets should now be visible + await expect(widgets).toHaveCount(4) + await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible() + await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible() + + // The toggle button should not be shown when global setting is active + await expect(node.getByText('Show advanced inputs')).not.toBeVisible() + }) +}) diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index 0c2feb93fd..7faef35f98 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -204,7 +204,7 @@ function safeWidgetMapper( return { canvasOnly: widget.options.canvasOnly, - advanced: widget.advanced, + advanced: widget.options?.advanced ?? widget.advanced, hidden: widget.options.hidden, read_only: widget.options.read_only }