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
This commit is contained in:
Jason Young 2025-07-05 13:28:33 +08:00 committed by GitHub
parent 619aadce41
commit 19e9ba773f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 104 additions and 0 deletions

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

@ -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"
/>
`;

View File

@ -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;"
/>
`;