From 2c8d57ceb1eeaff8cf9afa23e187f2f205a556bd Mon Sep 17 00:00:00 2001
From: sheeeuWu <shefali22119@gmail.com>
Date: Thu, 4 Jun 2026 01:11:28 +0530
Subject: [PATCH] test(Icons): create app/components/Icons.test.tsx

---
 app/components/Icons.test.tsx | 62 +++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 app/components/Icons.test.tsx

diff --git a/app/components/Icons.test.tsx b/app/components/Icons.test.tsx
new file mode 100644
index 000000000..0617b3e4b
--- /dev/null
+++ b/app/components/Icons.test.tsx
@@ -0,0 +1,62 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect } from 'vitest';
+import { CopyIcon, ZapIcon, BoxIcon, CheckIcon, CloseIcon } from './Icons';
+
+describe('Icons', () => {
+  it('renders all 5 icons as valid SVG elements without crashing', () => {
+    const icons = [CopyIcon, ZapIcon, BoxIcon, CheckIcon, CloseIcon];
+
+    icons.forEach((Icon) => {
+      const { container } = render(<Icon />);
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+
+  it('renders CopyIcon with correct attributes', () => {
+    const { container } = render(<CopyIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '20');
+    expect(svg).toHaveAttribute('height', '20');
+    expect(svg).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('renders ZapIcon with correct attributes', () => {
+    const { container } = render(<ZapIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('renders BoxIcon with correct attributes', () => {
+    const { container } = render(<BoxIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('renders CheckIcon with correct attributes including green stroke color', () => {
+    const { container } = render(<CheckIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '20');
+    expect(svg).toHaveAttribute('height', '20');
+    expect(svg).toHaveAttribute('stroke-width', '3');
+    expect(svg).toHaveAttribute('stroke', '#10b981');
+  });
+
+  it('renders CloseIcon with correct attributes', () => {
+    const { container } = render(<CloseIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '18');
+    expect(svg).toHaveAttribute('height', '18');
+    expect(svg).toHaveAttribute('stroke-width', '2.5');
+  });
+});