mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-19 14:30:07 +00:00
27dcb152ff
Backport of #7288 to `cloud/1.34` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7292-backport-cloud-1-34-feat-add-Stripe-pricing-table-integration-for-subscription-dialog--2c46d73d36508111869ddf32de921b29) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org>
114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import { mount, flushPromises } from '@vue/test-utils'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { createI18n } from 'vue-i18n'
|
|
import { ref } from 'vue'
|
|
|
|
import enMessages from '@/locales/en/main.json' with { type: 'json' }
|
|
import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
|
|
|
|
const mockLoadStripeScript = vi.fn()
|
|
let currentConfig = {
|
|
publishableKey: 'pk_test_123',
|
|
pricingTableId: 'prctbl_123'
|
|
}
|
|
let hasConfig = true
|
|
|
|
vi.mock('@/config/stripePricingTableConfig', () => ({
|
|
getStripePricingTableConfig: () => currentConfig,
|
|
hasStripePricingTableConfig: () => hasConfig
|
|
}))
|
|
|
|
const mockIsLoaded = ref(false)
|
|
const mockIsLoading = ref(false)
|
|
const mockError = ref(null)
|
|
|
|
vi.mock(
|
|
'@/platform/cloud/subscription/composables/useStripePricingTableLoader',
|
|
() => ({
|
|
useStripePricingTableLoader: () => ({
|
|
loadScript: mockLoadStripeScript,
|
|
isLoaded: mockIsLoaded,
|
|
isLoading: mockIsLoading,
|
|
error: mockError
|
|
})
|
|
})
|
|
)
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: { en: enMessages }
|
|
})
|
|
|
|
const mountComponent = () =>
|
|
mount(StripePricingTable, {
|
|
global: {
|
|
plugins: [i18n]
|
|
}
|
|
})
|
|
|
|
describe('StripePricingTable', () => {
|
|
beforeEach(() => {
|
|
currentConfig = {
|
|
publishableKey: 'pk_test_123',
|
|
pricingTableId: 'prctbl_123'
|
|
}
|
|
hasConfig = true
|
|
mockLoadStripeScript.mockReset().mockResolvedValue(undefined)
|
|
mockIsLoaded.value = false
|
|
mockIsLoading.value = false
|
|
mockError.value = null
|
|
})
|
|
|
|
it('renders the Stripe pricing table when config is available', async () => {
|
|
const wrapper = mountComponent()
|
|
|
|
await flushPromises()
|
|
|
|
expect(mockLoadStripeScript).toHaveBeenCalled()
|
|
|
|
const stripePricingTable = wrapper.find('stripe-pricing-table')
|
|
expect(stripePricingTable.exists()).toBe(true)
|
|
expect(stripePricingTable.attributes('publishable-key')).toBe('pk_test_123')
|
|
expect(stripePricingTable.attributes('pricing-table-id')).toBe('prctbl_123')
|
|
})
|
|
|
|
it('shows missing config message when credentials are absent', () => {
|
|
hasConfig = false
|
|
currentConfig = { publishableKey: '', pricingTableId: '' }
|
|
|
|
const wrapper = mountComponent()
|
|
|
|
expect(
|
|
wrapper.find('[data-testid="stripe-table-missing-config"]').exists()
|
|
).toBe(true)
|
|
expect(mockLoadStripeScript).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('shows loading indicator when script is loading', async () => {
|
|
// Mock loadScript to never resolve, simulating loading state
|
|
mockLoadStripeScript.mockImplementation(() => new Promise(() => {}))
|
|
|
|
const wrapper = mountComponent()
|
|
await flushPromises()
|
|
|
|
expect(wrapper.find('[data-testid="stripe-table-loading"]').exists()).toBe(
|
|
true
|
|
)
|
|
expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
|
|
})
|
|
|
|
it('shows error indicator when script fails to load', async () => {
|
|
// Mock loadScript to reject, simulating error state
|
|
mockLoadStripeScript.mockRejectedValue(new Error('Script failed to load'))
|
|
|
|
const wrapper = mountComponent()
|
|
await flushPromises()
|
|
|
|
expect(wrapper.find('[data-testid="stripe-table-error"]').exists()).toBe(
|
|
true
|
|
)
|
|
expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
|
|
})
|
|
})
|