@easyops-cn/a2ui-react 0.0.0

package/src/0.8/A2UIRender.test.tsx

@@ -0,0 +1,793 @@
+/**
+ * A2UIRender Tests
+ *
+ * Tests for the main A2UIRender component.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { A2UIRender, type ComponentsMap } from './A2UIRender'
+import type { A2UIMessage, BaseComponentProps, Action } from './types'
+import { useDispatchAction } from './hooks/useDispatchAction'
+import { useDataBinding, useFormBinding } from './hooks/useDataBinding'
+import { ComponentRenderer } from './components/ComponentRenderer'
+
+// Helper to create test messages
+function createTestMessages(options: {
+  surfaceId?: string
+  root?: string
+  components?: Array<{
+    id: string
+    type: string
+    props?: Record<string, unknown>
+  }>
+  dataModel?: Record<string, unknown>
+}): A2UIMessage[] {
+  const {
+    surfaceId = 'test-surface',
+    root = 'root-component',
+    components = [],
+    dataModel,
+  } = options
+
+  const messages: A2UIMessage[] = []
+
+  // Begin rendering message
+  messages.push({
+    beginRendering: {
+      surfaceId,
+      root,
+    },
+  })
+
+  // Surface update with components
+  if (components.length > 0) {
+    messages.push({
+      surfaceUpdate: {
+        surfaceId,
+        components: components.map((c) => ({
+          id: c.id,
+          component: { [c.type]: c.props ?? {} },
+        })),
+      },
+    })
+  }
+
+  // Data model update
+  if (dataModel) {
+    messages.push({
+      dataModelUpdate: {
+        surfaceId,
+        path: '/',
+        contents: Object.entries(dataModel).map(([key, value]) => {
+          if (typeof value === 'string') {
+            return { key, valueString: value }
+          }
+          if (typeof value === 'number') {
+            return { key, valueNumber: value }
+          }
+          if (typeof value === 'boolean') {
+            return { key, valueBoolean: value }
+          }
+          return { key, valueString: String(value) }
+        }),
+      },
+    })
+  }
+
+  return messages
+}
+
+describe('A2UIRender', () => {
+  describe('Phase 3: User Story 1 - Basic Message Rendering', () => {
+    it('T014: renders nothing for empty messages array', () => {
+      const { container } = render(<A2UIRender messages={[]} />)
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('T014b: renders nothing for null/undefined messages', () => {
+      // @ts-expect-error - testing null handling
+      const { container: c1 } = render(<A2UIRender messages={null} />)
+      expect(c1.firstChild).toBeNull()
+
+      // @ts-expect-error - testing undefined handling
+      const { container: c2 } = render(<A2UIRender messages={undefined} />)
+      expect(c2.firstChild).toBeNull()
+    })
+
+    it('T015: renders components from valid A2UIMessage objects', () => {
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'text-1',
+        components: [
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Hello World' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} />)
+
+      expect(screen.getByText('Hello World')).toBeInTheDocument()
+    })
+
+    it('T016: renders nested components correctly', () => {
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'column-1',
+        components: [
+          {
+            id: 'column-1',
+            type: 'Column',
+            props: { children: { explicitList: ['text-1', 'text-2'] } },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'First' } },
+          },
+          {
+            id: 'text-2',
+            type: 'Text',
+            props: { text: { literalString: 'Second' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} />)
+
+      expect(screen.getByText('First')).toBeInTheDocument()
+      expect(screen.getByText('Second')).toBeInTheDocument()
+    })
+
+    it('renders multiple surfaces', () => {
+      const messages: A2UIMessage[] = [
+        // Surface 1
+        { beginRendering: { surfaceId: 'surface-1', root: 'text-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'text-1',
+                component: { Text: { text: { literalString: 'Surface 1' } } },
+              },
+            ],
+          },
+        },
+        // Surface 2
+        { beginRendering: { surfaceId: 'surface-2', root: 'text-2' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-2',
+            components: [
+              {
+                id: 'text-2',
+                component: { Text: { text: { literalString: 'Surface 2' } } },
+              },
+            ],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} />)
+
+      expect(screen.getByText('Surface 1')).toBeInTheDocument()
+      expect(screen.getByText('Surface 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Phase 4: User Story 2 - Action Handling', () => {
+    it('T022: onAction callback invoked when button clicked', async () => {
+      const user = userEvent.setup()
+      const onAction = vi.fn()
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'button-1',
+        components: [
+          {
+            id: 'button-1',
+            type: 'Button',
+            props: {
+              child: 'text-1',
+              action: { name: 'submit' },
+            },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Click Me' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} onAction={onAction} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(onAction).toHaveBeenCalled()
+    })
+
+    it('T023: action payload contains surfaceId, componentId, and context', async () => {
+      const user = userEvent.setup()
+      const onAction = vi.fn()
+
+      const messages = createTestMessages({
+        surfaceId: 'my-surface',
+        root: 'button-1',
+        components: [
+          {
+            id: 'button-1',
+            type: 'Button',
+            props: {
+              child: 'text-1',
+              action: {
+                name: 'submit',
+                context: [
+                  { key: 'value', value: { literalString: 'test-value' } },
+                ],
+              },
+            },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Submit' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} onAction={onAction} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(onAction).toHaveBeenCalledWith(
+        expect.objectContaining({
+          surfaceId: 'my-surface',
+          sourceComponentId: 'button-1',
+          name: 'submit',
+          context: { value: 'test-value' },
+        })
+      )
+    })
+
+    it('T024: multiple components dispatch unique actions', async () => {
+      const user = userEvent.setup()
+      const onAction = vi.fn()
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'row-1',
+        components: [
+          {
+            id: 'row-1',
+            type: 'Row',
+            props: { children: { explicitList: ['button-1', 'button-2'] } },
+          },
+          {
+            id: 'button-1',
+            type: 'Button',
+            props: {
+              child: 'text-1',
+              action: { name: 'action-1' },
+            },
+          },
+          {
+            id: 'button-2',
+            type: 'Button',
+            props: {
+              child: 'text-2',
+              action: { name: 'action-2' },
+            },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Button 1' } },
+          },
+          {
+            id: 'text-2',
+            type: 'Text',
+            props: { text: { literalString: 'Button 2' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} onAction={onAction} />)
+
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[0])
+      await user.click(buttons[1])
+
+      expect(onAction).toHaveBeenCalledTimes(2)
+      expect(onAction).toHaveBeenNthCalledWith(
+        1,
+        expect.objectContaining({
+          name: 'action-1',
+          sourceComponentId: 'button-1',
+        })
+      )
+      expect(onAction).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          name: 'action-2',
+          sourceComponentId: 'button-2',
+        })
+      )
+    })
+
+    it('T027: no error when action dispatched without onAction callback', async () => {
+      const user = userEvent.setup()
+      const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'button-1',
+        components: [
+          {
+            id: 'button-1',
+            type: 'Button',
+            props: {
+              child: 'text-1',
+              action: { name: 'submit' },
+            },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Click Me' } },
+          },
+        ],
+      })
+
+      // No onAction prop
+      render(<A2UIRender messages={messages} />)
+
+      const button = screen.getByRole('button')
+
+      // Should not throw
+      await expect(user.click(button)).resolves.not.toThrow()
+
+      consoleWarn.mockRestore()
+    })
+  })
+
+  describe('Phase 5: User Story 3 - Custom Component Override', () => {
+    it('T028: custom Button component renders instead of default', () => {
+      function CustomButton({
+        surfaceId,
+        child,
+      }: BaseComponentProps & { child?: string }) {
+        return (
+          <button data-testid="custom-button" data-surface={surfaceId}>
+            Custom:{' '}
+            {child && (
+              <ComponentRenderer surfaceId={surfaceId} componentId={child} />
+            )}
+          </button>
+        )
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['Button', CustomButton],
+      ])
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'button-1',
+        components: [
+          {
+            id: 'button-1',
+            type: 'Button',
+            props: { child: 'text-1' },
+          },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Hello' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-button')).toBeInTheDocument()
+      expect(screen.getByText('Hello')).toBeInTheDocument()
+    })
+
+    it('T029: multiple custom components render correctly', () => {
+      function CustomButton() {
+        return <button data-testid="custom-button">Custom Button</button>
+      }
+
+      function CustomText({
+        text,
+      }: BaseComponentProps & { text?: { literalString?: string } }) {
+        return (
+          <span data-testid="custom-text">Custom: {text?.literalString}</span>
+        )
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['Button', CustomButton],
+        ['Text', CustomText],
+      ])
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'row-1',
+        components: [
+          {
+            id: 'row-1',
+            type: 'Row',
+            props: { children: { explicitList: ['button-1', 'text-1'] } },
+          },
+          { id: 'button-1', type: 'Button', props: {} },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Hello' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-button')).toBeInTheDocument()
+      expect(screen.getByTestId('custom-text')).toBeInTheDocument()
+      expect(screen.getByText('Custom: Hello')).toBeInTheDocument()
+    })
+
+    it('T030: non-overridden components use defaults', () => {
+      function CustomButton() {
+        return <button data-testid="custom-button">Custom Button</button>
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['Button', CustomButton],
+      ])
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'row-1',
+        components: [
+          {
+            id: 'row-1',
+            type: 'Row',
+            props: { children: { explicitList: ['button-1', 'text-1'] } },
+          },
+          { id: 'button-1', type: 'Button', props: {} },
+          {
+            id: 'text-1',
+            type: 'Text',
+            props: { text: { literalString: 'Default Text' } },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      // Custom button
+      expect(screen.getByTestId('custom-button')).toBeInTheDocument()
+      // Default text component
+      expect(screen.getByText('Default Text')).toBeInTheDocument()
+    })
+  })
+
+  describe('Phase 6: User Story 4 - Custom Component Creation', () => {
+    it('T034: new component type "Switch" renders from ComponentsMap', () => {
+      function CustomSwitch({
+        label,
+      }: BaseComponentProps & { label?: string }) {
+        return (
+          <label data-testid="custom-switch">
+            <input type="checkbox" />
+            {label}
+          </label>
+        )
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['Switch', CustomSwitch],
+      ])
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'switch-1',
+        components: [
+          {
+            id: 'switch-1',
+            type: 'Switch',
+            props: { label: 'Enable feature' },
+          },
+        ],
+      })
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-switch')).toBeInTheDocument()
+      expect(screen.getByText('Enable feature')).toBeInTheDocument()
+    })
+
+    it('T035: custom component can use useDispatchAction hook', async () => {
+      const user = userEvent.setup()
+      const onAction = vi.fn()
+
+      function CustomSwitch({
+        surfaceId,
+        componentId,
+        action,
+      }: BaseComponentProps & { action?: Action }) {
+        const dispatchAction = useDispatchAction()
+
+        const handleChange = () => {
+          if (action) {
+            dispatchAction(surfaceId, componentId, action)
+          }
+        }
+
+        return (
+          <label data-testid="custom-switch">
+            <input type="checkbox" onChange={handleChange} />
+            Toggle
+          </label>
+        )
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['Switch', CustomSwitch],
+      ])
+
+      const messages = createTestMessages({
+        surfaceId: 'surface-1',
+        root: 'switch-1',
+        components: [
+          {
+            id: 'switch-1',
+            type: 'Switch',
+            props: { action: { name: 'toggle' } },
+          },
+        ],
+      })
+
+      render(
+        <A2UIRender
+          messages={messages}
+          onAction={onAction}
+          components={customComponents}
+        />
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(onAction).toHaveBeenCalledWith(
+        expect.objectContaining({
+          surfaceId: 'surface-1',
+          sourceComponentId: 'switch-1',
+          name: 'toggle',
+        })
+      )
+    })
+  })
+
+  describe('Phase 7: User Story 5 - Data Binding in Custom Components', () => {
+    it('T038: custom component with useDataBinding displays bound value', () => {
+      function CustomDisplay({
+        surfaceId,
+        text,
+      }: BaseComponentProps & { text?: { path: string } }) {
+        const textValue = useDataBinding<string>(surfaceId, text, 'default')
+        return <span data-testid="custom-display">{textValue}</span>
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['CustomDisplay', CustomDisplay],
+      ])
+
+      const messages: A2UIMessage[] = [
+        { beginRendering: { surfaceId: 'surface-1', root: 'display-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'display-1',
+                component: { CustomDisplay: { text: { path: '/message' } } },
+              },
+            ],
+          },
+        },
+        {
+          dataModelUpdate: {
+            surfaceId: 'surface-1',
+            path: '/',
+            contents: [
+              { key: 'message', valueString: 'Hello from data model' },
+            ],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-display')).toHaveTextContent(
+        'Hello from data model'
+      )
+    })
+
+    it('T039: useDataBinding returns default when path not found', () => {
+      function CustomDisplay({
+        surfaceId,
+        text,
+      }: BaseComponentProps & { text?: { path: string } }) {
+        const textValue = useDataBinding<string>(
+          surfaceId,
+          text,
+          'fallback value'
+        )
+        return <span data-testid="custom-display">{textValue}</span>
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['CustomDisplay', CustomDisplay],
+      ])
+
+      const messages: A2UIMessage[] = [
+        { beginRendering: { surfaceId: 'surface-1', root: 'display-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'display-1',
+                component: {
+                  CustomDisplay: { text: { path: '/nonexistent' } },
+                },
+              },
+            ],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-display')).toHaveTextContent(
+        'fallback value'
+      )
+    })
+  })
+
+  describe('Phase 8: User Story 6 - Form Binding in Custom Components', () => {
+    it('T042: custom component with useFormBinding displays current value', () => {
+      function CustomInput({
+        surfaceId,
+        value,
+      }: BaseComponentProps & { value?: { path: string } }) {
+        const [inputValue] = useFormBinding<string>(surfaceId, value, '')
+        return <input data-testid="custom-input" value={inputValue} readOnly />
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['CustomInput', CustomInput],
+      ])
+
+      const messages: A2UIMessage[] = [
+        { beginRendering: { surfaceId: 'surface-1', root: 'input-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'input-1',
+                component: { CustomInput: { value: { path: '/username' } } },
+              },
+            ],
+          },
+        },
+        {
+          dataModelUpdate: {
+            surfaceId: 'surface-1',
+            path: '/',
+            contents: [{ key: 'username', valueString: 'john_doe' }],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-input')).toHaveValue('john_doe')
+    })
+
+    it('T043: useFormBinding setValue updates the bound value', async () => {
+      const user = userEvent.setup()
+
+      function CustomInput({
+        surfaceId,
+        value,
+      }: BaseComponentProps & { value?: { path: string } }) {
+        const [inputValue, setInputValue] = useFormBinding<string>(
+          surfaceId,
+          value,
+          ''
+        )
+        return (
+          <input
+            data-testid="custom-input"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+        )
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['CustomInput', CustomInput],
+      ])
+
+      const messages: A2UIMessage[] = [
+        { beginRendering: { surfaceId: 'surface-1', root: 'input-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'input-1',
+                component: { CustomInput: { value: { path: '/username' } } },
+              },
+            ],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      const input = screen.getByTestId('custom-input')
+      await user.type(input, 'new_value')
+
+      expect(input).toHaveValue('new_value')
+    })
+
+    it('T044: useFormBinding returns default when path not found', () => {
+      function CustomInput({
+        surfaceId,
+        value,
+      }: BaseComponentProps & { value?: { path: string } }) {
+        const [inputValue] = useFormBinding<string>(
+          surfaceId,
+          value,
+          'default_value'
+        )
+        return <input data-testid="custom-input" value={inputValue} readOnly />
+      }
+
+      const customComponents: ComponentsMap = new Map([
+        ['CustomInput', CustomInput],
+      ])
+
+      const messages: A2UIMessage[] = [
+        { beginRendering: { surfaceId: 'surface-1', root: 'input-1' } },
+        {
+          surfaceUpdate: {
+            surfaceId: 'surface-1',
+            components: [
+              {
+                id: 'input-1',
+                component: { CustomInput: { value: { path: '/nonexistent' } } },
+              },
+            ],
+          },
+        },
+      ]
+
+      render(<A2UIRender messages={messages} components={customComponents} />)
+
+      expect(screen.getByTestId('custom-input')).toHaveValue('default_value')
+    })
+  })
+})