+
{
files.map((file) => {
if (file.supportFileType === SupportUploadFileTypes.image) {
diff --git a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
index 898dc8a821..54d7accad4 100644
--- a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
+++ b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
@@ -1,7 +1,7 @@
import type { AnyFieldApi } from '@tanstack/react-form'
import type { FormSchema } from '@/app/components/base/form/types'
import { useForm } from '@tanstack/react-form'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
import BaseField from '../base-field'
@@ -35,7 +35,7 @@ const renderBaseField = ({
const TestComponent = () => {
const form = useForm({
defaultValues: defaultValues ?? { [formSchema.name]: '' },
- onSubmit: async () => {},
+ onSubmit: async () => { },
})
return (
@@ -72,7 +72,7 @@ describe('BaseField', () => {
})
})
- it('should render text input and propagate changes', () => {
+ it('should render text input and propagate changes', async () => {
const onChange = vi.fn()
renderBaseField({
formSchema: {
@@ -88,13 +88,15 @@ describe('BaseField', () => {
const input = screen.getByDisplayValue('Hello')
expect(input).toHaveValue('Hello')
- fireEvent.change(input, { target: { value: 'Updated' } })
+ await act(async () => {
+ fireEvent.change(input, { target: { value: 'Updated' } })
+ })
expect(onChange).toHaveBeenCalledWith('title', 'Updated')
expect(screen.getByText('Title')).toBeInTheDocument()
expect(screen.getAllByText('*')).toHaveLength(1)
})
- it('should render only options that satisfy show_on conditions', () => {
+ it('should render only options that satisfy show_on conditions', async () => {
renderBaseField({
formSchema: {
type: FormTypeEnum.select,
@@ -109,7 +111,9 @@ describe('BaseField', () => {
defaultValues: { mode: 'alpha', enabled: 'no' },
})
- fireEvent.click(screen.getByText('Alpha'))
+ await act(async () => {
+ fireEvent.click(screen.getByText('Alpha'))
+ })
expect(screen.queryByText('Beta')).not.toBeInTheDocument()
})
@@ -133,7 +137,7 @@ describe('BaseField', () => {
expect(screen.getByText('common.dynamicSelect.loading')).toBeInTheDocument()
})
- it('should update value when users click a radio option', () => {
+ it('should update value when users click a radio option', async () => {
const onChange = vi.fn()
renderBaseField({
formSchema: {
@@ -150,7 +154,9 @@ describe('BaseField', () => {
onChange,
})
- fireEvent.click(screen.getByText('Private'))
+ await act(async () => {
+ fireEvent.click(screen.getByText('Private'))
+ })
expect(onChange).toHaveBeenCalledWith('visibility', 'private')
})
@@ -231,7 +237,7 @@ describe('BaseField', () => {
expect(screen.getByText('Localized title')).toBeInTheDocument()
})
- it('should render dynamic options and allow selecting one', () => {
+ it('should render dynamic options and allow selecting one', async () => {
mockDynamicOptions.mockReturnValue({
data: {
options: [
@@ -252,12 +258,16 @@ describe('BaseField', () => {
defaultValues: { plugin_option: '' },
})
- fireEvent.click(screen.getByText('common.placeholder.input'))
- fireEvent.click(screen.getByText('Option A'))
+ await act(async () => {
+ fireEvent.click(screen.getByText('common.placeholder.input'))
+ })
+ await act(async () => {
+ fireEvent.click(screen.getByText('Option A'))
+ })
expect(screen.getByText('Option A')).toBeInTheDocument()
})
- it('should update boolean field when users choose false', () => {
+ it('should update boolean field when users choose false', async () => {
renderBaseField({
formSchema: {
type: FormTypeEnum.boolean,
@@ -270,7 +280,9 @@ describe('BaseField', () => {
})
expect(screen.getByTestId('field-value')).toHaveTextContent('true')
- fireEvent.click(screen.getByText('False'))
+ await act(async () => {
+ fireEvent.click(screen.getByText('False'))
+ })
expect(screen.getByTestId('field-value')).toHaveTextContent('false')
})
@@ -290,4 +302,144 @@ describe('BaseField', () => {
expect(screen.getByText('This is a warning')).toBeInTheDocument()
})
+
+ it('should render tooltip when provided', async () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.textInput,
+ name: 'info',
+ label: 'Info',
+ required: false,
+ tooltip: 'Extra info',
+ },
+ })
+
+ expect(screen.getByText('Info')).toBeInTheDocument()
+
+ const tooltipTrigger = screen.getByTestId('base-field-tooltip-trigger')
+ fireEvent.mouseEnter(tooltipTrigger)
+
+ expect(screen.getByText('Extra info')).toBeInTheDocument()
+ })
+
+ it('should render checkbox list and handle changes', async () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.checkbox,
+ name: 'features',
+ label: 'Features',
+ required: false,
+ options: [
+ { label: 'Feature A', value: 'a' },
+ { label: 'Feature B', value: 'b' },
+ ],
+ },
+ defaultValues: { features: ['a'] },
+ })
+
+ expect(screen.getByText('Feature A')).toBeInTheDocument()
+ expect(screen.getByText('Feature B')).toBeInTheDocument()
+ await act(async () => {
+ fireEvent.click(screen.getByText('Feature B'))
+ })
+
+ const checkboxB = screen.getByTestId('checkbox-b')
+ expect(checkboxB).toBeChecked()
+ })
+
+ it('should handle dynamic select error state', () => {
+ mockDynamicOptions.mockReturnValue({
+ data: undefined,
+ isLoading: false,
+ error: new Error('Failed'),
+ })
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.dynamicSelect,
+ name: 'ds_error',
+ label: 'DS Error',
+ required: false,
+ },
+ })
+ expect(screen.getByText('common.placeholder.input')).toBeInTheDocument()
+ })
+
+ it('should handle dynamic select no data state', () => {
+ mockDynamicOptions.mockReturnValue({
+ data: { options: [] },
+ isLoading: false,
+ error: null,
+ })
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.dynamicSelect,
+ name: 'ds_empty',
+ label: 'DS Empty',
+ required: false,
+ },
+ })
+ expect(screen.getByText('common.placeholder.input')).toBeInTheDocument()
+ })
+
+ it('should render radio buttons in vertical layout when length >= 3', () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.radio,
+ name: 'vertical_radio',
+ label: 'Vertical',
+ required: false,
+ options: [
+ { label: 'O1', value: '1' },
+ { label: 'O2', value: '2' },
+ { label: 'O3', value: '3' },
+ ],
+ },
+ })
+ expect(screen.getByText('O1')).toBeInTheDocument()
+ expect(screen.getByText('O2')).toBeInTheDocument()
+ expect(screen.getByText('O3')).toBeInTheDocument()
+ })
+
+ it('should render radio UI when showRadioUI is true', () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.radio,
+ name: 'ui_radio',
+ label: 'UI Radio',
+ required: false,
+ showRadioUI: true,
+ options: [{ label: 'Option 1', value: '1' }],
+ },
+ })
+ expect(screen.getByText('Option 1')).toBeInTheDocument()
+ expect(screen.getByTestId('radio-group')).toBeInTheDocument()
+ })
+
+ it('should apply disabled styles', () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.radio,
+ name: 'disabled_radio',
+ label: 'Disabled',
+ required: false,
+ options: [{ label: 'Option 1', value: '1' }],
+ disabled: true,
+ },
+ })
+ // In radio, the option itself has the disabled class
+ expect(screen.getByText('Option 1')).toHaveClass('cursor-not-allowed')
+ })
+
+ it('should return empty string for null content in getTranslatedContent', () => {
+ renderBaseField({
+ formSchema: {
+ type: FormTypeEnum.textInput,
+ name: 'null_label',
+ label: null as unknown as string,
+ required: false,
+ },
+ })
+ // Expecting translatedLabel to be '' so title block only renders required * if applicable
+ expect(screen.queryByText('*')).not.toBeInTheDocument()
+ })
})
diff --git a/web/app/components/base/form/components/base/__tests__/base-form.spec.tsx b/web/app/components/base/form/components/base/__tests__/base-form.spec.tsx
index f887aaea64..387dcb0658 100644
--- a/web/app/components/base/form/components/base/__tests__/base-form.spec.tsx
+++ b/web/app/components/base/form/components/base/__tests__/base-form.spec.tsx
@@ -1,8 +1,30 @@
+import type { AnyFieldApi, AnyFormApi } from '@tanstack/react-form'
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
+import { useStore } from '@tanstack/react-form'
import { act, fireEvent, render, screen } from '@testing-library/react'
-import { FormTypeEnum } from '@/app/components/base/form/types'
+import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
import BaseForm from '../base-form'
+vi.mock('@tanstack/react-form', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useStore: vi.fn((store, selector) => {
+ // If a selector is provided, apply it to a mocked state or the store directly
+ if (selector) {
+ // If the store is a mock with state, use it; otherwise provide a default
+ try {
+ return selector(store?.state || { values: {} })
+ }
+ catch {
+ return {}
+ }
+ }
+ return store?.state?.values || {}
+ }),
+ }
+})
+
vi.mock('@/service/use-triggers', () => ({
useTriggerPluginDynamicOptions: () => ({
data: undefined,
@@ -54,7 +76,7 @@ describe('BaseForm', () => {
expect(screen.queryByDisplayValue('Hidden title')).not.toBeInTheDocument()
})
- it('should prevent default submit behavior when preventDefaultSubmit is true', () => {
+ it('should prevent default submit behavior when preventDefaultSubmit is true', async () => {
const onSubmit = vi.fn((event: React.FormEvent) => {
expect(event.defaultPrevented).toBe(true)
})
@@ -66,11 +88,15 @@ describe('BaseForm', () => {
/>,
)
- fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+ await act(async () => {
+ fireEvent.submit(container.querySelector('form') as HTMLFormElement, {
+ defaultPrevented: true,
+ })
+ })
expect(onSubmit).toHaveBeenCalled()
})
- it('should expose ref API for updating values and field states', () => {
+ it('should expose ref API for updating values and field states', async () => {
const formRef = { current: null } as { current: FormRefObject | null }
render(
{
expect(formRef.current).not.toBeNull()
- act(() => {
+ await act(async () => {
formRef.current?.setFields([
{
name: 'title',
@@ -97,7 +123,7 @@ describe('BaseForm', () => {
expect(formRef.current?.getFormValues({})).toBeTruthy()
})
- it('should derive warning status when setFields receives warnings only', () => {
+ it('should derive warning status when setFields receives warnings only', async () => {
const formRef = { current: null } as { current: FormRefObject | null }
render(
{
/>,
)
- act(() => {
+ await act(async () => {
formRef.current?.setFields([
{
name: 'title',
@@ -117,4 +143,179 @@ describe('BaseForm', () => {
expect(screen.getByText('Title warning')).toBeInTheDocument()
})
+
+ it('should use formFromProps if provided', () => {
+ const mockState = { values: { kind: 'show' } }
+ const mockStore = {
+ state: mockState,
+ }
+ vi.mocked(useStore).mockReturnValueOnce(mockState.values)
+ const mockForm = {
+ store: mockStore,
+ Field: ({ children, name }: { children: (field: AnyFieldApi) => React.ReactNode, name: string }) => children({
+ name,
+ state: { value: mockState.values[name as keyof typeof mockState.values], meta: { isTouched: false, errorMap: {} } },
+ form: { store: mockStore },
+ } as unknown as AnyFieldApi),
+ setFieldValue: vi.fn(),
+ }
+ render()
+ expect(screen.getByText('Kind')).toBeInTheDocument()
+ })
+
+ it('should handle setFields with explicit validateStatus', async () => {
+ const formRef = { current: null } as { current: FormRefObject | null }
+ render()
+
+ await act(async () => {
+ formRef.current?.setFields([{
+ name: 'kind',
+ validateStatus: FormItemValidateStatusEnum.Error,
+ errors: ['Explicit error'],
+ }])
+ })
+ expect(screen.getByText('Explicit error')).toBeInTheDocument()
+ })
+
+ it('should handle setFields with no value change', async () => {
+ const formRef = { current: null } as { current: FormRefObject | null }
+ render()
+
+ await act(async () => {
+ formRef.current?.setFields([{
+ name: 'kind',
+ errors: ['Error only'],
+ }])
+ })
+ expect(screen.getByText('Error only')).toBeInTheDocument()
+ })
+
+ it('should use default values from schema when defaultValues prop is missing', () => {
+ render()
+ expect(screen.getByDisplayValue('show')).toBeInTheDocument()
+ })
+
+ it('should handle submit without preventDefaultSubmit', async () => {
+ const onSubmit = vi.fn()
+ const { container } = render()
+ await act(async () => {
+ fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+ })
+ expect(onSubmit).toHaveBeenCalled()
+ })
+
+ it('should render nothing if field name does not match schema in renderField', () => {
+ const mockState = { values: { unknown: 'value' } }
+ const mockStore = {
+ state: mockState,
+ }
+ vi.mocked(useStore).mockReturnValueOnce(mockState.values)
+ const mockForm = {
+ store: mockStore,
+ Field: ({ children }: { children: (field: AnyFieldApi) => React.ReactNode }) => children({
+ name: 'unknown', // field name not in baseSchemas
+ state: { value: 'value', meta: { isTouched: false, errorMap: {} } },
+ form: { store: mockStore },
+ } as unknown as AnyFieldApi),
+ setFieldValue: vi.fn(),
+ }
+ render()
+ expect(screen.queryByText('Kind')).not.toBeInTheDocument()
+ })
+
+ it('should handle undefined formSchemas', () => {
+ const { container } = render()
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('should handle empty array formSchemas', () => {
+ const { container } = render()
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('should fallback to schema class names if props are missing', () => {
+ const schemaWithClasses: FormSchema[] = [{
+ ...baseSchemas[0],
+ fieldClassName: 'schema-field',
+ labelClassName: 'schema-label',
+ }]
+ render()
+ expect(screen.getByText('Kind')).toHaveClass('schema-label')
+ expect(screen.getByText('Kind').parentElement).toHaveClass('schema-field')
+ })
+
+ it('should handle preventDefaultSubmit', async () => {
+ const onSubmit = vi.fn()
+ const { container } = render(
+ ,
+ )
+ const event = new Event('submit', { cancelable: true, bubbles: true })
+ const spy = vi.spyOn(event, 'preventDefault')
+ const form = container.querySelector('form') as HTMLFormElement
+ await act(async () => {
+ fireEvent(form, event)
+ })
+ expect(spy).toHaveBeenCalled()
+ expect(onSubmit).toHaveBeenCalled()
+ })
+
+ it('should handle missing onSubmit prop', async () => {
+ const { container } = render()
+ await act(async () => {
+ expect(() => {
+ fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+ }).not.toThrow()
+ })
+ })
+
+ it('should call onChange when field value changes', async () => {
+ const onChange = vi.fn()
+ render()
+ const input = screen.getByDisplayValue('show')
+ await act(async () => {
+ fireEvent.change(input, { target: { value: 'new-value' } })
+ })
+ expect(onChange).toHaveBeenCalledWith('kind', 'new-value')
+ })
+
+ it('should handle setFields with no status, errors, or warnings', async () => {
+ const formRef = { current: null } as { current: FormRefObject | null }
+ render()
+
+ await act(async () => {
+ formRef.current?.setFields([{
+ name: 'kind',
+ value: 'new-show',
+ }])
+ })
+ expect(screen.getByDisplayValue('new-show')).toBeInTheDocument()
+ })
+
+ it('should handle schema without show_on in showOnValues', () => {
+ const schemaNoShowOn: FormSchema[] = [{
+ type: FormTypeEnum.textInput,
+ name: 'test',
+ label: 'Test',
+ required: false,
+ }]
+ // Simply rendering should trigger showOnValues selector
+ render()
+ expect(screen.getByText('Test')).toBeInTheDocument()
+ })
+
+ it('should apply prop-based class names', () => {
+ render(
+ ,
+ )
+ const label = screen.getByText('Kind')
+ expect(label).toHaveClass('custom-label')
+ })
})
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index 6b2e325b77..9fdbb0e00a 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -1,6 +1,5 @@
import type { AnyFieldApi } from '@tanstack/react-form'
import type { FieldState, FormSchema, TypeWithI18N } from '@/app/components/base/form/types'
-import { RiExternalLinkLine } from '@remixicon/react'
import { useStore } from '@tanstack/react-form'
import {
isValidElement,
@@ -198,6 +197,7 @@ const BaseField = ({
}
{tooltip && (
{translatedTooltip}
}
triggerClassName="ml-0.5 w-4 h-4"
/>
@@ -270,16 +270,18 @@ const BaseField = ({
}
{
formItemType === FormTypeEnum.radio && (
-
{
memorizedOptions.map(option => (
@@ -325,21 +327,21 @@ const BaseField = ({
{description && (
-
+
{translatedDescription}
)}
{
url && (
{translatedHelp}
-
+
)
}
diff --git a/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts b/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts
index fdb958b4ae..575f79559c 100644
--- a/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts
+++ b/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts
@@ -147,4 +147,32 @@ describe('input-field scenario schema generator', () => {
other: { key: 'value' },
}).success).toBe(false)
})
+
+ it('should ignore constraints for irrelevant field types', () => {
+ const schema = generateZodSchema([
+ {
+ type: InputFieldType.numberInput,
+ variable: 'num',
+ label: 'Num',
+ required: true,
+ maxLength: 10, // maxLength is for textInput, should be ignored
+ showConditions: [],
+ },
+ {
+ type: InputFieldType.textInput,
+ variable: 'text',
+ label: 'Text',
+ required: true,
+ min: 1, // min is for numberInput, should be ignored
+ max: 5, // max is for numberInput, should be ignored
+ showConditions: [],
+ },
+ ])
+
+ // Should still work based on their base types
+ // num: 12345678901 (violates maxLength: 10 if it were applied)
+ // text: 'long string here' (violates max: 5 if it were applied)
+ expect(schema.safeParse({ num: 12345678901, text: 'long string here' }).success).toBe(true)
+ expect(schema.safeParse({ num: 'not a number', text: 'hello' }).success).toBe(false)
+ })
})
diff --git a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
index 28eb5bd5ed..1cdad5840d 100644
--- a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
+++ b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
@@ -28,18 +28,21 @@ describe('useCheckValidated', () => {
expect(mockNotify).not.toHaveBeenCalled()
})
- it('should notify and return false when visible field has errors', () => {
+ it.each([
+ { fieldName: 'name', label: 'Name', message: 'Name is required' },
+ { fieldName: 'field1', label: 'Field 1', message: 'Field is required' },
+ ])('should notify and return false when visible field has errors (show_on: []) for $fieldName', ({ fieldName, label, message }) => {
const form = {
getAllErrors: () => ({
fields: {
- name: { errors: ['Name is required'] },
+ [fieldName]: { errors: [message] },
},
}),
state: { values: {} },
}
const schemas = [{
- name: 'name',
- label: 'Name',
+ name: fieldName,
+ label,
required: true,
type: FormTypeEnum.textInput,
show_on: [],
@@ -50,7 +53,7 @@ describe('useCheckValidated', () => {
expect(result.current.checkValidated()).toBe(false)
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
- message: 'Name is required',
+ message,
})
})
@@ -102,4 +105,208 @@ describe('useCheckValidated', () => {
message: 'Secret is required',
})
})
+
+ it('should notify with first error when multiple fields have errors', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ name: { errors: ['Name error'] },
+ email: { errors: ['Email error'] },
+ },
+ }),
+ state: { values: {} },
+ }
+ const schemas = [
+ {
+ name: 'name',
+ label: 'Name',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [],
+ },
+ {
+ name: 'email',
+ label: 'Email',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [],
+ },
+ ]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(false)
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Name error',
+ })
+ expect(mockNotify).toHaveBeenCalledTimes(1)
+ })
+
+ it('should notify when multiple conditions all match', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ advancedOption: { errors: ['Advanced is required'] },
+ },
+ }),
+ state: { values: { enabled: 'true', level: 'advanced' } },
+ }
+ const schemas = [{
+ name: 'advancedOption',
+ label: 'Advanced Option',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [
+ { variable: 'enabled', value: 'true' },
+ { variable: 'level', value: 'advanced' },
+ ],
+ }]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(false)
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Advanced is required',
+ })
+ })
+
+ it('should ignore error when one of multiple conditions does not match', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ advancedOption: { errors: ['Advanced is required'] },
+ },
+ }),
+ state: { values: { enabled: 'true', level: 'basic' } },
+ }
+ const schemas = [{
+ name: 'advancedOption',
+ label: 'Advanced Option',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [
+ { variable: 'enabled', value: 'true' },
+ { variable: 'level', value: 'advanced' },
+ ],
+ }]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(true)
+ expect(mockNotify).not.toHaveBeenCalled()
+ })
+
+ it('should handle field with error when schema is not found', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ unknownField: { errors: ['Unknown error'] },
+ },
+ }),
+ state: { values: {} },
+ }
+ const schemas = [{
+ name: 'knownField',
+ label: 'Known Field',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [],
+ }]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(false)
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Unknown error',
+ })
+ expect(mockNotify).toHaveBeenCalledTimes(1)
+ })
+
+ it('should handle field with multiple errors and notify only first one', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ field1: { errors: ['First error', 'Second error'] },
+ },
+ }),
+ state: { values: {} },
+ }
+ const schemas = [{
+ name: 'field1',
+ label: 'Field 1',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [],
+ }]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(false)
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'First error',
+ })
+ })
+
+ it('should return true when all visible fields have no errors', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ visibleField: { errors: [] },
+ hiddenField: { errors: [] },
+ },
+ }),
+ state: { values: { showHidden: 'false' } },
+ }
+ const schemas = [
+ {
+ name: 'visibleField',
+ label: 'Visible Field',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [],
+ },
+ {
+ name: 'hiddenField',
+ label: 'Hidden Field',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [{ variable: 'showHidden', value: 'true' }],
+ },
+ ]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(true)
+ expect(mockNotify).not.toHaveBeenCalled()
+ })
+
+ it('should properly evaluate show_on conditions with different values', () => {
+ const form = {
+ getAllErrors: () => ({
+ fields: {
+ numericField: { errors: ['Numeric error'] },
+ },
+ }),
+ state: { values: { threshold: '100' } },
+ }
+ const schemas = [{
+ name: 'numericField',
+ label: 'Numeric Field',
+ required: true,
+ type: FormTypeEnum.textInput,
+ show_on: [{ variable: 'threshold', value: '100' }],
+ }]
+
+ const { result } = renderHook(() => useCheckValidated(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.checkValidated()).toBe(false)
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Numeric error',
+ })
+ })
})
diff --git a/web/app/components/base/form/hooks/__tests__/use-get-form-values.spec.ts b/web/app/components/base/form/hooks/__tests__/use-get-form-values.spec.ts
index 8457bdcb8c..2f0300a794 100644
--- a/web/app/components/base/form/hooks/__tests__/use-get-form-values.spec.ts
+++ b/web/app/components/base/form/hooks/__tests__/use-get-form-values.spec.ts
@@ -71,4 +71,149 @@ describe('useGetFormValues', () => {
isCheckValidated: false,
})
})
+
+ it('should return raw values when validation passes but no transformation is requested', () => {
+ const form = {
+ store: { state: { values: { email: 'test@example.com' } } },
+ }
+ const schemas = [{
+ name: 'email',
+ label: 'Email',
+ required: true,
+ type: FormTypeEnum.textInput,
+ }]
+ mockCheckValidated.mockReturnValue(true)
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.getFormValues({
+ needCheckValidatedValues: true,
+ needTransformWhenSecretFieldIsPristine: false,
+ })).toEqual({
+ values: { email: 'test@example.com' },
+ isCheckValidated: true,
+ })
+ expect(mockTransform).not.toHaveBeenCalled()
+ })
+
+ it('should return raw values when validation passes and transformation is undefined', () => {
+ const form = {
+ store: { state: { values: { username: 'john_doe' } } },
+ }
+ const schemas = [{
+ name: 'username',
+ label: 'Username',
+ required: true,
+ type: FormTypeEnum.textInput,
+ }]
+ mockCheckValidated.mockReturnValue(true)
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.getFormValues({
+ needCheckValidatedValues: true,
+ needTransformWhenSecretFieldIsPristine: undefined,
+ })).toEqual({
+ values: { username: 'john_doe' },
+ isCheckValidated: true,
+ })
+ expect(mockTransform).not.toHaveBeenCalled()
+ })
+
+ it('should handle empty form values when validation check is disabled', () => {
+ const form = {
+ store: { state: { values: {} } },
+ }
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, []))
+
+ expect(result.current.getFormValues({ needCheckValidatedValues: false })).toEqual({
+ values: {},
+ isCheckValidated: true,
+ })
+ expect(mockCheckValidated).not.toHaveBeenCalled()
+ })
+
+ it('should handle null form values gracefully', () => {
+ const form = {
+ store: { state: { values: null } },
+ }
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, []))
+
+ expect(result.current.getFormValues({ needCheckValidatedValues: false })).toEqual({
+ values: {},
+ isCheckValidated: true,
+ })
+ })
+
+ it('should call transform with correct arguments when transformation is requested', () => {
+ const form = {
+ store: { state: { values: { password: 'secret' } } },
+ }
+ const schemas = [{
+ name: 'password',
+ label: 'Password',
+ required: true,
+ type: FormTypeEnum.secretInput,
+ }]
+ mockCheckValidated.mockReturnValue(true)
+ mockTransform.mockReturnValue({ password: 'encrypted' })
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, schemas))
+
+ result.current.getFormValues({
+ needCheckValidatedValues: true,
+ needTransformWhenSecretFieldIsPristine: true,
+ })
+
+ expect(mockTransform).toHaveBeenCalledWith(schemas, form)
+ })
+
+ it('should return validation failure before attempting transformation', () => {
+ const form = {
+ store: { state: { values: { password: 'secret' } } },
+ }
+ const schemas = [{
+ name: 'password',
+ label: 'Password',
+ required: true,
+ type: FormTypeEnum.secretInput,
+ }]
+ mockCheckValidated.mockReturnValue(false)
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, schemas))
+
+ expect(result.current.getFormValues({
+ needCheckValidatedValues: true,
+ needTransformWhenSecretFieldIsPristine: true,
+ })).toEqual({
+ values: {},
+ isCheckValidated: false,
+ })
+ expect(mockTransform).not.toHaveBeenCalled()
+ })
+
+ it('should handle complex nested values with validation check disabled', () => {
+ const form = {
+ store: {
+ state: {
+ values: {
+ user: { name: 'Alice', age: 30 },
+ settings: { theme: 'dark' },
+ },
+ },
+ },
+ }
+
+ const { result } = renderHook(() => useGetFormValues(form as unknown as AnyFormApi, []))
+
+ expect(result.current.getFormValues({ needCheckValidatedValues: false })).toEqual({
+ values: {
+ user: { name: 'Alice', age: 30 },
+ settings: { theme: 'dark' },
+ },
+ isCheckValidated: true,
+ })
+ })
})
diff --git a/web/app/components/base/form/hooks/__tests__/use-get-validators.spec.ts b/web/app/components/base/form/hooks/__tests__/use-get-validators.spec.ts
index b99056e44f..c997011ce8 100644
--- a/web/app/components/base/form/hooks/__tests__/use-get-validators.spec.ts
+++ b/web/app/components/base/form/hooks/__tests__/use-get-validators.spec.ts
@@ -75,4 +75,59 @@ describe('useGetValidators', () => {
expect(changeMessage).toContain('"field":"Workspace"')
expect(nonRequiredValidators).toBeUndefined()
})
+
+ it('should return undefined when value is truthy (onMount, onChange, onBlur)', () => {
+ const { result } = renderHook(() => useGetValidators())
+ const validators = result.current.getValidators({
+ name: 'username',
+ label: 'Username',
+ required: true,
+ type: FormTypeEnum.textInput,
+ })
+
+ expect(validators?.onMount?.({ value: 'some value' })).toBeUndefined()
+ expect(validators?.onChange?.({ value: 'some value' })).toBeUndefined()
+ expect(validators?.onBlur?.({ value: 'some value' })).toBeUndefined()
+ })
+
+ it('should handle null/missing labels correctly', () => {
+ const { result } = renderHook(() => useGetValidators())
+
+ // Explicitly test fallback to name when label is missing
+ const validators = result.current.getValidators({
+ name: 'id_field',
+ label: null as unknown as string,
+ required: true,
+ type: FormTypeEnum.textInput,
+ })
+
+ const mountMessage = validators?.onMount?.({ value: '' })
+ expect(mountMessage).toContain('"field":"id_field"')
+ })
+
+ it('should handle onChange message with fallback to name', () => {
+ const { result } = renderHook(() => useGetValidators())
+ const validators = result.current.getValidators({
+ name: 'desc',
+ label: createElement('span'), // results in '' label
+ required: true,
+ type: FormTypeEnum.textInput,
+ })
+
+ const changeMessage = validators?.onChange?.({ value: '' })
+ expect(changeMessage).toContain('"field":"desc"')
+ })
+
+ it('should handle onBlur message specifically', () => {
+ const { result } = renderHook(() => useGetValidators())
+ const validators = result.current.getValidators({
+ name: 'email',
+ label: 'Email Address',
+ required: true,
+ type: FormTypeEnum.textInput,
+ })
+
+ const blurMessage = validators?.onBlur?.({ value: '' })
+ expect(blurMessage).toContain('"field":"Email Address"')
+ })
})
diff --git a/web/app/components/base/form/utils/__tests__/zod-submit-validator.spec.ts b/web/app/components/base/form/utils/__tests__/zod-submit-validator.spec.ts
index 81bc77c7c3..4e828dada1 100644
--- a/web/app/components/base/form/utils/__tests__/zod-submit-validator.spec.ts
+++ b/web/app/components/base/form/utils/__tests__/zod-submit-validator.spec.ts
@@ -24,6 +24,28 @@ describe('zodSubmitValidator', () => {
})
})
+ it('should only keep the first error when multiple errors occur for the same field', () => {
+ // Both string() empty check and email() validation will fail here conceptually,
+ // but Zod aborts early on type errors sometimes. Let's use custom refinements that both trigger
+ const schema = z.object({
+ email: z.string().superRefine((val, ctx) => {
+ if (!val.includes('@')) {
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid email format' })
+ }
+ if (val.length < 10) {
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Email too short' })
+ }
+ }),
+ })
+ const validator = zodSubmitValidator(schema)
+ // "bad" triggers both missing '@' and length < 10
+ expect(validator({ value: { email: 'bad' } })).toEqual({
+ fields: {
+ email: 'Invalid email format',
+ },
+ })
+ })
+
it('should ignore root-level issues without a field path', () => {
const schema = z.object({ value: z.number() }).superRefine((_value, ctx) => {
ctx.addIssue({
diff --git a/web/app/components/base/form/utils/secret-input/__tests__/index.spec.ts b/web/app/components/base/form/utils/secret-input/__tests__/index.spec.ts
index c7e683841c..c19c92ca21 100644
--- a/web/app/components/base/form/utils/secret-input/__tests__/index.spec.ts
+++ b/web/app/components/base/form/utils/secret-input/__tests__/index.spec.ts
@@ -51,4 +51,64 @@ describe('secret input utilities', () => {
apiKey: 'secret',
})
})
+
+ it('should not mask when secret name is not in the values object', () => {
+ expect(transformFormSchemasSecretInput(['missing'], {
+ apiKey: 'secret',
+ })).toEqual({
+ apiKey: 'secret',
+ })
+ })
+
+ it('should not mask falsy values like 0 or null', () => {
+ expect(transformFormSchemasSecretInput(['zeroVal', 'nullVal'], {
+ zeroVal: 0,
+ nullVal: null,
+ })).toEqual({
+ zeroVal: 0,
+ nullVal: null,
+ })
+ })
+
+ it('should return empty object when form values are undefined', () => {
+ const formSchemas = [
+ { name: 'apiKey', type: FormTypeEnum.secretInput, label: 'API Key', required: true },
+ ]
+ const form = {
+ store: { state: { values: undefined } },
+ getFieldMeta: () => ({ isPristine: true }),
+ }
+
+ expect(getTransformedValuesWhenSecretInputPristine(formSchemas, form as unknown as AnyFormApi)).toEqual({})
+ })
+
+ it('should handle fieldMeta being undefined', () => {
+ const formSchemas = [
+ { name: 'apiKey', type: FormTypeEnum.secretInput, label: 'API Key', required: true },
+ ]
+ const form = {
+ store: { state: { values: { apiKey: 'secret' } } },
+ getFieldMeta: () => undefined,
+ }
+
+ expect(getTransformedValuesWhenSecretInputPristine(formSchemas, form as unknown as AnyFormApi)).toEqual({
+ apiKey: 'secret',
+ })
+ })
+
+ it('should skip non-secretInput schema types entirely', () => {
+ const formSchemas = [
+ { name: 'name', type: FormTypeEnum.textInput, label: 'Name', required: true },
+ { name: 'desc', type: FormTypeEnum.textInput, label: 'Desc', required: false },
+ ]
+ const form = {
+ store: { state: { values: { name: 'Alice', desc: 'Test' } } },
+ getFieldMeta: () => ({ isPristine: true }),
+ }
+
+ expect(getTransformedValuesWhenSecretInputPristine(formSchemas, form as unknown as AnyFormApi)).toEqual({
+ name: 'Alice',
+ desc: 'Test',
+ })
+ })
})
diff --git a/web/app/components/base/input-with-copy/__tests__/index.spec.tsx b/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
index 2fcee9021c..201c419444 100644
--- a/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
+++ b/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
@@ -1,6 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { createReactI18nextMock } from '@/test/i18n-mock'
import InputWithCopy from '../index'
// Create a controllable mock for useClipboard
@@ -16,14 +14,6 @@ vi.mock('foxact/use-clipboard', () => ({
}),
}))
-// Mock the i18n hook with custom translations for test assertions
-vi.mock('react-i18next', () => createReactI18nextMock({
- 'operation.copy': 'Copy',
- 'operation.copied': 'Copied',
- 'overview.appInfo.embedded.copy': 'Copy',
- 'overview.appInfo.embedded.copied': 'Copied',
-}))
-
describe('InputWithCopy component', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -145,4 +135,98 @@ describe('InputWithCopy component', () => {
// Input should maintain focus after copy
expect(input).toHaveFocus()
})
+
+ it('converts non-string value to string for copying', () => {
+ const mockOnChange = vi.fn()
+ // number value triggers String(value || '') branch where typeof value !== 'string'
+ render(
)
+
+ const copyButton = screen.getByRole('button')
+ fireEvent.click(copyButton)
+
+ expect(mockCopy).toHaveBeenCalledWith('12345')
+ })
+
+ it('handles undefined value by converting to empty string', () => {
+ const mockOnChange = vi.fn()
+ // undefined value triggers String(value || '') where value is falsy
+ render(
)
+
+ const copyButton = screen.getByRole('button')
+ fireEvent.click(copyButton)
+
+ expect(mockCopy).toHaveBeenCalledWith('')
+ })
+
+ it('shows copied tooltip text when copied state is true', () => {
+ mockCopied = true
+ const mockOnChange = vi.fn()
+ render(
)
+
+ // The tooltip content should use the 'copied' translation
+ const copyButton = screen.getByRole('button')
+ expect(copyButton).toBeInTheDocument()
+
+ // Verify the filled clipboard icon is rendered (not the line variant)
+ const filledIcon = screen.getByTestId('copied-icon')
+ expect(filledIcon).toBeInTheDocument()
+ })
+
+ it('shows copy tooltip text when copied state is false', () => {
+ mockCopied = false
+ const mockOnChange = vi.fn()
+ render(
)
+
+ const copyButton = screen.getByRole('button')
+ expect(copyButton).toBeInTheDocument()
+
+ const lineIcon = screen.getByTestId('copy-icon')
+ expect(lineIcon).toBeInTheDocument()
+ })
+
+ it('calls reset on mouse leave from copy button wrapper', () => {
+ const mockOnChange = vi.fn()
+ render(
)
+
+ const wrapper = screen.getByTestId('copy-button-wrapper')
+ expect(wrapper).toBeInTheDocument()
+ fireEvent.mouseLeave(wrapper)
+
+ expect(mockReset).toHaveBeenCalled()
+ })
+
+ it('applies wrapperClassName to the outer container', () => {
+ const mockOnChange = vi.fn()
+ const { container } = render(
+
,
+ )
+
+ const outerDiv = container.firstChild as HTMLElement
+ expect(outerDiv).toHaveClass('my-wrapper')
+ })
+
+ it('copies copyValue over non-string input value when both provided', () => {
+ const mockOnChange = vi.fn()
+ render(
+
,
+ )
+
+ const copyButton = screen.getByRole('button')
+ fireEvent.click(copyButton)
+
+ expect(mockCopy).toHaveBeenCalledWith('override-copy')
+ })
+
+ it('invokes onCopy with copyValue when copyValue is provided', () => {
+ const onCopyMock = vi.fn()
+ const mockOnChange = vi.fn()
+ render(
+
,
+ )
+
+ const copyButton = screen.getByRole('button')
+ fireEvent.click(copyButton)
+
+ expect(onCopyMock).toHaveBeenCalledWith('custom')
+ })
})
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 7981ba6236..643eb449b5 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -1,6 +1,5 @@
'use client'
import type { InputProps } from '../input'
-import { RiClipboardFill, RiClipboardLine } from '@remixicon/react'
import { useClipboard } from 'foxact/use-clipboard'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
@@ -39,13 +38,19 @@ const InputWithCopy = React.forwardRef
((
onCopy?.(finalCopyValue)
}
+ const tooltipText = copied
+ ? t(`${prefixEmbedded}.copied`, { ns: 'appOverview' })
+ : t(`${prefixEmbedded}.copy`, { ns: 'appOverview' })
+ /* v8 ignore next -- i18n test mock always returns a non-empty string; runtime fallback is defensive. -- @preserve */
+ const safeTooltipText = tooltipText || ''
+
return (
((
((
className="hover:bg-components-button-ghost-bg-hover"
>
{copied
- ? (
-
- )
- : (
-
- )}
+ ? ()
+ : ()}
diff --git a/web/app/components/base/input/__tests__/index.spec.tsx b/web/app/components/base/input/__tests__/index.spec.tsx
index b759922e0e..2c5b563a12 100644
--- a/web/app/components/base/input/__tests__/index.spec.tsx
+++ b/web/app/components/base/input/__tests__/index.spec.tsx
@@ -115,6 +115,41 @@ describe('Input component', () => {
expect(input).toBeInTheDocument()
})
+ describe('Additional Layout Branches', () => {
+ it('applies pl-7 when showLeftIcon and size is large', () => {
+ render(
)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveClass('pl-7')
+ })
+
+ it('applies pr-7 when showClearIcon, has value, and size is large', () => {
+ render(
)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveClass('pr-7')
+ })
+
+ it('applies pr-7 when destructive and size is large', () => {
+ render(
)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveClass('pr-7')
+ })
+
+ it('shows copy icon and applies pr-[26px] when showCopyIcon is true', () => {
+ render(
)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveClass('pr-[26px]')
+ // Assert that CopyFeedbackNew wrapper is present
+ const copyWrapper = document.querySelector('.group.absolute.right-0')
+ expect(copyWrapper).toBeInTheDocument()
+ })
+
+ it('shows copy icon and applies pr-7 when showCopyIcon and size is large', () => {
+ render(
)
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveClass('pr-7')
+ })
+ })
+
describe('Number Input Formatting', () => {
it('removes leading zeros on change when current value is zero', () => {
let changedValue = ''
@@ -130,6 +165,17 @@ describe('Input component', () => {
expect(changedValue).toBe('42')
})
+ it('does not normalize when value is 0 and input value is already normalized', () => {
+ const onChange = vi.fn()
+ render(
)
+
+ const input = screen.getByRole('spinbutton') as HTMLInputElement
+ // The event value ('1') is already normalized, preventing e.target.value reassignment
+ fireEvent.change(input, { target: { value: '1' } })
+
+ expect(onChange).toHaveBeenCalledTimes(1)
+ })
+
it('keeps typed value on change when current value is not zero', () => {
let changedValue = ''
const onChange = vi.fn((e: React.ChangeEvent
) => {
diff --git a/web/app/components/base/loading/__tests__/index.spec.tsx b/web/app/components/base/loading/__tests__/index.spec.tsx
index 06847e453a..08c6ecd7a0 100644
--- a/web/app/components/base/loading/__tests__/index.spec.tsx
+++ b/web/app/components/base/loading/__tests__/index.spec.tsx
@@ -25,4 +25,9 @@ describe('Loading Component', () => {
const svgElement = container.querySelector('svg')
expect(svgElement).toHaveClass('spin-animation')
})
+
+ it('handles undefined props correctly', () => {
+ const { container } = render(Loading() as unknown as React.ReactElement)
+ expect(container.firstChild).toHaveClass('flex w-full items-center justify-center')
+ })
})
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index 4b1f6be4b4..6faee9c260 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -42,7 +42,7 @@ export const Markdown = memo((props: MarkdownProps) => {
const latexContent = useMemo(() => preprocess(content), [content])
return (
-
+
void) | null = null
+let clickAwayHandlers: (() => void)[] = []
vi.mock('ahooks', () => ({
useClickAway: (fn: () => void) => {
clickAwayHandler = fn
+ clickAwayHandlers.push(fn)
},
}))
@@ -38,6 +40,7 @@ describe('MessageLogModal', () => {
beforeEach(() => {
vi.clearAllMocks()
clickAwayHandler = null
+ clickAwayHandlers = []
// eslint-disable-next-line ts/no-explicit-any
vi.mocked(useStore).mockImplementation((selector: any) => selector({
appDetail: { id: 'app-1' },
@@ -100,5 +103,12 @@ describe('MessageLogModal', () => {
clickAwayHandler!()
expect(onCancel).toHaveBeenCalledTimes(1)
})
+
+ it('does not call onCancel when clicked away if not mounted', () => {
+ render()
+ expect(clickAwayHandlers.length).toBeGreaterThan(0)
+ clickAwayHandlers[0]() // This is the closure from the initial render, where mounted is false
+ expect(onCancel).not.toHaveBeenCalled()
+ })
})
})
diff --git a/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx b/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
index e06ca0a53e..4afae28b79 100644
--- a/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
+++ b/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
@@ -81,7 +81,11 @@ describe('NotionPageSelector Base', () => {
beforeEach(() => {
vi.clearAllMocks()
- vi.mocked(useModalContextSelector).mockReturnValue(mockSetShowAccountSettingModal)
+ vi.mocked(useModalContextSelector).mockImplementation((selector) => {
+ // Execute the selector to get branch/func coverage for the inline function
+ selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal } as unknown as Parameters[0]>[0])
+ return mockSetShowAccountSettingModal
+ })
vi.mocked(useInvalidPreImportNotionPages).mockReturnValue(mockInvalidPreImportNotionPages)
})
@@ -268,4 +272,57 @@ describe('NotionPageSelector Base', () => {
render()
expect(screen.queryByTestId('notion-page-preview-root-1')).not.toBeInTheDocument()
})
+
+ it('should handle undefined data gracefully during loading', () => {
+ vi.mocked(usePreImportNotionPages).mockReturnValue({
+ data: undefined,
+ isFetching: true,
+ isError: false,
+ } as unknown as ReturnType)
+ render()
+ expect(screen.getByTestId('notion-page-selector-loading')).toBeInTheDocument()
+ })
+
+ it('should handle credential with empty id', () => {
+ vi.mocked(usePreImportNotionPages).mockReturnValue(createPreImportResult())
+ const onSelectCredential = vi.fn()
+ render(
+ ,
+ )
+ expect(onSelectCredential).toHaveBeenCalledWith('')
+ })
+
+ it('should render empty page selector when notion_info is empty', () => {
+ vi.mocked(usePreImportNotionPages).mockReturnValue({
+ data: { notion_info: undefined },
+ isFetching: false,
+ isError: false,
+ } as unknown as ReturnType)
+ render()
+ expect(screen.getByTestId('notion-page-selector-base')).toBeInTheDocument()
+ })
+
+ it('should run credential effect fallback when onSelectCredential is not provided', () => {
+ vi.mocked(usePreImportNotionPages).mockReturnValue(createPreImportResult())
+ const { rerender } = render(
+ ,
+ )
+
+ // Rerender with a new credentialList but same credential to hit the else block without onSelectCredential
+ rerender(
+ ,
+ )
+
+ expect(screen.getByTestId('notion-page-selector-base')).toBeInTheDocument()
+ })
})
diff --git a/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
index bfe3e7e0ef..e1cd51ed78 100644
--- a/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
@@ -1,7 +1,6 @@
import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
import PageSelector from '../index'
const buildPage = (overrides: Partial): DataSourceNotionPage => ({
@@ -18,12 +17,16 @@ const mockList: DataSourceNotionPage[] = [
buildPage({ page_id: 'root-1', page_name: 'Root 1', parent_id: 'root' }),
buildPage({ page_id: 'child-1', page_name: 'Child 1', parent_id: 'root-1' }),
buildPage({ page_id: 'grandchild-1', page_name: 'Grandchild 1', parent_id: 'child-1' }),
+ buildPage({ page_id: 'child-2', page_name: 'Child 2', parent_id: 'root-1' }),
+ buildPage({ page_id: 'root-2', page_name: 'Root 2', parent_id: 'root' }),
]
const mockPagesMap: DataSourceNotionPageMap = {
'root-1': { ...mockList[0], workspace_id: 'workspace-1' },
'child-1': { ...mockList[1], workspace_id: 'workspace-1' },
'grandchild-1': { ...mockList[2], workspace_id: 'workspace-1' },
+ 'child-2': { ...mockList[3], workspace_id: 'workspace-1' },
+ 'root-2': { ...mockList[4], workspace_id: 'workspace-1' },
}
describe('PageSelector', () => {
@@ -51,7 +54,7 @@ describe('PageSelector', () => {
it('should call onSelect with descendants when parent is selected', async () => {
const handleSelect = vi.fn()
const user = userEvent.setup()
- render()
+ render()
const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-root-1')
await user.click(checkbox)
@@ -124,4 +127,190 @@ describe('PageSelector', () => {
await user.click(toggleBtn) // Collapse
await waitFor(() => expect(screen.queryByText('Child 1')).not.toBeInTheDocument())
})
+
+ it('should disable checkbox when page is in disabledValue', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-root-1')
+ await user.click(checkbox)
+ expect(handleSelect).not.toHaveBeenCalled()
+ })
+
+ it('should not render preview button when canPreview is false', () => {
+ render()
+
+ expect(screen.queryByTestId('notion-page-preview-root-1')).not.toBeInTheDocument()
+ })
+
+ it('should render preview button when canPreview is true', () => {
+ render()
+
+ expect(screen.getByTestId('notion-page-preview-root-1')).toBeInTheDocument()
+ })
+
+ it('should use previewPageId prop when provided', () => {
+ const { rerender } = render()
+
+ let row = screen.getByTestId('notion-page-row-root-1')
+ expect(row).toHaveClass('bg-state-base-hover')
+
+ rerender()
+
+ row = screen.getByTestId('notion-page-row-root-1')
+ expect(row).not.toHaveClass('bg-state-base-hover')
+ })
+
+ it('should handle selection of multiple pages independently when searching', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ const { rerender } = render()
+
+ const checkbox1 = screen.getByTestId('checkbox-notion-page-checkbox-child-1')
+ const checkbox2 = screen.getByTestId('checkbox-notion-page-checkbox-child-2')
+
+ await user.click(checkbox1)
+ expect(handleSelect).toHaveBeenCalledWith(new Set(['child-1']))
+
+ // Simulate parent component updating the value prop
+ rerender()
+
+ await user.click(checkbox2)
+ expect(handleSelect).toHaveBeenLastCalledWith(new Set(['child-1', 'child-2']))
+ })
+
+ it('should expand and show all children when parent is selected', async () => {
+ const user = userEvent.setup()
+ render()
+
+ const toggle = screen.getByTestId('notion-page-toggle-root-1')
+ await user.click(toggle)
+
+ // Both children should be visible
+ expect(screen.getByText('Child 1')).toBeInTheDocument()
+ expect(screen.getByText('Child 2')).toBeInTheDocument()
+ })
+
+ it('should expand nested children when toggling parent', async () => {
+ const user = userEvent.setup()
+ render()
+
+ // Expand root-1
+ let toggle = screen.getByTestId('notion-page-toggle-root-1')
+ await user.click(toggle)
+ expect(screen.getByText('Child 1')).toBeInTheDocument()
+
+ // Expand child-1
+ toggle = screen.getByTestId('notion-page-toggle-child-1')
+ await user.click(toggle)
+ expect(screen.getByText('Grandchild 1')).toBeInTheDocument()
+
+ // Collapse child-1
+ await user.click(toggle)
+ await waitFor(() => expect(screen.queryByText('Grandchild 1')).not.toBeInTheDocument())
+ })
+
+ it('should deselect all descendants when parent is deselected with descendants', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-root-1')
+ await user.click(checkbox)
+
+ expect(handleSelect).toHaveBeenCalledWith(new Set())
+ })
+
+ it('should only select the item when searching (no descendants)', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-child-1')
+ await user.click(checkbox)
+
+ // When searching, only the item itself is selected, not descendants
+ expect(handleSelect).toHaveBeenCalledWith(new Set(['child-1']))
+ })
+
+ it('should deselect only the item when searching (no descendants)', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-child-1')
+ await user.click(checkbox)
+
+ expect(handleSelect).toHaveBeenCalledWith(new Set())
+ })
+
+ it('should handle multiple root pages', async () => {
+ render()
+
+ expect(screen.getByText('Root 1')).toBeInTheDocument()
+ expect(screen.getByText('Root 2')).toBeInTheDocument()
+ })
+
+ it('should update preview when clicking preview button with onPreview provided', async () => {
+ const handlePreview = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const previewBtn = screen.getByTestId('notion-page-preview-root-2')
+ await user.click(previewBtn)
+
+ expect(handlePreview).toHaveBeenCalledWith('root-2')
+ })
+
+ it('should update local preview state when preview button clicked', async () => {
+ const user = userEvent.setup()
+ const { rerender } = render()
+
+ const previewBtn1 = screen.getByTestId('notion-page-preview-root-1')
+ await user.click(previewBtn1)
+
+ // The preview should now show the hover state for root-1
+ rerender()
+
+ const row = screen.getByTestId('notion-page-row-root-1')
+ expect(row).toHaveClass('bg-state-base-hover')
+ })
+
+ it('should render page name with correct title attribute', () => {
+ render()
+
+ const pageName = screen.getByTestId('notion-page-name-root-1')
+ expect(pageName).toHaveAttribute('title', 'Root 1')
+ })
+
+ it('should handle empty list gracefully', () => {
+ render()
+
+ expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
+ })
+
+ it('should filter search results correctly with partial matches', () => {
+ render()
+
+ // Should show Root 1, Child 1, and Grandchild 1
+ expect(screen.getByTestId('notion-page-name-root-1')).toBeInTheDocument()
+ expect(screen.getByTestId('notion-page-name-child-1')).toBeInTheDocument()
+ expect(screen.getByTestId('notion-page-name-grandchild-1')).toBeInTheDocument()
+ // Should not show Root 2, Child 2
+ expect(screen.queryByTestId('notion-page-name-root-2')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('notion-page-name-child-2')).not.toBeInTheDocument()
+ })
+
+ it('should handle disabled parent when selecting child', async () => {
+ const handleSelect = vi.fn()
+ const user = userEvent.setup()
+ render()
+
+ const toggle = screen.getByTestId('notion-page-toggle-root-1')
+ await user.click(toggle)
+
+ // Should expand even though parent is disabled
+ expect(screen.getByText('Child 1')).toBeInTheDocument()
+ })
})
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index 9d8c20e73b..50ac567193 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -133,6 +133,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
) => onChange(e.target.value)}
- placeholder={t('dataSource.notion.selector.searchPages', { ns: 'common' }) || ''}
+ placeholder={safePlaceholderText}
data-testid="notion-search-input"
/>
{
diff --git a/web/app/components/base/pagination/__tests__/index.spec.tsx b/web/app/components/base/pagination/__tests__/index.spec.tsx
index aa3cf8e5f2..4361e45503 100644
--- a/web/app/components/base/pagination/__tests__/index.spec.tsx
+++ b/web/app/components/base/pagination/__tests__/index.spec.tsx
@@ -185,12 +185,30 @@ describe('CustomizedPagination', () => {
expect(onChange).toHaveBeenCalledWith(0)
})
- it('should ignore non-numeric input', () => {
+ it('should ignore non-numeric input and empty input', () => {
render()
fireEvent.click(screen.getByText('/'))
const input = screen.getByRole('textbox')
+
fireEvent.change(input, { target: { value: 'abc' } })
expect(input).toHaveValue('')
+
+ fireEvent.change(input, { target: { value: '' } })
+ expect(input).toHaveValue('')
+ })
+
+ it('should show per page tip on hover and hide on leave', () => {
+ const onLimitChange = vi.fn()
+ render()
+
+ const container = screen.getByText('25').closest('div.flex.items-center.gap-\\[1px\\]')!
+
+ fireEvent.mouseEnter(container)
+ // I18n mock returns ns.key
+ expect(screen.getByText('common.pagination.perPage')).toBeInTheDocument()
+
+ fireEvent.mouseLeave(container)
+ expect(screen.queryByText('common.pagination.perPage')).not.toBeInTheDocument()
})
it('should call onLimitChange when limit option is clicked', () => {
@@ -200,6 +218,17 @@ describe('CustomizedPagination', () => {
expect(onLimitChange).toHaveBeenCalledWith(25)
})
+ it('should call onLimitChange with 10 when 10 option is clicked', () => {
+ const onLimitChange = vi.fn()
+ render()
+ // The limit selector contains options 10, 25, 50.
+ // Query specifically within the limit container
+ const container = screen.getByText('25').closest('div.flex.items-center.gap-\\[1px\\]')!
+ const option10 = Array.from(container.children).find(el => el.textContent === '10')!
+ fireEvent.click(option10)
+ expect(onLimitChange).toHaveBeenCalledWith(10)
+ })
+
it('should call onLimitChange with 50 when 50 option is clicked', () => {
const onLimitChange = vi.fn()
render()
@@ -213,6 +242,18 @@ describe('CustomizedPagination', () => {
fireEvent.click(screen.getByText('3'))
expect(onChange).toHaveBeenCalledWith(2) // 0-indexed
})
+
+ it('should correctly select active limit style for 25 and 50', () => {
+ // Test limit 25
+ const { container: containerA } = render()
+ const wrapper25 = Array.from(containerA.querySelectorAll('div.system-sm-medium')).find(el => el.textContent === '25')!
+ expect(wrapper25).toHaveClass('bg-components-segmented-control-item-active-bg')
+
+ // Test limit 50
+ const { container: containerB } = render()
+ const wrapper50 = Array.from(containerB.querySelectorAll('div.system-sm-medium')).find(el => el.textContent === '50')!
+ expect(wrapper50).toHaveClass('bg-components-segmented-control-item-active-bg')
+ })
})
describe('Edge Cases', () => {
@@ -221,6 +262,66 @@ describe('CustomizedPagination', () => {
expect(container).toBeInTheDocument()
})
+ it('should handle confirm when input value is unchanged (covers false branch of empty string check)', () => {
+ vi.useFakeTimers()
+ const onChange = vi.fn()
+ render()
+ fireEvent.click(screen.getByText('/'))
+ const input = screen.getByRole('textbox')
+
+ // Blur without changing anything
+ fireEvent.blur(input)
+
+ act(() => {
+ vi.advanceTimersByTime(500)
+ })
+
+ // onChange should NOT be called
+ expect(onChange).not.toHaveBeenCalled()
+ expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+ })
+
+ it('should ignore other keys in handleInputKeyDown (covers false branch of Escape check)', () => {
+ render()
+ fireEvent.click(screen.getByText('/'))
+ const input = screen.getByRole('textbox')
+
+ fireEvent.keyDown(input, { key: 'a' })
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ })
+
+ it('should trigger handleInputConfirm with empty string specifically on keydown Enter', async () => {
+ const { userEvent } = await import('@testing-library/user-event')
+ const user = userEvent.setup()
+ render()
+ fireEvent.click(screen.getByText('/'))
+ const input = screen.getByRole('textbox')
+
+ await user.clear(input)
+ await user.type(input, '{Enter}')
+
+ // Wait for debounce 500ms
+ await new Promise(r => setTimeout(r, 600))
+
+ // Validates `inputValue === ''` path under `handleInputConfirm` triggered by Enter
+ expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+ })
+
+ it('should explicitly trigger Escape key logic in handleInputKeyDown', async () => {
+ const { userEvent } = await import('@testing-library/user-event')
+ const user = userEvent.setup()
+ render()
+ fireEvent.click(screen.getByText('/'))
+ const input = screen.getByRole('textbox')
+
+ await user.type(input, '{Escape}')
+
+ // Wait for debounce 500ms
+ await new Promise(r => setTimeout(r, 600))
+
+ expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+ })
+
it('should handle single page', () => {
render()
// totalPages = 1, both buttons should be disabled
diff --git a/web/app/components/base/pagination/__tests__/pagination.spec.tsx b/web/app/components/base/pagination/__tests__/pagination.spec.tsx
index 21c3b41bff..776802ff19 100644
--- a/web/app/components/base/pagination/__tests__/pagination.spec.tsx
+++ b/web/app/components/base/pagination/__tests__/pagination.spec.tsx
@@ -372,5 +372,178 @@ describe('Pagination', () => {
})
expect(container).toBeInTheDocument()
})
+
+ it('should cover undefined active/inactive dataTestIds', () => {
+ // Re-render PageButton without active/inactive data test ids to hit the undefined branch in cn() fallback
+ renderPagination({
+ currentPage: 1,
+ totalPages: 5,
+ children: (
+ ({ 'aria-label': `Page ${page}` })}
+ />
+ ),
+ })
+ expect(screen.getByText('2')).toHaveAttribute('aria-label', 'Page 2')
+ })
+
+ it('should cover nextPages when edge pages fall perfectly into middle Pages', () => {
+ renderPagination({
+ currentPage: 5,
+ totalPages: 10,
+ edgePageCount: 8, // Very large edge page count to hit the filter(!middlePages.includes) branches
+ middlePagesSiblingCount: 1,
+ children: (
+
+ ),
+ })
+ expect(screen.getByText('1')).toBeInTheDocument()
+ expect(screen.getByText('10')).toBeInTheDocument()
+ })
+
+ it('should hide truncation element if truncable is false', () => {
+ renderPagination({
+ currentPage: 2,
+ totalPages: 5,
+ edgePageCount: 1,
+ middlePagesSiblingCount: 1,
+ // When we are at page 2, middle pages are [2, 3, 4] (if 0-indexed, wait, currentPage is 0-indexed in hook?)
+ // Let's just render the component which calls the internal TruncableElement, when previous/next are NOT truncable
+ children: (
+
+ ),
+ })
+ // Truncation only happens if middlePages > previousPages.last + 1
+ expect(screen.queryByText('...')).not.toBeInTheDocument()
+ })
+
+ it('should hit getAllPreviousPages with less than 1 element', () => {
+ renderPagination({
+ currentPage: 0,
+ totalPages: 10,
+ edgePageCount: 1,
+ middlePagesSiblingCount: 0,
+ children: ,
+ })
+ // With currentPage = 0, middlePages = [1], getAllPreviousPages() -> slice(0, 0) -> []
+ expect(screen.getByText('1')).toBeInTheDocument()
+ })
+
+ it('should fire previous() keyboard event even if it does nothing without crashing', () => {
+ // Line 38: pagination.currentPage + 1 > 1 check is usually guarded by disabled, but we can verify it explicitly.
+ const setCurrentPage = vi.fn()
+ // Use a span so that 'disabled' attribute doesn't prevent fireEvent.click from firing
+ renderPagination({
+ currentPage: 0,
+ setCurrentPage,
+ children: }>Prev,
+ })
+ fireEvent.click(screen.getByText('Prev'))
+ expect(setCurrentPage).not.toHaveBeenCalled()
+ })
+
+ it('should fire next() even if it does nothing without crashing', () => {
+ // Line 73: pagination.currentPage + 1 < pages.length verify
+ const setCurrentPage = vi.fn()
+ renderPagination({
+ currentPage: 10,
+ totalPages: 10,
+ setCurrentPage,
+ children: }>Next,
+ })
+ fireEvent.click(screen.getByText('Next'))
+ expect(setCurrentPage).not.toHaveBeenCalled()
+ })
+
+ it('should fall back to undefined when truncableClassName is empty', () => {
+ // Line 115: `{truncableText}`
+ renderPagination({
+ currentPage: 5,
+ totalPages: 10,
+ truncableClassName: '',
+ children: (
+
+ ),
+ })
+ // Should not have a class attribute
+ const truncableElements = screen.getAllByText('...')
+ expect(truncableElements[0]).not.toHaveAttribute('class')
+ })
+
+ it('should handle dataTestIdActive and dataTestIdInactive completely', () => {
+ // Lines 137-144
+ renderPagination({
+ currentPage: 1, // 0-indexed, so page 2 is active
+ totalPages: 5,
+ children: (
+
+ ),
+ })
+
+ const activeBtn = screen.getByTestId('active-test-id')
+ expect(activeBtn).toHaveTextContent('2')
+
+ const inactiveBtn = screen.getByTestId('inactive-test-id-1') // page 1
+ expect(inactiveBtn).toHaveTextContent('1')
+ })
+
+ it('should hit getAllNextPages.length < 1 in hook', () => {
+ renderPagination({
+ currentPage: 2,
+ totalPages: 3,
+ edgePageCount: 1,
+ middlePagesSiblingCount: 0,
+ children: (
+
+ ),
+ })
+ // Current is 3 (index 2). middlePages = [3]. getAllNextPages = slice(3, 3) = []
+ // This will trigger the `getAllNextPages.length < 1` branch
+ expect(screen.getByText('3')).toBeInTheDocument()
+ })
+
+ it('should handle only dataTestIdInactive without dataTestIdActive', () => {
+ renderPagination({
+ currentPage: 1,
+ totalPages: 3,
+ children: (
+
+ ),
+ })
+ // Missing dataTestIdActive branch coverage on line 144
+ expect(screen.getByText('1')).toBeInTheDocument()
+ })
+
+ it('should handle only dataTestIdActive without dataTestIdInactive', () => {
+ renderPagination({
+ currentPage: 1, // page 2 is active
+ totalPages: 3,
+ children: (
+
+ ),
+ })
+ // This hits the branch where dataTestIdActive exists but not dataTestIdInactive
+ expect(screen.getByTestId('active-test-id')).toHaveTextContent('2')
+ expect(screen.queryByTestId('inactive-test-id-1')).not.toBeInTheDocument()
+ })
})
})
diff --git a/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx b/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx
index 3aeb1fb475..373ae018c7 100644
--- a/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx
+++ b/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx
@@ -2,15 +2,32 @@ import { cleanup, fireEvent, render } from '@testing-library/react'
import * as React from 'react'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '..'
+type MockFloatingData = {
+ middlewareData?: {
+ hide?: {
+ referenceHidden?: boolean
+ }
+ }
+}
+
+let mockFloatingData: MockFloatingData = {}
const useFloatingMock = vi.fn()
vi.mock('@floating-ui/react', async (importOriginal) => {
const actual = await importOriginal()
return {
...actual,
- useFloating: (...args: Parameters) => {
- useFloatingMock(...args)
- return actual.useFloating(...args)
+ useFloating: (options: unknown) => {
+ useFloatingMock(options)
+ const data = actual.useFloating(options as Parameters[0])
+ return {
+ ...data,
+ ...mockFloatingData,
+ middlewareData: {
+ ...data.middlewareData,
+ ...mockFloatingData.middlewareData,
+ },
+ }
},
}
})
@@ -123,8 +140,91 @@ describe('PortalToFollowElem', () => {
placement: 'top-start',
}),
)
+ })
- useFloatingMock.mockRestore()
+ it('should handle triggerPopupSameWidth prop', () => {
+ render(
+
+ Trigger
+ Content
+ ,
+ )
+
+ type SizeMiddleware = {
+ name: 'size'
+ options: [{
+ apply: (args: {
+ elements: { floating: { style: Record } }
+ rects: { reference: { width: number } }
+ availableHeight: number
+ }) => void
+ }]
+ }
+
+ const sizeMiddleware = useFloatingMock.mock.calls[0][0].middleware.find(
+ (m: { name: string }) => m.name === 'size',
+ ) as SizeMiddleware
+ expect(sizeMiddleware).toBeDefined()
+
+ // Manually trigger the apply function to cover line 81-82
+ const mockElements = {
+ floating: { style: {} as Record },
+ }
+ const mockRects = {
+ reference: { width: 100 },
+ }
+ sizeMiddleware.options[0].apply({
+ elements: mockElements,
+ rects: mockRects,
+ availableHeight: 500,
+ })
+
+ expect(mockElements.floating.style.width).toBe('100px')
+ expect(mockElements.floating.style.maxHeight).toBe('500px')
+ })
+ })
+
+ describe('PortalToFollowElemTrigger asChild', () => {
+ it('should render correct data-state when open', () => {
+ const { getByRole } = render(
+
+
+
+
+ ,
+ )
+ expect(getByRole('button')).toHaveAttribute('data-state', 'open')
+ })
+
+ it('should handle missing ref on child', () => {
+ const { getByRole } = render(
+
+
+
+
+ ,
+ )
+ expect(getByRole('button')).toBeInTheDocument()
+ })
+ })
+
+ describe('Visibility', () => {
+ it('should hide content when reference is hidden', () => {
+ mockFloatingData = {
+ middlewareData: {
+ hide: { referenceHidden: true },
+ },
+ }
+
+ const { getByTestId } = render(
+
+ Trigger
+ Hidden Content
+ ,
+ )
+
+ expect(getByTestId('content')).toHaveStyle('visibility: hidden')
+ mockFloatingData = {}
})
})
})
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx
index bccce5f3e8..c08515d194 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx
@@ -179,6 +179,96 @@ describe('HITLInputVariableBlockComponent', () => {
expect(hasErrorIcon(container)).toBe(false)
})
+ it('should show valid state when conversation variables array is undefined', () => {
+ const { container } = renderVariableBlock({
+ variables: ['conversation', 'session_id'],
+ workflowNodesMap: {},
+ conversationVariables: undefined,
+ })
+
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should show valid state when env variables array is undefined', () => {
+ const { container } = renderVariableBlock({
+ variables: ['env', 'api_key'],
+ workflowNodesMap: {},
+ environmentVariables: undefined,
+ })
+
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should show valid state when rag variables array is undefined', () => {
+ const { container } = renderVariableBlock({
+ variables: ['rag', 'node-rag', 'chunk'],
+ workflowNodesMap: createWorkflowNodesMap(),
+ ragVariables: undefined,
+ })
+
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should validate env variable when matching entry exists in multi-element array', () => {
+ const { container } = renderVariableBlock({
+ variables: ['env', 'api_key'],
+ workflowNodesMap: {},
+ environmentVariables: [
+ { variable: 'env.other_key', type: 'string' } as Var,
+ { variable: 'env.api_key', type: 'string' } as Var,
+ ],
+ })
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should validate conversation variable when matching entry exists in multi-element array', () => {
+ const { container } = renderVariableBlock({
+ variables: ['conversation', 'session_id'],
+ workflowNodesMap: {},
+ conversationVariables: [
+ { variable: 'conversation.other', type: 'string' } as Var,
+ { variable: 'conversation.session_id', type: 'string' } as Var,
+ ],
+ })
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should validate rag variable when matching entry exists in multi-element array', () => {
+ const { container } = renderVariableBlock({
+ variables: ['rag', 'node-rag', 'chunk'],
+ workflowNodesMap: createWorkflowNodesMap(),
+ ragVariables: [
+ { variable: 'rag.node-rag.other', type: 'string', isRagVariable: true } as Var,
+ { variable: 'rag.node-rag.chunk', type: 'string', isRagVariable: true } as Var,
+ ],
+ })
+ expect(hasErrorIcon(container)).toBe(false)
+ })
+
+ it('should handle undefined indices in variables array gracefully', () => {
+ // Testing the `variables?.[1] ?? ''` fallback logic
+ const { container: envContainer } = renderVariableBlock({
+ variables: ['env'], // missing second part
+ workflowNodesMap: {},
+ environmentVariables: [{ variable: 'env.', type: 'string' } as Var],
+ })
+ expect(hasErrorIcon(envContainer)).toBe(false)
+
+ const { container: chatContainer } = renderVariableBlock({
+ variables: ['conversation'],
+ workflowNodesMap: {},
+ conversationVariables: [{ variable: 'conversation.', type: 'string' } as Var],
+ })
+ expect(hasErrorIcon(chatContainer)).toBe(false)
+
+ const { container: ragContainer } = renderVariableBlock({
+ variables: ['rag', 'node-rag'], // missing third part
+ workflowNodesMap: createWorkflowNodesMap(),
+ ragVariables: [{ variable: 'rag.node-rag.', type: 'string', isRagVariable: true } as Var],
+ })
+ expect(hasErrorIcon(ragContainer)).toBe(false)
+ })
+
it('should keep global system variable valid without workflow node mapping', () => {
const { container } = renderVariableBlock({
variables: ['sys', 'global_name'],
@@ -188,6 +278,25 @@ describe('HITLInputVariableBlockComponent', () => {
expect(screen.getByText('sys.global_name')).toBeInTheDocument()
expect(hasErrorIcon(container)).toBe(false)
})
+
+ it('should format system variable names with sys. prefix correctly', () => {
+ const { container } = renderVariableBlock({
+ variables: ['sys', 'query'],
+ workflowNodesMap: {},
+ })
+ // 'query' exception variable is valid sys variable
+ expect(screen.getByText('query')).toBeInTheDocument()
+ expect(hasErrorIcon(container)).toBe(true)
+ })
+
+ it('should apply exception styling for recognized exception variables', () => {
+ renderVariableBlock({
+ variables: ['node-1', 'error_message'],
+ workflowNodesMap: createWorkflowNodesMap(),
+ })
+ expect(screen.getByText('error_message')).toBeInTheDocument()
+ expect(screen.getByTestId('exception-variable')).toBeInTheDocument()
+ })
})
describe('Tooltip payload', () => {
diff --git a/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx b/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
index 05c1e5d093..01902f2e99 100644
--- a/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
@@ -1,7 +1,18 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useClickAway } from 'ahooks'
import PromptLogModal from '..'
+let clickAwayHandlers: (() => void)[] = []
+vi.mock('ahooks', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useClickAway: vi.fn((fn: () => void) => {
+ clickAwayHandlers.push(fn)
+ }),
+ }
+})
+
describe('PromptLogModal', () => {
const defaultProps = {
width: 1000,
@@ -10,9 +21,14 @@ describe('PromptLogModal', () => {
id: '1',
content: 'test',
log: [{ role: 'user', text: 'Hello' }],
- } as Parameters[0]['currentLogItem'],
+ } as unknown as Parameters[0]['currentLogItem'],
}
+ beforeEach(() => {
+ vi.clearAllMocks()
+ clickAwayHandlers = []
+ })
+
describe('Render', () => {
it('renders correctly when currentLogItem is provided', () => {
render()
@@ -29,6 +45,28 @@ describe('PromptLogModal', () => {
render()
expect(screen.getByTestId('close-btn-container')).toBeInTheDocument()
})
+
+ it('renders multiple logs in Card correctly', () => {
+ const props = {
+ ...defaultProps,
+ currentLogItem: {
+ ...defaultProps.currentLogItem,
+ log: [
+ { role: 'user', text: 'Hello' },
+ { role: 'assistant', text: 'Hi there' },
+ ],
+ },
+ } as unknown as Parameters[0]
+ render()
+ expect(screen.getByText('USER')).toBeInTheDocument()
+ expect(screen.getByText('ASSISTANT')).toBeInTheDocument()
+ expect(screen.getByText('Hi there')).toBeInTheDocument()
+ })
+
+ it('returns null when currentLogItem.log is missing', () => {
+ const { container } = render([0]['currentLogItem']} />)
+ expect(container.firstChild).toBeNull()
+ })
})
describe('Interactions', () => {
@@ -41,20 +79,27 @@ describe('PromptLogModal', () => {
})
it('calls onCancel when clicking outside', async () => {
- const user = userEvent.setup()
const onCancel = vi.fn()
render(
- ,
+ ,
)
- await waitFor(() => {
- expect(screen.getByTestId('close-btn')).toBeInTheDocument()
- })
+ expect(useClickAway).toHaveBeenCalled()
+ expect(clickAwayHandlers.length).toBeGreaterThan(0)
- await user.click(screen.getByTestId('outside'))
+ // Call the last registered handler (simulating click away)
+ clickAwayHandlers[clickAwayHandlers.length - 1]()
+ expect(onCancel).toHaveBeenCalled()
+ })
+
+ it('does not call onCancel when clicking outside if not mounted', () => {
+ const onCancel = vi.fn()
+ render()
+
+ expect(clickAwayHandlers.length).toBeGreaterThan(0)
+ // The first handler in the array is captured during the initial render before useEffect runs
+ clickAwayHandlers[0]()
+ expect(onCancel).not.toHaveBeenCalled()
})
})
})
diff --git a/web/app/components/base/qrcode/__tests__/index.spec.tsx b/web/app/components/base/qrcode/__tests__/index.spec.tsx
index fbad4163c4..cfc78cef85 100644
--- a/web/app/components/base/qrcode/__tests__/index.spec.tsx
+++ b/web/app/components/base/qrcode/__tests__/index.spec.tsx
@@ -90,5 +90,45 @@ describe('ShareQRCode', () => {
HTMLCanvasElement.prototype.toDataURL = originalToDataURL
}
})
+
+ it('does not call downloadUrl when canvas is not found', async () => {
+ const user = userEvent.setup()
+ render()
+
+ const trigger = screen.getByTestId('qrcode-container')
+ await user.click(trigger)
+
+ // Override querySelector on the panel to simulate canvas not being found
+ const panel = screen.getByRole('img').parentElement!
+ const origQuerySelector = panel.querySelector.bind(panel)
+ panel.querySelector = ((sel: string) => {
+ if (sel === 'canvas')
+ return null
+ return origQuerySelector(sel)
+ }) as typeof panel.querySelector
+
+ try {
+ const downloadBtn = screen.getByText('appOverview.overview.appInfo.qrcode.download')
+ await user.click(downloadBtn)
+ expect(downloadUrl).not.toHaveBeenCalled()
+ }
+ finally {
+ panel.querySelector = origQuerySelector
+ }
+ })
+
+ it('does not close when clicking inside the qrcode ref area', async () => {
+ const user = userEvent.setup()
+ render()
+
+ const trigger = screen.getByTestId('qrcode-container')
+ await user.click(trigger)
+
+ // Click on the scan text inside the panel — panel should remain open
+ const scanText = screen.getByText('appOverview.overview.appInfo.qrcode.scan')
+ await user.click(scanText)
+
+ expect(screen.getByRole('img')).toBeInTheDocument()
+ })
})
})
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index 4ff84d7a77..f3335fe889 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -25,6 +25,7 @@ const ShareQRCode = ({ content }: Props) => {
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
+ /* v8 ignore next 2 -- this handler can fire during open/close transitions where the panel ref is temporarily null; guard is defensive. @preserve */
if (qrCodeRef.current && !qrCodeRef.current.contains(event.target as Node))
setIsShow(false)
}
@@ -48,9 +49,13 @@ const ShareQRCode = ({ content }: Props) => {
event.stopPropagation()
}
+ const tooltipText = t(`${prefixEmbedded}`, { ns: 'appOverview' })
+ /* v8 ignore next -- react-i18next returns a non-empty key/string in configured runtime; empty fallback protects against missing i18n payloads. @preserve */
+ const safeTooltipText = tooltipText || ''
+
return (
diff --git a/web/app/components/base/segmented-control/__tests__/index.spec.tsx b/web/app/components/base/segmented-control/__tests__/index.spec.tsx
index f92d5b29b0..8cf2906921 100644
--- a/web/app/components/base/segmented-control/__tests__/index.spec.tsx
+++ b/web/app/components/base/segmented-control/__tests__/index.spec.tsx
@@ -94,4 +94,21 @@ describe('SegmentedControl', () => {
const selectedOption = screen.getByText('Option 1').closest('button')?.closest('div')
expect(selectedOption).toHaveClass(customClass)
})
+
+ it('renders Icon when provided', () => {
+ const MockIcon = () =>
+ const optionsWithIcon = [
+ { value: 'option1', text: 'Option 1', Icon: MockIcon },
+ ]
+ render()
+ expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+ })
+
+ it('renders count when provided and size is large', () => {
+ const optionsWithCount = [
+ { value: 'option1', text: 'Option 1', count: 42 },
+ ]
+ render()
+ expect(screen.getByText('42')).toBeInTheDocument()
+ })
})
diff --git a/web/app/components/base/svg-gallery/index.tsx b/web/app/components/base/svg-gallery/index.tsx
index 798d690dde..1838733130 100644
--- a/web/app/components/base/svg-gallery/index.tsx
+++ b/web/app/components/base/svg-gallery/index.tsx
@@ -7,8 +7,10 @@ const SVGRenderer = ({ content }: { content: string }) => {
const svgRef = useRef(null)
const [imagePreview, setImagePreview] = useState('')
const [windowSize, setWindowSize] = useState({
+ /* v8 ignore start -- this client component can still be evaluated in non-browser contexts (SSR/type tooling); window fallback prevents reference errors. @preserve */
width: typeof window !== 'undefined' ? window.innerWidth : 0,
height: typeof window !== 'undefined' ? window.innerHeight : 0,
+ /* v8 ignore stop */
})
const svgToDataURL = (svgElement: Element): string => {
@@ -27,34 +29,38 @@ const SVGRenderer = ({ content }: { content: string }) => {
}, [])
useEffect(() => {
- if (svgRef.current) {
- try {
- svgRef.current.innerHTML = ''
- const draw = SVG().addTo(svgRef.current)
+ /* v8 ignore next 2 -- ref is expected after mount, but null can occur during rapid mount/unmount timing in React lifecycle edges. @preserve */
+ if (!svgRef.current)
+ return
- const parser = new DOMParser()
- const svgDoc = parser.parseFromString(content, 'image/svg+xml')
- const svgElement = svgDoc.documentElement
+ try {
+ svgRef.current.innerHTML = ''
+ const draw = SVG().addTo(svgRef.current)
- if (!(svgElement instanceof SVGElement))
- throw new Error('Invalid SVG content')
+ const parser = new DOMParser()
+ const svgDoc = parser.parseFromString(content, 'image/svg+xml')
+ const svgElement = svgDoc.documentElement
- const originalWidth = Number.parseInt(svgElement.getAttribute('width') || '400', 10)
- const originalHeight = Number.parseInt(svgElement.getAttribute('height') || '600', 10)
- draw.viewbox(0, 0, originalWidth, originalHeight)
+ if (!(svgElement instanceof SVGElement))
+ throw new Error('Invalid SVG content')
- svgRef.current.style.width = `${Math.min(originalWidth, 298)}px`
+ const originalWidth = Number.parseInt(svgElement.getAttribute('width') || '400', 10)
+ const originalHeight = Number.parseInt(svgElement.getAttribute('height') || '600', 10)
+ draw.viewbox(0, 0, originalWidth, originalHeight)
- const rootElement = draw.svg(DOMPurify.sanitize(content))
+ svgRef.current.style.width = `${Math.min(originalWidth, 298)}px`
- rootElement.click(() => {
- setImagePreview(svgToDataURL(svgElement as Element))
- })
- }
- catch {
- if (svgRef.current)
- svgRef.current.innerHTML = 'Error rendering SVG. Wait for the image content to complete.'
- }
+ const rootElement = draw.svg(DOMPurify.sanitize(content))
+
+ rootElement.click(() => {
+ setImagePreview(svgToDataURL(svgElement as Element))
+ })
+ }
+ catch {
+ /* v8 ignore next 2 -- if unmounted while handling parser/render errors, ref becomes null; guard avoids writing to a detached node. @preserve */
+ if (!svgRef.current)
+ return
+ svgRef.current.innerHTML = 'Error rendering SVG. Wait for the image content to complete.'
}
}, [content, windowSize])
diff --git a/web/app/components/base/tab-slider/__tests__/index.spec.tsx b/web/app/components/base/tab-slider/__tests__/index.spec.tsx
index 51794a7087..7209c47036 100644
--- a/web/app/components/base/tab-slider/__tests__/index.spec.tsx
+++ b/web/app/components/base/tab-slider/__tests__/index.spec.tsx
@@ -104,4 +104,44 @@ describe('TabSlider Component', () => {
expect(slider.style.transform).toBe('translateX(120px)')
expect(slider.style.width).toBe('80px')
})
+
+ it('does not call onChange when clicking the already active tab', () => {
+ render()
+ const activeTab = screen.getByTestId('tab-item-all')
+ fireEvent.click(activeTab)
+ expect(onChangeMock).not.toHaveBeenCalled()
+ })
+
+ it('handles invalid value gracefully', () => {
+ const { container, rerender } = render()
+ const activeTabs = container.querySelectorAll('.text-text-primary')
+ expect(activeTabs.length).toBe(0)
+
+ // Changing to a valid value should work
+ rerender()
+ expect(screen.getByTestId('tab-item-all')).toHaveClass('text-text-primary')
+ })
+
+ it('supports string itemClassName', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('tab-item-all')).toHaveClass('custom-static-class')
+ expect(screen.getByTestId('tab-item-settings')).toHaveClass('custom-static-class')
+ })
+
+ it('handles missing pluginList data gracefully', () => {
+ vi.mocked(useInstalledPluginList).mockReturnValue({
+ data: undefined as unknown as { total: number },
+ isLoading: false,
+ } as ReturnType)
+
+ render()
+ expect(screen.queryByRole('status')).not.toBeInTheDocument() // Badge shouldn't render
+ })
})
diff --git a/web/app/components/base/video-gallery/VideoPlayer.tsx b/web/app/components/base/video-gallery/VideoPlayer.tsx
index 6b2d802863..889836258f 100644
--- a/web/app/components/base/video-gallery/VideoPlayer.tsx
+++ b/web/app/components/base/video-gallery/VideoPlayer.tsx
@@ -55,6 +55,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
useEffect(() => {
const video = videoRef.current
+ /* v8 ignore next 2 -- video element is expected post-mount; null guard protects against lifecycle timing during mount/unmount. @preserve */
if (!video)
return
@@ -99,6 +100,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
const togglePlayPause = useCallback(() => {
const video = videoRef.current
+ /* v8 ignore next -- click handler can race with unmount in tests/runtime; guard prevents calling methods on a detached video node. @preserve */
if (video) {
if (isPlaying)
video.pause()
@@ -109,6 +111,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
const toggleMute = useCallback(() => {
const video = videoRef.current
+ /* v8 ignore next -- defensive null-check for ref lifecycle edges before mutating media properties. @preserve */
if (video) {
const newMutedState = !video.muted
video.muted = newMutedState
@@ -120,6 +123,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
const toggleFullscreen = useCallback(() => {
const video = videoRef.current
+ /* v8 ignore next -- defensive null-check so fullscreen calls are skipped if video ref is detached. @preserve */
if (video) {
if (document.fullscreenElement)
document.exitFullscreen()
@@ -136,6 +140,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
const updateVideoProgress = useCallback((clientX: number, updateTime = false) => {
const progressBar = progressRef.current
const video = videoRef.current
+ /* v8 ignore next -- progress callbacks may fire while refs are not yet attached or already torn down; guard avoids invalid DOM access. @preserve */
if (progressBar && video) {
const rect = progressBar.getBoundingClientRect()
const pos = (clientX - rect.left) / rect.width
@@ -170,6 +175,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
useEffect(() => {
const handleGlobalMouseMove = (e: MouseEvent) => {
+ /* v8 ignore next -- global mousemove listener remains registered briefly; skip updates once dragging has ended. @preserve */
if (isDragging)
updateVideoProgress(e.clientX)
}
@@ -191,6 +197,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
}, [isDragging, updateVideoProgress])
const checkSize = useCallback(() => {
+ /* v8 ignore next 2 -- container ref may be null before first paint or after unmount while resize events are in flight. @preserve */
if (containerRef.current)
setIsSmallSize(containerRef.current.offsetWidth < 400)
}, [])
@@ -204,6 +211,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
const handleVolumeChange = useCallback((e: React.MouseEvent) => {
const volumeBar = volumeRef.current
const video = videoRef.current
+ /* v8 ignore next -- defensive check for ref availability during drag/click lifecycle transitions. @preserve */
if (volumeBar && video) {
const rect = volumeBar.getBoundingClientRect()
const newVolume = (e.clientX - rect.left) / rect.width
@@ -222,7 +230,7 @@ const VideoPlayer: React.FC = ({ src, srcs }) => {
))}
-
+
{
const mockSrc = 'video.mp4'
const mockSrcs = ['video1.mp4', 'video2.mp4']
+ const mockBoundingRect = (element: Element) => {
+ vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+ left: 0,
+ width: 100,
+ top: 0,
+ right: 100,
+ bottom: 10,
+ height: 10,
+ x: 0,
+ y: 0,
+ toJSON: () => { },
+ } as DOMRect)
+ }
+
beforeEach(() => {
vi.clearAllMocks()
vi.useRealTimers()
@@ -32,34 +46,34 @@ describe('VideoPlayer', () => {
get() { return 100 },
})
+ type MockVideoElement = HTMLVideoElement & {
+ _currentTime?: number
+ _volume?: number
+ _muted?: boolean
+ }
+
// Use a descriptor check to avoid re-defining if it exists
if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'currentTime')) {
Object.defineProperty(window.HTMLVideoElement.prototype, 'currentTime', {
configurable: true,
- // eslint-disable-next-line ts/no-explicit-any
- get() { return (this as any)._currentTime || 0 },
- // eslint-disable-next-line ts/no-explicit-any
- set(v) { (this as any)._currentTime = v },
+ get() { return (this as MockVideoElement)._currentTime || 0 },
+ set(v) { (this as MockVideoElement)._currentTime = v },
})
}
if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'volume')) {
Object.defineProperty(window.HTMLVideoElement.prototype, 'volume', {
configurable: true,
- // eslint-disable-next-line ts/no-explicit-any
- get() { return (this as any)._volume || 1 },
- // eslint-disable-next-line ts/no-explicit-any
- set(v) { (this as any)._volume = v },
+ get() { return (this as MockVideoElement)._volume ?? 1 },
+ set(v) { (this as MockVideoElement)._volume = v },
})
}
if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'muted')) {
Object.defineProperty(window.HTMLVideoElement.prototype, 'muted', {
configurable: true,
- // eslint-disable-next-line ts/no-explicit-any
- get() { return (this as any)._muted || false },
- // eslint-disable-next-line ts/no-explicit-any
- set(v) { (this as any)._muted = v },
+ get() { return (this as MockVideoElement)._muted || false },
+ set(v) { (this as MockVideoElement)._muted = v },
})
}
})
@@ -96,10 +110,23 @@ describe('VideoPlayer', () => {
it('should toggle mute on button click', async () => {
const user = userEvent.setup()
render(
)
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
const muteBtn = screen.getByTestId('video-mute-button')
+ // Ensure volume is positive before muting
+ video.volume = 0.7
+
+ // First click mutes
await user.click(muteBtn)
- expect(muteBtn).toBeInTheDocument()
+ expect(video.muted).toBe(true)
+
+ // Set volume back to a positive value to test the volume > 0 branch in unmute
+ video.volume = 0.7
+
+ // Second click unmutes — since volume > 0, the ternary should keep video.volume
+ await user.click(muteBtn)
+ expect(video.muted).toBe(false)
+ expect(video.volume).toBe(0.7)
})
it('should toggle fullscreen on button click', async () => {
@@ -167,17 +194,7 @@ describe('VideoPlayer', () => {
const progressBar = screen.getByTestId('video-progress-bar')
const video = screen.getByTestId('video-element') as HTMLVideoElement
- vi.spyOn(progressBar, 'getBoundingClientRect').mockReturnValue({
- left: 0,
- width: 100,
- top: 0,
- right: 100,
- bottom: 10,
- height: 10,
- x: 0,
- y: 0,
- toJSON: () => { },
- } as DOMRect)
+ mockBoundingRect(progressBar)
// Hover
fireEvent.mouseMove(progressBar, { clientX: 50 })
@@ -207,17 +224,7 @@ describe('VideoPlayer', () => {
const volumeSlider = screen.getByTestId('video-volume-slider')
const video = screen.getByTestId('video-element') as HTMLVideoElement
- vi.spyOn(volumeSlider, 'getBoundingClientRect').mockReturnValue({
- left: 0,
- width: 100,
- top: 0,
- right: 100,
- bottom: 10,
- height: 10,
- x: 0,
- y: 0,
- toJSON: () => { },
- } as DOMRect)
+ mockBoundingRect(volumeSlider)
// Click
fireEvent.click(volumeSlider, { clientX: 50 })
@@ -258,5 +265,156 @@ describe('VideoPlayer', () => {
expect(screen.getByTestId('video-time-display')).toBeInTheDocument()
})
})
+
+ it('should handle play() rejection error', async () => {
+ const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
+ window.HTMLVideoElement.prototype.play = vi.fn().mockRejectedValue(new Error('Play failed'))
+ const user = userEvent.setup()
+
+ try {
+ render(
)
+ const playPauseBtn = screen.getByTestId('video-play-pause-button')
+
+ await user.click(playPauseBtn)
+
+ await waitFor(() => {
+ expect(consoleSpy).toHaveBeenCalledWith('Error playing video:', expect.any(Error))
+ })
+ }
+ finally {
+ consoleSpy.mockRestore()
+ }
+ })
+
+ it('should reset volume to 1 when unmuting with volume at 0', async () => {
+ const user = userEvent.setup()
+ render(
)
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+ const muteBtn = screen.getByTestId('video-mute-button')
+
+ // First click mutes — this sets volume to 0 and muted to true
+ await user.click(muteBtn)
+ expect(video.muted).toBe(true)
+ expect(video.volume).toBe(0)
+
+ // Now explicitly ensure video.volume is 0 for unmute path
+ video.volume = 0
+
+ // Second click unmutes — since volume is 0, the ternary
+ // (video.volume > 0 ? video.volume : 1) should choose 1
+ await user.click(muteBtn)
+ expect(video.muted).toBe(false)
+ expect(video.volume).toBe(1)
+ })
+
+ it('should not clear hoverTime on mouseLeave while dragging', () => {
+ render(
)
+ const progressBar = screen.getByTestId('video-progress-bar')
+
+ mockBoundingRect(progressBar)
+
+ // Start dragging
+ fireEvent.mouseDown(progressBar, { clientX: 50 })
+
+ // mouseLeave while dragging — hoverTime should remain visible
+ fireEvent.mouseLeave(progressBar)
+ expect(screen.getByTestId('video-hover-time')).toBeInTheDocument()
+
+ // End drag
+ fireEvent.mouseUp(document)
+ })
+
+ it('should not update time for out-of-bounds progress click', () => {
+ render(
)
+ const progressBar = screen.getByTestId('video-progress-bar')
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+ mockBoundingRect(progressBar)
+
+ // Click far beyond the bar (clientX > rect.width) — pos > 1, newTime > duration
+ fireEvent.click(progressBar, { clientX: 200 })
+ // currentTime should remain unchanged since newTime (200) > duration (100)
+ expect(video.currentTime).toBe(0)
+
+ // Click at negative position
+ fireEvent.click(progressBar, { clientX: -50 })
+ // currentTime should remain unchanged since newTime < 0
+ expect(video.currentTime).toBe(0)
+ })
+
+ it('should render without src or srcs', () => {
+ render(
)
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+ expect(video).toBeInTheDocument()
+ expect(video.getAttribute('src')).toBeNull()
+ expect(video.querySelectorAll('source')).toHaveLength(0)
+ })
+
+ it('should show controls on mouseEnter', () => {
+ vi.useFakeTimers()
+ render(
)
+ const container = screen.getByTestId('video-player-container')
+ const controls = screen.getByTestId('video-controls')
+
+ // Initial state: visible
+ expect(controls).toHaveAttribute('data-is-visible', 'true')
+
+ // Let controls hide
+ fireEvent.mouseMove(container)
+ act(() => {
+ vi.advanceTimersByTime(3001)
+ })
+ expect(controls).toHaveAttribute('data-is-visible', 'false')
+
+ // mouseEnter should show controls again
+ fireEvent.mouseEnter(container)
+ expect(controls).toHaveAttribute('data-is-visible', 'true')
+
+ vi.useRealTimers()
+ })
+
+ it('should handle volume drag with inline mouseDown handler', () => {
+ render(
)
+ const volumeSlider = screen.getByTestId('video-volume-slider')
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+ mockBoundingRect(volumeSlider)
+
+ // MouseDown starts the inline drag handler and sets initial volume
+ fireEvent.mouseDown(volumeSlider, { clientX: 30 })
+ expect(video.volume).toBe(0.3)
+
+ // Drag via document mousemove (registered in inline handler)
+ fireEvent.mouseMove(document, { clientX: 60 })
+ expect(video.volume).toBe(0.6)
+
+ // MouseUp cleans up the listeners
+ fireEvent.mouseUp(document)
+
+ // After mouseUp, further moves should not affect volume
+ fireEvent.mouseMove(document, { clientX: 10 })
+ expect(video.volume).toBe(0.6)
+ })
+
+ it('should clamp volume slider to max 1', () => {
+ render(
)
+ const volumeSlider = screen.getByTestId('video-volume-slider')
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+ mockBoundingRect(volumeSlider)
+
+ // Click beyond slider range — should clamp to 1
+ fireEvent.click(volumeSlider, { clientX: 200 })
+ expect(video.volume).toBe(1)
+ })
+
+ it('should handle global mouse move when not dragging (no-op)', () => {
+ render(
)
+ const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+ // Global mouse move without any drag — should not change anything
+ fireEvent.mouseMove(document, { clientX: 50 })
+ expect(video.currentTime).toBe(0)
+ })
})
})
diff --git a/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx b/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
index ee5b5d43e6..313ad9c051 100644
--- a/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
@@ -1,6 +1,5 @@
import type { CrawlOptions } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
import Options from '../options'
// Test Data Factory
@@ -104,38 +103,28 @@ describe('Options', () => {
describe('Props Display', () => {
it('should display crawl_sub_pages checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: true })
- const { container } = render(
)
+ render(
)
- const checkboxes = getCheckboxes(container)
// First checkbox should have check icon when checked
- expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+ expect(screen.queryByTestId('check-icon-crawl-sub-page')).toBeInTheDocument()
})
it('should display crawl_sub_pages checkbox without check icon when false', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: false })
- const { container } = render(
)
-
- const checkboxes = getCheckboxes(container)
- // First checkbox should not have check icon when unchecked
- expect(checkboxes[0].querySelector('svg')).not.toBeInTheDocument()
+ render(
)
+ expect(screen.queryByTestId('check-icon-crawl-sub-page')).not.toBeInTheDocument()
})
it('should display only_main_content checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ only_main_content: true })
- const { container } = render(
)
-
- const checkboxes = getCheckboxes(container)
- // Second checkbox should have check icon when checked
- expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+ render(
)
+ expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
})
it('should display only_main_content checkbox without check icon when false', () => {
const payload = createMockCrawlOptions({ only_main_content: false })
- const { container } = render(
)
-
- const checkboxes = getCheckboxes(container)
- // Second checkbox should not have check icon when unchecked
- expect(checkboxes[1].querySelector('svg')).not.toBeInTheDocument()
+ render(
)
+ expect(screen.queryByTestId('check-icon-only-main-content')).not.toBeInTheDocument()
})
it('should display limit value in input', () => {
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index ed6d2a4b83..3bfe055823 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -32,9 +32,10 @@ const Options: FC
= ({
}
}, [payload, onChange])
return (
-
+
{
describe('Props Display', () => {
it('should display crawl_sub_pages checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: true })
- const { container } = render()
-
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+ render()
+ expect(screen.getByTestId('check-icon-crawl-sub-pages')).toBeInTheDocument()
})
it('should display crawl_sub_pages checkbox without check icon when false', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: false })
- const { container } = render()
-
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[0].querySelector('svg')).not.toBeInTheDocument()
+ render()
+ expect(screen.queryByTestId('check-icon-crawl-sub-pages')).not.toBeInTheDocument()
})
it('should display use_sitemap checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ use_sitemap: true })
- const { container } = render()
-
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+ render()
+ expect(screen.getByTestId('check-icon-use-sitemap')).toBeInTheDocument()
})
it('should display use_sitemap checkbox without check icon when false', () => {
const payload = createMockCrawlOptions({ use_sitemap: false })
- const { container } = render()
-
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[1].querySelector('svg')).not.toBeInTheDocument()
+ render()
+ expect(screen.queryByTestId('check-icon-use-sitemap')).not.toBeInTheDocument()
})
it('should display limit value in input', () => {
@@ -111,10 +103,9 @@ describe('Options (jina-reader)', () => {
describe('User Interactions', () => {
it('should call onChange with updated crawl_sub_pages when checkbox is clicked', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: true })
- const { container } = render()
+ render()
- const checkboxes = getCheckboxes(container)
- fireEvent.click(checkboxes[0])
+ fireEvent.click(screen.getByTestId('checkbox-crawl-sub-pages'))
expect(mockOnChange).toHaveBeenCalledWith({
...payload,
@@ -124,10 +115,9 @@ describe('Options (jina-reader)', () => {
it('should call onChange with updated use_sitemap when checkbox is clicked', () => {
const payload = createMockCrawlOptions({ use_sitemap: false })
- const { container } = render()
+ render()
- const checkboxes = getCheckboxes(container)
- fireEvent.click(checkboxes[1])
+ fireEvent.click(screen.getByTestId('checkbox-use-sitemap'))
expect(mockOnChange).toHaveBeenCalledWith({
...payload,
diff --git a/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx b/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
index 20843db82f..bda01dc152 100644
--- a/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
@@ -87,10 +87,9 @@ describe('Options (watercrawl)', () => {
describe('Props Display', () => {
it('should display crawl_sub_pages checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ crawl_sub_pages: true })
- const { container } = render()
+ render()
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+ expect(screen.getByTestId('check-icon-crawl-sub-pages')).toBeInTheDocument()
})
it('should display crawl_sub_pages checkbox without check icon when false', () => {
@@ -103,10 +102,8 @@ describe('Options (watercrawl)', () => {
it('should display only_main_content checkbox with check icon when true', () => {
const payload = createMockCrawlOptions({ only_main_content: true })
- const { container } = render()
-
- const checkboxes = getCheckboxes(container)
- expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+ render()
+ expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
})
it('should display only_main_content checkbox without check icon when false', () => {
diff --git a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
index 5053038d5e..279c85f2f0 100644
--- a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
@@ -175,12 +175,11 @@ describe('DocumentList', () => {
...defaultProps,
selectedIds: ['doc-1', 'doc-2', 'doc-3'],
}
- const { container } = render(, { wrapper: createWrapper() })
+ render(, { wrapper: createWrapper() })
- const checkboxes = findCheckboxes(container)
// When checked, checkbox should have a check icon (svg) inside
- checkboxes.forEach((checkbox) => {
- const checkIcon = checkbox.querySelector('svg')
+ props.selectedIds.forEach((id) => {
+ const checkIcon = screen.getByTestId(`check-icon-doc-row-${id}`)
expect(checkIcon).toBeInTheDocument()
})
})
diff --git a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
index 20a3f7cee1..1c5145f7ed 100644
--- a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
@@ -126,20 +126,16 @@ describe('DocumentTableRow', () => {
describe('Selection', () => {
it('should show check icon when isSelected is true', () => {
const { container } = render(, { wrapper: createWrapper() })
- // When selected, the checkbox should have a check icon (RiCheckLine svg)
const checkbox = findCheckbox(container)
expect(checkbox).toBeInTheDocument()
- const checkIcon = checkbox?.querySelector('svg')
- expect(checkIcon).toBeInTheDocument()
+ expect(screen.getByTestId('check-icon-doc-row-doc-1')).toBeInTheDocument()
})
it('should not show check icon when isSelected is false', () => {
const { container } = render(, { wrapper: createWrapper() })
const checkbox = findCheckbox(container)
expect(checkbox).toBeInTheDocument()
- // When not selected, there should be no check icon inside the checkbox
- const checkIcon = checkbox?.querySelector('svg')
- expect(checkIcon).not.toBeInTheDocument()
+ expect(screen.queryByTestId('check-icon-doc-row-doc-1')).not.toBeInTheDocument()
})
it('should call onSelectOne when checkbox is clicked', () => {
diff --git a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
index e4bdeb9980..3694b81138 100644
--- a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
@@ -91,6 +91,7 @@ const DocumentTableRow: FC = React.memo(({
className="mr-2 shrink-0"
checked={isSelected}
onCheck={() => onSelectOne(doc.id)}
+ id={`doc-row-${doc.id}`}
/>
{index + 1}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
index 025f3f47ae..178f437517 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
@@ -84,7 +84,7 @@ vi.mock('../../metadata-dataset/select-metadata-modal', () => ({
{trigger}
-
+
),
@@ -202,7 +202,7 @@ describe('EditMetadataBatchModal', () => {
if (checkboxContainer) {
fireEvent.click(checkboxContainer)
await waitFor(() => {
- const checkIcon = checkboxContainer.querySelector('svg')
+ const checkIcon = screen.getByTestId('check-icon-apply-to-all')
expect(checkIcon).toBeInTheDocument()
})
}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index 9095970768..802e2e99fb 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -118,7 +118,7 @@ const EditMetadataBatchModal: FC
= ({
onClose={onHide}
className="!max-w-[640px]"
>
- {t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}
+ {t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}
{templeList.map(item => (
@@ -133,7 +133,7 @@ const EditMetadataBatchModal: FC
= ({
-
{t('metadata.createMetadata.title', { ns: 'dataset' })}
+
{t('metadata.createMetadata.title', { ns: 'dataset' })}
@@ -164,8 +164,8 @@ const EditMetadataBatchModal: FC
= ({
-
setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
- {t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}
+ setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
+ {t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}
{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}
}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index 18d563ca01..7f07a81491 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -36,6 +36,7 @@ const VariableLabel = ({
)}
onClick={onClick}
ref={ref}
+ {...(isExceptionVariable ? { 'data-testid': 'exception-variable' } : {})}
>
{isShowNodeLabel && (
- /
+ /
)
}
@@ -62,7 +63,7 @@ const VariableLabel = ({
/>
{
!!variableType && (
-
+
{capitalize(variableType)}
)
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 4361da26d7..58da7a1857 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1923,15 +1923,9 @@
"app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx": {
"no-restricted-imports": {
"count": 1
- },
- "tailwindcss/enforce-consistent-class-order": {
- "count": 2
}
},
"app/components/base/features/new-feature-panel/annotation-reply/index.tsx": {
- "tailwindcss/enforce-consistent-class-order": {
- "count": 5
- },
"ts/no-explicit-any": {
"count": 3
}
@@ -2089,9 +2083,6 @@
"no-restricted-imports": {
"count": 2
},
- "tailwindcss/enforce-consistent-class-order": {
- "count": 4
- },
"ts/no-explicit-any": {
"count": 3
}
@@ -2253,11 +2244,6 @@
"count": 1
}
},
- "app/components/base/input-with-copy/index.tsx": {
- "tailwindcss/enforce-consistent-class-order": {
- "count": 1
- }
- },
"app/components/base/input/index.stories.tsx": {
"no-console": {
"count": 2
@@ -3272,9 +3258,6 @@
}
},
"app/components/datasets/create/website/firecrawl/options.tsx": {
- "tailwindcss/no-unnecessary-whitespace": {
- "count": 1
- },
"ts/no-explicit-any": {
"count": 1
}
@@ -3454,9 +3437,6 @@
"app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx": {
"no-restricted-imports": {
"count": 1
- },
- "tailwindcss/enforce-consistent-class-order": {
- "count": 2
}
},
"app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx": {
@@ -4032,9 +4012,6 @@
"app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
"no-restricted-imports": {
"count": 2
- },
- "tailwindcss/enforce-consistent-class-order": {
- "count": 3
}
},
"app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
@@ -7134,9 +7111,6 @@
"app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx": {
"no-restricted-imports": {
"count": 1
- },
- "tailwindcss/enforce-consistent-class-order": {
- "count": 2
}
},
"app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx": {