mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-01 13:59: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>
147 lines
4.3 KiB
TypeScript
147 lines
4.3 KiB
TypeScript
import { createPinia, setActivePinia } from 'pinia'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
|
|
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
|
|
|
// Mock Firebase Auth and related modules
|
|
vi.mock('vuefire', () => ({
|
|
useFirebaseAuth: vi.fn(() => ({
|
|
onAuthStateChanged: vi.fn(),
|
|
setPersistence: vi.fn()
|
|
}))
|
|
}))
|
|
|
|
vi.mock('firebase/auth', () => ({
|
|
onAuthStateChanged: vi.fn(() => {
|
|
// Mock the callback to be called immediately for testing
|
|
return vi.fn()
|
|
}),
|
|
onIdTokenChanged: vi.fn(),
|
|
setPersistence: vi.fn().mockResolvedValue(undefined),
|
|
browserLocalPersistence: {},
|
|
GoogleAuthProvider: class {
|
|
addScope = vi.fn()
|
|
setCustomParameters = vi.fn()
|
|
},
|
|
GithubAuthProvider: class {
|
|
addScope = vi.fn()
|
|
setCustomParameters = vi.fn()
|
|
}
|
|
}))
|
|
|
|
// Mock other dependencies
|
|
vi.mock('@/services/dialogService', () => ({
|
|
useDialogService: () => ({
|
|
showDialog: vi.fn()
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/platform/telemetry', () => ({
|
|
useTelemetry: () => ({
|
|
track: vi.fn()
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/stores/toastStore', () => ({
|
|
useToastStore: () => ({
|
|
add: vi.fn()
|
|
})
|
|
}))
|
|
|
|
vi.mock('@/stores/apiKeyAuthStore', () => ({
|
|
useApiKeyAuthStore: () => ({
|
|
headers: {}
|
|
})
|
|
}))
|
|
|
|
// Mock formatMetronomeCurrency
|
|
vi.mock('@/utils/formatUtil', () => ({
|
|
formatMetronomeCurrency: vi.fn((micros: number) => {
|
|
// Simple mock that converts micros to dollars
|
|
return (micros / 1000000).toFixed(2)
|
|
})
|
|
}))
|
|
|
|
describe('useSubscriptionCredits', () => {
|
|
let authStore: ReturnType<typeof useFirebaseAuthStore>
|
|
|
|
beforeEach(() => {
|
|
setActivePinia(createPinia())
|
|
authStore = useFirebaseAuthStore()
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
describe('totalCredits', () => {
|
|
it('should return "0.00" when balance is null', () => {
|
|
authStore.balance = null
|
|
const { totalCredits } = useSubscriptionCredits()
|
|
expect(totalCredits.value).toBe('0.00')
|
|
})
|
|
|
|
it('should return "0.00" when amount_micros is missing', () => {
|
|
authStore.balance = {} as any
|
|
const { totalCredits } = useSubscriptionCredits()
|
|
expect(totalCredits.value).toBe('0.00')
|
|
})
|
|
|
|
it('should format amount_micros correctly', () => {
|
|
authStore.balance = { amount_micros: 5000000 } as any
|
|
const { totalCredits } = useSubscriptionCredits()
|
|
expect(totalCredits.value).toBe('5.00')
|
|
})
|
|
|
|
it('should handle formatting errors gracefully', async () => {
|
|
const mockFormatMetronomeCurrency = vi.mocked(
|
|
await import('@/utils/formatUtil')
|
|
).formatMetronomeCurrency
|
|
mockFormatMetronomeCurrency.mockImplementationOnce(() => {
|
|
throw new Error('Formatting error')
|
|
})
|
|
|
|
authStore.balance = { amount_micros: 5000000 } as any
|
|
const { totalCredits } = useSubscriptionCredits()
|
|
expect(totalCredits.value).toBe('0.00')
|
|
})
|
|
})
|
|
|
|
describe('monthlyBonusCredits', () => {
|
|
it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
|
|
authStore.balance = {} as any
|
|
const { monthlyBonusCredits } = useSubscriptionCredits()
|
|
expect(monthlyBonusCredits.value).toBe('0.00')
|
|
})
|
|
|
|
it('should format cloud_credit_balance_micros correctly', () => {
|
|
authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
|
|
const { monthlyBonusCredits } = useSubscriptionCredits()
|
|
expect(monthlyBonusCredits.value).toBe('2.50')
|
|
})
|
|
})
|
|
|
|
describe('prepaidCredits', () => {
|
|
it('should return "0.00" when prepaid_balance_micros is missing', () => {
|
|
authStore.balance = {} as any
|
|
const { prepaidCredits } = useSubscriptionCredits()
|
|
expect(prepaidCredits.value).toBe('0.00')
|
|
})
|
|
|
|
it('should format prepaid_balance_micros correctly', () => {
|
|
authStore.balance = { prepaid_balance_micros: 7500000 } as any
|
|
const { prepaidCredits } = useSubscriptionCredits()
|
|
expect(prepaidCredits.value).toBe('7.50')
|
|
})
|
|
})
|
|
|
|
describe('isLoadingBalance', () => {
|
|
it('should reflect authStore.isFetchingBalance', () => {
|
|
authStore.isFetchingBalance = true
|
|
const { isLoadingBalance } = useSubscriptionCredits()
|
|
expect(isLoadingBalance.value).toBe(true)
|
|
|
|
authStore.isFetchingBalance = false
|
|
expect(isLoadingBalance.value).toBe(false)
|
|
})
|
|
})
|
|
})
|