test(customize): add ControlsPanel component tests (JhaSourav07#1924)

* test(customize): add ControlsPanel component tests

* fix(customize): use valid default font

* chore: sync package-lock.json

* test(customize): update tests for font query parameter

Author: Shikhartiwari967

app/customize/components/ControlsPanel.test.tsx

@@ -1,21 +1,22 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { ComponentProps } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import type { Scale, BadgeSize, Font, ViewMode, DeltaFormat, Language, Timezone } from '../types';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ControlsPanel } from './ControlsPanel';
-import type { BadgeSize, DeltaFormat, Font, Language, Scale, Timezone, ViewMode } from '../types';
 
 const defaultProps = {
-  username: 'octocat',
-  theme: 'dark',
+  username: '',
+  theme: 'github-dark',
   bgHex: '',
   accentHex: '',
   textHex: '',
   scale: 'linear' as Scale,
   speed: '8s',
   font: '' as Font,
-  year: '',
+  year: '2025',
   radius: 8,
   size: 'medium' as BadgeSize,
+
   onUsernameChange: vi.fn(),
   onThemeChange: vi.fn(),
   onBgHexChange: vi.fn(),
@@ -28,43 +29,94 @@ const defaultProps = {
   onSizeChange: vi.fn(),
   onClearOverrides: vi.fn(),
   onRadiusChange: vi.fn(),
+
   hideTitle: false,
   hideBackground: false,
   hideStats: false,
+
   viewMode: 'default' as ViewMode,
   deltaFormat: 'percent' as DeltaFormat,
-  badgeWidth: '' as const,
-  badgeHeight: '' as const,
+
+  badgeWidth: 0,
+  badgeHeight: 0,
+
   grace: 1,
+
   language: 'en' as Language,
   timezone: 'UTC' as Timezone,
+
   onHideTitleChange: vi.fn(),
   onHideBackgroundChange: vi.fn(),
   onHideStatsChange: vi.fn(),
+
   onViewModeChange: vi.fn(),
   onDeltaFormatChange: vi.fn(),
+
   onBadgeWidthChange: vi.fn(),
   onBadgeHeightChange: vi.fn(),
+
   onGraceChange: vi.fn(),
+
   onLanguageChange: vi.fn(),
   onTimezoneChange: vi.fn(),
-} satisfies ComponentProps<typeof ControlsPanel>;
+};
+describe('ControlsPanel Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
 
-describe('ControlsPanel timezone control', () => {
-  it('renders UTC as the default timezone option', () => {
+  it('renders the GitHub Username label', () => {
     render(<ControlsPanel {...defaultProps} />);
 
-    expect((screen.getByLabelText('Timezone') as HTMLSelectElement).value).toBe('UTC');
+    expect(screen.getByText(/GitHub Username/i)).toBeTruthy();
   });
 
-  it('calls onTimezoneChange with the selected IANA timezone', () => {
-    const onTimezoneChange = vi.fn();
-    render(<ControlsPanel {...defaultProps} onTimezoneChange={onTimezoneChange} />);
+  it('renders username input with correct id', () => {
+    render(<ControlsPanel {...defaultProps} />);
+    const input = document.getElementById('username-input');
+
+    expect(input).toHaveAttribute('id', 'username-input');
+  });
+
+  it('calls onUsernameChange when typing', () => {
+    render(<ControlsPanel {...defaultProps} />);
+
+    const input = document.getElementById('username-input');
 
-    fireEvent.change(screen.getByLabelText('Timezone'), {
-      target: { value: 'Asia/Kolkata' },
+    fireEvent.change(input!, {
+      target: { value: 'shikhar' },
     });
 
-    expect(onTimezoneChange).toHaveBeenCalledWith('Asia/Kolkata');
+    expect(defaultProps.onUsernameChange).toHaveBeenCalled();
+  });
+
+  it('renders Linear and Logarithmic buttons', () => {
+    render(<ControlsPanel {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: /Linear/i })).toBeTruthy();
+
+    expect(screen.getByRole('button', { name: /Logarithmic/i })).toBeTruthy();
+  });
+
+  it('calls onScaleChange with log', () => {
+    render(<ControlsPanel {...defaultProps} />);
+
+    const logButton = screen.getByText(/Logarithmic/i);
+
+    fireEvent.click(logButton);
+
+    expect(defaultProps.onScaleChange).toHaveBeenCalledWith('log');
+  });
+
+  it('hides Clear overrides button initially', () => {
+    render(<ControlsPanel {...defaultProps} />);
+
+    expect(screen.queryByText(/Clear overrides/i)).toBeNull();
+  });
+
+  it('shows Clear overrides button when bgHex is provided', () => {
+    render(<ControlsPanel {...defaultProps} bgHex="#000000" />);
+
+    expect(screen.getByText(/Clear overrides/i)).toBeTruthy();
   });
 });

app/customize/page.tsx

@@ -29,7 +29,7 @@ export default function CustomizePage(): ReactElement {
   const [textHex, setTextHex] = useState('');
   const [scale, setScale] = useState<Scale>('linear');
   const [speed, setSpeed] = useState('8s');
-  const [font, setFont] = useState<Font>('');
+  const [font, setFont] = useState<Font>('Inter');
   const [year, setYear] = useState('');
   const [radius, setRadius] = useState(8);
   const [size, setSize] = useState<BadgeSize>('medium');

app/customize/types.ts

@@ -28,7 +28,7 @@ export const SIZES = [
 ] as const;
 
 export const FONTS = [
-  { value: '', label: 'Default' },
+  { value: 'Inter', label: 'Default' },
   { value: 'jetbrains', label: 'JetBrains Mono' },
   { value: 'fira', label: 'Fira Code' },
   { value: 'roboto', label: 'Roboto' },

app/customize/utils.test.ts

@@ -111,7 +111,7 @@ describe('Export Snippet utilities', () => {
       textHex: '',
       scale: 'linear',
       speed: '8s',
-      font: '',
+      font: 'Inter',
       year: '',
       radius: 8,
       size: 'medium',
@@ -129,13 +129,13 @@ describe('Export Snippet utilities', () => {
 
     it('returns minimal params with default values', () => {
       const result = buildQueryParams(defaultOptions);
-      expect(result).toBe('user=testuser&theme=dark');
+      expect(result).toBe('user=testuser&theme=dark&font=Inter');
     });
 
     it('applies custom theme values', () => {
       const options = { ...defaultOptions, theme: 'light' };
       const result = buildQueryParams(options);
-      expect(result).toBe('user=testuser&theme=light');
+      expect(result).toBe('user=testuser&theme=light&font=Inter');
     });
 
     it('applies custom color overrides and omits theme', () => {
@@ -147,7 +147,7 @@ describe('Export Snippet utilities', () => {
         textHex: '#000000',
       };
       const result = buildQueryParams(options);
-      expect(result).toBe('user=testuser&bg=ffffff&accent=ff0000&text=000000');
+      expect(result).toBe('user=testuser&bg=ffffff&accent=ff0000&text=000000&font=Inter');
     });
 
     it('forces theme parameter and ignores custom colors for virtual themes (auto/random)', () => {
@@ -157,21 +157,21 @@ describe('Export Snippet utilities', () => {
         bgHex: 'ffffff',
       };
       const resultAuto = buildQueryParams(optionsAuto);
-      expect(resultAuto).toBe('user=testuser&theme=auto');
+      expect(resultAuto).toBe('user=testuser&theme=auto&font=Inter');
 
       const optionsRandom = {
         ...defaultOptions,
         theme: 'random',
         accentHex: 'ff0000',
       };
       const resultRandom = buildQueryParams(optionsRandom);
-      expect(resultRandom).toBe('user=testuser&theme=random');
+      expect(resultRandom).toBe('user=testuser&theme=random&font=Inter');
     });
 
     it('handles empty username gracefully', () => {
       const options = { ...defaultOptions, username: '   ' };
       const result = buildQueryParams(options);
-      expect(result).toBe('theme=dark');
+      expect(result).toBe('theme=dark&font=Inter');
     });
 
     it('includes all customized options', () => {