🐛 fix(tests): tighten ComplianceScoreBreakdownModal test scoping (kubestellar#7908) (kubestellar#7909)

Two Copilot review comments on merged PR kubestellar#7905:

1. **Line 400** — `getAllByText('Kubescape').length >= 2` / `getAllByText('Kyverno').length >= 2`
   are too loose. Any extra rendering of those names anywhere in the modal
   would satisfy the assertion, and the check doesn't actually verify the
   per-tool bars exist. Replaced with a scoped lookup via the "By tool"
   heading: grab the section container and use `within(section).getByText(...)`
   so the assertion only accepts matches inside the per-tool list.

2. **Line 512** — `getByText('100')` is a broad assertion; any element rendering
   "100" anywhere (score %, count, label) would pass. Replaced with a
   value-label pairing check: locate the "Total Checks" label, walk up to
   its StatBox parent, and assert "100" appears inside that StatBox.

Added `within` to the @testing-library/react import.

All 12 tests in the file continue to pass locally; `npm run build` green.

Fixes kubestellar#7908

Signed-off-by: Andy Anderson <andy@clubanderson.com>

Author: clubanderson

web/src/components/cards/ComplianceCards.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen} from '@testing-library/react'
+import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ComplianceScore } from './ComplianceCards'
 import { ComplianceScoreBreakdownModal } from './compliance/ComplianceScoreBreakdownModal'
@@ -394,11 +394,15 @@ describe('ComplianceScoreBreakdownModal', () => {
     expect(tabs[1]).toHaveTextContent('82%')
     expect(tabs[2]).toHaveTextContent('78%')
 
-    // Overview tab content: per-tool bars. "Kubescape" and "Kyverno" each appear
-    // twice now — once as the tab label and once in the per-tool bar list — so
-    // use getAllByText.
-    expect(screen.getAllByText('Kubescape').length).toBeGreaterThanOrEqual(2)
-    expect(screen.getAllByText('Kyverno').length).toBeGreaterThanOrEqual(2)
+    // Overview tab content: per-tool bars. Scope the assertion to the "By tool"
+    // section so it survives refactors that change other parts of the modal
+    // (#7908 — Copilot review on #7905 flagged the prior getAllByText as too
+    // broad). The `<h4>By tool</h4>` heading sits next to the bar list inside
+    // the same parent container.
+    const byToolHeading = screen.getByText('By tool')
+    const byToolSection = byToolHeading.parentElement!
+    expect(within(byToolSection).getByText('Kubescape')).toBeInTheDocument()
+    expect(within(byToolSection).getByText('Kyverno')).toBeInTheDocument()
   })
 
   it('renders Kubescape tab with controls stats and framework scores', async () => {
@@ -508,9 +512,13 @@ describe('ComplianceScoreBreakdownModal', () => {
     expect(tabs[1]).toHaveTextContent('Kubescape')
 
     // Overview tab is active by default — it shows aggregate stats derived
-    // from kubescapeData (100 controls / 82 passed / 18 failed).
-    expect(screen.getByText('Total Checks')).toBeInTheDocument()
-    expect(screen.getByText('100')).toBeInTheDocument()
+    // from kubescapeData (100 controls / 82 passed / 18 failed). Assert the
+    // value-label pairing inside the Total Checks StatBox rather than a bare
+    // `getByText('100')` (#7908 — Copilot review on #7905 flagged the bare
+    // match as too broad; many elements could render "100").
+    const totalChecksLabel = screen.getByText('Total Checks')
+    const totalChecksStatBox = totalChecksLabel.parentElement!
+    expect(within(totalChecksStatBox).getByText('100')).toBeInTheDocument()
   })
 
   it('does not render anything when isOpen is false', () => {