Workflow switching test

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -153,6 +153,17 @@ export class AppModeHelper {
     return this.page.getByTestId(TestIds.linear.mobile)
   }
 
+  get mobileWorkflows() {
+    return this.mobileView.getByTestId(TestIds.linear.mobileWorkflows)
+  }
+  get mobileActionmenu() {
+    return this.mobileView.getByTestId(TestIds.linear.mobileActionMenu)
+  }
+  async switchMobileWorkflow(workflowName: string) {
+    await this.mobileWorkflows.click()
+    await this.page.getByRole('menu').getByText(workflowName).click()
+  }
+
   /**
    * Get the actions menu trigger for a widget in the app mode widget list.
    * @param widgetName Text shown in the widget label (e.g. "seed").

browser_tests/fixtures/selectors.ts

@@ -123,6 +123,8 @@ export const TestIds = {
     centerPanel: 'linear-center-panel',
     mobile: 'linear-mobile',
     mobileNavigation: 'linear-mobile-navigation',
+    mobileActionMenu: 'linear-mobile-menu',
+    mobileWorkflows: 'linear-mobile-workflows',
     outputInfo: 'linear-output-info',
     widgetContainer: 'linear-widgets'
   },

browser_tests/tests/appMode.spec.ts

@@ -35,7 +35,7 @@ test.describe('App mode usage', () => {
     ])
   })
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
-    test('smoke', async ({ comfyPage }) => {
+    test('panel navigation', async ({ comfyPage }) => {
       const { mobileView } = comfyPage.appMode
       await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
       await expect(mobileView).toBeVisible()
@@ -67,11 +67,20 @@ test.describe('App mode usage', () => {
         .click({ clickCount: 3 })
       await expect(steps).toHaveValue('22')
     })
-    test('workflow selection', async ({ comfyPage }) => {
-      for (const w of ['default']) await comfyPage.workflow.loadWorkflow(w)
 
-      await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
-      await expect(comfyPage.appMode.mobileView).toBeVisible()
+    test('workflow selection', async ({ comfyPage }) => {
+      const widgetNames = ['seed', 'steps', 'denoise', 'cfg']
+      for (const name of widgetNames)
+        await comfyPage.appMode.enterAppModeWithInputs([['3', name]])
+      await expect(comfyPage.appMode.mobileWorkflows).toBeVisible()
+      const widgets = comfyPage.appMode.linearWidgets
+      await comfyPage.appMode.mobileView
+        .getByRole('tab', { name: 'Edit & Run' })
+        .click()
+      for (let i = 0; i < widgetNames.length; i++) {
+        await comfyPage.appMode.switchMobileWorkflow(`(${i + 2})`)
+        await expect(widgets.getByText(widgetNames[i])).toBeVisible()
+      }
     })
   })
 })

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -164,13 +164,14 @@ const menuEntries = computed<MenuItem[]>(() => [
       <DropdownMenu :entries="menuEntries" />
       <DropdownMenu
         :entries="workflowsEntries"
-        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width)"
+        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width) overflow-y-auto"
         :collision-padding="20"
       >
         <template #button>
           <!--TODO: Use button here? Probably too much work to destyle-->
           <div
             class="flex h-10 grow items-center gap-2 rounded-sm bg-secondary-background p-2"
+            data-testid="linear-mobile-workflows"
           >
             <i
               class="icon-[lucide--panels-top-left] shrink-0 bg-primary-background"