@countermeasure-platform/web-components 1.3.5-dev.36.1 → 1.3.6-dev.37.1

package/src/layout/core-app-library-dashboard.test.ts

@@ -0,0 +1,397 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  mountCoreAppLibraryDashboard,
+  mountCoreAppLibraryDashboardFromDom,
+} from './core-app-library-dashboard'
+
+describe('core app library dashboard', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('mounts an empty real-data Threat Library dashboard surface by default', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const mounted = mountCoreAppLibraryDashboard({ container })
+
+    expect(container.querySelector('.cmm-library-dashboard')).toBe(mounted.element)
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Library Dashboard'
+    )
+    expect(container.querySelector('.cmm-library-chart--depth')?.textContent).toContain(
+      'Detection Depth by Tactic'
+    )
+    expect(container.querySelector('.cmm-library-chart--freshness')?.textContent).toContain(
+      'Content Freshness (30d)'
+    )
+    expect(container.querySelectorAll('.cmm-library-metric')).toHaveLength(0)
+    expect(container.querySelectorAll('.cmm-library-pipeline-card')).toHaveLength(0)
+    expect(container.querySelector('.cmm-library-dashboard__empty')?.textContent).toContain(
+      'No metrics available'
+    )
+
+    mounted.destroy()
+    expect(container.querySelector('.cmm-library-dashboard')).toBeNull()
+  })
+
+  it('updates with caller-provided native data', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const mounted = mountCoreAppLibraryDashboard({
+      container,
+      data: {
+        title: 'Native Library',
+        metrics: [
+          {
+            id: 'detections',
+            label: 'Detections',
+            value: 42,
+            helper: 'Native source',
+            tone: 'cyan',
+          },
+        ],
+        connectors: [],
+        pipelineSummary: { connectors: 0, active: 0, error: 0 },
+      },
+    })
+
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Native Library'
+    )
+    expect(container.querySelector('.cmm-library-metric__value')?.textContent).toBe('42')
+    expect(container.querySelectorAll('.cmm-library-pipeline-card')).toHaveLength(0)
+
+    mounted.update({
+      title: 'Updated Library',
+      metrics: [{ id: 'actors', label: 'Actors', value: '9', tone: 'orange' }],
+    })
+
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Updated Library'
+    )
+    expect(container.querySelector('.cmm-library-metric__label')?.textContent).toBe('Actors')
+  })
+
+  it('renders real API charts, connector statuses, and partial dashboard metadata', () => {
+    const container = document.createElement('div')
+    container.innerHTML = '<p class="existing-node">Keep me</p>'
+    document.body.appendChild(container)
+
+    mountCoreAppLibraryDashboard({
+      container,
+      className: 'extra-shell  release-candidate',
+      clearContainer: false,
+      data: {
+        title: 'Real Library',
+        subtitle: 'Live dashboard data',
+        generatedAt: '2026-06-20T15:00:00Z',
+        errors: [
+          { source: 'cti', detail: 'Threat actor feed unavailable' },
+          { detail: 'Rules freshness partially unavailable' },
+        ],
+        metrics: [
+          {
+            id: 'detections',
+            label: 'Total Detections',
+            value: 12109,
+            helper: 'Across all sources',
+            tone: 'cyan',
+          },
+          { id: 'actors', label: 'Threat Actors', value: '990', tone: 'orange' },
+        ],
+        tacticDepth: [
+          { label: 'Execution', value: 450 },
+          { label: 'Impact', value: 0 },
+        ],
+        freshness: [
+          { label: 'May 21', detections: 5, rules: 2, intel: 1 },
+          { label: '', detections: 0 },
+        ],
+        pipelineSummary: { connectors: 4, active: 1, error: 1 },
+        connectors: [
+          {
+            id: 'active',
+            name: 'Chronicle YARA-L',
+            status: 'active',
+            schedule: 'Daily 2:30',
+            tags: ['YARA-L Rules'],
+            lastRun: 'Last run 2026-06-20 15:00',
+          },
+          {
+            id: 'error',
+            name: 'Sigma Community',
+            status: 'error',
+            schedule: 'Daily 2:30',
+            tags: ['Sigma Rules'],
+            lastRun: 'Last run failed',
+          },
+          {
+            id: 'paused',
+            name: 'MISP Galaxy',
+            status: 'paused',
+            schedule: 'Daily 0:00',
+            tags: [],
+            lastRun: 'Last run 2026-06-19 10:00',
+          },
+          {
+            id: 'disabled',
+            name: 'MITRE ATT&CK',
+            status: 'disabled',
+            schedule: 'Manual',
+            tags: ['ATT&CK'],
+            lastRun: 'Never run',
+            enabled: false,
+          },
+        ],
+      },
+    })
+
+    expect(container.querySelector('.existing-node')).not.toBeNull()
+    expect(
+      container.querySelector('.cmm-library-dashboard')?.classList.contains('extra-shell')
+    ).toBe(true)
+    expect(
+      container.querySelector('.cmm-library-dashboard')?.classList.contains('release-candidate')
+    ).toBe(true)
+    expect(container.querySelector('.cmm-library-dashboard__subtitle')?.textContent).toBe(
+      'Live dashboard data'
+    )
+    expect(container.querySelector('.cmm-library-dashboard__timestamp')?.textContent).toBe(
+      'Updated 2026-06-20T15:00:00Z'
+    )
+    expect(
+      Array.from(container.querySelectorAll('.cmm-library-dashboard__warning')).map(
+        node => node.textContent
+      )
+    ).toEqual(['cti: Threat actor feed unavailable', 'Rules freshness partially unavailable'])
+    expect(container.querySelector('[data-metric-id="detections"]')?.textContent).toContain(
+      '12,109'
+    )
+    expect(container.querySelector('.cmm-library-depth__bar')?.getAttribute('aria-label')).toBe(
+      'Execution: 450'
+    )
+    expect(container.querySelectorAll('.cmm-library-freshness__bucket')).toHaveLength(2)
+    expect(container.querySelectorAll('.cmm-library-freshness__label')).toHaveLength(1)
+    expect(
+      Array.from(container.querySelectorAll('.cmm-library-pipeline-card')).map(card => [
+        (card as HTMLElement).dataset.status,
+        card.querySelector('.cmm-library-pipeline-card__badge')?.getAttribute('data-tone'),
+      ])
+    ).toEqual([
+      ['active', 'success'],
+      ['error', 'error'],
+      ['paused', 'warn'],
+      ['disabled', 'neutral'],
+    ])
+    expect(container.querySelector('.cmm-library-dashboard__pipeline-summary')?.textContent).toBe(
+      '4 connectors1 active1 error'
+    )
+    expect(
+      container.querySelector('.cmm-library-pipeline-card[data-status="disabled"]')?.textContent
+    ).toContain('Disabled')
+  })
+
+  it('renders chart scales with unique integer ticks for small real-data ranges', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    mountCoreAppLibraryDashboard({
+      container,
+      data: {
+        tacticDepth: [
+          { label: 'Execution', value: 2 },
+          { label: 'Impact', value: 1 },
+          { label: 'Resource', value: 0 },
+        ],
+        freshness: [
+          { label: 'Day 1', detections: 2, rules: 1, intel: 1 },
+          { label: 'Day 2', detections: 1, rules: 1 },
+          { label: 'Day 3', detections: 0 },
+        ],
+      },
+    })
+
+    const depthAxis = Array.from(container.querySelectorAll('.cmm-library-depth__axis span')).map(
+      node => node.textContent
+    )
+    expect(depthAxis).toEqual(['0', '1', '2'])
+    expect(new Set(depthAxis).size).toBe(depthAxis.length)
+    expect(
+      Array.from(container.querySelectorAll<HTMLElement>('.cmm-library-depth__bar')).map(
+        bar => bar.style.width
+      )
+    ).toEqual(['100%', '50%', '4%'])
+
+    const freshnessAxis = Array.from(
+      container.querySelectorAll('.cmm-library-freshness__axis span')
+    ).map(node => node.textContent)
+    expect(freshnessAxis).toEqual(['4', '3', '2', '1', '0'])
+    expect(new Set(freshnessAxis).size).toBe(freshnessAxis.length)
+    expect(
+      Array.from(container.querySelectorAll<HTMLElement>('.cmm-library-freshness__stack')).map(
+        stack => stack.style.height
+      )
+    ).toEqual(['100%', '50%', '8%'])
+    expect(
+      container
+        .querySelector<HTMLElement>('.cmm-library-freshness__stack')
+        ?.getAttribute('aria-label')
+    ).toBe('Day 1: 4')
+  })
+
+  it('uses unique stable title ids for multiple dashboard instances', () => {
+    const firstContainer = document.createElement('div')
+    const secondContainer = document.createElement('div')
+    document.body.append(firstContainer, secondContainer)
+
+    const first = mountCoreAppLibraryDashboard({
+      container: firstContainer,
+      data: { title: 'First Library' },
+    })
+    const second = mountCoreAppLibraryDashboard({
+      container: secondContainer,
+      data: { title: 'Second Library' },
+    })
+
+    const firstTitle = first.element.querySelector<HTMLElement>('.cmm-library-dashboard__title')
+    const secondTitle = second.element.querySelector<HTMLElement>('.cmm-library-dashboard__title')
+
+    expect(first.element.getAttribute('aria-labelledby')).toBe(firstTitle?.id)
+    expect(second.element.getAttribute('aria-labelledby')).toBe(secondTitle?.id)
+    expect(firstTitle?.id).not.toBe(secondTitle?.id)
+
+    const originalFirstTitleId = firstTitle?.id
+    first.update({ title: 'Updated First Library' })
+
+    expect(first.element.getAttribute('aria-labelledby')).toBe(originalFirstTitleId)
+    expect(first.element.querySelector<HTMLElement>('.cmm-library-dashboard__title')?.id).toBe(
+      originalFirstTitleId
+    )
+  })
+
+  it('renders collection pipeline cards with status, schedule, tags, and enabled state', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    mountCoreAppLibraryDashboard({
+      container,
+      data: {
+        pipelineSummary: { connectors: 1, active: 1, error: 0 },
+        connectors: [
+          {
+            id: 'yara',
+            name: 'YARA Community',
+            status: 'active',
+            schedule: 'Daily 2:30',
+            tags: ['YARA Rules', 'Community'],
+            lastRun: 'Last run 2026-06-20 12:00',
+          },
+        ],
+      },
+    })
+
+    const card = container.querySelector<HTMLElement>('.cmm-library-pipeline-card')
+    expect(container.querySelector('.cmm-library-dashboard__pipeline-summary')?.textContent).toBe(
+      '1 connectors1 active0 error'
+    )
+    expect(card?.dataset.status).toBe('active')
+    expect(card?.querySelector('.cmm-library-pipeline-card__badge')?.textContent).toBe('Active')
+    expect(card?.textContent).toContain('Daily 2:30')
+    expect(card?.textContent).toContain('YARA Rules')
+    expect(card?.textContent).toContain('Community')
+    expect(card?.textContent).toContain('Enabled')
+  })
+
+  it('renders loading and error states without demo data', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const mounted = mountCoreAppLibraryDashboard({
+      container,
+      data: { loading: true },
+    })
+
+    expect(container.querySelector('.cmm-library-dashboard__state')?.textContent).toContain(
+      'Loading library dashboard'
+    )
+    expect(container.querySelectorAll('.cmm-library-metric')).toHaveLength(0)
+
+    mounted.update({ error: 'Dashboard API returned 500' })
+
+    expect(container.querySelector('.cmm-library-dashboard__state')?.textContent).toContain(
+      'Unable to load dashboard'
+    )
+    expect(container.querySelector('.cmm-library-dashboard__state')?.textContent).toContain(
+      'Dashboard API returned 500'
+    )
+  })
+
+  it('mounts declaratively from DOM placeholders and JSON data islands', () => {
+    const root = document.createElement('section')
+    root.innerHTML = `
+      <script type="application/json" data-core-app-library-dashboard-data>
+        {"title":"Declarative Library","metrics":[{"id":"total","label":"Total","value":"11"}]}
+      </script>
+      <div data-core-app-library-dashboard></div>
+    `
+    document.body.appendChild(root)
+
+    const mounted = mountCoreAppLibraryDashboardFromDom({ root })
+
+    expect(mounted).not.toBeNull()
+    expect(root.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Declarative Library'
+    )
+    expect(root.querySelector('.cmm-library-metric__value')?.textContent).toBe('11')
+
+    mounted?.destroy()
+  })
+
+  it('falls back to empty real-data rendering when declarative JSON is invalid', () => {
+    const root = document.createElement('section')
+    root.innerHTML = `
+      <script type="application/json" data-core-app-library-dashboard-data>
+        {
+      </script>
+      <div data-core-app-library-dashboard></div>
+    `
+    document.body.appendChild(root)
+
+    const mounted = mountCoreAppLibraryDashboardFromDom({ root })
+
+    expect(mounted).not.toBeNull()
+    expect(root.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Library Dashboard'
+    )
+    expect(root.querySelectorAll('.cmm-library-metric')).toHaveLength(0)
+
+    mounted?.destroy()
+  })
+
+  it('ignores non-object declarative JSON dashboard data', () => {
+    const root = document.createElement('section')
+    root.innerHTML = `
+      <script type="application/json" data-core-app-library-dashboard-data>
+        null
+      </script>
+      <div data-core-app-library-dashboard></div>
+    `
+    document.body.appendChild(root)
+
+    const mounted = mountCoreAppLibraryDashboardFromDom({ root, clearContainer: false })
+
+    expect(mounted).not.toBeNull()
+    expect(root.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Library Dashboard'
+    )
+
+    mounted?.destroy()
+  })
+
+  it('returns null when no declarative dashboard placeholder exists', () => {
+    expect(mountCoreAppLibraryDashboardFromDom({ root: document.createElement('div') })).toBeNull()
+  })
+})