refactor: setting dialog

2026-02-19 22:34:15 +00:00 · 2026-01-23 16:53:54 +09:00
parent ff9642d0cb
commit a14ea648e7
41 changed files with 620 additions and 812 deletions
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -23,9 +23,7 @@ export class SettingDialog extends BaseDialog {
   * @param value - The value to set
   */
  async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
    await settingInputDiv.locator('input').fill(value)
  }

@@ -34,16 +32,15 @@ export class SettingDialog extends BaseDialog {
   * @param id - The id of the setting
   */
  async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
    await settingInputDiv.locator('input').click()
  }

  async goToAboutPanel() {
-    await this.page.getByTestId(TestIds.dialogs.settingsTabAbout).click()
-    await this.page
-      .getByTestId(TestIds.dialogs.about)
-      .waitFor({ state: 'visible' })
+    const aboutButton = this.root.locator('nav [role="button"]', {
+      hasText: 'About'
+    })
+    await aboutButton.click()
+    await this.page.waitForSelector('.about-container')
  }
 }
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -244,9 +244,13 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await expect(settingsDialog).toBeVisible()
+    const contentArea = settingsDialog.locator('main')
+    await expect(contentArea).toBeVisible()
+    const isUsableHeight = await contentArea.evaluate(
      (el) => el.clientHeight > 30
    )
    expect(isUsableHeight).toBeTruthy()
@@ -256,7 +260,9 @@ test.describe('Settings', () => {
    await comfyPage.page.keyboard.down('ControlOrMeta')
    await comfyPage.page.keyboard.press(',')
    await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsLocator).toBeVisible()
    await comfyPage.page.keyboard.press('Escape')
    await expect(settingsLocator).not.toBeVisible()
@@ -275,10 +281,15 @@ test.describe('Settings', () => {
  test('Should persist keybinding setting', async ({ comfyPage }) => {
    // Open the settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
+    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')

    // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await settingsDialog
+      .locator('nav [role="button"]', { hasText: 'Keybinding' })
+      .click()
    await comfyPage.page.waitForSelector(
      '[placeholder="Search Keybindings..."]'
    )
--- a/browser_tests/tests/subgraph.spec.ts
+++ b/browser_tests/tests/subgraph.spec.ts
@@ -820,7 +820,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {

      // Open settings dialog using hotkey
      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
        state: 'visible'
      })

@@ -830,7 +830,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {

      // Dialog should be closed
      await expect(
-        comfyPage.page.locator('.settings-container')
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
      ).not.toBeVisible()

      // Should still be in subgraph
--- a/browser_tests/tests/useSettingSearch.spec.ts
+++ b/browser_tests/tests/useSettingSearch.spec.ts
@@ -22,7 +22,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
        name: 'TestSettingsExtension',
        settings: [
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestHiddenSetting' as TestSettingId,
            name: 'Test Hidden Setting',
            type: 'hidden',
@@ -30,7 +29,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
            category: ['Test', 'Hidden']
          },
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestDeprecatedSetting' as TestSettingId,
            name: 'Test Deprecated Setting',
            type: 'text',
@@ -39,7 +37,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
            category: ['Test', 'Deprecated']
          },
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestVisibleSetting' as TestSettingId,
            name: 'Test Visible Setting',
            type: 'text',
@@ -52,16 +49,15 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
  })

  test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await expect(searchBox).toBeVisible()

-    // Verify search box has the correct placeholder
    await expect(searchBox).toHaveAttribute(
      'placeholder',
      expect.stringContaining('Search')
@@ -69,221 +65,198 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
  })

  test('search box is functional and accepts input', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('Comfy')

-    // Verify the input was accepted
    await expect(searchBox).toHaveValue('Comfy')
  })

  test('search box clears properly', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('test')
    await expect(searchBox).toHaveValue('test')

-    // Clear the search box
    await searchBox.clear()
    await expect(searchBox).toHaveValue('')
  })

  test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Check that the sidebar has categories
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
+    const categories = settingsDialog.locator('nav [role="button"]')
    expect(await categories.count()).toBeGreaterThan(0)

-    // Check that at least one category is visible
    await expect(categories.first()).toBeVisible()
  })

  test('can select different categories in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Click on a specific category (Appearance) to verify category switching
-    const appearanceCategory = comfyPage.page.getByRole('option', {
-      name: 'Appearance'
-    })
-    await appearanceCategory.click()
+    const categories = settingsDialog.locator('nav [role="button"]')
+    const categoryCount = await categories.count()

-    // Verify the category is selected
-    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
+    if (categoryCount > 1) {
+      await categories.nth(1).click()
+
+      await expect(categories.nth(1)).toHaveClass(
+        /bg-interface-menu-component-surface-selected/
+      )
+    }
  })

  test('settings content area is visible', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Check that the content area is visible
-    const contentArea = comfyPage.page.locator('.settings-content')
+    const contentArea = settingsDialog.locator('main')
    await expect(contentArea).toBeVisible()
-
-    // Check that tab panels are visible
-    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
-    await expect(tabPanels).toBeVisible()
  })

  test('search functionality affects UI state', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-
-    // Type in search box
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('graph')

-    // Verify that the search input is handled
    await expect(searchBox).toHaveValue('graph')
  })

  test('settings dialog can be closed', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Close with escape key
    await comfyPage.page.keyboard.press('Escape')

-    // Verify dialog is closed
    await expect(settingsDialog).not.toBeVisible()
  })

  test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Type rapidly in search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('a')
    await searchBox.fill('ab')
    await searchBox.fill('abc')
    await searchBox.fill('abcd')

-    // Verify final value
    await expect(searchBox).toHaveValue('abcd')
  })

  test('search excludes hidden settings from results', async ({
    comfyPage
  }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')

-    // Should show visible setting but not hidden setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')
  })

  test('search excludes deprecated settings from results', async ({
    comfyPage
  }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')

-    // Should show visible setting but not deprecated setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')
  })

  test('search shows visible settings but excludes hidden and deprecated', async ({
    comfyPage
  }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
    await searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')

-    // Should only show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')

-    // Should not show hidden or deprecated settings
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')
  })

  test('search by setting name excludes hidden and deprecated', async ({
    comfyPage
  }) => {
-    // Open settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsDialog).toBeVisible()

-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
+    const contentArea = settingsDialog.locator('main')

-    // Search specifically for hidden setting by name
    await searchBox.clear()
    await searchBox.fill('Hidden')

-    // Should not show the hidden setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')

-    // Search specifically for deprecated setting by name
    await searchBox.clear()
    await searchBox.fill('Deprecated')

-    // Should not show the deprecated setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')

-    // Search for visible setting by name - should work
    await searchBox.clear()
    await searchBox.fill('Visible')

-    // Should show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
  })
 })