WIP drag and drop/mobile tests

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -146,6 +146,13 @@ export class AppModeHelper {
     await this.toggleAppMode()
   }
 
+  get centerPanel(): Locator {
+    return this.page.getByTestId(TestIds.linear.centerPanel)
+  }
+  get mobileView(): Locator {
+    return this.page.getByTestId(TestIds.linear.mobile)
+  }
+
   /**
    * 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

@@ -119,6 +119,13 @@ export const TestIds = {
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  linear: {
+    centerPanel: 'linear-center-panel',
+    mobile: 'linear-mobile',
+    mobileNavigation: 'linear-mobile-navigation',
+    outputInfo: 'linear-output-info',
+    widgetContainer: 'linear-widgets'
+  },
   builder: {
     footerNav: 'builder-footer-nav',
     saveButton: 'builder-save-button',

browser_tests/tests/appMode.spec.ts

@@ -0,0 +1,60 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+test.describe('App mode usage', () => {
+  test('Drag and Drop', async ({ comfyPage }) => {
+    const { centerPanel } = comfyPage.appMode
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+    //an app without an image input will load the workflow
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).not.toBeVisible()
+
+    //prep a load image
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    const loadImage = await comfyPage.vueNodes.getNodeLocator('12')
+    await expect(loadImage).toBeVisible()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['12', 'image']])
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input will upload the image to the input
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input can load from a uri-source
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    await expect(centerPanel).toBeVisible()
+  })
+  test('Widget Interaction', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([
+      ['4', 'seed'],
+      ['4', 'sampler_name'],
+      ['6', 'text']
+    ])
+  })
+  test.describe('Mobile', { tag: ['@mobile'] }, () => {
+    test('smoke', async ({ comfyPage }) => {
+      const { mobileView } = comfyPage.appMode
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+      await expect(mobileView).toBeVisible()
+
+      const navigation = comfyPage.page
+        .getByRole('tablist')
+        .filter({ hasText: 'Assets' })
+      const panel = comfyPage.page.getByRole('tabpanel')
+      await expect(navigation).toBeVisible()
+      const buttons = await navigation.getByRole('tab').all()
+      await buttons[2].click()
+      await expect(panel).toContainClass('left-[200vw]')
+      //expect
+      await buttons[0].dragTo(buttons[2], { steps: 5 })
+      await expect(panel).toContainClass('left-[100vw]')
+
+      await navigation.getByRole('tab', { name: 'Edit & Run' }).click()
+      const widgets = mobileView.getByTestId(TestIds.linear.widgetContainer)
+      await expect(widgets).toBeInViewport({ ratio: 1 })
+    })
+  })
+})

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -154,7 +154,10 @@ const menuEntries = computed<MenuItem[]>(() => [
 ])
 </script>
 <template>
-  <section class="absolute flex size-full flex-col bg-secondary-background">
+  <section
+    class="absolute flex size-full flex-col bg-secondary-background"
+    data-testid="linear-mobile"
+  >
     <header
       class="flex h-16 w-full items-center gap-3 border-b border-border-subtle bg-base-background px-4 py-3"
     >
@@ -191,11 +194,17 @@ const menuEntries = computed<MenuItem[]>(() => [
         "
         :style="{ translate }"
       >
-        <div class="absolute h-full w-screen overflow-y-auto contain-size">
+        <div
+          class="absolute h-full w-screen overflow-y-auto contain-size"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 0"
+        >
           <LinearControls mobile @navigate-outputs="activeIndex = 1" />
         </div>
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 1"
         >
           <MobileError
             v-if="executionErrorStore.isErrorOverlayOpen"
@@ -205,18 +214,23 @@ const menuEntries = computed<MenuItem[]>(() => [
         </div>
         <AssetsSidebarTab
           class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 2"
         />
       </div>
     </div>
     <div
       ref="sliderPaneRef"
       class="flex h-22 w-full items-center justify-around gap-4 bg-secondary-background p-4"
+      role="tablist"
     >
       <Button
         v-for="([label, icon], index) in tabs"
         :key="label"
         :variant="index === activeIndex ? 'secondary' : 'muted-textonly'"
         class="h-14 grow flex-col"
+        role="tab"
+        :aria-selected="index === activeIndex"
         @click="onClick(index)"
       >
         <div class="relative size-4">

src/views/LinearView.vue

@@ -149,6 +149,7 @@ function dragDrop(e: DragEvent) {
       </SplitterPanel>
       <SplitterPanel
         id="linearCenterPanel"
+        data-testid="linear-center-panel"
         :size="CENTER_PANEL_SIZE"
         class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
         @drop="dragDrop"