Vito
cd284432f5
* feat(cutover): every entry point opens the workspace; legacy pages stay reachable The top-bar PM button, the nodes' Web UI buttons and /prompt_manager/web now open the workspace Library. Overview's cards open their native pages. The legacy pages stay at their URLs, with no route changed. Classic Web UI no longer navigates the canvas away when a popup is blocked; it shows a notification, as the focused node does. Closes #525 * feat(cutover): link the legacy pages from System and when the workspace fails to load System's Overview section ends with one small Legacy pages line (D165). If a workspace module fails to load or throws while starting, the page shows a static message with the same links instead of an empty shell. Part of #525 * test(cutover): prove the Pair node's Web UI on the real host Part of #525 * test(cutover): count the new real-host cases in the stock matrix pin The PM button test and three renderer-and-reload tests, in 2 projects, take the stock matrix from 110 to 118. Part of #525
184 lines
9.6 KiB
JavaScript
184 lines
9.6 KiB
JavaScript
import { test, expect } from '../../tools/vendor/node_modules/@playwright/test/index.mjs';
|
|
import { installHostHooks } from './host-fixture.mjs';
|
|
|
|
installHostHooks(test);
|
|
|
|
for (const type of ['PromptManager', 'PromptManagerText']) {
|
|
test(`${type} selects real database prompts and preserves text across renderers and reload`, async ({ page, request }, testInfo) => {
|
|
const text = `Host test ${type} ${testInfo.project.name}`;
|
|
const saved = await request.post('/prompt_manager/save', { data: { text, category: 'Host tests', tags: ['host-test'] } });
|
|
expect(saved.ok()).toBe(true);
|
|
expect((await saved.json()).success).toBe(true);
|
|
const id = await page.evaluate(async type => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = LiteGraph.createNode(type);
|
|
app.graph.add(node);
|
|
node.setSize([650, 800]);
|
|
app.canvas.centerOnNode(node);
|
|
return node.id;
|
|
}, type);
|
|
const recent = page.getByRole('button', { name: '📋 Recent', exact: true });
|
|
await expect(recent).toBeVisible();
|
|
if (type === 'PromptManager') {
|
|
await expect(page.locator('.pm-classic')).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '🔍 Search', exact: true })).toHaveCSS('background-color', 'rgb(8, 119, 187)');
|
|
}
|
|
await recent.click();
|
|
await page.getByText(text, { exact: true }).click();
|
|
const state = () => page.evaluate(async id => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = app.graph.getNodeById(id);
|
|
return Object.fromEntries(node.widgets.filter(widget => ['text', 'category', 'tags'].includes(widget.name)).map(widget => [widget.name, widget.value]));
|
|
}, id);
|
|
await expect.poll(state).toMatchObject({ text, category: 'Host tests', tags: 'host-test' });
|
|
for (const renderer of [!testInfo.project.metadata.initialRenderer, testInfo.project.metadata.initialRenderer]) {
|
|
await page.evaluate(async renderer => {
|
|
const { app } = await import('/scripts/app.js');
|
|
await app.ui.settings.setSettingValue('Comfy.VueNodes.Enabled', renderer);
|
|
app.canvas.ds.scale = .8;
|
|
app.canvas.centerOnNode(app.graph._nodes[0]);
|
|
}, renderer);
|
|
await expect.poll(() => page.evaluate(() => LiteGraph.vueNodesMode)).toBe(renderer);
|
|
await expect(recent).toHaveCount(1);
|
|
await expect(recent).toBeVisible();
|
|
expect(await state()).toMatchObject({ text });
|
|
}
|
|
const output = await page.evaluate(async id => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const prompt = await app.graphToPrompt();
|
|
const workflow = app.graph.serialize();
|
|
await app.loadGraphData(workflow);
|
|
return prompt.output[String(id)].inputs;
|
|
}, id);
|
|
expect(output.text).toBe(text);
|
|
await expect.poll(state).toMatchObject({ text, category: 'Host tests', tags: 'host-test' });
|
|
await expect(recent).toHaveCount(1);
|
|
await page.screenshot({ path: testInfo.outputPath(`${type}-reloaded.png`) });
|
|
const removedStyle = await page.evaluate(async id => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = app.graph.getNodeById(id);
|
|
const style = node._styleSheet;
|
|
app.graph.remove(node);
|
|
return !style.isConnected;
|
|
}, id);
|
|
expect(removedStyle).toBe(true);
|
|
await expect(recent).toHaveCount(0);
|
|
});
|
|
}
|
|
|
|
test('all node schemas and extension entrypoints load from the real host', async ({ page, request }) => {
|
|
const definitions = await (await request.get('/object_info')).json();
|
|
expect(definitions.PromptManager.display_name).toBe('Prompt Manager (Classic)');
|
|
for (const name of ['PromptManager', 'PromptManagerText', 'PromptSearchList']) expect(definitions[name]?.name).toBe(name);
|
|
const extensions = await (await request.get('/extensions')).json();
|
|
expect(extensions.filter(path => path.startsWith('/extensions/promptmanager/'))).toEqual(['/extensions/promptmanager/prompt_manager.js']);
|
|
const result = await page.evaluate(async () => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = LiteGraph.createNode('PromptSearchList');
|
|
app.graph.add(node);
|
|
const workflow = app.graph.serialize();
|
|
await app.loadGraphData(workflow);
|
|
return { type: app.graph._nodes[0].type, extension: app.extensions.some(item => item.name === 'PromptManager.UI') };
|
|
});
|
|
expect(result).toEqual({ type: 'PromptSearchList', extension: true });
|
|
});
|
|
|
|
for (const type of ['PromptManager', 'PromptManagerText']) {
|
|
test(`${type} Web UI button opens the workspace; legacy pages still load`, async ({ page }) => {
|
|
await page.evaluate(async type => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = LiteGraph.createNode(type);
|
|
app.graph.add(node);
|
|
app.canvas.centerOnNode(node);
|
|
}, type);
|
|
const popupPromise = page.waitForEvent('popup');
|
|
await page.getByRole('button', { name: '🌐 Web UI', exact: true }).click();
|
|
const popup = await popupPromise;
|
|
await popup.waitForLoadState('domcontentloaded');
|
|
await expect(popup).toHaveURL(/\/prompt_manager\/workspace#\/library$/);
|
|
await expect(popup.locator('#workspace-main h1')).toHaveText('Prompt library');
|
|
await popup.goto(new URL('/prompt_manager/gallery', page.url()).href);
|
|
await expect(popup.locator('#addPromptBtn')).toBeVisible();
|
|
await popup.close();
|
|
});
|
|
}
|
|
|
|
test('top-bar PM button opens the workspace in either renderer', async ({ page }) => {
|
|
const button = page.locator('.promptmanager-top-button-group button, #pm-toolbar-btn').first();
|
|
await expect(button).toBeVisible();
|
|
const popupPromise = page.waitForEvent('popup');
|
|
await button.click();
|
|
const popup = await popupPromise;
|
|
await expect(popup).toHaveURL(/\/prompt_manager\/workspace#\/library$/);
|
|
await expect(popup.locator('#workspace-main h1')).toHaveText('Prompt library');
|
|
await popup.close();
|
|
});
|
|
|
|
for (const [type, buttonName] of [['PromptManager', '🌐 Web UI'], ['PromptManagerFocused', 'Web UI ↗'], ['PromptManagerPair', 'Web UI ↗']]) {
|
|
test(`${type} and the PM button open the workspace after switching renderers both ways, a workflow reload and node removal`, async ({ page }, testInfo) => {
|
|
const id = await page.evaluate(async type => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = LiteGraph.createNode(type);
|
|
app.graph.add(node);
|
|
node.setSize([900, 800]);
|
|
app.canvas.centerOnNode(node);
|
|
return node.id;
|
|
}, type);
|
|
const webUi = page.getByRole('button', { name: buttonName, exact: true });
|
|
const pm = page.locator('.promptmanager-top-button-group button, #pm-toolbar-btn').first();
|
|
const opensWorkspace = async button => {
|
|
await expect(button).toHaveCount(1);
|
|
await expect(button).toBeVisible();
|
|
const popupPromise = page.waitForEvent('popup');
|
|
await button.click();
|
|
const popup = await popupPromise;
|
|
await expect(popup).toHaveURL(/\/prompt_manager\/workspace#\/library$/);
|
|
await expect(popup.locator('#workspace-main h1')).toHaveText('Prompt library');
|
|
await popup.close();
|
|
};
|
|
await opensWorkspace(webUi);
|
|
for (const renderer of [!testInfo.project.metadata.initialRenderer, testInfo.project.metadata.initialRenderer]) {
|
|
await page.evaluate(async renderer => {
|
|
const { app } = await import('/scripts/app.js');
|
|
await app.ui.settings.setSettingValue('Comfy.VueNodes.Enabled', renderer);
|
|
app.canvas.ds.scale = .8;
|
|
app.canvas.centerOnNode(app.graph._nodes[0]);
|
|
}, renderer);
|
|
await expect.poll(() => page.evaluate(() => LiteGraph.vueNodesMode)).toBe(renderer);
|
|
await opensWorkspace(webUi);
|
|
await opensWorkspace(pm);
|
|
}
|
|
await page.evaluate(async () => {
|
|
const { app } = await import('/scripts/app.js');
|
|
await app.loadGraphData(app.graph.serialize());
|
|
});
|
|
await opensWorkspace(webUi);
|
|
await opensWorkspace(pm);
|
|
await page.evaluate(async id => {
|
|
const { app } = await import('/scripts/app.js');
|
|
app.graph.remove(app.graph.getNodeById(id));
|
|
}, id);
|
|
await expect(webUi).toHaveCount(0);
|
|
await opensWorkspace(pm);
|
|
});
|
|
}
|
|
|
|
test('Classic controls follow actual ComfyUI light and dark palettes', async ({ page }, testInfo) => {
|
|
await page.evaluate(async () => {
|
|
const { app } = await import('/scripts/app.js');
|
|
const node = LiteGraph.createNode('PromptManager');
|
|
app.graph.add(node);
|
|
node.setSize([650, 800]);
|
|
app.canvas.centerOnNode(node);
|
|
});
|
|
for (const palette of ['light', 'dark']) {
|
|
await page.evaluate(async palette => {
|
|
const { app } = await import('/scripts/app.js');
|
|
await app.ui.settings.setSettingValue('Comfy.ColorPalette', palette);
|
|
}, palette);
|
|
await expect(page.locator('.pm-classic')).toHaveAttribute('data-ca-theme', palette);
|
|
await expect(page.getByRole('button', { name: '🔍 Search', exact: true })).toHaveCSS('background-color', 'rgb(8, 119, 187)');
|
|
await page.screenshot({ path: testInfo.outputPath(`classic-${palette}.png`) });
|
|
}
|
|
});
|