@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/commands/__tests__/a11y-scoring.test.ts

@@ -0,0 +1,278 @@
+import { describe, it, expect } from 'vitest';
+import { calculateA11yScore, formatGitHub } from '../a11y.js';
+import type { A11ySummary, A11yComponentResult, A11yScore } from '../a11y.js';
+
+function makeSummary(overrides?: Partial<A11ySummary>): A11ySummary {
+  return {
+    totalComponents: 5,
+    accessibleComponents: 5,
+    accessiblePercent: 100,
+    components: [],
+    totalViolations: 0,
+    totalCritical: 0,
+    totalSerious: 0,
+    totalModerate: 0,
+    totalMinor: 0,
+    passed: true,
+    ...overrides,
+  };
+}
+
+function makeComponent(overrides?: Partial<A11yComponentResult>): A11yComponentResult {
+  return {
+    component: 'Button',
+    results: [],
+    status: 'PASS',
+    totalViolations: 0,
+    totalCritical: 0,
+    totalSerious: 0,
+    ...overrides,
+  };
+}
+
+describe('calculateA11yScore', () => {
+  describe('score calculation', () => {
+    it('0 violations → 100', () => {
+      const score = calculateA11yScore(makeSummary());
+      expect(score.score).toBe(100);
+    });
+
+    it('critical violations deduct 10 each', () => {
+      const score = calculateA11yScore(makeSummary({ totalCritical: 3 }));
+      expect(score.score).toBe(70);
+    });
+
+    it('serious violations deduct 5 each', () => {
+      const score = calculateA11yScore(makeSummary({ totalSerious: 4 }));
+      expect(score.score).toBe(80);
+    });
+
+    it('moderate violations deduct 2 each', () => {
+      const score = calculateA11yScore(makeSummary({ totalModerate: 5 }));
+      expect(score.score).toBe(90);
+    });
+
+    it('minor violations deduct 1 each', () => {
+      const score = calculateA11yScore(makeSummary({ totalMinor: 10 }));
+      expect(score.score).toBe(90);
+    });
+
+    it('mixed violations: 2 critical + 3 serious + 5 moderate + 10 minor = 45', () => {
+      const score = calculateA11yScore(makeSummary({
+        totalCritical: 2,
+        totalSerious: 3,
+        totalModerate: 5,
+        totalMinor: 10,
+      }));
+      // 100 - 20 - 15 - 10 - 10 = 45
+      expect(score.score).toBe(45);
+    });
+
+    it('floors at 0 when deductions exceed 100', () => {
+      const score = calculateA11yScore(makeSummary({ totalCritical: 15 }));
+      expect(score.score).toBe(0);
+    });
+  });
+
+  describe('aaPercent', () => {
+    it('all clean components → 100%', () => {
+      const components = [
+        makeComponent({ component: 'Button' }),
+        makeComponent({ component: 'Input' }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaPercent).toBe(100);
+    });
+
+    it('all failing components → 0%', () => {
+      const components = [
+        makeComponent({ component: 'Button', totalCritical: 2, totalSerious: 0 }),
+        makeComponent({ component: 'Input', totalCritical: 0, totalSerious: 1 }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaPercent).toBe(0);
+    });
+
+    it('partial → correct percentage', () => {
+      const components = [
+        makeComponent({ component: 'Button' }), // passes AA
+        makeComponent({ component: 'Input', totalCritical: 1 }), // fails AA
+        makeComponent({ component: 'Card' }), // passes AA
+        makeComponent({ component: 'Dialog', totalSerious: 2 }), // fails AA
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 4,
+        components,
+      }));
+      expect(score.aaPercent).toBe(50); // 2/4
+    });
+
+    it('0 components → 100%', () => {
+      const score = calculateA11yScore(makeSummary({ totalComponents: 0, components: [] }));
+      expect(score.aaPercent).toBe(100);
+    });
+  });
+
+  describe('aaaPercent', () => {
+    it('zero violations → 100%', () => {
+      const components = [
+        makeComponent({ component: 'Button', totalViolations: 0 }),
+        makeComponent({ component: 'Input', totalViolations: 0 }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaaPercent).toBe(100);
+    });
+
+    it('any violations → 0% for affected components', () => {
+      const components = [
+        makeComponent({ component: 'Button', totalViolations: 1 }),
+        makeComponent({ component: 'Input', totalViolations: 0 }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaaPercent).toBe(50);
+    });
+
+    it('all with violations → 0%', () => {
+      const components = [
+        makeComponent({ component: 'Button', totalViolations: 2 }),
+        makeComponent({ component: 'Input', totalViolations: 1 }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaaPercent).toBe(0);
+    });
+
+    it('aaPercent >= aaaPercent', () => {
+      const components = [
+        makeComponent({ component: 'Button', totalViolations: 1, totalCritical: 0, totalSerious: 0 }),
+        makeComponent({ component: 'Input', totalViolations: 0, totalCritical: 0, totalSerious: 0 }),
+      ];
+      const score = calculateA11yScore(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(score.aaPercent).toBeGreaterThanOrEqual(score.aaaPercent);
+    });
+  });
+});
+
+describe('formatGitHub', () => {
+  describe('badges', () => {
+    it('passed=true → "passing" + brightgreen', () => {
+      const output = formatGitHub(makeSummary({ passed: true }));
+      expect(output).toContain('passing');
+      expect(output).toContain('brightgreen');
+    });
+
+    it('passed=false → "failing" + red', () => {
+      const output = formatGitHub(makeSummary({
+        passed: false,
+        totalCritical: 1,
+        components: [makeComponent({ component: 'Button', totalCritical: 1 })],
+      }));
+      expect(output).toContain('failing');
+      expect(output).toContain('-red)');
+    });
+  });
+
+  describe('content', () => {
+    it('includes markdown table header', () => {
+      const output = formatGitHub(makeSummary({
+        components: [makeComponent()],
+      }));
+      expect(output).toContain('| Component |');
+      expect(output).toContain('| Variants |');
+    });
+
+    it('includes component names in table rows', () => {
+      const components = [
+        makeComponent({ component: 'Button' }),
+        makeComponent({ component: 'Dialog' }),
+      ];
+      const output = formatGitHub(makeSummary({
+        totalComponents: 2,
+        components,
+      }));
+      expect(output).toContain('| Button |');
+      expect(output).toContain('| Dialog |');
+    });
+
+    it('includes blocking count when critical + serious > 0', () => {
+      const output = formatGitHub(makeSummary({
+        passed: false,
+        totalCritical: 2,
+        totalSerious: 3,
+        components: [makeComponent({ component: 'Button', totalCritical: 2, totalSerious: 3 })],
+      }));
+      expect(output).toContain('**Blocking:** 5');
+    });
+
+    it('no blocking line when 0 critical + serious', () => {
+      const output = formatGitHub(makeSummary({
+        totalCritical: 0,
+        totalSerious: 0,
+        totalModerate: 2,
+        components: [makeComponent({ component: 'Button', totalViolations: 2 })],
+      }));
+      expect(output).not.toContain('**Blocking:**');
+    });
+  });
+
+  describe('score', () => {
+    it('uses pre-calculated score when present', () => {
+      const preCalc: A11yScore = { score: 42, aaPercent: 50, aaaPercent: 25 };
+      const output = formatGitHub(makeSummary({ score: preCalc }));
+      expect(output).toContain('42/100');
+      expect(output).toContain('50%');
+      expect(output).toContain('25%');
+    });
+
+    it('calculates score when missing', () => {
+      const summary = makeSummary({ totalMinor: 5 });
+      delete summary.score;
+      const output = formatGitHub(summary);
+      // 100 - 5 = 95
+      expect(output).toContain('95/100');
+    });
+  });
+
+  describe('violations', () => {
+    it('summary line includes all 4 severity counts', () => {
+      const output = formatGitHub(makeSummary({
+        totalViolations: 10,
+        totalCritical: 1,
+        totalSerious: 2,
+        totalModerate: 3,
+        totalMinor: 4,
+        components: [makeComponent({ component: 'Button', totalViolations: 10, totalCritical: 1, totalSerious: 2 })],
+      }));
+      expect(output).toContain('1 critical');
+      expect(output).toContain('2 serious');
+      expect(output).toContain('3 moderate');
+      expect(output).toContain('4 minor');
+    });
+
+    it('shows accessible components fraction', () => {
+      const output = formatGitHub(makeSummary({
+        totalComponents: 10,
+        accessibleComponents: 8,
+        accessiblePercent: 80,
+      }));
+      expect(output).toContain('8/10 components accessible');
+    });
+  });
+});