Subscription.test.tsx93 lines · main
1import { fireEvent, screen } from '@testing-library/react'
2import type { ReactNode } from 'react'
3import { beforeEach, describe, expect, it, vi } from 'vitest'
4
5import Subscription from './Subscription'
6import { render } from '@/tests/helpers'
7
8const { mockSubscription, mockSetPanelKey } = vi.hoisted(() => ({
9 mockSubscription: vi.fn(),
10 mockSetPanelKey: vi.fn(),
11}))
12
13vi.mock('common', async (importOriginal) => {
14 const original = (await importOriginal()) as typeof import('common')
15 return {
16 ...original,
17 useParams: () => ({ slug: 'stripe-org' }),
18 useFlag: () => false,
19 }
20})
21
22vi.mock('@/data/subscriptions/org-subscription-query', () => ({
23 useOrgSubscriptionQuery: () => mockSubscription(),
24}))
25
26vi.mock('@/hooks/misc/useCheckPermissions', () => ({
27 useAsyncCheckPermissions: () => ({ can: true, isSuccess: true }),
28}))
29
30vi.mock('@/state/organization-settings', () => ({
31 useOrgSettingsPageStateSnapshot: () => ({
32 setPanelKey: mockSetPanelKey,
33 }),
34}))
35
36vi.mock('../Restriction', () => ({
37 Restriction: () => null,
38}))
39
40vi.mock('../ProjectUpdateDisabledTooltip', () => ({
41 ProjectUpdateDisabledTooltip: ({ children }: { children: ReactNode }) => children,
42}))
43
44vi.mock('./PlanUpdateSidePanel', () => ({
45 PlanUpdateSidePanel: () => null,
46}))
47
48describe('Subscription', () => {
49 beforeEach(() => {
50 vi.clearAllMocks()
51 mockSubscription.mockReturnValue({
52 data: {
53 plan: { id: 'free', name: 'Free' },
54 usage_billing_enabled: true,
55 },
56 error: null,
57 isPending: false,
58 isError: false,
59 isSuccess: true,
60 })
61 })
62
63 it('shows the plan-change CTA and opens the side panel when clicked', () => {
64 render(<Subscription />)
65 const button = screen.getByRole('button', { name: 'Change subscription plan' })
66 expect(button).toBeInTheDocument()
67 expect(mockSetPanelKey).not.toHaveBeenCalled()
68
69 fireEvent.click(button)
70
71 expect(mockSetPanelKey).toHaveBeenCalledWith('subscriptionPlan')
72 })
73
74 it('shows the support fallback when plan changes are not available', () => {
75 mockSubscription.mockReturnValue({
76 data: {
77 plan: { id: 'enterprise', name: 'Enterprise' },
78 usage_billing_enabled: true,
79 },
80 error: null,
81 isPending: false,
82 isError: false,
83 isSuccess: true,
84 })
85
86 render(<Subscription />)
87
88 expect(
89 screen.queryByRole('button', { name: 'Change subscription plan' })
90 ).not.toBeInTheDocument()
91 expect(screen.getByText('Unable to update plan from Enterprise')).toBeInTheDocument()
92 })
93})