mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 02:02:08 +00:00
aef40834f3
Introduces cents<->usd<->credit converters plus basic formatters and adds test. Lays groundwork to start converting UI components into displaying comfy credits. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7061-add-shared-comfy-credit-conversion-helpers-2bb6d73d3650810bb34fdf9bb3fc115b) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { createI18n } from 'vue-i18n'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: { en: {} }
|
|
})
|
|
|
|
const mountOption = (
|
|
props?: Partial<{ credits: number; description: string; selected: boolean }>
|
|
) =>
|
|
mount(CreditTopUpOption, {
|
|
props: {
|
|
credits: 1000,
|
|
description: '~100 videos*',
|
|
selected: false,
|
|
...props
|
|
},
|
|
global: {
|
|
plugins: [i18n]
|
|
}
|
|
})
|
|
|
|
describe('CreditTopUpOption', () => {
|
|
it('renders credit amount and description', () => {
|
|
const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
|
|
expect(wrapper.text()).toContain('5,000')
|
|
expect(wrapper.text()).toContain('~500 videos*')
|
|
})
|
|
|
|
it('applies selected styling when selected', () => {
|
|
const wrapper = mountOption({ selected: true })
|
|
expect(wrapper.find('div').classes()).toContain('bg-surface-secondary')
|
|
expect(wrapper.find('div').classes()).toContain('border-primary')
|
|
})
|
|
|
|
it('applies unselected styling when not selected', () => {
|
|
const wrapper = mountOption({ selected: false })
|
|
expect(wrapper.find('div').classes()).toContain('bg-surface-tertiary')
|
|
expect(wrapper.find('div').classes()).toContain('border-border-primary')
|
|
})
|
|
|
|
it('emits select event when clicked', async () => {
|
|
const wrapper = mountOption()
|
|
await wrapper.find('div').trigger('click')
|
|
expect(wrapper.emitted('select')).toHaveLength(1)
|
|
})
|
|
})
|