fix(MatchScore): clamp score to avoid invalid array length runtime error

src/components/MatchScore/MatchScore.test.tsx

@@ -43,4 +43,74 @@ describe('MatchScore', () => {
     );
     expect(container.querySelector('.label').textContent).toBe('Some label ');
   });
+
+  test('MatchScore clamps a negative score instead of throwing', () => {
+    const { container } = render(<MatchScore score={-1} total={5} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(0);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('0/5');
+  });
+
+  test('MatchScore clamps a score above total instead of throwing', () => {
+    const { container } = render(<MatchScore score={5.5} total={5} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(5);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('5/5');
+  });
+
+  test('MatchScore treats a NaN score as 0 instead of throwing', () => {
+    const { container } = render(<MatchScore score={NaN} total={5} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(0);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('0/5');
+  });
+
+  test('MatchScore falls back to the default total when total is NaN', () => {
+    const { container } = render(<MatchScore score={3} total={NaN} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(3);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('3/5');
+  });
+
+  test('MatchScore truncates a fractional total instead of throwing', () => {
+    const { container } = render(<MatchScore score={3} total={5.5} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(3);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('3/5');
+  });
+
+  test('MatchScore renders a half circle for a half-point score', () => {
+    const { container } = render(<MatchScore score={2.5} total={5} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(2);
+    expect(container.querySelectorAll('.half').length).toBe(1);
+    expect(container.querySelector('.label').textContent).toContain('3/5');
+  });
+
+  test('MatchScore defaults total to 5 when omitted', () => {
+    const { container } = render(<MatchScore score={3} />);
+    expect(container.querySelectorAll('.match-score-circle').length).toBe(5);
+    expect(container.querySelectorAll('.full').length).toBe(3);
+    expect(container.querySelectorAll('.half').length).toBe(0);
+    expect(container.querySelector('.label').textContent).toContain('3/5');
+  });
+
+  test('MatchScore applies an explicit theme when noThemeContext is set', () => {
+    const { container } = render(
+      <MatchScore
+        score={3}
+        total={5}
+        theme={'blue'}
+        configContextProps={{ noThemeContext: true }}
+      />
+    );
+    expect(
+      container.querySelector('.match-score-container').classList
+    ).toContain('theme');
+  });
 });

src/components/MatchScore/MatchScore.tsx

@@ -13,6 +13,9 @@ import { mergeClasses } from '../../shared/utilities';
 import styles from './matchScore.module.scss';
 import themedComponentStyles from './matchScore.theme.module.scss';
 
+const DEFAULT_SCORE = 0;
+const DEFAULT_TOTAL = 5;
+
 export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
   (
     {
@@ -24,10 +27,10 @@ export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
       hideLabel = false,
       hideValues = false,
       label,
-      score = 0,
+      score = DEFAULT_SCORE,
       theme,
       themeContainerId,
-      total = 5,
+      total = DEFAULT_TOTAL,
       ...rest
     },
     ref: Ref<HTMLDivElement>
@@ -39,13 +42,18 @@ export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
       ? theme
       : contextualTheme || theme;
 
-    const absTotal: number = Math.abs(total);
-    const absScore: number = Math.round(score);
-    const fullCircles: number = Math.trunc(Math.round(score * 2.0) / 2.0);
+    const safeTotal: number = Number.isFinite(total) ? total : DEFAULT_TOTAL;
+    const absTotal: number = Math.trunc(Math.abs(safeTotal));
+    const safeScore: number = Number.isFinite(score) ? score : DEFAULT_SCORE;
+    const clampedScore: number = Math.max(0, Math.min(safeScore, absTotal));
+    const displayScore: number = Math.round(clampedScore);
+    const fullCircles: number = Math.trunc(
+      Math.round(clampedScore * 2.0) / 2.0
+    );
     const halfCircle: number = Math.trunc(
-      Math.ceil(score - fullCircles - 0.25)
+      Math.ceil(clampedScore - fullCircles - 0.25)
     );
-    const emptyCircles: number = total - fullCircles - halfCircle;
+    const emptyCircles: number = absTotal - fullCircles - halfCircle;
     const matchScoreLabelClasses: string = mergeClasses(styles.label);
 
     return (
@@ -81,7 +89,7 @@ export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
 
           {!hideLabel && (
             <p className={matchScoreLabelClasses}>
-              {label} {!hideValues && absScore + '/' + absTotal}
+              {label} {!hideValues && displayScore + '/' + absTotal}
             </p>
           )}
         </Atom>