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

web/app/components/base/float-right-container/index.spec.tsx

@@ -0,0 +1,140 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+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()
+
+      fireEvent.click(closeIcon!)
+
+      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"
+          children={undefined}
+        />,
+      )
+
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('Empty mobile panel')).toBeInTheDocument()
+    })
+  })
+})