novalon-website/src/lib/color-contrast.test.ts

import {
  calculateContrastRatio,
  meetsWCAGStandard,
} from './color-contrast';

describe('color-contrast', () => {
  describe('calculateContrastRatio', () => {
    it('should calculate contrast ratio for black on white', () => {
      const ratio = calculateContrastRatio('#000000', '#FFFFFF');
      expect(ratio).toBeCloseTo(21, 0);
    });

    it('should calculate contrast ratio for white on black', () => {
      const ratio = calculateContrastRatio('#FFFFFF', '#000000');
      expect(ratio).toBeCloseTo(21, 0);
    });

    it('should calculate contrast ratio for gray on white', () => {
      const ratio = calculateContrastRatio('#666666', '#FFFFFF');
      expect(ratio).toBeGreaterThan(4);
      expect(ratio).toBeLessThan(6);
    });

    it('should calculate contrast ratio for dark blue on white', () => {
      const ratio = calculateContrastRatio('#00008B', '#FFFFFF');
      expect(ratio).toBeGreaterThan(8);
    });

    it('should calculate contrast ratio for same colors', () => {
      const ratio = calculateContrastRatio('#FF0000', '#FF0000');
      expect(ratio).toBe(1);
    });

    it('should handle lowercase hex', () => {
      const ratio1 = calculateContrastRatio('#000000', '#FFFFFF');
      const ratio2 = calculateContrastRatio('#000000', '#ffffff');
      expect(ratio1).toBe(ratio2);
    });
  });

  describe('meetsWCAGStandard', () => {
    describe('AA level - normal text', () => {
      it('should pass for black on white', () => {
        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA', 'normal');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(4.5);
      });

      it('should fail for light gray on white', () => {
        const result = meetsWCAGStandard('#CCCCCC', '#FFFFFF', 'AA', 'normal');
        expect(result.passes).toBe(false);
        expect(result.requiredRatio).toBe(4.5);
      });

      it('should pass for dark blue on white', () => {
        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AA', 'normal');
        expect(result.passes).toBe(true);
      });
    });

    describe('AA level - large text', () => {
      it('should pass for gray on white', () => {
        const result = meetsWCAGStandard('#666666', '#FFFFFF', 'AA', 'large');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(3);
      });

      it('should fail for light gray on white', () => {
        const result = meetsWCAGStandard('#CCCCCC', '#FFFFFF', 'AA', 'large');
        expect(result.passes).toBe(false);
        expect(result.requiredRatio).toBe(3);
      });
    });

    describe('AAA level - normal text', () => {
      it('should pass for black on white', () => {
        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AAA', 'normal');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(7);
      });

      it('should pass for dark blue on white', () => {
        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AAA', 'normal');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(7);
      });
    });

    describe('AAA level - large text', () => {
      it('should pass for dark blue on white', () => {
        const result = meetsWCAGStandard('#00008B', '#FFFFFF', 'AAA', 'large');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(4.5);
      });

      it('should pass for gray on white', () => {
        const result = meetsWCAGStandard('#666666', '#FFFFFF', 'AAA', 'large');
        expect(result.passes).toBe(true);
        expect(result.requiredRatio).toBe(4.5);
      });
    });

    describe('default parameters', () => {
      it('should default to AA level', () => {
        const result = meetsWCAGStandard('#000000', '#FFFFFF');
        expect(result.requiredRatio).toBe(4.5);
      });

      it('should default to normal text size', () => {
        const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA');
        expect(result.requiredRatio).toBe(4.5);
      });
    });

    describe('result structure', () => {
      it('should return result with all required properties', () => {
        const result = meetsWCAGStandard('#000000', '#FFFFFF');
        expect(result).toHaveProperty('passes');
        expect(result).toHaveProperty('ratio');
        expect(result).toHaveProperty('requiredRatio');
        expect(typeof result.passes).toBe('boolean');
        expect(typeof result.ratio).toBe('number');
        expect(typeof result.requiredRatio).toBe('number');
      });
    });
  });
});