mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-05 05:00:03 +00:00
356ebe538f
Redesigned the TopUpCredits dialog to match Figma design specifications with proper layout, typography, colors and selection states. Updated dialog to use workflow-aware messaging, removed header, applied design system tokens, and integrated subscription renewal dates. Modified credit packages to use clean USD amounts with realistic video estimates and fixed button disabled states to show blue with 30% opacity per Figma design. | Before | After | | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | <img width="675" height="863" alt="Screenshot from 2025-12-09 18-08-21" src="https://github.com/user-attachments/assets/331c7a48-74ae-4a58-b70f-aa476c3fc87c" /> | <img width="675" height="863" alt="Screenshot from 2025-12-09 18-06-23" src="https://github.com/user-attachments/assets/dcb7b358-6045-4c89-82ed-3283a20eea89" /> |
49 lines
1.3 KiB
TypeScript
49 lines
1.3 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 unselected styling when not selected', () => {
|
|
const wrapper = mountOption({ selected: false })
|
|
expect(wrapper.find('div').classes()).toContain(
|
|
'bg-component-node-disabled'
|
|
)
|
|
expect(wrapper.find('div').classes()).toContain('border-transparent')
|
|
})
|
|
|
|
it('emits select event when clicked', async () => {
|
|
const wrapper = mountOption()
|
|
await wrapper.find('div').trigger('click')
|
|
expect(wrapper.emitted('select')).toHaveLength(1)
|
|
})
|
|
})
|