Merge branch 'main' into test-discordbutton-accessibility

Author: mayank200529

app/compare/page.mock-integrations.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('./CompareClient', () => ({
+  default: () => <div>Mock Compare Client</div>,
+}));
+
+vi.mock('../components/Footer', () => ({
+  Footer: () => <div>Mock Footer</div>,
+}));
+
+import ComparePage from './page';
+
+describe('ComparePage mock integrations', () => {
+  it('renders CompareClient through mocked service layer', () => {
+    render(<ComparePage />);
+
+    expect(screen.getByText('Mock Compare Client')).toBeInTheDocument();
+  });
+
+  it('renders Footer component', () => {
+    render(<ComparePage />);
+
+    expect(screen.getByText('Mock Footer')).toBeInTheDocument();
+  });
+
+  it('renders CompareClient only once', () => {
+    render(<ComparePage />);
+
+    expect(screen.getAllByText('Mock Compare Client')).toHaveLength(1);
+  });
+
+  it('renders Footer only once', () => {
+    render(<ComparePage />);
+
+    expect(screen.getAllByText('Mock Footer')).toHaveLength(1);
+  });
+
+  it('renders page layout with both mocked integrations', () => {
+    render(<ComparePage />);
+
+    expect(screen.getByText('Mock Compare Client')).toBeInTheDocument();
+    expect(screen.getByText('Mock Footer')).toBeInTheDocument();
+  });
+});

components/BrandParticles.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import BrandParticles from './BrandParticles';
+
+let mockReducedMotion = false;
+
+// Mock framer-motion to inspect properties passed to motion elements and control reduced motion state
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({
+      animate,
+      transition,
+      style,
+      ...props
+    }: {
+      animate?: unknown;
+      transition?: unknown;
+      style?: React.CSSProperties;
+      [key: string]: unknown;
+    }) => (
+      <div
+        {...props}
+        style={style}
+        data-testid="motion-div"
+        data-animate={JSON.stringify(animate)}
+        data-transition={JSON.stringify(transition)}
+      />
+    ),
+  },
+  useReducedMotion: () => mockReducedMotion,
+}));
+
+describe('BrandParticles Component', () => {
+  beforeEach(() => {
+    mockReducedMotion = false;
+  });
+
+  it('renders nothing on the server side prior to mounting', () => {
+    // BrandParticles has a mounted check. When mounting is false, it returns null.
+    // To simulate pre-mount, we inspect the behavior before useEffect runs.
+    // In React testing library, render runs useEffect synchronously, but we can verify it renders successfully when mounted.
+    const { container } = render(<BrandParticles />);
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  it('renders 40 particles once mounted', () => {
+    render(<BrandParticles />);
+    const particles = screen.getAllByTestId('motion-div');
+    expect(particles).toHaveLength(40);
+  });
+
+  it('renders particles with random styles and properties', () => {
+    render(<BrandParticles />);
+    const particles = screen.getAllByTestId('motion-div');
+
+    // Check first particle styles
+    const firstParticle = particles[0];
+    expect(firstParticle.className).toContain('absolute');
+    expect(firstParticle.style.width).toBeTruthy();
+    expect(firstParticle.style.height).toBeTruthy();
+    expect(firstParticle.style.backgroundColor).toBeTruthy();
+    expect(firstParticle.style.left).toBeTruthy();
+    expect(firstParticle.style.top).toBeTruthy();
+    expect(firstParticle.style.opacity).toBeTruthy();
+    expect(firstParticle.style.borderRadius).toBeTruthy();
+  });
+
+  it('applies animation paths when motion is enabled (reduced motion = false)', () => {
+    mockReducedMotion = false;
+    render(<BrandParticles />);
+    const particles = screen.getAllByTestId('motion-div');
+
+    const animateAttr = particles[0].getAttribute('data-animate');
+    expect(animateAttr).not.toBe('{}');
+    expect(animateAttr).toContain('y');
+    expect(animateAttr).toContain('x');
+    expect(animateAttr).toContain('rotate');
+
+    const transitionAttr = particles[0].getAttribute('data-transition');
+    expect(transitionAttr).not.toBe('{}');
+    expect(transitionAttr).toContain('duration');
+    expect(transitionAttr).toContain('delay');
+  });
+
+  it('disables animation and transition when reduced motion is enabled', () => {
+    mockReducedMotion = true;
+    render(<BrandParticles />);
+    const particles = screen.getAllByTestId('motion-div');
+
+    const animateAttr = particles[0].getAttribute('data-animate');
+    expect(animateAttr).toBe('{}');
+
+    const transitionAttr = particles[0].getAttribute('data-transition');
+    expect(transitionAttr).toBe('{}');
+  });
+});

components/FeatureCards.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { FeatureCard, FeatureCardsSection } from './FeatureCards';
+
+// Mock GSAP
+const mockTimeline = {
+  to: vi.fn().mockReturnThis(),
+  fromTo: vi.fn().mockReturnThis(),
+  set: vi.fn().mockReturnThis(),
+  kill: vi.fn(),
+};
+
+vi.mock('gsap', () => {
+  const gsapMock = {
+    registerPlugin: vi.fn(),
+    context: (cb: () => void) => {
+      cb();
+      return { revert: vi.fn() };
+    },
+    timeline: () => mockTimeline,
+    to: vi.fn().mockImplementation((target, vars) => {
+      if (typeof vars.onComplete === 'function') {
+        vars.onComplete();
+      }
+      return mockTimeline;
+    }),
+    fromTo: vi.fn().mockReturnThis(),
+    set: vi.fn().mockReturnThis(),
+  };
+  return {
+    default: gsapMock,
+    ...gsapMock,
+  };
+});
+
+vi.mock('gsap/ScrollTrigger', () => ({
+  ScrollTrigger: {},
+}));
+
+describe('FeatureCards Component Suite', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('FeatureCard Component', () => {
+    const defaultProps = {
+      icon: <span data-testid="test-icon">💡</span>,
+      title: 'Amazing Visuals',
+      desc: 'Beautiful SVG isometric rendering of your commits.',
+      accent: 'text-emerald-500',
+      index: 1,
+      accentColor: '#10b981',
+    };
+
+    it('renders card title, description and icon correctly', () => {
+      render(<FeatureCard {...defaultProps} />);
+
+      expect(screen.getByText('Amazing Visuals')).toBeInTheDocument();
+      expect(
+        screen.getByText('Beautiful SVG isometric rendering of your commits.')
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+    });
+
+    it('renders background gradient blob and accent line matching the accentColor', () => {
+      const { container } = render(<FeatureCard {...defaultProps} />);
+
+      // The background blob has class "absolute -right-20 -top-20"
+      const blob = container.querySelector('.absolute.-right-20.-top-20') as HTMLElement;
+      expect(blob).toBeInTheDocument();
+      expect(blob.style.background).toBeTruthy();
+
+      // The bottom accent line has class "absolute bottom-0 left-0"
+      const accentLine = container.querySelector('.absolute.bottom-0.left-0') as HTMLElement;
+      expect(accentLine).toBeInTheDocument();
+      expect(accentLine.style.background).toMatch(/rgb\(16, 185, 129\)|#10b981/);
+    });
+
+    it('triggers mouse movement and hover hover-effects to activate magnetic spotlight', () => {
+      const { container } = render(<FeatureCard {...defaultProps} />);
+      const card = container.firstChild as HTMLDivElement;
+
+      // Mouse enter triggers hover state
+      fireEvent.mouseEnter(card);
+
+      // Mouse move triggers magnetic movement recalculations
+      fireEvent.mouseMove(card, { clientX: 100, clientY: 100 });
+
+      // Mouse leave resets magnetic coordinates
+      fireEvent.mouseLeave(card);
+    });
+  });
+
+  describe('FeatureCardsSection Wrapper Component', () => {
+    it('renders children components and Why CommitPulse heading correctly', () => {
+      render(
+        <FeatureCardsSection>
+          <div data-testid="child-card">Child Component</div>
+        </FeatureCardsSection>
+      );
+
+      expect(screen.getByRole('heading', { name: 'Why CommitPulse?' })).toBeInTheDocument();
+      expect(screen.getByTestId('child-card')).toBeInTheDocument();
+    });
+  });
+});