From 19e9ba773f216d1ed6e5b82062f2d36ff7a57042 Mon Sep 17 00:00:00 2001
From: Jason Young <44939412+farion1231@users.noreply.github.com>
Date: Sat, 5 Jul 2025 13:28:33 +0800
Subject: [PATCH] test: add comprehensive tests for CopyIcon and MinAppIcon
 components (#7833)

* test: add comprehensive tests for CopyIcon and MinAppIcon components

- Add tests for CopyIcon covering default rendering, className merging, and prop passing
- Add tests for MinAppIcon covering default props, custom size, sidebar mode, styles, and edge cases
- Include snapshot tests for both components

* fix: update test snapshots after component styling changes

Update snapshots for CopyIcon and MinAppIcon components to match current
styled-components implementation (replaces inline styles with generated classes).

* refactor: simplify icon component tests based on PR review feedback

- CopyIcon: replace multiple redundant tests with single snapshot test
- MinAppIcon: remove duplicate test that overlaps with snapshot test
- Keep essential business logic tests for MinAppIcon (sidebar behavior, null return)
- Update test snapshots accordingly
---
 .../Icons/__tests__/CopyIcon.test.tsx         | 15 +++++
 .../Icons/__tests__/MinAppIcon.test.tsx       | 65 +++++++++++++++++++
 .../__snapshots__/CopyIcon.test.tsx.snap      |  9 +++
 .../__snapshots__/MinAppIcon.test.tsx.snap    | 15 +++++
 4 files changed, 104 insertions(+)
 create mode 100644 src/renderer/src/components/Icons/__tests__/CopyIcon.test.tsx
 create mode 100644 src/renderer/src/components/Icons/__tests__/MinAppIcon.test.tsx
 create mode 100644 src/renderer/src/components/Icons/__tests__/__snapshots__/CopyIcon.test.tsx.snap
 create mode 100644 src/renderer/src/components/Icons/__tests__/__snapshots__/MinAppIcon.test.tsx.snap

diff --git a/src/renderer/src/components/Icons/__tests__/CopyIcon.test.tsx b/src/renderer/src/components/Icons/__tests__/CopyIcon.test.tsx
new file mode 100644
index 0000000000..e94967a12a
--- /dev/null
+++ b/src/renderer/src/components/Icons/__tests__/CopyIcon.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import CopyIcon from '../CopyIcon'
+
+describe('CopyIcon', () => {
+  it('should match snapshot with props and className', () => {
+    const onClick = vi.fn()
+    const { container } = render(
+      <CopyIcon className="custom-class" onClick={onClick} title="Copy to clipboard" data-testid="copy-icon" />
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})
diff --git a/src/renderer/src/components/Icons/__tests__/MinAppIcon.test.tsx b/src/renderer/src/components/Icons/__tests__/MinAppIcon.test.tsx
new file mode 100644
index 0000000000..a06c19a840
--- /dev/null
+++ b/src/renderer/src/components/Icons/__tests__/MinAppIcon.test.tsx
@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MinAppIcon from '../MinAppIcon'
+
+vi.mock('@renderer/config/minapps', () => ({
+  DEFAULT_MIN_APPS: [
+    {
+      id: 'test-app-1',
+      name: 'Test App 1',
+      logo: '/test-logo-1.png',
+      url: 'https://test1.com',
+      bodered: true,
+      background: '#f0f0f0'
+    },
+    {
+      id: 'test-app-2',
+      name: 'Test App 2',
+      logo: '/test-logo-2.png',
+      url: 'https://test2.com',
+      bodered: false,
+      background: undefined
+    }
+  ]
+}))
+
+describe('MinAppIcon', () => {
+  const mockApp = {
+    id: 'test-app-1',
+    name: 'Test App',
+    url: 'https://test.com',
+    style: {
+      opacity: 0.8,
+      transform: 'scale(1.1)'
+    }
+  }
+
+  it('should render correctly with various props', () => {
+    const customStyle = { marginTop: '10px' }
+    const { container } = render(<MinAppIcon app={mockApp} size={64} style={customStyle} sidebar={false} />)
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should not apply app.style when sidebar is true', () => {
+    const { container } = render(<MinAppIcon app={mockApp} sidebar={true} />)
+    const img = container.querySelector('img')
+
+    expect(img).not.toHaveStyle({
+      opacity: '0.8',
+      transform: 'scale(1.1)'
+    })
+  })
+
+  it('should return null when app is not found in DEFAULT_MIN_APPS', () => {
+    const unknownApp = {
+      id: 'unknown-app',
+      name: 'Unknown App',
+      url: 'https://unknown.com'
+    }
+    const { container } = render(<MinAppIcon app={unknownApp} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+})
diff --git a/src/renderer/src/components/Icons/__tests__/__snapshots__/CopyIcon.test.tsx.snap b/src/renderer/src/components/Icons/__tests__/__snapshots__/CopyIcon.test.tsx.snap
new file mode 100644
index 0000000000..d333ca4578
--- /dev/null
+++ b/src/renderer/src/components/Icons/__tests__/__snapshots__/CopyIcon.test.tsx.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CopyIcon > should match snapshot with props and className 1`] = `
+<i
+  class="iconfont icon-copy custom-class"
+  data-testid="copy-icon"
+  title="Copy to clipboard"
+/>
+`;
diff --git a/src/renderer/src/components/Icons/__tests__/__snapshots__/MinAppIcon.test.tsx.snap b/src/renderer/src/components/Icons/__tests__/__snapshots__/MinAppIcon.test.tsx.snap
new file mode 100644
index 0000000000..e41515fed6
--- /dev/null
+++ b/src/renderer/src/components/Icons/__tests__/__snapshots__/MinAppIcon.test.tsx.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MinAppIcon > should render correctly with various props 1`] = `
+.c0 {
+  border-radius: 16px;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+<img
+  class="c0"
+  src="/test-logo-1.png"
+  style="border: 0.5px solid var(--color-border); width: 64px; height: 64px; background-color: rgb(240, 240, 240); opacity: 0.8; transform: scale(1.1); margin-top: 10px;"
+/>
+`;