mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-01 05:49:54 +00:00
## Summary Refactoring of subscription panel to improve maintainability and match Figma design exactly. Extracted business logic into `useSubscriptionCredits` and `useSubscriptionActions` composables, added comprehensive testing, and enhanced the design system with proper semantic tokens. - Extract credit calculations and action handlers into reusable composables - Add component and unit tests with proper mocking patterns - Update terminology from "API Nodes" to "Partner Nodes" - Make credit breakdown dynamic using real API data instead of hardcoded values - Add semantic design tokens for modal card surfaces with light/dark theme support - Reduce component complexity from ~100 lines to ~25 lines of logic - Improve layout spacing, typography, and responsive behavior to match Figma specs <img width="1948" height="1494" alt="Selection_2220" src="https://github.com/user-attachments/assets/b922582d-7edf-4884-b787-ad783c896b80" /> <img width="1948" height="1494" alt="Selection_2219" src="https://github.com/user-attachments/assets/50a9f263-9adb-439d-8a89-94a498d394e3" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6378-update-subscription-panel-for-new-designs-29b6d73d3650815c9ce2c5977ac7f893) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
|
|
|
|
// Mock dependencies
|
|
const mockFetchBalance = vi.fn()
|
|
const mockFetchStatus = vi.fn()
|
|
const mockShowTopUpCreditsDialog = vi.fn()
|
|
const mockExecute = vi.fn()
|
|
const mockT = vi.fn((key: string) => {
|
|
if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
|
|
return key
|
|
})
|
|
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({
|
|
t: mockT
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
|
|
useFirebaseAuthActions: () => ({
|
|
fetchBalance: mockFetchBalance
|
|
})
|
|
}))
|
|
|
|
const mockFormattedRenewalDate = { value: '2024-12-31' }
|
|
|
|
vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
|
|
useSubscription: () => ({
|
|
fetchStatus: mockFetchStatus,
|
|
formattedRenewalDate: mockFormattedRenewalDate
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/services/dialogService', () => ({
|
|
useDialogService: () => ({
|
|
showTopUpCreditsDialog: mockShowTopUpCreditsDialog
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/stores/commandStore', () => ({
|
|
useCommandStore: () => ({
|
|
execute: mockExecute
|
|
})
|
|
}))
|
|
|
|
// Mock window.open
|
|
const mockOpen = vi.fn()
|
|
Object.defineProperty(window, 'open', {
|
|
writable: true,
|
|
value: mockOpen
|
|
})
|
|
|
|
describe('useSubscriptionActions', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
mockFormattedRenewalDate.value = '2024-12-31'
|
|
})
|
|
|
|
describe('refreshTooltip', () => {
|
|
it('should format tooltip with renewal date', () => {
|
|
const { refreshTooltip } = useSubscriptionActions()
|
|
expect(refreshTooltip.value).toBe('Refreshes on 2024-12-31')
|
|
})
|
|
|
|
it('should use fallback text when no renewal date', () => {
|
|
mockFormattedRenewalDate.value = ''
|
|
const { refreshTooltip } = useSubscriptionActions()
|
|
expect(refreshTooltip.value).toBe('Refreshes on next billing cycle')
|
|
expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
|
|
})
|
|
})
|
|
|
|
describe('handleAddApiCredits', () => {
|
|
it('should call showTopUpCreditsDialog', () => {
|
|
const { handleAddApiCredits } = useSubscriptionActions()
|
|
handleAddApiCredits()
|
|
expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
|
|
})
|
|
})
|
|
|
|
describe('handleMessageSupport', () => {
|
|
it('should execute support command and manage loading state', async () => {
|
|
const { handleMessageSupport, isLoadingSupport } =
|
|
useSubscriptionActions()
|
|
|
|
expect(isLoadingSupport.value).toBe(false)
|
|
|
|
const promise = handleMessageSupport()
|
|
expect(isLoadingSupport.value).toBe(true)
|
|
|
|
await promise
|
|
expect(mockExecute).toHaveBeenCalledWith('Comfy.ContactSupport')
|
|
expect(isLoadingSupport.value).toBe(false)
|
|
})
|
|
|
|
it('should handle errors gracefully', async () => {
|
|
mockExecute.mockRejectedValueOnce(new Error('Command failed'))
|
|
const { handleMessageSupport, isLoadingSupport } =
|
|
useSubscriptionActions()
|
|
|
|
await handleMessageSupport()
|
|
expect(isLoadingSupport.value).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('handleRefresh', () => {
|
|
it('should call both fetchBalance and fetchStatus', async () => {
|
|
const { handleRefresh } = useSubscriptionActions()
|
|
await handleRefresh()
|
|
|
|
expect(mockFetchBalance).toHaveBeenCalledOnce()
|
|
expect(mockFetchStatus).toHaveBeenCalledOnce()
|
|
})
|
|
|
|
it('should handle errors gracefully', async () => {
|
|
mockFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
|
|
const { handleRefresh } = useSubscriptionActions()
|
|
|
|
// Should not throw
|
|
await expect(handleRefresh()).resolves.toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('handleLearnMoreClick', () => {
|
|
it('should open learn more URL', () => {
|
|
const { handleLearnMoreClick } = useSubscriptionActions()
|
|
handleLearnMoreClick()
|
|
|
|
expect(mockOpen).toHaveBeenCalledWith(
|
|
'https://docs.comfy.org/get_started/cloud',
|
|
'_blank'
|
|
)
|
|
})
|
|
})
|
|
})
|