test(theme-dracula): add unit tests with WCAG contrast validation for dracula theme

Author: Shikhar-404exe

lib/svg/themes/dracula.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { themes } from '../themes';
+import { generateSVG } from '../generator';
+import type { BadgeParams, ContributionCalendar, StreakStats } from '../../../types';
+import { contrastRatio } from './test-utils';
+
+describe('dracula theme', () => {
+  it('exists as a key in the themes object', () => {
+    expect(themes).toHaveProperty('dracula');
+  });
+
+  it('has valid 6-digit hex color strings (without #) for bg, text, and accent', () => {
+    const hexRegex = /^[0-9a-fA-F]{6}$/;
+
+    expect(themes.dracula.bg).toMatch(hexRegex);
+    expect(themes.dracula.text).toMatch(hexRegex);
+    expect(themes.dracula.accent).toMatch(hexRegex);
+  });
+
+  it('matches the defined dracula color values for the design spec', () => {
+    expect(themes.dracula.bg).toBe('282a36');
+    expect(themes.dracula.text).toBe('f8f8f2');
+    expect(themes.dracula.accent).toBe('bd93f9');
+  });
+
+  it('contains the specific dracula hex colors in generated SVG output', () => {
+    const mockStats: StreakStats = {
+      currentStreak: 5,
+      longestStreak: 10,
+      totalContributions: 100,
+      todayDate: '2024-06-12',
+    };
+    const mockCalendar: ContributionCalendar = {
+      totalContributions: 10,
+      weeks: [
+        {
+          contributionDays: [
+            { contributionCount: 5, date: '2024-06-11' },
+            { contributionCount: 5, date: '2024-06-12' },
+          ],
+        },
+      ],
+    };
+    const draculaParams: BadgeParams = {
+      user: 'testuser',
+      bg: themes.dracula.bg,
+      text: themes.dracula.text,
+      accent: themes.dracula.accent,
+      speed: '8s',
+      scale: 'linear',
+    };
+
+    const svg = generateSVG(mockStats, draculaParams, mockCalendar);
+
+    expect(svg).toContain(`#${themes.dracula.bg}`);
+    expect(svg).toContain(`#${themes.dracula.text}`);
+    expect(svg).toContain(`#${themes.dracula.accent}`);
+  });
+
+  it('provides sufficient WCAG AA contrast between background and text', () => {
+    const ratio = contrastRatio(themes.dracula.bg, themes.dracula.text);
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+});

lib/svg/themes/test-utils.ts

@@ -0,0 +1,30 @@
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const normalized = hex.replace(/^#/, '');
+  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) {
+    throw new Error(
+      `Invalid hex color: "${hex}". Expected 6-digit hex string (with or without #).`
+    );
+  }
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16),
+  };
+}
+
+export function relativeLuminance(hex: string): number {
+  const { r, g, b } = hexToRgb(hex);
+  const [rl, gl, bl] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rl + 0.7152 * gl + 0.0722 * bl;
+}
+
+export function contrastRatio(bg: string, text: string): number {
+  const lBg = relativeLuminance(bg);
+  const lText = relativeLuminance(text);
+  const lighter = Math.max(lBg, lText);
+  const darker = Math.min(lBg, lText);
+  return (lighter + 0.05) / (darker + 0.05);
+}