test: add unit tests for base components (#32818)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
2026-05-05 18:08:07 +08:00 · 2026-03-02 11:40:43 +08:00
parent 8cc775d9f2
commit 335b500aea
401 changed files with 820 additions and 819 deletions
--- a/web/app/components/base/float-right-container/tests/index.spec.tsx
+++ b/web/app/components/base/float-right-container/tests/index.spec.tsx
@ -0,0 +1,181 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import FloatRightContainer from '../index'
+
+describe('FloatRightContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering behavior across mobile and desktop branches.
+  describe('Rendering', () => {
+    it('should render content in drawer when isMobile is true and isOpen is true', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Mobile panel"
+        >
+          <div>Mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('Mobile panel')).toBeInTheDocument()
+      expect(screen.getByText('Mobile content')).toBeInTheDocument()
+    })
+
+    it('should not render content when isMobile is true and isOpen is false', () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={false}
+          onClose={vi.fn()}
+          unmount={true}
+        >
+          <div>Closed mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.queryByText('Closed mobile content')).not.toBeInTheDocument()
+    })
+
+    it('should render content inline when isMobile is false and isOpen is true', () => {
+      render(
+        <FloatRightContainer
+          isMobile={false}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Desktop drawer title should not render"
+        >
+          <div>Desktop inline content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(screen.getByText('Desktop inline content')).toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.queryByText('Desktop drawer title should not render')).not.toBeInTheDocument()
+    })
+
+    it('should render nothing when isMobile is false and isOpen is false', () => {
+      const { container } = render(
+        <FloatRightContainer
+          isMobile={false}
+          isOpen={false}
+          onClose={vi.fn()}
+        >
+          <div>Hidden desktop content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(container).toBeEmptyDOMElement()
+      expect(screen.queryByText('Hidden desktop content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Validate that drawer-specific props are passed through in mobile mode.
+  describe('Props forwarding', () => {
+    it('should call onClose when close icon is clicked in mobile drawer mode', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      await screen.findByRole('dialog')
+      const closeIcon = screen.getByTestId('close-icon')
+      expect(closeIcon).toBeInTheDocument()
+
+      await userEvent.click(closeIcon)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose when close is done using escape key', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable content</div>
+        </FloatRightContainer>,
+      )
+
+      const closeIcon = screen.getByTestId('close-icon')
+      closeIcon.focus()
+      await userEvent.keyboard('{Enter}')
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose when close is done using space key', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable content</div>
+        </FloatRightContainer>,
+      )
+
+      const closeIcon = screen.getByTestId('close-icon')
+      closeIcon.focus()
+      await userEvent.keyboard(' ')
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should apply drawer className props in mobile drawer mode', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          dialogClassName="custom-dialog-class"
+          panelClassName="custom-panel-class"
+        >
+          <div>Class forwarding content</div>
+        </FloatRightContainer>,
+      )
+
+      const dialog = await screen.findByRole('dialog')
+      expect(dialog).toHaveClass('custom-dialog-class')
+
+      const panel = document.querySelector('.custom-panel-class')
+      expect(panel).toBeInTheDocument()
+    })
+  })
+
+  // Edge-case behavior with optional children.
+  describe('Edge cases', () => {
+    it('should render without crashing when children is undefined in mobile mode', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Empty mobile panel"
+        >
+          {undefined}
+        </FloatRightContainer>,
+      )
+
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('Empty mobile panel')).toBeInTheDocument()
+    })
+  })
+})