From 8c06a875827cf74a90f28eb3f335af8a3d3ef0a0 Mon Sep 17 00:00:00 2001
From: Jason Young <44939412+farion1231@users.noreply.github.com>
Date: Fri, 4 Jul 2025 00:54:11 +0800
Subject: [PATCH] test: add comprehensive tests for IndicatorLight and Spinner
 components (#7781)

- Add tests for IndicatorLight component covering size, color conversion, shadow, and animation props
- Add tests for Spinner component with proper motion/react mocking
- Include snapshot tests for both components
---
 .../__tests__/IndicatorLight.test.tsx         | 50 +++++++++++++++++++
 .../src/components/__tests__/Spinner.test.tsx | 39 +++++++++++++++
 .../IndicatorLight.test.tsx.snap              | 18 +++++++
 .../__snapshots__/Spinner.test.tsx.snap       | 45 +++++++++++++++++
 4 files changed, 152 insertions(+)
 create mode 100644 src/renderer/src/components/__tests__/IndicatorLight.test.tsx
 create mode 100644 src/renderer/src/components/__tests__/Spinner.test.tsx
 create mode 100644 src/renderer/src/components/__tests__/__snapshots__/IndicatorLight.test.tsx.snap
 create mode 100644 src/renderer/src/components/__tests__/__snapshots__/Spinner.test.tsx.snap

diff --git a/src/renderer/src/components/__tests__/IndicatorLight.test.tsx b/src/renderer/src/components/__tests__/IndicatorLight.test.tsx
new file mode 100644
index 0000000000..d85dba92d6
--- /dev/null
+++ b/src/renderer/src/components/__tests__/IndicatorLight.test.tsx
@@ -0,0 +1,50 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import IndicatorLight from '../IndicatorLight'
+
+describe('IndicatorLight', () => {
+  it('should render with default props', () => {
+    const { container } = render(<IndicatorLight color="red" />)
+    const light = container.firstChild as HTMLElement
+
+    expect(light).toHaveStyle({
+      width: '8px',
+      height: '8px',
+      animation: 'pulse 2s infinite'
+    })
+  })
+
+  it('should apply custom size', () => {
+    const { container } = render(<IndicatorLight color="blue" size={16} />)
+    const light = container.firstChild as HTMLElement
+
+    expect(light).toHaveStyle({
+      width: '16px',
+      height: '16px'
+    })
+  })
+
+  it('should convert green color to hex value', () => {
+    const { container } = render(<IndicatorLight color="green" />)
+    const light = container.firstChild as HTMLElement
+    expect(light).toHaveStyle({ backgroundColor: '#22c55e' })
+  })
+
+  it('should disable shadow when specified', () => {
+    const { container } = render(<IndicatorLight color="red" shadow={false} />)
+    const light = container.firstChild as HTMLElement
+    expect(light).toHaveStyle({ boxShadow: 'none' })
+  })
+
+  it('should disable animation when specified', () => {
+    const { container } = render(<IndicatorLight color="green" animation={false} />)
+    const light = container.firstChild as HTMLElement
+    expect(light).toHaveStyle({ animation: 'none' })
+  })
+
+  it('should match snapshot', () => {
+    const { container } = render(<IndicatorLight color="green" />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})
diff --git a/src/renderer/src/components/__tests__/Spinner.test.tsx b/src/renderer/src/components/__tests__/Spinner.test.tsx
new file mode 100644
index 0000000000..9c88b1c885
--- /dev/null
+++ b/src/renderer/src/components/__tests__/Spinner.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import Spinner from '../Spinner'
+
+// Mock motion/react to prevent animation issues in tests
+vi.mock('motion/react', () => ({
+  motion: {
+    create: (Component: any) => {
+      const MockedComponent = (props: any) => <Component {...props} />
+      return MockedComponent
+    }
+  }
+}))
+
+describe('Spinner', () => {
+  it('should render with text', () => {
+    render(<Spinner text="Searching..." />)
+    expect(screen.getByText('Searching...')).toBeInTheDocument()
+  })
+
+  it('should render search icon', () => {
+    const { container } = render(<Spinner text="Loading..." />)
+    const icon = container.querySelector('svg')
+    expect(icon).toBeInTheDocument()
+  })
+
+  it('should render with empty text', () => {
+    const { container } = render(<Spinner text="" />)
+    const spanElement = container.querySelector('span')
+    expect(spanElement).toBeInTheDocument()
+    expect(spanElement).toHaveTextContent('')
+  })
+
+  it('should match snapshot', () => {
+    const { container } = render(<Spinner text="Loading files..." />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})
diff --git a/src/renderer/src/components/__tests__/__snapshots__/IndicatorLight.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/IndicatorLight.test.tsx.snap
new file mode 100644
index 0000000000..c385373714
--- /dev/null
+++ b/src/renderer/src/components/__tests__/__snapshots__/IndicatorLight.test.tsx.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IndicatorLight > should match snapshot 1`] = `
+.c0 {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #22c55e;
+  box-shadow: 0 0 6px #22c55e;
+  animation: pulse 2s infinite;
+}
+
+<div
+  class="c0"
+  color="#22c55e"
+  size="8"
+/>
+`;
diff --git a/src/renderer/src/components/__tests__/__snapshots__/Spinner.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/Spinner.test.tsx.snap
new file mode 100644
index 0000000000..06175d3e64
--- /dev/null
+++ b/src/renderer/src/components/__tests__/__snapshots__/Spinner.test.tsx.snap
@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Spinner > should match snapshot 1`] = `
+.c0 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  padding: 10px;
+  padding-left: 0;
+}
+
+<div
+  animate="defaultColor,dimmed"
+  class="c0"
+  initial="defaultColor"
+  transition="[object Object]"
+  variants="[object Object]"
+>
+  <svg
+    class="lucide lucide-search"
+    fill="none"
+    height="16"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="11"
+      cy="11"
+      r="8"
+    />
+    <path
+      d="m21 21-4.3-4.3"
+    />
+  </svg>
+  <span>
+    Loading files...
+  </span>
+</div>
+`;