- {/*
- * unoptimized to "url parameter is not allowed" for external domains despite correct remotePatterns configuration.
- * https://github.com/vercel/next.js/issues/88873
- */}
-
{children}
diff --git a/web/app/components/base/markdown-with-directive/index.spec.tsx b/web/app/components/base/markdown-with-directive/index.spec.tsx
index 0ca608727f..fc4b813247 100644
--- a/web/app/components/base/markdown-with-directive/index.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/index.spec.tsx
@@ -7,10 +7,6 @@ import { MarkdownWithDirective } from './index'
const FOUR_COLON_RE = /:{4}/
-vi.mock('next/image', () => ({
- default: (props: React.ImgHTMLAttributes
) => ![]()
,
-}))
-
function expectDecorativeIcon(container: HTMLElement, src: string) {
const icon = container.querySelector('img')
expect(icon).toBeInTheDocument()
diff --git a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
index efcf015ea5..f1f1cf08d2 100644
--- a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
import { describe, expect, it, vi } from 'vitest'
import CredentialSelector from '../index'
-// Mock CredentialIcon since it's likely a complex component or uses next/image
+// Mock CredentialIcon since it's likely a complex component.
vi.mock('@/app/components/datasets/common/credential-icon', () => ({
CredentialIcon: ({ name }: { name: string }) => {name}
,
}))
diff --git a/web/app/components/base/param-item/__tests__/index.spec.tsx b/web/app/components/base/param-item/__tests__/index.spec.tsx
index 60bcbebcf9..b18c10216d 100644
--- a/web/app/components/base/param-item/__tests__/index.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/index.spec.tsx
@@ -53,7 +53,7 @@ describe('ParamItem', () => {
it('should render InputNumber and Slider', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
expect(screen.getByRole('slider')).toBeInTheDocument()
})
})
@@ -68,7 +68,7 @@ describe('ParamItem', () => {
it('should disable InputNumber when enable is false', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeDisabled()
+ expect(screen.getByRole('textbox')).toBeDisabled()
})
it('should disable Slider when enable is false', () => {
@@ -104,7 +104,7 @@ describe('ParamItem', () => {
}
render()
- const input = screen.getByRole('spinbutton')
+ const input = screen.getByRole('textbox')
await user.clear(input)
await user.type(input, '0.8')
@@ -166,14 +166,10 @@ describe('ParamItem', () => {
expect(slider).toHaveAttribute('aria-valuemax', '10')
})
- it('should use default step of 0.1 and min of 0 when not provided', () => {
+ it('should expose default minimum of 0 when min is not provided', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- // Component renders without error with default step/min
- expect(screen.getByRole('spinbutton')).toBeInTheDocument()
- expect(input).toHaveAttribute('step', '0.1')
- expect(input).toHaveAttribute('min', '0')
+ const input = screen.getByRole('textbox')
+ expect(input).toBeInTheDocument()
})
})
})
diff --git a/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx b/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
index d59768dacb..54a13e1b74 100644
--- a/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
@@ -31,7 +31,7 @@ describe('ScoreThresholdItem', () => {
it('should render InputNumber and Slider', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
expect(screen.getByRole('slider')).toBeInTheDocument()
})
})
@@ -62,7 +62,7 @@ describe('ScoreThresholdItem', () => {
it('should disable controls when enable is false', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeDisabled()
+ expect(screen.getByRole('textbox')).toBeDisabled()
expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
})
})
@@ -70,23 +70,19 @@ describe('ScoreThresholdItem', () => {
describe('Value Clamping', () => {
it('should clamp values to minimum of 0', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('min', '0')
+ const input = screen.getByRole('textbox')
+ expect(input).toBeInTheDocument()
})
it('should clamp values to maximum of 1', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('max', '1')
+ const input = screen.getByRole('textbox')
+ expect(input).toBeInTheDocument()
})
it('should use step of 0.01', () => {
- render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('step', '0.01')
+ render()
+ expect(screen.getByRole('textbox')).toHaveValue('0.5')
})
it('should call onChange with rounded value when input changes', async () => {
@@ -107,7 +103,7 @@ describe('ScoreThresholdItem', () => {
}
render()
- const input = screen.getByRole('spinbutton')
+ const input = screen.getByRole('textbox')
await user.clear(input)
await user.type(input, '0.55')
@@ -138,8 +134,14 @@ describe('ScoreThresholdItem', () => {
it('should clamp to max=1 when value exceeds maximum', () => {
render()
- const input = screen.getByRole('spinbutton')
- expect(input).toHaveValue(1)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveValue('1')
+ })
+
+ it('should fall back to default value when value is undefined', () => {
+ render()
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveValue('0.7')
})
})
})
diff --git a/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx b/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
index 177b51e768..1b8555213b 100644
--- a/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
@@ -36,7 +36,7 @@ describe('TopKItem', () => {
it('should render InputNumber and Slider', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
expect(screen.getByRole('slider')).toBeInTheDocument()
})
})
@@ -51,7 +51,7 @@ describe('TopKItem', () => {
it('should disable controls when enable is false', () => {
render()
- expect(screen.getByRole('spinbutton')).toBeDisabled()
+ expect(screen.getByRole('textbox')).toBeDisabled()
expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
})
})
@@ -59,23 +59,20 @@ describe('TopKItem', () => {
describe('Value Limits', () => {
it('should use step of 1', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('step', '1')
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveValue('2')
})
it('should use minimum of 1', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('min', '1')
+ const input = screen.getByRole('textbox')
+ expect(input).toBeInTheDocument()
})
it('should use maximum from env (10)', () => {
render()
- const input = screen.getByRole('spinbutton')
-
- expect(input).toHaveAttribute('max', '10')
+ const input = screen.getByRole('textbox')
+ expect(input).toBeInTheDocument()
})
it('should render slider with max >= 5 so no scaling is applied', () => {
diff --git a/web/app/components/base/param-item/score-threshold-item.tsx b/web/app/components/base/param-item/score-threshold-item.tsx
index c6c73713d7..cbaf190b99 100644
--- a/web/app/components/base/param-item/score-threshold-item.tsx
+++ b/web/app/components/base/param-item/score-threshold-item.tsx
@@ -6,7 +6,7 @@ import ParamItem from '.'
type Props = {
className?: string
- value: number
+ value?: number
onChange: (key: string, value: number) => void
enable: boolean
hasSwitch?: boolean
@@ -20,6 +20,18 @@ const VALUE_LIMIT = {
max: 1,
}
+const normalizeScoreThreshold = (value?: number): number => {
+ const normalizedValue = typeof value === 'number' && Number.isFinite(value)
+ ? value
+ : VALUE_LIMIT.default
+ const roundedValue = Number.parseFloat(normalizedValue.toFixed(2))
+
+ return Math.min(
+ VALUE_LIMIT.max,
+ Math.max(VALUE_LIMIT.min, roundedValue),
+ )
+}
+
const ScoreThresholdItem: FC = ({
className,
value,
@@ -29,16 +41,10 @@ const ScoreThresholdItem: FC = ({
onSwitchChange,
}) => {
const { t } = useTranslation()
- const handleParamChange = (key: string, value: number) => {
- let notOutRangeValue = Number.parseFloat(value.toFixed(2))
- notOutRangeValue = Math.max(VALUE_LIMIT.min, notOutRangeValue)
- notOutRangeValue = Math.min(VALUE_LIMIT.max, notOutRangeValue)
- onChange(key, notOutRangeValue)
+ const handleParamChange = (key: string, nextValue: number) => {
+ onChange(key, normalizeScoreThreshold(nextValue))
}
- const safeValue = Math.min(
- VALUE_LIMIT.max,
- Math.max(VALUE_LIMIT.min, Number.parseFloat(value.toFixed(2))),
- )
+ const safeValue = normalizeScoreThreshold(value)
return (
{
+ describe('Exports', () => {
+ it('should map NumberField to the matching base primitive root', () => {
+ expect(NumberField).toBe(BaseNumberField.Root)
+ })
+ })
+
+ describe('Variants', () => {
+ it('should apply regular variant classes and forward className to group and input', () => {
+ render(
+
+
+
+
+ ,
+ )
+
+ const group = screen.getByTestId('group')
+ const input = screen.getByRole('textbox', { name: 'Regular amount' })
+
+ expect(group).toHaveClass('radius-md')
+ expect(group).toHaveClass('custom-group')
+ expect(input).toHaveAttribute('placeholder', 'Regular placeholder')
+ expect(input).toHaveClass('px-3')
+ expect(input).toHaveClass('py-[7px]')
+ expect(input).toHaveClass('custom-input')
+ })
+
+ it('should apply large variant classes to grouped parts when large size is provided', () => {
+ render(
+
+
+
+ ms
+
+
+
+
+
+ ,
+ )
+
+ const group = screen.getByTestId('group')
+ const input = screen.getByRole('textbox', { name: 'Large amount' })
+ const unit = screen.getByText('ms')
+ const increment = screen.getByRole('button', { name: 'Increment amount' })
+ const decrement = screen.getByRole('button', { name: 'Decrement amount' })
+
+ expect(group).toHaveClass('radius-lg')
+ expect(input).toHaveClass('px-4')
+ expect(input).toHaveClass('py-2')
+ expect(unit).toHaveClass('flex')
+ expect(unit).toHaveClass('items-center')
+ expect(unit).toHaveClass('pr-2.5')
+ expect(increment).toHaveClass('pt-1.5')
+ expect(decrement).toHaveClass('pb-1.5')
+ })
+ })
+
+ describe('Passthrough props', () => {
+ it('should forward passthrough props and custom classes to controls and buttons', () => {
+ render(
+
+
+
+
+
+
+
+
+ ,
+ )
+
+ const controls = screen.getByTestId('controls')
+ const increment = screen.getByRole('button', { name: 'Increment' })
+ const decrement = screen.getByRole('button', { name: 'Decrement' })
+
+ expect(controls).toHaveClass('border-l')
+ expect(controls).toHaveClass('custom-controls')
+ expect(increment).toHaveClass('custom-increment')
+ expect(increment).toHaveAttribute('data-track-id', 'increment-track')
+ expect(decrement).toHaveClass('custom-decrement')
+ expect(decrement).toHaveAttribute('data-track-id', 'decrement-track')
+ })
+ })
+})
diff --git a/web/app/components/base/ui/number-field/index.tsx b/web/app/components/base/ui/number-field/index.tsx
new file mode 100644
index 0000000000..9d58fc9982
--- /dev/null
+++ b/web/app/components/base/ui/number-field/index.tsx
@@ -0,0 +1,211 @@
+'use client'
+
+import type { VariantProps } from 'class-variance-authority'
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
+import { cva } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@/utils/classnames'
+
+export const NumberField = BaseNumberField.Root
+
+export const numberFieldGroupVariants = cva(
+ [
+ 'group/number-field flex w-full min-w-0 items-stretch overflow-hidden border border-transparent bg-components-input-bg-normal text-components-input-text-filled shadow-none outline-none transition-[background-color,border-color,box-shadow]',
+ 'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+ 'data-[focused]:border-components-input-border-active data-[focused]:bg-components-input-bg-active data-[focused]:shadow-xs',
+ 'data-[disabled]:cursor-not-allowed data-[disabled]:border-transparent data-[disabled]:bg-components-input-bg-disabled data-[disabled]:text-components-input-text-filled-disabled',
+ 'data-[disabled]:hover:border-transparent data-[disabled]:hover:bg-components-input-bg-disabled',
+ 'data-[readonly]:shadow-none motion-reduce:transition-none',
+ ],
+ {
+ variants: {
+ size: {
+ regular: 'radius-md',
+ large: 'radius-lg',
+ },
+ },
+ defaultVariants: {
+ size: 'regular',
+ },
+ },
+)
+
+type NumberFieldGroupProps = React.ComponentPropsWithoutRef & VariantProps
+
+export function NumberFieldGroup({
+ className,
+ size = 'regular',
+ ...props
+}: NumberFieldGroupProps) {
+ return (
+
+ )
+}
+
+export const numberFieldInputVariants = cva(
+ [
+ 'w-0 min-w-0 flex-1 appearance-none border-0 bg-transparent text-components-input-text-filled caret-primary-600 outline-none',
+ 'placeholder:text-components-input-text-placeholder',
+ 'disabled:cursor-not-allowed disabled:text-components-input-text-filled-disabled disabled:placeholder:text-components-input-text-disabled',
+ 'data-[readonly]:cursor-default',
+ ],
+ {
+ variants: {
+ size: {
+ regular: 'px-3 py-[7px] system-sm-regular',
+ large: 'px-4 py-2 system-md-regular',
+ },
+ },
+ defaultVariants: {
+ size: 'regular',
+ },
+ },
+)
+
+type NumberFieldInputProps = Omit, 'size'> & VariantProps
+
+export function NumberFieldInput({
+ className,
+ size = 'regular',
+ ...props
+}: NumberFieldInputProps) {
+ return (
+
+ )
+}
+
+export const numberFieldUnitVariants = cva(
+ 'flex shrink-0 items-center self-stretch text-text-tertiary system-sm-regular',
+ {
+ variants: {
+ size: {
+ regular: 'pr-2',
+ large: 'pr-2.5',
+ },
+ },
+ defaultVariants: {
+ size: 'regular',
+ },
+ },
+)
+
+type NumberFieldUnitProps = React.HTMLAttributes & VariantProps
+
+export function NumberFieldUnit({
+ className,
+ size = 'regular',
+ ...props
+}: NumberFieldUnitProps) {
+ return (
+
+ )
+}
+
+export const numberFieldControlsVariants = cva(
+ 'flex shrink-0 flex-col items-stretch border-l border-divider-subtle bg-transparent text-text-tertiary',
+)
+
+type NumberFieldControlsProps = React.HTMLAttributes
+
+export function NumberFieldControls({
+ className,
+ ...props
+}: NumberFieldControlsProps) {
+ return (
+
+ )
+}
+
+export const numberFieldControlButtonVariants = cva(
+ [
+ 'flex items-center justify-center px-1.5 text-text-tertiary outline-none transition-colors',
+ 'hover:bg-components-input-bg-hover focus-visible:bg-components-input-bg-hover',
+ 'disabled:cursor-not-allowed disabled:hover:bg-transparent',
+ 'group-data-[disabled]/number-field:cursor-not-allowed group-data-[disabled]/number-field:hover:bg-transparent',
+ 'group-data-[readonly]/number-field:cursor-default group-data-[readonly]/number-field:hover:bg-transparent',
+ 'motion-reduce:transition-none',
+ ],
+ {
+ variants: {
+ size: {
+ regular: '',
+ large: '',
+ },
+ direction: {
+ increment: '',
+ decrement: '',
+ },
+ },
+ compoundVariants: [
+ {
+ size: 'regular',
+ direction: 'increment',
+ className: 'pt-1',
+ },
+ {
+ size: 'regular',
+ direction: 'decrement',
+ className: 'pb-1',
+ },
+ {
+ size: 'large',
+ direction: 'increment',
+ className: 'pt-1.5',
+ },
+ {
+ size: 'large',
+ direction: 'decrement',
+ className: 'pb-1.5',
+ },
+ ],
+ defaultVariants: {
+ size: 'regular',
+ direction: 'increment',
+ },
+ },
+)
+
+type NumberFieldButtonVariantProps = Omit<
+ VariantProps,
+ 'direction'
+>
+
+type NumberFieldButtonProps = React.ComponentPropsWithoutRef & NumberFieldButtonVariantProps
+
+export function NumberFieldIncrement({
+ className,
+ size = 'regular',
+ ...props
+}: NumberFieldButtonProps) {
+ return (
+
+ )
+}
+
+export function NumberFieldDecrement({
+ className,
+ size = 'regular',
+ ...props
+}: NumberFieldButtonProps) {
+ return (
+
+ )
+}
diff --git a/web/app/components/custom/custom-page/__tests__/index.spec.tsx b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
index 0da27e06a6..cdc35ba1eb 100644
--- a/web/app/components/custom/custom-page/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
@@ -1,496 +1,179 @@
-import type { Mock } from 'vitest'
+import type { AppContextValue } from '@/context/app-context'
+import type { SystemFeatures } from '@/types/feature'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createMockProviderContextValue } from '@/__mocks__/provider-context'
-import { contactSalesUrl } from '@/app/components/billing/config'
+import { useToastContext } from '@/app/components/base/toast/context'
+import { contactSalesUrl, defaultPlan } from '@/app/components/billing/config'
import { Plan } from '@/app/components/billing/type'
+import {
+ initialLangGeniusVersionInfo,
+ initialWorkspaceInfo,
+ useAppContext,
+ userProfilePlaceholder,
+} from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
import { useModalContext } from '@/context/modal-context'
import { useProviderContext } from '@/context/provider-context'
+import { defaultSystemFeatures } from '@/types/feature'
import CustomPage from '../index'
-// Mock external dependencies only
vi.mock('@/context/provider-context', () => ({
useProviderContext: vi.fn(),
}))
-
vi.mock('@/context/modal-context', () => ({
useModalContext: vi.fn(),
}))
-
-// Mock the complex CustomWebAppBrand component to avoid dependency issues
-// This is acceptable because it has complex dependencies (fetch, APIs)
-vi.mock('@/app/components/custom/custom-web-app-brand', () => ({
- default: () => CustomWebAppBrand
,
+vi.mock('@/context/app-context', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useAppContext: vi.fn(),
+ }
+})
+vi.mock('@/context/global-public-context', () => ({
+ useGlobalPublicStore: vi.fn(),
+}))
+vi.mock('@/app/components/base/toast/context', () => ({
+ useToastContext: vi.fn(),
}))
+const mockUseProviderContext = vi.mocked(useProviderContext)
+const mockUseModalContext = vi.mocked(useModalContext)
+const mockUseAppContext = vi.mocked(useAppContext)
+const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
+const mockUseToastContext = vi.mocked(useToastContext)
+
+const createProviderContext = ({
+ enableBilling = false,
+ planType = Plan.professional,
+}: {
+ enableBilling?: boolean
+ planType?: Plan
+} = {}) => {
+ return createMockProviderContextValue({
+ enableBilling,
+ plan: {
+ ...defaultPlan,
+ type: planType,
+ },
+ })
+}
+
+const createAppContextValue = (): AppContextValue => ({
+ userProfile: userProfilePlaceholder,
+ mutateUserProfile: vi.fn(),
+ currentWorkspace: {
+ ...initialWorkspaceInfo,
+ custom_config: {
+ replace_webapp_logo: 'https://example.com/replace.png',
+ remove_webapp_brand: false,
+ },
+ },
+ isCurrentWorkspaceManager: true,
+ isCurrentWorkspaceOwner: false,
+ isCurrentWorkspaceEditor: false,
+ isCurrentWorkspaceDatasetOperator: false,
+ mutateCurrentWorkspace: vi.fn(),
+ langGeniusVersionInfo: initialLangGeniusVersionInfo,
+ useSelector: vi.fn() as unknown as AppContextValue['useSelector'],
+ isLoadingCurrentWorkspace: false,
+ isValidatingCurrentWorkspace: false,
+})
+
+const createSystemFeatures = (): SystemFeatures => ({
+ ...defaultSystemFeatures,
+ branding: {
+ ...defaultSystemFeatures.branding,
+ enabled: true,
+ workspace_logo: 'https://example.com/workspace-logo.png',
+ },
+})
+
describe('CustomPage', () => {
- const mockSetShowPricingModal = vi.fn()
+ const setShowPricingModal = vi.fn()
beforeEach(() => {
vi.clearAllMocks()
- // Default mock setup
- ;(useModalContext as Mock).mockReturnValue({
- setShowPricingModal: mockSetShowPricingModal,
- })
+ mockUseProviderContext.mockReturnValue(createProviderContext())
+ mockUseModalContext.mockReturnValue({
+ setShowPricingModal,
+ } as unknown as ReturnType)
+ mockUseAppContext.mockReturnValue(createAppContextValue())
+ mockUseGlobalPublicStore.mockImplementation(selector => selector({
+ systemFeatures: createSystemFeatures(),
+ setSystemFeatures: vi.fn(),
+ }))
+ mockUseToastContext.mockReturnValue({
+ notify: vi.fn(),
+ } as unknown as ReturnType)
})
- // Helper function to render with different provider contexts
- const renderWithContext = (overrides = {}) => {
- ;(useProviderContext as Mock).mockReturnValue(
- createMockProviderContextValue(overrides),
- )
- return render()
- }
-
- // Rendering tests (REQUIRED)
+ // Integration coverage for the page and its child custom brand section.
describe('Rendering', () => {
- it('should render without crashing', () => {
- // Arrange & Act
- renderWithContext()
+ it('should render the custom brand configuration by default', () => {
+ render()
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- })
-
- it('should always render CustomWebAppBrand component', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- })
-
- it('should have correct layout structure', () => {
- // Arrange & Act
- const { container } = renderWithContext()
-
- // Assert
- const mainContainer = container.querySelector('.flex.flex-col')
- expect(mainContainer).toBeInTheDocument()
- })
- })
-
- // Conditional Rendering - Billing Tip
- describe('Billing Tip Banner', () => {
- it('should show billing tip when enableBilling is true and plan is sandbox', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
- expect(screen.getByText('custom.upgradeTip.des')).toBeInTheDocument()
- expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
- })
-
- it('should not show billing tip when enableBilling is false', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: false,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
+ expect(screen.getByText('custom.webapp.removeBrand')).toBeInTheDocument()
+ expect(screen.getByText('Chatflow App')).toBeInTheDocument()
expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
- })
-
- it('should not show billing tip when plan is professional', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert
- expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
- })
-
- it('should not show billing tip when plan is team', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.team },
- })
-
- // Assert
- expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
- })
-
- it('should have correct gradient styling for billing tip banner', () => {
- // Arrange & Act
- const { container } = renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- const banner = container.querySelector('.bg-gradient-to-r')
- expect(banner).toBeInTheDocument()
- expect(banner).toHaveClass('from-components-input-border-active-prompt-1')
- expect(banner).toHaveClass('to-components-input-border-active-prompt-2')
- expect(banner).toHaveClass('p-4')
- expect(banner).toHaveClass('pl-6')
- expect(banner).toHaveClass('shadow-lg')
- })
- })
-
- // Conditional Rendering - Contact Sales
- describe('Contact Sales Section', () => {
- it('should show contact section when enableBilling is true and plan is professional', () => {
- // Arrange & Act
- const { container } = renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert - Check that contact section exists with all parts
- const contactSection = container.querySelector('.absolute.bottom-0')
- expect(contactSection).toBeInTheDocument()
- expect(contactSection).toHaveTextContent('custom.customize.prefix')
- expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
- expect(contactSection).toHaveTextContent('custom.customize.suffix')
- })
-
- it('should show contact section when enableBilling is true and plan is team', () => {
- // Arrange & Act
- const { container } = renderWithContext({
- enableBilling: true,
- plan: { type: Plan.team },
- })
-
- // Assert - Check that contact section exists with all parts
- const contactSection = container.querySelector('.absolute.bottom-0')
- expect(contactSection).toBeInTheDocument()
- expect(contactSection).toHaveTextContent('custom.customize.prefix')
- expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
- expect(contactSection).toHaveTextContent('custom.customize.suffix')
- })
-
- it('should not show contact section when enableBilling is false', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: false,
- plan: { type: Plan.professional },
- })
-
- // Assert
- expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
})
- it('should not show contact section when plan is sandbox', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
- expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
- })
-
- it('should render contact link with correct URL', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert
- const link = screen.getByText('custom.customize.contactUs').closest('a')
- expect(link).toHaveAttribute('href', contactSalesUrl)
- expect(link).toHaveAttribute('target', '_blank')
- expect(link).toHaveAttribute('rel', 'noopener noreferrer')
- })
-
- it('should have correct positioning for contact section', () => {
- // Arrange & Act
- const { container } = renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert
- const contactSection = container.querySelector('.absolute.bottom-0')
- expect(contactSection).toBeInTheDocument()
- expect(contactSection).toHaveClass('h-[50px]')
- expect(contactSection).toHaveClass('text-xs')
- expect(contactSection).toHaveClass('leading-[50px]')
- })
- })
-
- // User Interactions
- describe('User Interactions', () => {
- it('should call setShowPricingModal when upgrade button is clicked', async () => {
- // Arrange
+ it('should show the upgrade banner and open pricing modal for sandbox billing', async () => {
const user = userEvent.setup()
- renderWithContext({
+ mockUseProviderContext.mockReturnValue(createProviderContext({
enableBilling: true,
- plan: { type: Plan.sandbox },
- })
+ planType: Plan.sandbox,
+ }))
- // Act
- const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
- await user.click(upgradeButton)
+ render()
- // Assert
- expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
- })
-
- it('should call setShowPricingModal without arguments', async () => {
- // Arrange
- const user = userEvent.setup()
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Act
- const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
- await user.click(upgradeButton)
-
- // Assert
- expect(mockSetShowPricingModal).toHaveBeenCalledWith()
- })
-
- it('should handle multiple clicks on upgrade button', async () => {
- // Arrange
- const user = userEvent.setup()
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Act
- const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
- await user.click(upgradeButton)
- await user.click(upgradeButton)
- await user.click(upgradeButton)
-
- // Assert
- expect(mockSetShowPricingModal).toHaveBeenCalledTimes(3)
- })
-
- it('should have correct button styling for upgrade button', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
- expect(upgradeButton).toHaveClass('cursor-pointer')
- expect(upgradeButton).toHaveClass('bg-white')
- expect(upgradeButton).toHaveClass('text-text-accent')
- expect(upgradeButton).toHaveClass('rounded-3xl')
- })
- })
-
- // Edge Cases (REQUIRED)
- describe('Edge Cases', () => {
- it('should handle undefined plan type gracefully', () => {
- // Arrange & Act
- expect(() => {
- renderWithContext({
- enableBilling: true,
- plan: { type: undefined },
- })
- }).not.toThrow()
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- })
-
- it('should handle plan without type property', () => {
- // Arrange & Act
- expect(() => {
- renderWithContext({
- enableBilling: true,
- plan: { type: null },
- })
- }).not.toThrow()
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- })
-
- it('should not show any banners when both conditions are false', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: false,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
- })
-
- it('should handle enableBilling undefined', () => {
- // Arrange & Act
- expect(() => {
- renderWithContext({
- enableBilling: undefined,
- plan: { type: Plan.sandbox },
- })
- }).not.toThrow()
-
- // Assert
- expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- })
-
- it('should show only billing tip for sandbox plan, not contact section', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+
+ await user.click(screen.getByText('billing.upgradeBtn.encourageShort'))
+
+ expect(setShowPricingModal).toHaveBeenCalledTimes(1)
})
- it('should show only contact section for professional plan, not billing tip', () => {
- // Arrange & Act
- renderWithContext({
+ it('should show the contact link for professional workspaces', () => {
+ mockUseProviderContext.mockReturnValue(createProviderContext({
enableBilling: true,
- plan: { type: Plan.professional },
- })
+ planType: Plan.professional,
+ }))
- // Assert
+ render()
+
+ const contactLink = screen.getByText('custom.customize.contactUs').closest('a')
expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+ expect(contactLink).toHaveAttribute('href', contactSalesUrl)
+ expect(contactLink).toHaveAttribute('target', '_blank')
+ expect(contactLink).toHaveAttribute('rel', 'noopener noreferrer')
})
- it('should show only contact section for team plan, not billing tip', () => {
- // Arrange & Act
- renderWithContext({
+ it('should show the contact link for team workspaces', () => {
+ mockUseProviderContext.mockReturnValue(createProviderContext({
enableBilling: true,
- plan: { type: Plan.team },
- })
+ planType: Plan.team,
+ }))
- // Assert
+ render()
+
+ expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
- expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
})
- it('should handle empty plan object', () => {
- // Arrange & Act
- expect(() => {
- renderWithContext({
- enableBilling: true,
- plan: {},
- })
- }).not.toThrow()
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- })
- })
-
- // Accessibility Tests
- describe('Accessibility', () => {
- it('should have clickable upgrade button', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
- expect(upgradeButton).toBeInTheDocument()
- expect(upgradeButton).toHaveClass('cursor-pointer')
- })
-
- it('should have proper external link attributes on contact link', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert
- const link = screen.getByText('custom.customize.contactUs').closest('a')
- expect(link).toHaveAttribute('rel', 'noopener noreferrer')
- expect(link).toHaveAttribute('target', '_blank')
- })
-
- it('should have proper text hierarchy in billing tip', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- const title = screen.getByText('custom.upgradeTip.title')
- const description = screen.getByText('custom.upgradeTip.des')
-
- expect(title).toHaveClass('title-xl-semi-bold')
- expect(description).toHaveClass('system-sm-regular')
- })
-
- it('should use semantic color classes', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert - Check that the billing tip has text content (which implies semantic colors)
- expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
- })
- })
-
- // Integration Tests
- describe('Integration', () => {
- it('should render both CustomWebAppBrand and billing tip together', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.sandbox },
- })
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
- })
-
- it('should render both CustomWebAppBrand and contact section together', () => {
- // Arrange & Act
- renderWithContext({
- enableBilling: true,
- plan: { type: Plan.professional },
- })
-
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
- expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
- })
-
- it('should render only CustomWebAppBrand when no billing conditions met', () => {
- // Arrange & Act
- renderWithContext({
+ it('should hide both billing sections when billing is disabled', () => {
+ mockUseProviderContext.mockReturnValue(createProviderContext({
enableBilling: false,
- plan: { type: Plan.sandbox },
- })
+ planType: Plan.sandbox,
+ }))
+
+ render()
- // Assert
- expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
})
diff --git a/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx b/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
index 1d17a2ae0f..fd78377e6d 100644
--- a/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
@@ -1,147 +1,158 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
-import { Plan } from '@/app/components/billing/type'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useProviderContext } from '@/context/provider-context'
-import { updateCurrentWorkspace } from '@/service/common'
+import useWebAppBrand from '../hooks/use-web-app-brand'
import CustomWebAppBrand from '../index'
-vi.mock('@/app/components/base/toast/context', () => ({
- useToastContext: vi.fn(),
-}))
-vi.mock('@/service/common', () => ({
- updateCurrentWorkspace: vi.fn(),
-}))
-vi.mock('@/context/app-context', () => ({
- useAppContext: vi.fn(),
-}))
-vi.mock('@/context/provider-context', () => ({
- useProviderContext: vi.fn(),
-}))
-vi.mock('@/context/global-public-context', () => ({
- useGlobalPublicStore: vi.fn(),
-}))
-vi.mock('@/app/components/base/image-uploader/utils', () => ({
- imageUpload: vi.fn(),
- getImageUploadErrorMessage: vi.fn(),
+vi.mock('../hooks/use-web-app-brand', () => ({
+ default: vi.fn(),
}))
-const mockNotify = vi.fn()
-const mockUseToastContext = vi.mocked(useToastContext)
-const mockUpdateCurrentWorkspace = vi.mocked(updateCurrentWorkspace)
-const mockUseAppContext = vi.mocked(useAppContext)
-const mockUseProviderContext = vi.mocked(useProviderContext)
-const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
-const mockImageUpload = vi.mocked(imageUpload)
-const mockGetImageUploadErrorMessage = vi.mocked(getImageUploadErrorMessage)
+const mockUseWebAppBrand = vi.mocked(useWebAppBrand)
-const defaultPlanUsage = {
- buildApps: 0,
- teamMembers: 0,
- annotatedResponse: 0,
- documentsUploadQuota: 0,
- apiRateLimit: 0,
- triggerEvents: 0,
- vectorSpace: 0,
+const createHookState = (overrides: Partial> = {}): ReturnType => ({
+ fileId: '',
+ imgKey: 100,
+ uploadProgress: 0,
+ uploading: false,
+ webappLogo: 'https://example.com/replace.png',
+ webappBrandRemoved: false,
+ uploadDisabled: false,
+ workspaceLogo: 'https://example.com/workspace-logo.png',
+ isSandbox: false,
+ isCurrentWorkspaceManager: true,
+ handleApply: vi.fn(),
+ handleCancel: vi.fn(),
+ handleChange: vi.fn(),
+ handleRestore: vi.fn(),
+ handleSwitch: vi.fn(),
+ ...overrides,
+})
+
+const renderComponent = (overrides: Partial> = {}) => {
+ const hookState = createHookState(overrides)
+ mockUseWebAppBrand.mockReturnValue(hookState)
+ return {
+ hookState,
+ ...render(),
+ }
}
-const renderComponent = () => render()
-
describe('CustomWebAppBrand', () => {
beforeEach(() => {
vi.clearAllMocks()
- mockUseToastContext.mockReturnValue({ notify: mockNotify } as unknown as ReturnType)
- mockUpdateCurrentWorkspace.mockResolvedValue({} as unknown as Awaited>)
- mockUseAppContext.mockReturnValue({
- currentWorkspace: {
- custom_config: {
- replace_webapp_logo: 'https://example.com/replace.png',
- remove_webapp_brand: false,
- },
- },
- mutateCurrentWorkspace: vi.fn(),
- isCurrentWorkspaceManager: true,
- } as unknown as ReturnType)
- mockUseProviderContext.mockReturnValue({
- plan: {
- type: Plan.professional,
- usage: defaultPlanUsage,
- total: defaultPlanUsage,
- reset: {},
- },
- enableBilling: false,
- } as unknown as ReturnType)
- const systemFeaturesState = {
- branding: {
- enabled: true,
- workspace_logo: 'https://example.com/workspace-logo.png',
- },
- }
- mockUseGlobalPublicStore.mockImplementation(selector => selector ? selector({ systemFeatures: systemFeaturesState, setSystemFeatures: vi.fn() } as unknown as ReturnType) : { systemFeatures: systemFeaturesState })
- mockGetImageUploadErrorMessage.mockReturnValue('upload error')
})
- it('disables upload controls when the user cannot manage the workspace', () => {
- mockUseAppContext.mockReturnValue({
- currentWorkspace: {
- custom_config: {
- replace_webapp_logo: '',
- remove_webapp_brand: false,
- },
- },
- mutateCurrentWorkspace: vi.fn(),
- isCurrentWorkspaceManager: false,
- } as unknown as ReturnType)
+ // Integration coverage for the root component with the hook mocked at the boundary.
+ describe('Rendering', () => {
+ it('should render the upload controls and preview cards with restore action', () => {
+ renderComponent()
- const { container } = renderComponent()
- const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
- expect(fileInput).toBeDisabled()
- })
-
- it('toggles remove brand switch and calls the backend + mutate', async () => {
- const mutateMock = vi.fn()
- mockUseAppContext.mockReturnValue({
- currentWorkspace: {
- custom_config: {
- replace_webapp_logo: '',
- remove_webapp_brand: false,
- },
- },
- mutateCurrentWorkspace: mutateMock,
- isCurrentWorkspaceManager: true,
- } as unknown as ReturnType)
-
- renderComponent()
- const switchInput = screen.getByRole('switch')
- fireEvent.click(switchInput)
-
- await waitFor(() => expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
- url: '/workspaces/custom-config',
- body: { remove_webapp_brand: true },
- }))
- await waitFor(() => expect(mutateMock).toHaveBeenCalled())
- })
-
- it('shows cancel/apply buttons after successful upload and cancels properly', async () => {
- mockImageUpload.mockImplementation(({ onProgressCallback, onSuccessCallback }) => {
- onProgressCallback(50)
- onSuccessCallback({ id: 'new-logo' })
+ expect(screen.getByText('custom.webapp.removeBrand')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'custom.restore' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'custom.change' })).toBeInTheDocument()
+ expect(screen.getByText('Chatflow App')).toBeInTheDocument()
+ expect(screen.getByText('Workflow App')).toBeInTheDocument()
})
- const { container } = renderComponent()
- const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
- const testFile = new File(['content'], 'logo.png', { type: 'image/png' })
- fireEvent.change(fileInput, { target: { files: [testFile] } })
+ it('should hide the restore action when uploads are disabled or no logo is configured', () => {
+ renderComponent({
+ uploadDisabled: true,
+ webappLogo: '',
+ })
- await waitFor(() => expect(mockImageUpload).toHaveBeenCalled())
- await waitFor(() => screen.getByRole('button', { name: 'custom.apply' }))
+ expect(screen.queryByRole('button', { name: 'custom.restore' })).not.toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'custom.upload' })).toBeDisabled()
+ })
- const cancelButton = screen.getByRole('button', { name: 'common.operation.cancel' })
- fireEvent.click(cancelButton)
+ it('should show the uploading button and failure message when upload state requires it', () => {
+ renderComponent({
+ uploading: true,
+ uploadProgress: -1,
+ })
- await waitFor(() => expect(screen.queryByRole('button', { name: 'custom.apply' })).toBeNull())
+ expect(screen.getByRole('button', { name: 'custom.uploading' })).toBeDisabled()
+ expect(screen.getByText('custom.uploadedFail')).toBeInTheDocument()
+ })
+
+ it('should show apply and cancel actions when a new file is ready', () => {
+ renderComponent({
+ fileId: 'new-logo',
+ })
+
+ expect(screen.getByRole('button', { name: 'custom.apply' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+ })
+
+ it('should disable the switch when sandbox restrictions are active', () => {
+ renderComponent({
+ isSandbox: true,
+ })
+
+ expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true')
+ })
+
+ it('should default the switch to unchecked when brand removal state is missing', () => {
+ const { container } = renderComponent({
+ webappBrandRemoved: undefined,
+ })
+
+ expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
+ expect(container.querySelector('.opacity-30')).not.toBeInTheDocument()
+ })
+
+ it('should dim the upload row when brand removal is enabled', () => {
+ const { container } = renderComponent({
+ webappBrandRemoved: true,
+ uploadDisabled: true,
+ })
+
+ expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+ expect(container.querySelector('.opacity-30')).toBeInTheDocument()
+ })
+ })
+
+ // User interactions delegated to the hook callbacks.
+ describe('Interactions', () => {
+ it('should delegate switch changes to the hook handler', () => {
+ const { hookState } = renderComponent()
+
+ fireEvent.click(screen.getByRole('switch'))
+
+ expect(hookState.handleSwitch).toHaveBeenCalledWith(true)
+ })
+
+ it('should delegate file input changes and reset the native input value on click', () => {
+ const { container, hookState } = renderComponent()
+ const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+ const file = new File(['logo'], 'logo.png', { type: 'image/png' })
+
+ Object.defineProperty(fileInput, 'value', {
+ configurable: true,
+ value: 'stale-selection',
+ writable: true,
+ })
+
+ fireEvent.click(fileInput)
+ fireEvent.change(fileInput, {
+ target: { files: [file] },
+ })
+
+ expect(fileInput.value).toBe('')
+ expect(hookState.handleChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should delegate restore, cancel, and apply actions to the hook handlers', () => {
+ const { hookState } = renderComponent({
+ fileId: 'new-logo',
+ })
+
+ fireEvent.click(screen.getByRole('button', { name: 'custom.restore' }))
+ fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+ fireEvent.click(screen.getByRole('button', { name: 'custom.apply' }))
+
+ expect(hookState.handleRestore).toHaveBeenCalledTimes(1)
+ expect(hookState.handleCancel).toHaveBeenCalledTimes(1)
+ expect(hookState.handleApply).toHaveBeenCalledTimes(1)
+ })
})
})
diff --git a/web/app/components/custom/custom-web-app-brand/components/__tests__/chat-preview-card.spec.tsx b/web/app/components/custom/custom-web-app-brand/components/__tests__/chat-preview-card.spec.tsx
new file mode 100644
index 0000000000..6605e40831
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/components/__tests__/chat-preview-card.spec.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ChatPreviewCard from '../chat-preview-card'
+
+describe('ChatPreviewCard', () => {
+ it('should render the chat preview with the powered-by footer', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('Chatflow App')).toBeInTheDocument()
+ expect(screen.getByText('Hello! How can I assist you today?')).toBeInTheDocument()
+ expect(screen.getByText('Talk to Dify')).toBeInTheDocument()
+ expect(screen.getByText('POWERED BY')).toBeInTheDocument()
+ })
+
+ it('should hide chat branding footer when brand removal is enabled', () => {
+ render(
+ ,
+ )
+
+ expect(screen.queryByText('POWERED BY')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/custom/custom-web-app-brand/components/__tests__/powered-by-brand.spec.tsx b/web/app/components/custom/custom-web-app-brand/components/__tests__/powered-by-brand.spec.tsx
new file mode 100644
index 0000000000..d77c8ce15b
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/components/__tests__/powered-by-brand.spec.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import PoweredByBrand from '../powered-by-brand'
+
+describe('PoweredByBrand', () => {
+ it('should render the workspace logo when available', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('POWERED BY')).toBeInTheDocument()
+ expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/workspace-logo.png')
+ })
+
+ it('should fall back to the custom web app logo when workspace branding is unavailable', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/custom-logo.png?hash=42')
+ })
+
+ it('should fall back to the Dify logo when no custom branding exists', () => {
+ render()
+
+ expect(screen.getByAltText('Dify logo')).toBeInTheDocument()
+ })
+
+ it('should render nothing when branding is removed', () => {
+ const { container } = render()
+
+ expect(container).toBeEmptyDOMElement()
+ })
+})
diff --git a/web/app/components/custom/custom-web-app-brand/components/__tests__/workflow-preview-card.spec.tsx b/web/app/components/custom/custom-web-app-brand/components/__tests__/workflow-preview-card.spec.tsx
new file mode 100644
index 0000000000..d563c4f40b
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/components/__tests__/workflow-preview-card.spec.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import WorkflowPreviewCard from '../workflow-preview-card'
+
+describe('WorkflowPreviewCard', () => {
+ it('should render the workflow preview with execute action and branding footer', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('Workflow App')).toBeInTheDocument()
+ expect(screen.getByText('RUN ONCE')).toBeInTheDocument()
+ expect(screen.getByText('RUN BATCH')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /Execute/i })).toBeDisabled()
+ expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/workspace-logo.png')
+ })
+
+ it('should hide workflow branding footer when brand removal is enabled', () => {
+ render(
+ ,
+ )
+
+ expect(screen.queryByText('POWERED BY')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
new file mode 100644
index 0000000000..5700a04e41
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -0,0 +1,78 @@
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import PoweredByBrand from './powered-by-brand'
+
+type ChatPreviewCardProps = {
+ webappBrandRemoved?: boolean
+ workspaceLogo?: string
+ webappLogo?: string
+ imgKey: number
+}
+
+const ChatPreviewCard = ({
+ webappBrandRemoved,
+ workspaceLogo,
+ webappLogo,
+ imgKey,
+}: ChatPreviewCardProps) => {
+ return (
+
+
+
+
+
+
+
Chatflow App
+
+
+
+
+
+
+
+
+
+
+
+
Hello! How can I assist you today?
+
+
+
Talk to Dify
+
+
+
POWERED BY
+ {previewLogo
+ ? 
+ : }
+
+ )
+}
+
+export default PoweredByBrand
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
new file mode 100644
index 0000000000..276f77ce71
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -0,0 +1,64 @@
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import PoweredByBrand from './powered-by-brand'
+
+type WorkflowPreviewCardProps = {
+ webappBrandRemoved?: boolean
+ workspaceLogo?: string
+ webappLogo?: string
+ imgKey: number
+}
+
+const WorkflowPreviewCard = ({
+ webappBrandRemoved,
+ workspaceLogo,
+ webappLogo,
+ imgKey,
+}: WorkflowPreviewCardProps) => {
+ return (
+
+
+
+
+
+
+
Workflow App
+
+
+
+
+
+
+
+
+
@@ -149,7 +64,7 @@ const CustomWebAppBrand = () => {
className="relative mr-2"
disabled={uploadDisabled}
>
-
+
{
(webappLogo || fileId)
? t('change', { ns: 'custom' })
@@ -172,7 +87,7 @@ const CustomWebAppBrand = () => {
className="relative mr-2"
disabled={true}
>
-
+
{t('uploading', { ns: 'custom' })}
)
@@ -208,118 +123,18 @@ const CustomWebAppBrand = () => {
- {/* chat card */}
-
-
-
-
-
-
-
Chatflow App
-
-
-
-
-
-
-
-
-
-
-
- {!webappBrandRemoved && (
- <>
-
POWERED BY
- {
- systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
- ?
- : webappLogo
- ?
- :
- }
-
- )}
-
-
-
-
-
-
-
Hello! How can I assist you today?
-
-
-
Talk to Dify
-
-
-
- {/* workflow card */}
-
-
-
-
-
-
-
Workflow App
-
-
-
-
-
-
-
-
- {!webappBrandRemoved && (
- <>
-
POWERED BY
- {
- systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
- ?
- : webappLogo
- ?
- :
- }
-
- )}
-
-
+
+
)
diff --git a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
index 36120de738..ad230fb596 100644
--- a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
@@ -4,13 +4,6 @@ import { RETRIEVE_METHOD } from '@/types/app'
import { retrievalIcon } from '../../../create/icons'
import RetrievalMethodInfo, { getIcon } from '../index'
-// Override global next/image auto-mock: tests assert on rendered
![]()
src attributes via data-testid
-vi.mock('next/image', () => ({
- default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => (
-
- ),
-}))
-
// Mock RadioCard
vi.mock('@/app/components/base/radio-card', () => ({
default: ({ title, description, chosenConfig, icon }: { title: string, description: string, chosenConfig: ReactNode, icon: ReactNode }) => (
@@ -50,7 +43,7 @@ describe('RetrievalMethodInfo', () => {
})
it('should render correctly with full config', () => {
- render(
)
+ const { container } = render(
)
expect(screen.getByTestId('radio-card')).toBeInTheDocument()
@@ -59,7 +52,7 @@ describe('RetrievalMethodInfo', () => {
expect(screen.getByTestId('card-description')).toHaveTextContent('dataset.retrieval.semantic_search.description')
// Check Icon
- const icon = screen.getByTestId('method-icon')
+ const icon = container.querySelector('img')
expect(icon).toHaveAttribute('src', 'vector-icon.png')
// Check Config Details
@@ -87,18 +80,18 @@ describe('RetrievalMethodInfo', () => {
it('should handle different retrieval methods', () => {
// Test Hybrid
const hybridConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.hybrid }
- const { unmount } = render(
)
+ const { container, unmount } = render(
)
expect(screen.getByTestId('card-title')).toHaveTextContent('dataset.retrieval.hybrid_search.title')
- expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'hybrid-icon.png')
+ expect(container.querySelector('img')).toHaveAttribute('src', 'hybrid-icon.png')
unmount()
// Test FullText
const fullTextConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.fullText }
- render(
)
+ const { container: fullTextContainer } = render(
)
expect(screen.getByTestId('card-title')).toHaveTextContent('dataset.retrieval.full_text_search.title')
- expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'fulltext-icon.png')
+ expect(fullTextContainer.querySelector('img')).toHaveAttribute('src', 'fulltext-icon.png')
})
describe('getIcon utility', () => {
@@ -132,17 +125,17 @@ describe('RetrievalMethodInfo', () => {
it('should render correctly with invertedIndex search method', () => {
const invertedIndexConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.invertedIndex }
- render(
)
+ const { container } = render(
)
// invertedIndex uses vector icon
- expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'vector-icon.png')
+ expect(container.querySelector('img')).toHaveAttribute('src', 'vector-icon.png')
})
it('should render correctly with keywordSearch search method', () => {
const keywordSearchConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.keywordSearch }
- render(
)
+ const { container } = render(
)
// keywordSearch uses vector icon
- expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'vector-icon.png')
+ expect(container.querySelector('img')).toHaveAttribute('src', 'vector-icon.png')
})
})
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index 398b79975f..d23d247307 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -1,7 +1,6 @@
'use client'
import type { FC } from 'react'
import type { RetrievalConfig } from '@/types/app'
-import Image from 'next/image'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import RadioCard from '@/app/components/base/radio-card'
@@ -28,7 +27,7 @@ const EconomicalRetrievalMethodConfig: FC
= ({
}) => {
const { t } = useTranslation()
const type = value.search_method
- const icon =
+ const icon = })
return (
= ({
/>
)}
-
{t('modelProvider.rerankModel.key', { ns: 'common' })}
+
{t('modelProvider.rerankModel.key', { ns: 'common' })}
{t('modelProvider.rerankModel.tip', { ns: 'common' })}
@@ -215,11 +214,11 @@ const RetrievalParamConfig: FC = ({
isChosen={value.reranking_mode === option.value}
onChosen={() => handleChangeRerankMode(option.value)}
icon={(
-
@@ -281,7 +280,7 @@ const RetrievalParamConfig: FC = ({
-
+
{t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}