test: add test cases for some base components (#32314)

web/app/components/base/qrcode/index.spec.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { downloadUrl } from '@/utils/download'
+import ShareQRCode from '.'
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+describe('ShareQRCode', () => {
+  const content = 'https://example.com'
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('renders correctly', () => {
+      render(<ShareQRCode content={content} />)
+      expect(screen.getByRole('button').firstElementChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Interaction', () => {
+    it('toggles QR code panel when clicking the icon', async () => {
+      const user = userEvent.setup()
+      render(<ShareQRCode content={content} />)
+
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      const trigger = screen.getByTestId('qrcode-container')
+      await user.click(trigger)
+
+      expect(screen.getByRole('img')).toBeInTheDocument()
+
+      await user.click(trigger)
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    })
+
+    it('closes panel when clicking outside', async () => {
+      const user = userEvent.setup()
+      render(
+        <div>
+          <div data-testid="outside">Outside</div>
+          <ShareQRCode content={content} />
+        </div>,
+      )
+
+      const trigger = screen.getByTestId('qrcode-container')
+      await user.click(trigger)
+      expect(screen.getByRole('img')).toBeInTheDocument()
+
+      await user.click(screen.getByTestId('outside'))
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    })
+
+    it('does not close panel when clicking inside the panel', async () => {
+      const user = userEvent.setup()
+      render(<ShareQRCode content={content} />)
+
+      const trigger = screen.getByTestId('qrcode-container')
+      await user.click(trigger)
+
+      const canvas = screen.getByRole('img')
+      const panel = canvas.parentElement
+      await user.click(panel!)
+
+      expect(canvas).toBeInTheDocument()
+    })
+
+    it('calls downloadUrl when clicking download', async () => {
+      const user = userEvent.setup()
+      const originalToDataURL = HTMLCanvasElement.prototype.toDataURL
+      HTMLCanvasElement.prototype.toDataURL = vi.fn(() => 'data:image/png;base64,test')
+
+      try {
+        render(<ShareQRCode content={content} />)
+
+        const trigger = screen.getByTestId('qrcode-container')
+        await user.click(trigger!)
+
+        const downloadBtn = screen.getByText('appOverview.overview.appInfo.qrcode.download')
+        await user.click(downloadBtn)
+
+        expect(downloadUrl).toHaveBeenCalledWith({
+          url: 'data:image/png;base64,test',
+          fileName: 'qrcode.png',
+        })
+      }
+      finally {
+        HTMLCanvasElement.prototype.toDataURL = originalToDataURL
+      }
+    })
+  })
+})

web/app/components/base/qrcode/index.tsx

@@ -1,7 +1,4 @@
 'use client'
-import {
-  RiQrCodeLine,
-} from '@remixicon/react'
 import { QRCodeCanvas as QRCode } from 'qrcode.react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -55,9 +52,9 @@ const ShareQRCode = ({ content }: Props) => {
     <Tooltip
       popupContent={t(`${prefixEmbedded}`, { ns: 'appOverview' }) || ''}
     >
-      <div className="relative h-6 w-6" onClick={toggleQRCode}>
+      <div className="relative h-6 w-6" onClick={toggleQRCode} data-testid="qrcode-container">
         <ActionButton>
-          <RiQrCodeLine className="h-4 w-4" />
+          <span className="i-ri-qr-code-line h-4 w-4" />
         </ActionButton>
         {isShow && (
           <div
@@ -66,7 +63,7 @@ const ShareQRCode = ({ content }: Props) => {
             onClick={handlePanelClick}
           >
             <QRCode size={160} value={content} className="mb-2" />
-            <div className="system-xs-regular flex items-center">
+            <div className="flex items-center system-xs-regular">
               <div className="text-text-tertiary">{t('overview.appInfo.qrcode.scan', { ns: 'appOverview' })}</div>
               <div className="text-text-tertiary">·</div>
               <div className="cursor-pointer text-text-accent-secondary" onClick={downloadQR}>{t('overview.appInfo.qrcode.download', { ns: 'appOverview' })}</div>