hermes-ui/tests/client/display-settings.test.ts

// @vitest-environment jsdom
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { flushPromises, mount } from '@vue/test-utils'
import { defineComponent } from 'vue'
import ArcoVue from '@arco-design/web-vue'
import { MAX_CHAT_INPUT_HEIGHT, MIN_CHAT_INPUT_HEIGHT } from '@/utils/chat-input-height'

const mockSettingsStore = vi.hoisted(() => ({
  display: {
    streaming: true,
    compact: false,
    show_reasoning: true,
    show_cost: false,
    inline_diffs: true,
    chat_input_height: 160,
    bell_on_complete: false,
    notify_on_complete: false,
    busy_input_mode: 'interrupt',
  },
  saveSection: vi.fn(),
}))

vi.mock('@/stores/hermes/settings', () => ({
  useSettingsStore: () => mockSettingsStore,
}))

vi.mock('@/composables/useTheme', () => ({
  useTheme: () => ({
    brightness: 'system',
    setBrightness: vi.fn(),
  }),
}))

vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
  }),
}))

vi.mock('@/composables/useMessage', () => ({
  useMessage: () => ({
    success: vi.fn(),
    error: vi.fn(),
  }),
}))

import DisplaySettings from '@/components/hermes/settings/DisplaySettings.vue'

// Arco's InputNumber clamps through its own handlers; a plain number input keeps
// the assertion on the component-level clamping in handleChatInputHeightChange.
const AInputNumberStub = defineComponent({
  name: 'InputNumber',
  inheritAttrs: false,
  props: {
    modelValue: { type: Number, default: undefined },
    min: { type: Number, default: undefined },
    max: { type: Number, default: undefined },
    size: String,
  },
  emits: ['update:modelValue'],
  template: `<input
    class="arco-input-number-stub"
    type="number"
    :value="modelValue"
    :min="min"
    :max="max"
    @input="onInput"
  />`,
  methods: {
    onInput(event: Event) {
      const raw = (event.target as HTMLInputElement).value
      this.$emit('update:modelValue', raw === '' ? undefined : Number(raw))
    },
  },
})

const arcoGlobal = {
  plugins: [ArcoVue],
  stubs: {
    SettingRow: {
      props: ['label', 'hint'],
      template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><div class="setting-row-hint">{{ hint }}</div><slot /></div>',
    },
    Select: true,
    Switch: true,
    InputNumber: AInputNumberStub,
  },
}

function buttonByText(wrapper: any, text: string) {
  const button = wrapper.findAll('button').find((node: any) => node.text() === text)
  if (!button) throw new Error(`no button labelled "${text}"`)
  return button
}

describe('DisplaySettings', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    mockSettingsStore.display.chat_input_height = 160
    mockSettingsStore.saveSection.mockResolvedValue(undefined)
  })

  it('does not expose the unwired busy input mode toggle', () => {
    const wrapper = mount(DisplaySettings, { global: arcoGlobal })

    expect(wrapper.text()).not.toContain('settings.display.busyInputMode')
    expect(wrapper.text()).not.toContain('settings.display.busyInputModeHint')
  })

  it('saves a clamped chat input height and can reset back to automatic height', async () => {
    const wrapper = mount(DisplaySettings, { global: arcoGlobal })

    expect(wrapper.text()).toContain('settings.display.chatInputHeight')

    const input = wrapper.get('.chat-input-height-controls .arco-input-number-stub')
    await input.setValue(String(MAX_CHAT_INPUT_HEIGHT + 100))
    await flushPromises()

    expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('display', { chat_input_height: MAX_CHAT_INPUT_HEIGHT })

    await input.setValue(String(MIN_CHAT_INPUT_HEIGHT - 100))
    await flushPromises()

    expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('display', { chat_input_height: MIN_CHAT_INPUT_HEIGHT })

    await buttonByText(wrapper, 'common.reset').trigger('click')
    await flushPromises()

    expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('display', { chat_input_height: null })
  })
})