Subscription.test.tsx93 lines · main
| 1 | import { fireEvent, screen } from '@testing-library/react' |
| 2 | import type { ReactNode } from 'react' |
| 3 | import { beforeEach, describe, expect, it, vi } from 'vitest' |
| 4 | |
| 5 | import Subscription from './Subscription' |
| 6 | import { render } from '@/tests/helpers' |
| 7 | |
| 8 | const { mockSubscription, mockSetPanelKey } = vi.hoisted(() => ({ |
| 9 | mockSubscription: vi.fn(), |
| 10 | mockSetPanelKey: vi.fn(), |
| 11 | })) |
| 12 | |
| 13 | vi.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 | |
| 22 | vi.mock('@/data/subscriptions/org-subscription-query', () => ({ |
| 23 | useOrgSubscriptionQuery: () => mockSubscription(), |
| 24 | })) |
| 25 | |
| 26 | vi.mock('@/hooks/misc/useCheckPermissions', () => ({ |
| 27 | useAsyncCheckPermissions: () => ({ can: true, isSuccess: true }), |
| 28 | })) |
| 29 | |
| 30 | vi.mock('@/state/organization-settings', () => ({ |
| 31 | useOrgSettingsPageStateSnapshot: () => ({ |
| 32 | setPanelKey: mockSetPanelKey, |
| 33 | }), |
| 34 | })) |
| 35 | |
| 36 | vi.mock('../Restriction', () => ({ |
| 37 | Restriction: () => null, |
| 38 | })) |
| 39 | |
| 40 | vi.mock('../ProjectUpdateDisabledTooltip', () => ({ |
| 41 | ProjectUpdateDisabledTooltip: ({ children }: { children: ReactNode }) => children, |
| 42 | })) |
| 43 | |
| 44 | vi.mock('./PlanUpdateSidePanel', () => ({ |
| 45 | PlanUpdateSidePanel: () => null, |
| 46 | })) |
| 47 | |
| 48 | describe('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 | }) |