test: add tests for some base components (#32265)

web/app/components/base/logo/dify-logo.spec.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+import DifyLogo from './dify-logo'
+
+vi.mock('@/hooks/use-theme', () => ({
+  default: vi.fn(),
+}))
+
+vi.mock('@/utils/var', () => ({
+  basePath: '/test-base-path',
+}))
+
+describe('DifyLogo', () => {
+  const mockUseTheme = {
+    theme: Theme.light,
+    themes: ['light', 'dark'],
+    setTheme: vi.fn(),
+    resolvedTheme: Theme.light,
+    systemTheme: Theme.light,
+    forcedTheme: undefined,
+  }
+
+  beforeEach(() => {
+    vi.mocked(useTheme).mockReturnValue(mockUseTheme as ReturnType<typeof useTheme>)
+  })
+
+  describe('Render', () => {
+    it('renders correctly with default props', () => {
+      render(<DifyLogo />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo.svg')
+    })
+  })
+
+  describe('Props', () => {
+    it('applies custom size correctly', () => {
+      const { rerender } = render(<DifyLogo size="large" />)
+      let img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveClass('w-16')
+      expect(img).toHaveClass('h-7')
+
+      rerender(<DifyLogo size="small" />)
+      img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveClass('w-9')
+      expect(img).toHaveClass('h-4')
+    })
+
+    it('applies custom style correctly', () => {
+      render(<DifyLogo style="monochromeWhite" />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo-monochrome-white.svg')
+    })
+
+    it('applies custom className', () => {
+      render(<DifyLogo className="custom-test-class" />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveClass('custom-test-class')
+    })
+  })
+
+  describe('Theme behavior', () => {
+    it('uses monochromeWhite logo in dark theme when style is default', () => {
+      vi.mocked(useTheme).mockReturnValue({
+        ...mockUseTheme,
+        theme: Theme.dark,
+      } as ReturnType<typeof useTheme>)
+      render(<DifyLogo style="default" />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo-monochrome-white.svg')
+    })
+
+    it('uses monochromeWhite logo in dark theme when style is monochromeWhite', () => {
+      vi.mocked(useTheme).mockReturnValue({
+        ...mockUseTheme,
+        theme: Theme.dark,
+      } as ReturnType<typeof useTheme>)
+      render(<DifyLogo style="monochromeWhite" />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo-monochrome-white.svg')
+    })
+
+    it('uses default logo in light theme when style is default', () => {
+      vi.mocked(useTheme).mockReturnValue({
+        ...mockUseTheme,
+        theme: Theme.light,
+      } as ReturnType<typeof useTheme>)
+      render(<DifyLogo style="default" />)
+      const img = screen.getByRole('img', { name: /dify logo/i })
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo.svg')
+    })
+  })
+})

web/app/components/base/logo/logo-embedded-chat-avatar.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import LogoEmbeddedChatAvatar from './logo-embedded-chat-avatar'
+
+vi.mock('@/utils/var', () => ({
+  basePath: '/test-base-path',
+}))
+
+describe('LogoEmbeddedChatAvatar', () => {
+  describe('Render', () => {
+    it('renders correctly with default props', () => {
+      render(<LogoEmbeddedChatAvatar />)
+      const img = screen.getByRole('img', { name: /logo/i })
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute('src', '/test-base-path/logo/logo-embedded-chat-avatar.png')
+    })
+  })
+
+  describe('Props', () => {
+    it('applies custom className correctly', () => {
+      const customClass = 'custom-avatar-class'
+      render(<LogoEmbeddedChatAvatar className={customClass} />)
+      const img = screen.getByRole('img', { name: /logo/i })
+      expect(img).toHaveClass(customClass)
+    })
+
+    it('has valid alt text', () => {
+      render(<LogoEmbeddedChatAvatar />)
+      const img = screen.getByRole('img', { name: /logo/i })
+      expect(img).toHaveAttribute('alt', 'logo')
+    })
+  })
+})

web/app/components/base/logo/logo-embedded-chat-header.spec.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import LogoEmbeddedChatHeader from './logo-embedded-chat-header'
+
+vi.mock('@/utils/var', () => ({
+  basePath: '/test-base-path',
+}))
+
+describe('LogoEmbeddedChatHeader', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<LogoEmbeddedChatHeader />)
+    const img = screen.getByRole('img', { name: /logo/i })
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', '/test-base-path/logo/logo-embedded-chat-header.png')
+
+    const sources = container.querySelectorAll('source')
+    expect(sources).toHaveLength(3)
+    expect(sources[0]).toHaveAttribute('srcSet', '/logo/logo-embedded-chat-header.png')
+    expect(sources[1]).toHaveAttribute('srcSet', '/logo/logo-embedded-chat-header@2x.png')
+    expect(sources[2]).toHaveAttribute('srcSet', '/logo/logo-embedded-chat-header@3x.png')
+  })
+
+  it('applies custom className correctly', () => {
+    const customClass = 'custom-header-class'
+    render(<LogoEmbeddedChatHeader className={customClass} />)
+    const img = screen.getByRole('img', { name: /logo/i })
+    expect(img).toHaveClass(customClass)
+    expect(img).toHaveClass('h-6')
+  })
+})

web/app/components/base/logo/logo-site.spec.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import LogoSite from './logo-site'
+
+vi.mock('@/utils/var', () => ({
+  basePath: '/test-base-path',
+}))
+
+describe('LogoSite', () => {
+  it('renders correctly with default props', () => {
+    render(<LogoSite />)
+    const img = screen.getByRole('img', { name: /logo/i })
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', '/test-base-path/logo/logo.png')
+  })
+
+  it('applies custom className correctly', () => {
+    const customClass = 'custom-site-class'
+    render(<LogoSite className={customClass} />)
+    const img = screen.getByRole('img', { name: /logo/i })
+    expect(img).toHaveClass(customClass)
+  })
+})