New Workflow Templates Modal

browser_tests/tests/templates.spec.ts

@@ -80,6 +80,12 @@ test.describe('Templates', () => {
     // Load a template
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
+
+    await comfyPage.page
+      .locator(
+        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+      )
+      .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
 
@@ -102,48 +108,72 @@ test.describe('Templates', () => {
     expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
 
-  test('Uses title field as fallback when the key is not found in locales', async ({
+  test('Uses proper locale files for templates', async ({ comfyPage }) => {
+    // Set locale to French before opening templates
+    await comfyPage.setSetting('Comfy.Locale', 'fr')
+
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
+
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+
+    const request = await requestPromise
+
+    // Verify French index was requested
+    expect(request.url()).toContain('templates/index.fr.json')
+
+    await expect(comfyPage.templates.content).toBeVisible()
+  })
+
+  test('Falls back to English templates when locale file not found', async ({
     comfyPage
   }) => {
-    // Capture request for the index.json
-    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
-      // Add a new template that won't have a translation pre-generated
-      const response = [
-        {
-          moduleName: 'default',
-          title: 'FALLBACK CATEGORY',
-          type: 'image',
-          templates: [
-            {
-              name: 'unknown_key_has_no_translation_available',
-              title: 'FALLBACK TEMPLATE NAME',
-              mediaType: 'image',
-              mediaSubtype: 'webp',
-              description: 'No translations found'
-            }
-          ]
-        }
-      ]
+    // Set locale to a language that doesn't have a template file
+    await comfyPage.setSetting('Comfy.Locale', 'de') // German - no index.de.json exists
+
+    // Wait for the German request (expected to 404)
+    const germanRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.de.json'
+    )
+
+    // Wait for the fallback English request
+    const englishRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.json'
+    )
+
+    // Intercept the German file to simulate a 404
+    await comfyPage.page.route('**/templates/index.de.json', async (route) => {
       await route.fulfill({
-        status: 200,
-        body: JSON.stringify(response),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
+        status: 404,
+        headers: { 'Content-Type': 'text/plain' },
+        body: 'Not Found'
       })
     })
 
+    // Allow the English index to load normally
+    await comfyPage.page.route('**/templates/index.json', (route) =>
+      route.continue()
+    )
+
     // Load the templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Verify German was requested first, then English as fallback
+    const germanRequest = await germanRequestPromise
+    const englishRequest = await englishRequestPromise
+
+    expect(germanRequest.url()).toContain('templates/index.de.json')
+    expect(englishRequest.url()).toContain('templates/index.json')
 
-    // Expect the title to be used as fallback for template cards
+    // Verify English titles are shown as fallback
     await expect(
-      comfyPage.templates.content.getByText('FALLBACK TEMPLATE NAME')
+      comfyPage.templates.content.getByRole('heading', {
+        name: 'Image Generation'
+      })
     ).toBeVisible()
-
-    // Expect the title to be used as fallback for the template categories
-    await expect(comfyPage.page.getByLabel('FALLBACK CATEGORY')).toBeVisible()
   })
 
   test('template cards are dynamically sized and responsive', async ({
@@ -153,36 +183,57 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Wait for at least one template card to appear
-    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
-      timeout: 5000
-    })
+    const firstCard = comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .first()
+    await expect(firstCard).toBeVisible({ timeout: 5000 })
 
-    // Take snapshot of the template grid
-    const templateGrid = comfyPage.templates.content.locator('.grid').first()
+    // Get the template grid
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
+
+    // Check grid layout at desktop size (default)
+    const desktopGridClass = await templateGrid.getAttribute('class')
+    expect(desktopGridClass).toContain('grid')
+    expect(desktopGridClass).toContain(
+      'grid-cols-[repeat(auto-fill,minmax(16rem,1fr))]'
+    )
+
+    // Count visible cards at desktop size
+    const desktopCardCount = await comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .count()
+    expect(desktopCardCount).toBeGreaterThan(0)
 
     // Check cards at mobile viewport size
     await comfyPage.page.setViewportSize({ width: 640, height: 800 })
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
+    // Grid should still be responsive at mobile size
+    const mobileGridClass = await templateGrid.getAttribute('class')
+    expect(mobileGridClass).toContain('grid')
 
     // Check cards at tablet size
     await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-tablet.png')
+    // Grid should still be responsive at tablet size
+    const tabletGridClass = await templateGrid.getAttribute('class')
+    expect(tabletGridClass).toContain('grid')
   })
 
   test('hover effects work on template cards', async ({ comfyPage }) => {
     // Open templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Get a template card
-    const firstCard = comfyPage.page.locator('.template-card').first()
+    // Get a template card using data-testid
+    const firstCard = comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .first()
     await expect(firstCard).toBeVisible({ timeout: 5000 })
 
+    // Check initial state - card should have transition classes
     // Take snapshot before hover
     await expect(firstCard).toHaveScreenshot('template-card-before-hover.png')
 
@@ -257,21 +308,42 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Verify cards are visible with varying content lengths
-    await expect(
-      comfyPage.page.getByText('This is a short description.')
-    ).toBeVisible({ timeout: 5000 })
+    // Wait for cards to load
     await expect(
-      comfyPage.page.getByText('This is a medium length description')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByText('This is a much longer description')
+      comfyPage.page.locator(
+        '[data-testid="template-workflow-short-description"]'
+      )
     ).toBeVisible({ timeout: 5000 })
 
-    // Take snapshot of a grid with specific cards
-    const templateGrid = comfyPage.templates.content
-      .locator('.grid:has-text("Short Description")')
-      .first()
+    // Verify all three cards with different descriptions are visible
+    const shortDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-short-description"]'
+    )
+    const mediumDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-medium-description"]'
+    )
+    const longDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-long-description"]'
+    )
+
+    await expect(shortDescCard).toBeVisible()
+    await expect(mediumDescCard).toBeVisible()
+    await expect(longDescCard).toBeVisible()
+
+    // Verify descriptions are visible and have line-clamp class
+    // The description is in a p tag with text-muted class
+    const shortDesc = shortDescCard.locator('p.text-muted.line-clamp-2')
+    const mediumDesc = mediumDescCard.locator('p.text-muted.line-clamp-2')
+    const longDesc = longDescCard.locator('p.text-muted.line-clamp-2')
+
+    await expect(shortDesc).toContainText('short description')
+    await expect(mediumDesc).toContainText('medium length description')
+    await expect(longDesc).toContainText('much longer description')
+
+    // Verify grid layout maintains consistency
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
     await expect(templateGrid).toBeVisible()
     await expect(templateGrid).toHaveScreenshot(
       'template-grid-varying-content.png'

package.json

@@ -123,6 +123,7 @@
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
+    "@vueuse/integrations": "^13.9.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",