test(ui): add responsive rendering coverage for InteractiveViewer

Author: VirenSumbly

components/InteractiveViewer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import InteractiveViewer, { formatDate } from './InteractiveViewer';
 
 // getBoundingClientRect is not implemented in jsdom — mock it so mouse-position
@@ -553,4 +553,51 @@ describe('InteractiveViewer', () => {
     expect(glow.style.left).toBe('75%');
     expect(glow.style.top).toBe('25%');
   });
+
+  describe('InteractiveViewer responsive rendering', () => {
+    afterEach(() => {
+      window.innerWidth = 1024;
+      window.innerHeight = 768;
+    });
+
+    const resizeWindow = (width: number, height: number) => {
+      window.innerWidth = width;
+      window.innerHeight = height;
+
+      window.dispatchEvent(new Event('resize'));
+    };
+
+    it('renders correctly on mobile viewport', () => {
+      resizeWindow(375, 667);
+
+      render(
+        <InteractiveViewer>
+          <div data-testid="mobile-content">Mobile Content</div>
+        </InteractiveViewer>
+      );
+
+      expect(screen.getByTestId('mobile-content')).toBeTruthy();
+      expect(screen.getByTestId('parallax-bg-layer')).toBeTruthy();
+    });
+
+    it('renders correctly on desktop viewport with pointer interactions', () => {
+      resizeWindow(1440, 900);
+
+      render(
+        <InteractiveViewer>
+          <div data-testid="desktop-content">Desktop Content</div>
+        </InteractiveViewer>
+      );
+
+      const glowLayer = screen.getByTestId('parallax-cursor-glow');
+
+      fireEvent.pointerMove(glowLayer, {
+        clientX: 100,
+        clientY: 100,
+      });
+
+      expect(screen.getByTestId('desktop-content')).toBeTruthy();
+      expect(glowLayer).toBeTruthy();
+    });
+  });
 });