[automated] Apply ESLint and Oxfmt fixes

- Add 'cloud' Playwright project for testing DISTRIBUTION=cloud builds
- Add build:cloud npm script (DISTRIBUTION=cloud vite build)
- Cloud project uses grep: /@cloud/ to run cloud-only tests
- Default chromium project uses grepInvert to exclude @cloud tests
- Add 2 example cloud-only tests (subscribe button, bottom panel toggle)
- Runtime toggle investigation: NOT feasible (breaks tree-shaking)
  → separate build approach chosen

Convention:
  test('feature works @cloud', ...) — cloud-only
  test('feature works @oss', ...) — OSS-only
  test('feature works', ...) — runs in both

Part of: Test Coverage Q2 Overhaul (UTIL-07)

browser_tests/fixtures/selectors.ts

@@ -51,7 +51,8 @@ export const TestIds = {
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    saveButton: 'save-workflow-button',
+    subscribeButton: 'topbar-subscribe-button'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'

browser_tests/tests/cloud.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+test.describe('Cloud distribution UI @cloud', () => {
+  test('subscribe button is attached in cloud mode @cloud', async ({
+    comfyPage
+  }) => {
+    const subscribeButton = comfyPage.page.getByTestId(
+      TestIds.topbar.subscribeButton
+    )
+    await expect(subscribeButton).toBeAttached()
+  })
+
+  test('bottom panel toggle is hidden in cloud mode @cloud', async ({
+    comfyPage
+  }) => {
+    const sideToolbar = comfyPage.page.getByTestId(TestIds.sidebar.toolbar)
+    await expect(sideToolbar).toBeVisible()
+
+    // In cloud mode, the bottom panel toggle button should not be rendered
+    const bottomPanelToggle = sideToolbar.getByRole('button', {
+      name: /bottom panel|terminal/i
+    })
+    await expect(bottomPanelToggle).toHaveCount(0)
+  })
+})

package.json

@@ -8,6 +8,7 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf|@audit/ // Run all tests except those tagged with @mobile, @perf, or @audit
+      grepInvert: /@mobile|@perf|@audit|@cloud/ // Run all tests except those tagged with @mobile, @perf, @audit, or @cloud
     },
 
     {
@@ -85,6 +85,14 @@ export default defineConfig({
     //   use: { ...devices['Desktop Safari'] },
     // },
 
+    {
+      name: 'cloud',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 15000,
+      grep: /@cloud/, // Run only tests tagged with @cloud
+      grepInvert: /@oss/ // Exclude tests tagged with @oss
+    },
+
     /* Test against mobile viewports. */
     {
       name: 'mobile-chrome',

src/utils/test-utils.test.ts

@@ -1,32 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { render, screen } from '@/utils/test-utils'
-
-import { defineComponent, h } from 'vue'
-
-const TestButton = defineComponent({
-  props: { label: { type: String, required: true } },
-  setup(props) {
-    return () => h('button', { 'data-testid': 'test-btn' }, props.label)
-  }
-})
-
-describe('test-utils', () => {
-  it('renders a component with default plugins', () => {
-    render(TestButton, { props: { label: 'Click me' } })
-    expect(screen.getByTestId('test-btn')).toHaveTextContent('Click me')
-  })
-
-  it('provides a userEvent instance by default', () => {
-    const { user } = render(TestButton, { props: { label: 'Click' } })
-    expect(user).toBeDefined()
-  })
-
-  it('allows opting out of userEvent', () => {
-    const { user } = render(TestButton, {
-      props: { label: 'Click' },
-      setupUser: false
-    })
-    expect(user).toBeUndefined()
-  })
-})

src/utils/test-utils.ts

@@ -1,85 +0,0 @@
-import type { RenderResult } from '@testing-library/vue'
-import type { ComponentMountingOptions } from '@vue/test-utils'
-
-import { createTestingPinia } from '@pinia/testing'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-
-/**
- * Creates the default set of Vue plugins for component tests.
- *
- * - Pinia with `stubActions: false` (actions execute, but are spied)
- * - vue-i18n with English locale
- *
- * Pass additional plugins via the `plugins` option in `renderWithDefaults`.
- */
-function createDefaultPlugins() {
-  return [
-    createTestingPinia({ stubActions: false }),
-    createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-  ]
-}
-
-/**
- * Common directive stubs for components that use PrimeVue/custom directives.
- * Prevents "Failed to resolve directive" warnings in test output.
- */
-const defaultDirectiveStubs: Record<string, () => void> = {
-  tooltip: () => {}
-}
-
-type RenderWithDefaultsResult = RenderResult & {
-  user: ReturnType<typeof userEvent.setup> | undefined
-}
-
-/**
- * Renders a Vue component with standard test infrastructure pre-configured:
- * - Pinia testing store (actions execute but are spied)
- * - vue-i18n with English messages
- * - Common directive stubs (tooltip)
- * - Optional userEvent instance
- *
- * @example
- * ```ts
- * import { render, screen } from '@/utils/test-utils'
- *
- * it('renders button text', async () => {
- *   const { user } = render(MyComponent, { props: { label: 'Click' } })
- *   expect(screen.getByRole('button')).toHaveTextContent('Click')
- *   await user!.click(screen.getByRole('button'))
- * })
- * ```
- */
-function renderWithDefaults<C>(
-  component: C,
-  options?: ComponentMountingOptions<C> & { setupUser?: boolean }
-): RenderWithDefaultsResult {
-  const { setupUser = true, global: globalOptions, ...rest } = options ?? {}
-  const user = setupUser ? userEvent.setup() : undefined
-
-  const result = render(
-    component as Parameters<typeof render>[0],
-    {
-      global: {
-        plugins: [...createDefaultPlugins(), ...(globalOptions?.plugins ?? [])],
-        stubs: globalOptions?.stubs,
-        directives: {
-          ...defaultDirectiveStubs,
-          ...globalOptions?.directives
-        }
-      },
-      ...rest
-    } as Parameters<typeof render>[1]
-  )
-
-  return { ...result, user }
-}
-
-export { renderWithDefaults as render, screen }