dify/web/app/components/billing/pricing/__tests__/index.spec.tsx

import type { Mock } from 'vitest'
import type { UsagePlanInfo } from '../../type'
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import { useGetPricingPageLanguage } from '@/context/i18n'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '../../type'
import Pricing from '../index'

let mockLanguage: string | null = 'en'
let mockAppCtx: Record<string, unknown> = {}

vi.mock('../plans/self-hosted-plan-item/list', () => ({
  default: ({ plan }: { plan: string }) => (
    <div data-testid={`list-${plan}`}>
      List for
      {plan}
    </div>
  ),
}))

vi.mock('@/next/link', () => ({
  default: ({
    children,
    href,
    className,
    target,
  }: {
    children: React.ReactNode
    href: string
    className?: string
    target?: string
  }) => (
    <a href={href} className={className} target={target} data-testid="pricing-link">
      {children}
    </a>
  ),
}))

vi.mock('@/context/account-state', async (importOriginal) => {
  const { createAppContextStateAtomMock } = await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateAtomMock(importOriginal, () => mockAppCtx)
})
vi.mock('@/context/workspace-state', async (importOriginal) => {
  const { createAppContextStateAtomMock } = await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateAtomMock(importOriginal, () => mockAppCtx)
})
vi.mock('@/context/permission-state', async (importOriginal) => {
  const { createAppContextStateAtomMock } = await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateAtomMock(importOriginal, () => mockAppCtx)
})
vi.mock('@/context/version-state', async (importOriginal) => {
  const { createAppContextStateAtomMock } = await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateAtomMock(importOriginal, () => mockAppCtx)
})
vi.mock('@/context/system-features-state', async (importOriginal) => {
  const { createAppContextStateAtomMock } = await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateAtomMock(importOriginal, () => mockAppCtx)
})

vi.mock('jotai', async (importOriginal) => {
  const { createAppContextStateJotaiMock } =
    await import('@/__tests__/utils/mock-app-context-state')
  return createAppContextStateJotaiMock(importOriginal)
})

vi.mock('@/context/provider-context', () => ({
  useProviderContext: vi.fn(),
}))

vi.mock('@/context/i18n', () => ({
  useGetPricingPageLanguage: vi.fn(),
}))

const buildUsage = (): UsagePlanInfo => ({
  buildApps: 0,
  teamMembers: 0,
  annotatedResponse: 0,
  documentsUploadQuota: 0,
  apiRateLimit: 0,
  triggerEvents: 0,
  vectorSpace: 0,
})

describe('Pricing', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    mockLanguage = 'en'
    mockAppCtx = {
      isCurrentWorkspaceManager: true,
      workspacePermissionKeys: ['billing.manage'],
    }
    ;(useProviderContext as Mock).mockReturnValue({
      plan: {
        type: Plan.sandbox,
        usage: buildUsage(),
        total: buildUsage(),
      },
      enableEducationPlan: false,
      isEducationAccount: false,
    })
    ;(useGetPricingPageLanguage as Mock).mockImplementation(() => mockLanguage)
  })

  describe('Rendering', () => {
    it('should render pricing header and localized footer link', () => {
      render(<Pricing onCancel={vi.fn()} />)

      expect(
        screen.getByRole('dialog', { name: 'billing.plansCommon.title.plans' }),
      ).toBeInTheDocument()
      expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
      expect(screen.getByTestId('pricing-link')).toHaveAttribute(
        'href',
        'https://dify.ai/en/pricing#plans-and-features',
      )
    })

    it('should default to yearly billing for education accounts', () => {
      mockAppCtx = {
        isCurrentWorkspaceManager: false,
        workspacePermissionKeys: ['billing.manage'],
      }
      ;(useProviderContext as Mock).mockReturnValue({
        plan: {
          type: Plan.sandbox,
          usage: buildUsage(),
          total: buildUsage(),
        },
        enableEducationPlan: true,
        isEducationAccount: true,
      })

      render(<Pricing onCancel={vi.fn()} />)

      expect(screen.getByRole('switch')).toBeChecked()
    })

    it('should not default to yearly billing when billing manage permission is missing', () => {
      mockAppCtx = {
        isCurrentWorkspaceManager: true,
        workspacePermissionKeys: [],
      }
      ;(useProviderContext as Mock).mockReturnValue({
        plan: {
          type: Plan.sandbox,
          usage: buildUsage(),
          total: buildUsage(),
        },
        enableEducationPlan: true,
        isEducationAccount: true,
      })

      render(<Pricing onCancel={vi.fn()} />)

      expect(screen.getByRole('switch')).not.toBeChecked()
    })
  })

  describe('Props', () => {
    it('should allow switching categories', () => {
      render(<Pricing onCancel={vi.fn()} />)

      fireEvent.click(screen.getByText('billing.plansCommon.self'))
      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
    })
  })

  describe('Edge Cases', () => {
    it('should fall back to default pricing URL when language is empty', () => {
      mockLanguage = ''
      render(<Pricing onCancel={vi.fn()} />)

      expect(screen.getByTestId('pricing-link')).toHaveAttribute(
        'href',
        'https://dify.ai/pricing#plans-and-features',
      )
    })
  })
})