mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
## Summary - move queue batch controls to the left of the run button - align run control styling to the Figma queue modal spec using PrimeVue PT/Tailwind (secondary background on batch + dropdown, primary run button) - normalize control heights to match actionbar buttons and tighten dropdown hit area - update run typography/spacing and replace all three chevrons (dropdown + batch up/down) with the requested SVG Design: https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3845-23904&m=dev <img width="303" height="122" alt="image" src="https://github.com/user-attachments/assets/4ed80ee7-3ceb-4512-96ce-f55ec6da835e" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9134-fix-align-run-controls-with-queue-modal-design-3106d73d36508160afcedbcfe4b98291) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com>
99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { createTestingPinia } from '@pinia/testing'
|
|
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { nextTick } from 'vue'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import { useQueueSettingsStore } from '@/stores/queueStore'
|
|
|
|
import BatchCountEdit from './BatchCountEdit.vue'
|
|
|
|
const maxBatchCount = 16
|
|
|
|
vi.mock('@/platform/settings/settingStore', () => ({
|
|
useSettingStore: () => ({
|
|
get: (settingId: string) =>
|
|
settingId === 'Comfy.QueueButton.BatchCountLimit' ? maxBatchCount : 1
|
|
})
|
|
}))
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: {
|
|
en: {
|
|
g: {
|
|
increment: 'Increment',
|
|
decrement: 'Decrement'
|
|
},
|
|
menu: {
|
|
batchCount: 'Batch Count'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
function createWrapper(initialBatchCount = 1) {
|
|
const pinia = createTestingPinia({
|
|
createSpy: vi.fn,
|
|
stubActions: false,
|
|
initialState: {
|
|
queueSettingsStore: {
|
|
batchCount: initialBatchCount
|
|
}
|
|
}
|
|
})
|
|
|
|
const wrapper = mount(BatchCountEdit, {
|
|
global: {
|
|
plugins: [pinia, i18n],
|
|
directives: {
|
|
tooltip: () => {}
|
|
}
|
|
}
|
|
})
|
|
|
|
const queueSettingsStore = useQueueSettingsStore()
|
|
|
|
return { wrapper, queueSettingsStore }
|
|
}
|
|
|
|
describe('BatchCountEdit', () => {
|
|
it('doubles the current batch count when increment is clicked', async () => {
|
|
const { wrapper, queueSettingsStore } = createWrapper(3)
|
|
|
|
await wrapper.get('button[aria-label="Increment"]').trigger('click')
|
|
|
|
expect(queueSettingsStore.batchCount).toBe(6)
|
|
})
|
|
|
|
it('halves the current batch count when decrement is clicked', async () => {
|
|
const { wrapper, queueSettingsStore } = createWrapper(9)
|
|
|
|
await wrapper.get('button[aria-label="Decrement"]').trigger('click')
|
|
|
|
expect(queueSettingsStore.batchCount).toBe(4)
|
|
})
|
|
|
|
it('clamps typed values to queue limits on blur', async () => {
|
|
const { wrapper, queueSettingsStore } = createWrapper(2)
|
|
const input = wrapper.get('input')
|
|
|
|
await input.setValue('999')
|
|
await input.trigger('blur')
|
|
await nextTick()
|
|
|
|
expect(queueSettingsStore.batchCount).toBe(maxBatchCount)
|
|
expect((input.element as HTMLInputElement).value).toBe(
|
|
String(maxBatchCount)
|
|
)
|
|
|
|
await input.setValue('0')
|
|
await input.trigger('blur')
|
|
await nextTick()
|
|
|
|
expect(queueSettingsStore.batchCount).toBe(1)
|
|
expect((input.element as HTMLInputElement).value).toBe('1')
|
|
})
|
|
})
|