Failing tests for rolling findings up per package and image

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/e2e/vuln-groups.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect, type Page } from '@playwright/test'
+
+async function scan(page: Page) {
+  await page.goto('/login')
+  await page.getByLabel('Email').fill('admin@example.com')
+  await page.getByLabel('Password').fill('admin-password-123')
+  await page.getByRole('button', { name: 'Sign in' }).click()
+  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible()
+  await page.goto('/vulnerabilities')
+  await page.getByRole('button', { name: 'Scan now' }).click()
+  await expect(page.getByTestId('scope-host-critical')).not.toHaveText('0', { timeout: 20_000 })
+}
+
+test('packages and images are one row each and expand to their CVEs', async ({ page }) => {
+  await scan(page)
+
+  // host: a row per package, no CVE ids until a row is opened
+  const zlib = page.getByRole('row', { name: /^zlib1g/ })
+  await expect(zlib).toBeVisible()
+  await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toHaveCount(0)
+
+  await zlib.click()
+  await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toBeVisible()
+  await expect(zlib).toHaveAttribute('aria-expanded', 'true')
+  await zlib.click()
+  await expect(page.getByRole('row', { name: /CVE-2023-45853/ })).toHaveCount(0)
+
+  // containers: a row per image that expands to the CVEs of that image
+  await page.getByTestId('scope-container').click()
+  const image = page.getByRole('row', { name: /gitea\/gitea/ }).first()
+  await expect(image).toBeVisible()
+  await expect(page.getByRole('row', { name: /CVE-2024-24790/ })).toHaveCount(0)
+  await image.click()
+  await expect(page.getByRole('row', { name: /CVE-2024-24790/ })).toBeVisible()
+})

frontend/src/api/types.ts

@@ -151,6 +151,17 @@ export interface Finding {
   last_seen: string
 }
 
+export interface FindingGroup {
+  key: string
+  kind: 'os' | 'image'
+  source: string
+  installed: string
+  counts: SeverityCounts
+  total: number
+  fixable: number
+  packages: number
+}
+
 export interface TargetSummary {
   target: string
   kind: 'os' | 'image'

frontend/src/components/FindingGroups.test.ts

@@ -0,0 +1,105 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import FindingGroups from './FindingGroups.vue'
+import type { Finding, FindingGroup } from '../api/types'
+
+const group = (over: Partial<FindingGroup>): FindingGroup => ({
+  key: 'openssl',
+  kind: 'os',
+  source: 'debian',
+  installed: '3.0.15',
+  counts: { critical: 1, high: 2, medium: 0, low: 3, unknown: 0 },
+  total: 6,
+  fixable: 4,
+  packages: 1,
+  ...over,
+})
+
+const finding = (cve: string): Finding => ({
+  id: cve,
+  target_kind: 'os',
+  target: 'os',
+  source: 'debian',
+  cve_id: cve,
+  severity: 'critical',
+  package: 'openssl',
+  installed_version: '3.0.15',
+  fixed_version: '3.0.16',
+  title: 'a flaw',
+  url: 'https://x',
+  status: 'open',
+  first_seen: '2026-09-01T00:00:00Z',
+  last_seen: '2026-09-02T00:00:00Z',
+})
+
+const groups = [
+  group({}),
+  group({
+    key: 'stdlib',
+    source: 'gobinary',
+    total: 2,
+    counts: { critical: 0, high: 2, medium: 0, low: 0, unknown: 0 },
+  }),
+]
+
+describe('FindingGroups', () => {
+  it('shows one row per package with its severity split, not one per CVE', () => {
+    const w = mount(FindingGroups, {
+      props: { groups, scope: 'host', canAct: true, load: vi.fn() },
+    })
+    const rows = w.findAll('tbody tr')
+    expect(rows).toHaveLength(2)
+    expect(rows[0].text()).toContain('openssl')
+    expect(rows[0].text()).toContain('debian')
+    expect(rows[0].text()).toContain('3.0.15')
+    expect(rows[0].text()).toContain('6')
+    expect(rows[0].text()).toContain('4 fixable')
+    expect(w.text()).not.toContain('CVE-')
+  })
+
+  it('shows the image and the number of affected packages for containers', () => {
+    const images = [
+      group({
+        key: 'gitea/gitea:1.22',
+        kind: 'image',
+        source: '',
+        installed: '',
+        packages: 12,
+        total: 40,
+      }),
+    ]
+    const w = mount(FindingGroups, {
+      props: { groups: images, scope: 'container', canAct: true, load: vi.fn() },
+    })
+    const row = w.findAll('tbody tr')[0]
+    expect(row.text()).toContain('gitea/gitea:1.22')
+    expect(row.text()).toContain('12 packages')
+  })
+
+  it('loads and shows the CVEs of a group when its row is clicked, and collapses again', async () => {
+    const load = vi.fn().mockResolvedValue([finding('CVE-2024-1'), finding('CVE-2024-2')])
+    const w = mount(FindingGroups, { props: { groups, scope: 'host', canAct: true, load } })
+    expect(w.text()).not.toContain('CVE-2024-1')
+
+    await w.findAll('tbody tr')[0].trigger('click')
+    await flushPromises()
+    expect(load).toHaveBeenCalledWith(groups[0])
+    expect(w.text()).toContain('CVE-2024-1')
+    expect(w.text()).toContain('CVE-2024-2')
+    expect(w.findAll('tbody tr')[0].attributes('aria-expanded')).toBe('true')
+
+    await w.findAll('tbody tr')[0].trigger('click')
+    expect(w.text()).not.toContain('CVE-2024-1')
+    // a second expansion reuses what was loaded
+    await w.findAll('tbody tr')[0].trigger('click')
+    await flushPromises()
+    expect(load).toHaveBeenCalledTimes(1)
+  })
+
+  it('reports an empty group instead of an endless spinner', async () => {
+    const load = vi.fn().mockResolvedValue([])
+    const w = mount(FindingGroups, { props: { groups, scope: 'host', canAct: true, load } })
+    await w.findAll('tbody tr')[0].trigger('click')
+    await flushPromises()
+    expect(w.text()).toContain('No findings')
+  })
+})