From 048af23439b154a8d6bb5603324ef8f6a6c4457c Mon Sep 17 00:00:00 2001 From: yiqun12 Date: Sat, 7 Jun 2025 14:00:23 -0700 Subject: [PATCH] feat: template version display --- browser_tests/tests/aboutPanel.spec.ts | 51 ++++++++++++++++++++++++++ src/scripts/api.ts | 8 ++++ src/stores/aboutPanelStore.ts | 19 +++++++++- src/stores/templateVersionStore.ts | 34 +++++++++++++++++ vite.config.mts | 3 ++ 5 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 browser_tests/tests/aboutPanel.spec.ts create mode 100644 src/stores/templateVersionStore.ts diff --git a/browser_tests/tests/aboutPanel.spec.ts b/browser_tests/tests/aboutPanel.spec.ts new file mode 100644 index 000000000..3d27f4a9d --- /dev/null +++ b/browser_tests/tests/aboutPanel.spec.ts @@ -0,0 +1,51 @@ +import { expect } from '@playwright/test' + +import { comfyPageFixture as test } from '../fixtures/ComfyPage' + +/** + * This file contains End-to-End (E2E) tests for the About Panel. + * + * It tests the real integration between the frontend and the live backend API. + * + * Pre-requisites for running these tests: + * 1. The ComfyUI backend server must be running. + * 2. The custom API endpoint '/templates_version' must be active on the backend + * (e.g., via `custom_nodes/templates_version.py`). + */ +test.describe('About Panel - E2E', () => { + test('should display templates_version version from the real API', async ({ + comfyPage + }) => { + // 1. Fetch the expected version directly from the REAL API endpoint. + // This makes the test adaptable to changes in the backend's response. + const response = await comfyPage.request.get( + `${comfyPage.url}/templates_version` + ) + expect( + response.ok(), + 'The real /templates_version API endpoint must be available and return a 200 OK status.' + ).toBeTruthy() + + const { version: expectedVersion } = await response.json() + expect( + expectedVersion, + 'The real /templates_version API response should contain a "version" field.' + ).toBeDefined() + + // 2. Open the Settings dialog and navigate to the About tab. + await comfyPage.page.getByRole('button', { name: '⚙' }).click() + await comfyPage.page.getByLabel('About').click() + + // 3. Find the link element that contains the core text "Workflows_Templates". + const linkLocator = comfyPage.page.getByRole('link', { + name: /Workflows_Templates/ + }) + + // 4. Assert that the base link element is visible. + // We give it a slightly longer timeout to account for real network latency. + await expect(linkLocator).toBeVisible({ timeout: 10000 }) + + // 5. Assert that the element's text contains the version fetched from the real API. + await expect(linkLocator).toHaveText(new RegExp(expectedVersion)) + }) +}) diff --git a/src/scripts/api.ts b/src/scripts/api.ts index 85316a74a..f08ae7506 100644 --- a/src/scripts/api.ts +++ b/src/scripts/api.ts @@ -733,6 +733,14 @@ export class ComfyApi extends EventTarget { return await res.json() } + async getTemplatesVersion(): Promise<{ version: string }> { + const res = await this.fetchApi('/templates_version') + if (!res.ok) { + throw new Error(`Failed to fetch /templates_version: ${res.statusText}`) + } + return res.json() + } + /** * Sends a POST request to the API * @param {*} type The endpoint to post to diff --git a/src/stores/aboutPanelStore.ts b/src/stores/aboutPanelStore.ts index cdb626095..0ab245882 100644 --- a/src/stores/aboutPanelStore.ts +++ b/src/stores/aboutPanelStore.ts @@ -1,19 +1,29 @@ import { defineStore } from 'pinia' -import { computed } from 'vue' +import { computed, onMounted } from 'vue' import { AboutPageBadge } from '@/types/comfy' import { electronAPI, isElectron } from '@/utils/envUtil' import { useExtensionStore } from './extensionStore' import { useSystemStatsStore } from './systemStatsStore' +import { useTemplateVersionStore } from './templateVersionStore' export const useAboutPanelStore = defineStore('aboutPanel', () => { const frontendVersion = __COMFYUI_FRONTEND_VERSION__ const extensionStore = useExtensionStore() const systemStatsStore = useSystemStatsStore() + const templateVersionStore = useTemplateVersionStore() + const coreVersion = computed( () => systemStatsStore?.systemStats?.system?.comfyui_version ?? '' ) + const workflowsTemplatesVersion = computed( + () => templateVersionStore?.workflowsTemplatesVersion + ) + + onMounted(async () => { + await templateVersionStore.fetchTemplateVersion() + }) const coreBadges = computed(() => [ // In electron, the ComfyUI is packaged without the git repo, @@ -37,7 +47,12 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => { url: 'https://www.comfy.org/discord', icon: 'pi pi-discord' }, - { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' } + { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }, + { + label: `Workflows_Templates v${workflowsTemplatesVersion.value}`, + url: 'https://github.com/Comfy-Org/workflow_templates', + icon: 'pi pi-globe' + } ]) const allBadges = computed(() => [ diff --git a/src/stores/templateVersionStore.ts b/src/stores/templateVersionStore.ts new file mode 100644 index 000000000..7f1533d05 --- /dev/null +++ b/src/stores/templateVersionStore.ts @@ -0,0 +1,34 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' + +import { api } from '@/scripts/api' + +export const useTemplateVersionStore = defineStore('templateVersion', () => { + const workflowsTemplatesVersion = ref('') + const isLoading = ref(false) + const error = ref(null) + + async function fetchTemplateVersion() { + isLoading.value = true + error.value = null + + try { + const response = await api.getTemplatesVersion() + workflowsTemplatesVersion.value = response.version + } catch (err) { + error.value = + err instanceof Error ? err.message : 'Failed to fetch template version' + console.error('Error fetching template version:', err) + workflowsTemplatesVersion.value = '' + } finally { + isLoading.value = false + } + } + + return { + workflowsTemplatesVersion, + isLoading, + error, + fetchTemplateVersion + } +}) diff --git a/vite.config.mts b/vite.config.mts index eda339517..d10bc83ec 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -31,6 +31,9 @@ export default defineConfig({ server: { host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined, proxy: { + '/templates_version': { + target: DEV_SERVER_COMFYUI_URL + }, '/internal': { target: DEV_SERVER_COMFYUI_URL },