mirror of https://github.com/langgenius/dify.git
119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import React from 'react'
|
|
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import PlanUpgradeModal from './index'
|
|
|
|
const mockSetShowPricingModal = jest.fn()
|
|
|
|
jest.mock('react-i18next', () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string) => key,
|
|
}),
|
|
}))
|
|
|
|
jest.mock('@/app/components/base/modal', () => {
|
|
const MockModal = ({ isShow, children }: { isShow: boolean; children: React.ReactNode }) => (
|
|
isShow ? <div data-testid="plan-upgrade-modal">{children}</div> : null
|
|
)
|
|
return {
|
|
__esModule: true,
|
|
default: MockModal,
|
|
}
|
|
})
|
|
|
|
jest.mock('@/context/modal-context', () => ({
|
|
useModalContext: () => ({
|
|
setShowPricingModal: mockSetShowPricingModal,
|
|
}),
|
|
}))
|
|
|
|
const baseProps = {
|
|
title: 'Upgrade Required',
|
|
description: 'You need to upgrade your plan.',
|
|
show: true,
|
|
onClose: jest.fn(),
|
|
}
|
|
|
|
const renderComponent = (props: Partial<React.ComponentProps<typeof PlanUpgradeModal>> = {}) => {
|
|
const mergedProps = { ...baseProps, ...props }
|
|
return render(<PlanUpgradeModal {...mergedProps} />)
|
|
}
|
|
|
|
describe('PlanUpgradeModal', () => {
|
|
beforeEach(() => {
|
|
jest.clearAllMocks()
|
|
})
|
|
|
|
// Rendering and props-driven content
|
|
it('should render modal with provided content when visible', () => {
|
|
// Arrange
|
|
const extraInfoText = 'Additional upgrade details'
|
|
renderComponent({
|
|
extraInfo: <div>{extraInfoText}</div>,
|
|
})
|
|
|
|
// Assert
|
|
expect(screen.getByText(baseProps.title)).toBeInTheDocument()
|
|
expect(screen.getByText(baseProps.description)).toBeInTheDocument()
|
|
expect(screen.getByText(extraInfoText)).toBeInTheDocument()
|
|
expect(screen.getByText('billing.triggerLimitModal.dismiss')).toBeInTheDocument()
|
|
expect(screen.getByText('billing.triggerLimitModal.upgrade')).toBeInTheDocument()
|
|
})
|
|
|
|
// Guard against rendering when modal is hidden
|
|
it('should not render content when show is false', () => {
|
|
// Act
|
|
renderComponent({ show: false })
|
|
|
|
// Assert
|
|
expect(screen.queryByText(baseProps.title)).not.toBeInTheDocument()
|
|
expect(screen.queryByText(baseProps.description)).not.toBeInTheDocument()
|
|
})
|
|
|
|
// User closes the modal from dismiss button
|
|
it('should call onClose when dismiss button is clicked', async () => {
|
|
// Arrange
|
|
const user = userEvent.setup()
|
|
const onClose = jest.fn()
|
|
renderComponent({ onClose })
|
|
|
|
// Act
|
|
await user.click(screen.getByText('billing.triggerLimitModal.dismiss'))
|
|
|
|
// Assert
|
|
expect(onClose).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
// Upgrade path uses provided callback over pricing modal
|
|
it('should call onUpgrade and onClose when upgrade button is clicked with onUpgrade provided', async () => {
|
|
// Arrange
|
|
const user = userEvent.setup()
|
|
const onClose = jest.fn()
|
|
const onUpgrade = jest.fn()
|
|
renderComponent({ onClose, onUpgrade })
|
|
|
|
// Act
|
|
await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
|
|
|
|
// Assert
|
|
expect(onClose).toHaveBeenCalledTimes(1)
|
|
expect(onUpgrade).toHaveBeenCalledTimes(1)
|
|
expect(mockSetShowPricingModal).not.toHaveBeenCalled()
|
|
})
|
|
|
|
// Fallback upgrade path opens pricing modal when no onUpgrade is supplied
|
|
it('should open pricing modal when upgrade button is clicked without onUpgrade', async () => {
|
|
// Arrange
|
|
const user = userEvent.setup()
|
|
const onClose = jest.fn()
|
|
renderComponent({ onClose, onUpgrade: undefined })
|
|
|
|
// Act
|
|
await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
|
|
|
|
// Assert
|
|
expect(onClose).toHaveBeenCalledTimes(1)
|
|
expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
|
|
})
|
|
})
|