From d0ebdf460ff520c6a0854c8c6a05e86803504ce4 Mon Sep 17 00:00:00 2001 From: Jason Young <44939412+farion1231@users.noreply.github.com> Date: Wed, 2 Jul 2025 16:29:29 +0800 Subject: [PATCH] test: add tests for DividerWithText and EmojiIcon components (#7747) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test: add tests for DividerWithText and EmojiIcon components - Add DividerWithText test covering basic rendering, styling and edge cases - Add EmojiIcon test for emoji/icon rendering, tooltips and size customization * test: add snapshot tests for DividerWithText and EmojiIcon components - 为 DividerWithText 和 EmojiIcon 组件添加快照测试 - 优化测试用例，移除过度测试的 DOM 结构验证 - 增加对 size 和 fontSize props 的样式验证 - 遵循项目测试规范，使用标准的 toMatchSnapshot() * test: remove duplicate background test in EmojiIcon 移除重复的背景元素测试 --- .../__tests__/DividerWithText.test.tsx | 62 ++++++++++++++++ .../components/__tests__/EmojiIcon.test.tsx | 70 +++++++++++++++++++ .../DividerWithText.test.tsx.snap | 34 +++++++++ .../__snapshots__/EmojiIcon.test.tsx.snap | 42 +++++++++++ 4 files changed, 208 insertions(+) create mode 100644 src/renderer/src/components/__tests__/DividerWithText.test.tsx create mode 100644 src/renderer/src/components/__tests__/EmojiIcon.test.tsx create mode 100644 src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap create mode 100644 src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap diff --git a/src/renderer/src/components/__tests__/DividerWithText.test.tsx b/src/renderer/src/components/__tests__/DividerWithText.test.tsx new file mode 100644 index 0000000000..d624f6869e --- /dev/null +++ b/src/renderer/src/components/__tests__/DividerWithText.test.tsx @@ -0,0 +1,62 @@ +import { render, screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' + +import DividerWithText from '../DividerWithText' + +describe('DividerWithText', () => { + it('should render with correct structure and text', () => { + const text = 'Section Title' + render() + + // Verify text is rendered + const textElement = screen.getByText(text) + expect(textElement).toBeInTheDocument() + expect(textElement.tagName).toBe('SPAN') + + // Verify structure + const dividerContainer = textElement.parentElement as HTMLElement + expect(dividerContainer).toBeTruthy() + expect(dividerContainer.tagName).toBe('DIV') + expect(dividerContainer.children.length).toBe(2) + + // Verify line element exists + const lineElement = dividerContainer.children[1] as HTMLElement + expect(lineElement.tagName).toBe('DIV') + }) + + it('should apply custom styles', () => { + const customStyle = { + marginTop: '20px', + marginBottom: '30px', + padding: '10px' + } + + const { container } = render() + const dividerContainer = container.firstChild as HTMLElement + + expect(dividerContainer).toHaveStyle(customStyle) + }) + + it('should handle edge cases for text prop', () => { + // Empty string + const { container, rerender } = render() + const emptySpan = container.querySelector('span') + expect(emptySpan).toBeTruthy() + expect(emptySpan?.textContent).toBe('') + + // Long text + const longText = 'This is a very long section title that might wrap or cause layout issues' + rerender() + expect(screen.getByText(longText)).toBeInTheDocument() + + // Special characters + const specialText = '特殊字符 & Symbols: <>&"\'@#$%' + rerender() + expect(screen.getByText(specialText)).toBeInTheDocument() + }) + + it('should match snapshot', () => { + const { container } = render() + expect(container.firstChild).toMatchSnapshot() + }) +}) diff --git a/src/renderer/src/components/__tests__/EmojiIcon.test.tsx b/src/renderer/src/components/__tests__/EmojiIcon.test.tsx new file mode 100644 index 0000000000..3d5717c808 --- /dev/null +++ b/src/renderer/src/components/__tests__/EmojiIcon.test.tsx @@ -0,0 +1,70 @@ +import { render } from '@testing-library/react' +import { describe, expect, it } from 'vitest' + +import EmojiIcon from '../EmojiIcon' + +describe('EmojiIcon', () => { + it('should render with provided emoji', () => { + const { container } = render() + + // Should render the emoji + expect(container.textContent).toContain('🚀') + + // Should also render emoji in background + const background = container.querySelector('div > div') + expect(background?.textContent).toContain('🚀') + }) + + it('should render default emoji when no emoji provided', () => { + const { container } = render() + + // Background should have default star emoji + const background = container.querySelector('div > div') + expect(background?.textContent).toContain('⭐️') + + // Foreground should be empty (the actual emoji prop value) + const emojiContainer = container.firstChild as HTMLElement + // Remove background text to get only foreground text + const foregroundText = emojiContainer.textContent?.replace(background?.textContent || '', '') + expect(foregroundText).toBe('') + }) + + it('should apply custom className', () => { + const customClass = 'custom-emoji-class' + const { container } = render() + + const emojiContainer = container.firstChild as HTMLElement + expect(emojiContainer).toHaveClass(customClass) + }) + + it('should match snapshot', () => { + const { container } = render() + expect(container.firstChild).toMatchSnapshot() + }) + + it('should handle special emojis correctly', () => { + const specialEmojis = ['👨‍💻', '🏃‍♀️', '👨‍👩‍👧‍👦', '🇨🇳'] + + specialEmojis.forEach((emoji) => { + const { container } = render() + expect(container.textContent).toContain(emoji) + }) + }) + + it('should apply custom size and fontSize props', () => { + const { container } = render() + const emojiContainer = container.firstChild as HTMLElement + + // Verify that the component renders with custom props + expect(emojiContainer).toHaveStyle({ width: '40px', height: '40px' }) + expect(emojiContainer).toHaveStyle({ fontSize: '24px' }) + }) + + it('should handle empty string emoji', () => { + const { container } = render() + const backgroundElement = container.querySelector('div > div') + + // Should show default emoji in background when emoji is empty + expect(backgroundElement?.textContent).toContain('⭐️') + }) +}) diff --git a/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap new file mode 100644 index 0000000000..b7e3e21468 --- /dev/null +++ b/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap @@ -0,0 +1,34 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DividerWithText > should match snapshot 1`] = ` +.c0 { + display: flex; + align-items: center; + margin: 0px 0; +} + +.c1 { + font-size: 12px; + color: var(--color-text-2); + margin-right: 8px; +} + +.c2 { + flex: 1; + height: 1px; + background-color: var(--color-border); +} + +
+ + Test Divider + +
+
+`; diff --git a/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap new file mode 100644 index 0000000000..f25036ca0f --- /dev/null +++ b/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap @@ -0,0 +1,42 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`EmojiIcon > should match snapshot 1`] = ` +.c0 { + width: 26px; + height: 26px; + border-radius: 13px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: 15px; + position: relative; + overflow: hidden; + margin-right: 3px; +} + +.c1 { + width: 100%; + height: 100%; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 200%; + transform: scale(1.5); + filter: blur(5px); + opacity: 0.4; +} + +
+
+ 🎉 +
+ 🎉 +
+`;