test: Add unit tests for Data Source Integrations (Notion, Website) and Modals (#32313)

Co-authored-by: akashseth-ifp <akash.seth@infocusp.com>
2026-05-06 02:18:08 +08:00 · 2026-02-23 10:30:02 +05:30
parent d0bb642fc5
commit ce8354a42a
16 changed files with 3364 additions and 0 deletions
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.spec.tsx
@ -0,0 +1,213 @@
+import type { ConfigItemType } from './config-item'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ConfigItem from './config-item'
+import { DataSourceType } from './types'
+
+/**
+ * ConfigItem Component Tests
+ * Tests rendering of individual configuration items for Notion and Website data sources.
+ */
+
+// Mock Operate component to isolate ConfigItem unit tests.
+vi.mock('../data-source-notion/operate', () => ({
+  default: ({ onAuthAgain, payload }: { onAuthAgain: () => void, payload: { id: string, total: number } }) => (
+    <div data-testid="mock-operate">
+      <button onClick={onAuthAgain} data-testid="operate-auth-btn">Auth Again</button>
+      <span data-testid="operate-payload">{JSON.stringify(payload)}</span>
+    </div>
+  ),
+}))
+
+describe('ConfigItem Component', () => {
+  const mockOnRemove = vi.fn()
+  const mockOnChangeAuthorizedPage = vi.fn()
+  const MockLogo = (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="mock-logo" {...props} />
+
+  const baseNotionPayload: ConfigItemType = {
+    id: 'notion-1',
+    logo: MockLogo,
+    name: 'Notion Workspace',
+    isActive: true,
+    notionConfig: { total: 5 },
+  }
+
+  const baseWebsitePayload: ConfigItemType = {
+    id: 'website-1',
+    logo: MockLogo,
+    name: 'My Website',
+    isActive: true,
+  }
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Notion Configuration', () => {
+    it('should render active Notion config item with connected status and operator', () => {
+      // Act
+      render(
+        <ConfigItem
+          type={DataSourceType.notion}
+          payload={baseNotionPayload}
+          onRemove={mockOnRemove}
+          notionActions={{ onChangeAuthorizedPage: mockOnChangeAuthorizedPage }}
+          readOnly={false}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByTestId('mock-logo')).toBeInTheDocument()
+      expect(screen.getByText('Notion Workspace')).toBeInTheDocument()
+      const statusText = screen.getByText('common.dataSource.notion.connected')
+      expect(statusText).toHaveClass('text-util-colors-green-green-600')
+      expect(screen.getByTestId('operate-payload')).toHaveTextContent(JSON.stringify({ id: 'notion-1', total: 5 }))
+    })
+
+    it('should render inactive Notion config item with disconnected status', () => {
+      // Arrange
+      const inactivePayload = { ...baseNotionPayload, isActive: false }
+
+      // Act
+      render(
+        <ConfigItem
+          type={DataSourceType.notion}
+          payload={inactivePayload}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Assert
+      const statusText = screen.getByText('common.dataSource.notion.disconnected')
+      expect(statusText).toHaveClass('text-util-colors-warning-warning-600')
+    })
+
+    it('should handle auth action through the Operate component', () => {
+      // Arrange
+      render(
+        <ConfigItem
+          type={DataSourceType.notion}
+          payload={baseNotionPayload}
+          onRemove={mockOnRemove}
+          notionActions={{ onChangeAuthorizedPage: mockOnChangeAuthorizedPage }}
+          readOnly={false}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByTestId('operate-auth-btn'))
+
+      // Assert
+      expect(mockOnChangeAuthorizedPage).toHaveBeenCalled()
+    })
+
+    it('should fallback to 0 total if notionConfig is missing', () => {
+      // Arrange
+      const payloadNoConfig = { ...baseNotionPayload, notionConfig: undefined }
+
+      // Act
+      render(
+        <ConfigItem
+          type={DataSourceType.notion}
+          payload={payloadNoConfig}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByTestId('operate-payload')).toHaveTextContent(JSON.stringify({ id: 'notion-1', total: 0 }))
+    })
+
+    it('should handle missing notionActions safely without crashing', () => {
+      // Arrange
+      render(
+        <ConfigItem
+          type={DataSourceType.notion}
+          payload={baseNotionPayload}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Act & Assert
+      expect(() => fireEvent.click(screen.getByTestId('operate-auth-btn'))).not.toThrow()
+    })
+  })
+
+  describe('Website Configuration', () => {
+    it('should render active Website config item and hide operator', () => {
+      // Act
+      render(
+        <ConfigItem
+          type={DataSourceType.website}
+          payload={baseWebsitePayload}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('common.dataSource.website.active')).toBeInTheDocument()
+      expect(screen.queryByTestId('mock-operate')).not.toBeInTheDocument()
+    })
+
+    it('should render inactive Website config item', () => {
+      // Arrange
+      const inactivePayload = { ...baseWebsitePayload, isActive: false }
+
+      // Act
+      render(
+        <ConfigItem
+          type={DataSourceType.website}
+          payload={inactivePayload}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Assert
+      const statusText = screen.getByText('common.dataSource.website.inactive')
+      expect(statusText).toHaveClass('text-util-colors-warning-warning-600')
+    })
+
+    it('should show remove button and trigger onRemove when clicked (not read-only)', () => {
+      // Arrange
+      const { container } = render(
+        <ConfigItem
+          type={DataSourceType.website}
+          payload={baseWebsitePayload}
+          onRemove={mockOnRemove}
+          readOnly={false}
+        />,
+      )
+
+      // Note: This selector is brittle but necessary since the delete button lacks
+      // accessible attributes (data-testid, aria-label). Ideally, the component should
+      // be updated to include proper accessibility attributes.
+      const deleteBtn = container.querySelector('div[class*="cursor-pointer"]') as HTMLElement
+
+      // Act
+      fireEvent.click(deleteBtn)
+
+      // Assert
+      expect(mockOnRemove).toHaveBeenCalled()
+    })
+
+    it('should hide remove button in read-only mode', () => {
+      // Arrange
+      const { container } = render(
+        <ConfigItem
+          type={DataSourceType.website}
+          payload={baseWebsitePayload}
+          onRemove={mockOnRemove}
+          readOnly={true}
+        />,
+      )
+
+      // Assert
+      const deleteBtn = container.querySelector('div[class*="cursor-pointer"]')
+      expect(deleteBtn).not.toBeInTheDocument()
+    })
+  })
+})
--- a/web/app/components/header/account-setting/data-source-page/panel/index.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/index.spec.tsx
@ -0,0 +1,226 @@
+import type { ConfigItemType } from './config-item'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { DataSourceProvider } from '@/models/common'
+import Panel from './index'
+import { DataSourceType } from './types'
+
+/**
+ * Panel Component Tests
+ * Tests layout, conditional rendering, and interactions for data source panels (Notion and Website).
+ */
+
+vi.mock('../data-source-notion/operate', () => ({
+  default: () => <div data-testid="mock-operate" />,
+}))
+
+describe('Panel Component', () => {
+  const onConfigure = vi.fn()
+  const onRemove = vi.fn()
+  const mockConfiguredList: ConfigItemType[] = [
+    { id: '1', name: 'Item 1', isActive: true, logo: () => null },
+    { id: '2', name: 'Item 2', isActive: false, logo: () => null },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Notion Panel Rendering', () => {
+    it('should render Notion panel when not configured and isSupportList is true', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.notion}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={[]}
+          onRemove={onRemove}
+          isSupportList={true}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('common.dataSource.notion.title')).toBeInTheDocument()
+      expect(screen.getByText('common.dataSource.notion.description')).toBeInTheDocument()
+      const connectBtn = screen.getByText('common.dataSource.connect')
+      expect(connectBtn).toBeInTheDocument()
+
+      // Act
+      fireEvent.click(connectBtn)
+      // Assert
+      expect(onConfigure).toHaveBeenCalled()
+    })
+
+    it('should render Notion panel in readOnly mode when not configured', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.notion}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={true}
+          configuredList={[]}
+          onRemove={onRemove}
+          isSupportList={true}
+        />,
+      )
+
+      // Assert
+      const connectBtn = screen.getByText('common.dataSource.connect')
+      expect(connectBtn).toHaveClass('cursor-default opacity-50 grayscale')
+    })
+
+    it('should render Notion panel when configured with list of items', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.notion}
+          isConfigured={true}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={mockConfiguredList}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByRole('button', { name: 'common.dataSource.configure' })).toBeInTheDocument()
+      expect(screen.getByText('common.dataSource.notion.connectedWorkspace')).toBeInTheDocument()
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+      expect(screen.getByText('Item 2')).toBeInTheDocument()
+    })
+
+    it('should hide connect button for Notion if isSupportList is false', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.notion}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={[]}
+          onRemove={onRemove}
+          isSupportList={false}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByText('common.dataSource.connect')).not.toBeInTheDocument()
+    })
+
+    it('should disable Notion configure button in readOnly mode (configured state)', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.notion}
+          isConfigured={true}
+          onConfigure={onConfigure}
+          readOnly={true}
+          configuredList={mockConfiguredList}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Assert
+      const btn = screen.getByRole('button', { name: 'common.dataSource.configure' })
+      expect(btn).toBeDisabled()
+    })
+  })
+
+  describe('Website Panel Rendering', () => {
+    it('should show correct provider names and handle configuration when not configured', () => {
+      // Arrange
+      const { rerender } = render(
+        <Panel
+          type={DataSourceType.website}
+          provider={DataSourceProvider.fireCrawl}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={[]}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Assert Firecrawl
+      expect(screen.getByText('🔥 Firecrawl')).toBeInTheDocument()
+
+      // Rerender for WaterCrawl
+      rerender(
+        <Panel
+          type={DataSourceType.website}
+          provider={DataSourceProvider.waterCrawl}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={[]}
+          onRemove={onRemove}
+        />,
+      )
+      expect(screen.getByText('WaterCrawl')).toBeInTheDocument()
+
+      // Rerender for Jina Reader
+      rerender(
+        <Panel
+          type={DataSourceType.website}
+          provider={DataSourceProvider.jinaReader}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={[]}
+          onRemove={onRemove}
+        />,
+      )
+      expect(screen.getByText('Jina Reader')).toBeInTheDocument()
+
+      // Act
+      const configBtn = screen.getByText('common.dataSource.configure')
+      fireEvent.click(configBtn)
+      // Assert
+      expect(onConfigure).toHaveBeenCalled()
+    })
+
+    it('should handle readOnly mode for Website configuration button', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.website}
+          isConfigured={false}
+          onConfigure={onConfigure}
+          readOnly={true}
+          configuredList={[]}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Assert
+      const configBtn = screen.getByText('common.dataSource.configure')
+      expect(configBtn).toHaveClass('cursor-default opacity-50 grayscale')
+
+      // Act
+      fireEvent.click(configBtn)
+      // Assert
+      expect(onConfigure).not.toHaveBeenCalled()
+    })
+
+    it('should render Website panel correctly when configured with crawlers', () => {
+      // Act
+      render(
+        <Panel
+          type={DataSourceType.website}
+          isConfigured={true}
+          onConfigure={onConfigure}
+          readOnly={false}
+          configuredList={mockConfiguredList}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('common.dataSource.website.configuredCrawlers')).toBeInTheDocument()
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+      expect(screen.getByText('Item 2')).toBeInTheDocument()
+    })
+  })
+})