mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
437c3b2da0
In cloud environment, allow all the config values to be set by the feature flag endpoint and be updated dynamically (on 30s poll). Retain origianl behavior for OSS. On cloud, config changes shouldn't be changed via redeploy and the promoted image should match the staging image. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6590-set-config-via-feature-flags-2a26d73d3650819f8084eb2695c51f22) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL0424@gmail.com>
118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import { Form } from '@primevue/forms'
|
|
import { mount } from '@vue/test-utils'
|
|
import { createPinia } from 'pinia'
|
|
import Button from 'primevue/button'
|
|
import PrimeVue from 'primevue/config'
|
|
import InputText from 'primevue/inputtext'
|
|
import Message from 'primevue/message'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { createApp } from 'vue'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
|
|
|
|
import ApiKeyForm from './ApiKeyForm.vue'
|
|
|
|
const mockStoreApiKey = vi.fn()
|
|
const mockLoading = vi.fn(() => false)
|
|
|
|
vi.mock('@/stores/firebaseAuthStore', () => ({
|
|
useFirebaseAuthStore: vi.fn(() => ({
|
|
loading: mockLoading()
|
|
}))
|
|
}))
|
|
|
|
vi.mock('@/stores/apiKeyAuthStore', () => ({
|
|
useApiKeyAuthStore: vi.fn(() => ({
|
|
storeApiKey: mockStoreApiKey
|
|
}))
|
|
}))
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: {
|
|
en: {
|
|
auth: {
|
|
apiKey: {
|
|
title: 'API Key',
|
|
label: 'API Key',
|
|
placeholder: 'Enter your API Key',
|
|
error: 'Invalid API Key',
|
|
helpText: 'Need an API key?',
|
|
generateKey: 'Get one here',
|
|
whitelistInfo: 'About non-whitelisted sites',
|
|
description: 'Use your Comfy API key to enable API Nodes'
|
|
}
|
|
},
|
|
g: {
|
|
back: 'Back',
|
|
save: 'Save',
|
|
learnMore: 'Learn more'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
describe('ApiKeyForm', () => {
|
|
beforeEach(() => {
|
|
const app = createApp({})
|
|
app.use(PrimeVue)
|
|
vi.clearAllMocks()
|
|
mockStoreApiKey.mockReset()
|
|
mockLoading.mockReset()
|
|
})
|
|
|
|
const mountComponent = (props: any = {}) => {
|
|
return mount(ApiKeyForm, {
|
|
global: {
|
|
plugins: [PrimeVue, createPinia(), i18n],
|
|
components: { Button, Form, InputText, Message }
|
|
},
|
|
props
|
|
})
|
|
}
|
|
|
|
it('renders correctly with all required elements', () => {
|
|
const wrapper = mountComponent()
|
|
|
|
expect(wrapper.find('h1').text()).toBe('API Key')
|
|
expect(wrapper.find('label').text()).toBe('API Key')
|
|
expect(wrapper.findComponent(InputText).exists()).toBe(true)
|
|
expect(wrapper.findComponent(Button).exists()).toBe(true)
|
|
})
|
|
|
|
it('emits back event when back button is clicked', async () => {
|
|
const wrapper = mountComponent()
|
|
|
|
await wrapper.findComponent(Button).trigger('click')
|
|
expect(wrapper.emitted('back')).toBeTruthy()
|
|
})
|
|
|
|
it('shows loading state when submitting', async () => {
|
|
mockLoading.mockReturnValue(true)
|
|
const wrapper = mountComponent()
|
|
const input = wrapper.findComponent(InputText)
|
|
|
|
await input.setValue(
|
|
'comfyui-123456789012345678901234567890123456789012345678901234567890123456789012'
|
|
)
|
|
await wrapper.find('form').trigger('submit')
|
|
|
|
const submitButton = wrapper
|
|
.findAllComponents(Button)
|
|
.find((btn) => btn.text() === 'Save')
|
|
expect(submitButton?.props('loading')).toBe(true)
|
|
})
|
|
|
|
it('displays help text and links correctly', () => {
|
|
const wrapper = mountComponent()
|
|
|
|
const helpText = wrapper.find('small')
|
|
expect(helpText.text()).toContain('Need an API key?')
|
|
expect(helpText.find('a').attributes('href')).toBe(
|
|
`${getComfyPlatformBaseUrl()}/login`
|
|
)
|
|
})
|
|
})
|