void>();
vi.stubGlobal('ResizeObserver', class {
constructor(private callback: () => void) {}
observe(element: Element) { resizeCallbacks.set(element, this.callback); }
disconnect() {}
});
document.documentElement.dataset.theme = theme;
resetEnginePreferencesForTests();
const state = clientFactsState();
const sheet = makeSheet('Synthetic', [['Name', 'Status', 'Severity', 'Description', 'Remediation'],
...Array.from({ length: 105 }, (_, index) => [`Control ${String(index).padStart(3, '0')}`, 'Failed', 'High', 'Synthetic retained explanation.
', 'Synthetic exact remediation.']),
['Passed control', 'Passed', 'Critical', 'Not a deviation', ''], ['Unassessed control', 'Not configured', '', '', '']
], '', 'synthetic.csv', { isProjectSheet: true });
const context = emptyHeatmapContext();
sheet.analysis.records.slice(0, 105).forEach((record, index) => {
const occurrenceId = `synthetic-occurrence-${index}`; record.findingOccurrenceId = occurrenceId;
const clusterId = index < 104 ? 'cloud-privileged-access-exposure' : 'credential-relay-exposure';
const conditionId = context.clusters.find(cluster => cluster.clusterId === clusterId)!.conditions[0].conditionId;
context.observations.push({ id: occurrenceId, conditionId, occurrenceId, resultProjectionId: occurrenceId,
tool: 'purple-knight', sourceRuleId: 'SYNTHETIC', ruleText: record.title, matchedBy: 'rule-id', outcome: 'fail', assertion: 'observed-by-scanner' });
context.findings.push({ occurrenceId, resultProjectionId: occurrenceId, tool: 'purple-knight', sourceRuleId: 'SYNTHETIC',
observationIds: [occurrenceId], conditionIds: [conditionId], clusterIds: [clusterId], declaredReferenceIds: [], cisControlAreaIds: [] });
});
const openWork = vi.fn(), setFilter = vi.fn();
vi.mocked(useApp).mockReturnValue({ ...state, dataset: { ...state.dataset, sheets: [sheet] }, activeSheet: sheet,
activeProfile: genericProfile, setFacetFilter: setFilter } as unknown as ReturnType);
const original = JSON.stringify(useApp().dataset);
vi.spyOn(AssessorApiClient.prototype, 'getEnvironmentSnapshot').mockResolvedValue({ ...clientFactsSnapshot,
sections: [...clientFactsSnapshot.sections, { ...clientFactsSnapshot.sections[0],
id: 'synthetic-restricted', sectionKey: 'syntheticRestricted', label: 'Synthetic restricted section', state: 'license-restricted', tables: [] }]
});
vi.spyOn(AssessorApiClient.prototype, 'listProjectGpoBackupStatus').mockResolvedValue({ records: [] } as never);
vi.spyOn(AssessorApiClient.prototype, 'getAssessmentContext').mockResolvedValue(context);
const host = document.createElement('div'); document.body.append(host); const root = createRoot(host);
const style = document.createElement('style');
style.textContent = readFileSync('src/styles/base.css', 'utf8') + readFileSync('src/styles/client-security.css', 'utf8');
document.head.append(style);
try {
await act(async () => root.render());
const tabs = host.querySelectorAll('[role="tab"]');
await act(async () => tabs[1].click());
const panel = host.querySelector('[role="tabpanel"]:not([hidden])')!;
expect(panel.textContent).toContain('105 deviations');
const groups = [...panel.querySelectorAll('.client-security-group')];
expect(groups[0].dataset.cluster).toBe('cloud-privileged-access-exposure');
expect(groups.map(group => group.dataset.cluster)).toEqual([...host.querySelectorAll('.context-heatmap__cell')].map(cell => cell.dataset.cluster));
expect(groups.map(group => Number(group.querySelector('.client-security-group-toggle > strong')!.textContent)).reduce((sum, count) => sum + count, 0)).toBe(105);
expect(panel.querySelector('[data-cluster="unassigned"]')).toBeNull();
const disclosure = panel.querySelector('.client-security-overview-disclosure')!;
const map = panel.querySelector('.client-security-map')!;
expect(disclosure.open).toBe(true);
expect(disclosure.style.getPropertyValue('--security-map-height')).toBe(`${groups.length * 28 + 24}px`);
expect(disclosure.querySelector('.client-security-hardfacts')).not.toBeNull();
expect(disclosure.querySelector('.client-security-table')).toBeNull();
expect(panel.querySelectorAll('details.client-security-map')).toHaveLength(0);
await act(async () => disclosure.querySelector('summary')!.click());
expect(disclosure.open).toBe(false);
expect(panel.querySelector('.client-security-table')).not.toBeNull();
await act(async () => disclosure.querySelector('summary')!.click());
expect(disclosure.open).toBe(true);
const overview = panel.querySelector('.client-security-hardfacts')!;
expect(getComputedStyle(overview).paddingInlineStart).toBe('var(--space-8)');
for (const row of overview.querySelectorAll('.client-security-facts > div')) {
expect(getComputedStyle(row).paddingBlock).toBe('calc(var(--space-1) / 2)');
}
expect(disclosure.querySelector('.client-security-graph-zone .client-security-score')).not.toBeNull();
expect(disclosure.querySelector('.client-security-graph-zone .client-security-remediation')).not.toBeNull();
expect(overview.textContent).not.toContain('Overall Score');
expect(overview.textContent).not.toContain('Remediation');
expect(overview.textContent).toContain('Password policy');
expect(overview.textContent).toContain('Cloud Information');
expect(overview.textContent).not.toContain('Certificates & PKI');
expect(overview.textContent).not.toContain('Source security metrics');
expect(overview.textContent).not.toContain('Security Domains');
expect(overview.textContent).not.toContain('Restricted by the source tool');
expect(getComputedStyle(overview).backgroundColor).toBe('rgba(0, 0, 0, 0)');
const boundedFacts = overview.querySelector('.client-security-hardfacts-content')!;
expect(getComputedStyle(boundedFacts).position).not.toBe('absolute');
expect(getComputedStyle(boundedFacts).overflow).not.toBe('auto');
expect(getComputedStyle(panel.querySelector('.client-security-overview')!).gridTemplateColumns).toBe('minmax(0, 2fr) minmax(0, 1fr)');
const columns = [...overview.querySelectorAll('.client-security-fact-column')];
expect(columns).toHaveLength(2);
expect(columns.map(column => [...column.querySelectorAll('h3')].map(h => h.textContent))).toEqual([
['Domain Information', 'Resilience', 'Inventory'],
['Password policy', 'Operating systems', 'Cloud Information']
]);
const report = reportHeaderFacts(clientFactsSnapshot, {})!;
const reportGroups = [{ title: 'Domain Information', facts: report.domainInformation }, ...report.groups]
.filter(group => group.title !== 'Certificates & PKI');
for (const group of reportGroups) {
const section = [...overview.querySelectorAll('.client-security-fact-column > section')]
.find(item => item.querySelector('h3')?.textContent === group.title)!;
expect([...section.querySelectorAll('.client-security-facts > div')].map(row => ({
label: row.querySelector('dt')!.textContent, value: row.querySelector('dd')!.textContent
}))).toEqual(group.facts);
}
const domainRows = [...map.querySelectorAll('.client-security-map-domain')];
expect(domainRows).toHaveLength(6);
const domainPositions = domainRows.map(row => Number(row.querySelector('.client-security-domain-count')!.getAttribute('y')));
expect(domainPositions.slice(1).map((y, index) => y - domainPositions[index])).toEqual([28, 28, 28, 28, 28]);
expect((domainPositions[0] + domainPositions[5]) / 2 - 5).toBe((groups.length * 28 + 24) / 2 + 32);
for (const surface of [disclosure, panel.querySelector('.client-security-overview')!, panel.querySelector('.client-security-table')!]) {
expect(getComputedStyle(surface).width).toBe('100%');
expect(getComputedStyle(surface).maxWidth).toBe('100%');
expect(getComputedStyle(surface).minWidth).toBe('0px');
}
expect(domainRows.reduce((sum, row) => sum + Number(row.querySelector('.client-security-domain-count')!.textContent), 0)).toBe(105);
for (const row of domainRows) {
const count = Number(row.querySelector('.client-security-domain-count')!.textContent);
const bar = row.querySelector('.client-security-domain-bar')!;
expect(bar.getAttribute('aria-label')).toBe(`${count} of 105 deviations`);
expect(Number(bar.querySelector('.client-security-domain-track')!.getAttribute('width'))).toBe(80);
expect(Number(bar.querySelector('.client-security-domain-fill')!.getAttribute('width'))).toBeCloseTo(count / 105 * 80);
}
const domainCountsBefore = domainRows.map(row => row.querySelector('.client-security-domain-count')!.textContent);
const categoryRows = [...map.querySelectorAll('.client-security-map-category')];
expect(categoryRows).toHaveLength(groups.length);
expect(categoryRows.reduce((sum, row) => sum + Number(row.querySelector('.client-security-category-count')!.textContent), 0)).toBe(105);
for (const row of categoryRows) {
const count = Number(row.querySelector('.client-security-category-count')!.textContent);
expect(row.querySelector('.client-security-category-bar')!.getAttribute('aria-label')).toBe(`${count} of 105 deviations`);
expect(Number(row.querySelector('.client-security-domain-track')!.getAttribute('width'))).toBe(80);
expect(Number(row.querySelector('.client-security-domain-fill')!.getAttribute('width'))).toBeCloseTo(count / 105 * 80);
}
expect(disclosure.querySelector('.client-security-remediation > strong')!.textContent).toBe('105');
const originalOverview = host.querySelector('.client-command-center')!;
expect(domainCountsBefore).toEqual([...originalOverview.querySelectorAll('.client-domains > ul b')].map(item => item.textContent));
expect(disclosure.querySelector('.client-security-score > strong')!.textContent).toBe(originalOverview.querySelector('.client-overall-ring-number')!.textContent);
for (const value of disclosure.querySelectorAll('.client-security-metrics section > strong')) {
expect(getComputedStyle(value).justifySelf).toBe('end');
expect(getComputedStyle(value).textAlign).toBe('right');
}
expect(disclosure.querySelector('.client-security-totals')).toBeNull();
await act(async () => disclosure.querySelector('[aria-label="Open Assessment facts results"]')!.click());
const totalFacts = [...document.querySelectorAll('.client-security-totals tbody > tr')];
expect(getComputedStyle(totalFacts[0].querySelector('th')!).position).toBe('static');
expect(totalFacts).toHaveLength(9);
expect([...document.querySelectorAll('.client-security-totals thead th')].map(cell => cell.textContent)).toEqual(['Metric', 'Value']);
const factValue = (label: string) => totalFacts.find(fact => fact.querySelector('th[scope="row"]')!.textContent === label)?.querySelector('td')!.textContent;
expect(factValue('Assessed')).toBe('106');
expect(factValue('Passed')).toBe('1');
expect(factValue('Gaps')).toBe('1');
expect(factValue('Categories with deviations')).toBe('2');
const assessmentDiagram = document.querySelector('.client-assessment-diagram')!;
const diagramValue = (metric: string) => assessmentDiagram.querySelector(`[data-metric="${metric}"] b`)!.textContent;
expect(diagramValue('Assessed')).toBe(factValue('Assessed'));
expect(diagramValue('Passed')).toBe(factValue('Passed'));
expect(diagramValue('Gaps')).toBe(factValue('Gaps'));
expect(diagramValue('Deviations')).toBe('105');
expect(document.querySelector('.client-assessment-explanation')!.textContent).toContain('No baseline rule');
await act(async () => document.querySelector('[aria-label="Close Assessment facts window"]')!.click());
await act(async () => new Promise(resolve => requestAnimationFrame(() => resolve())));
const securityFacts = [...overview.querySelectorAll('.client-security-inventory strong')].map(item => item.textContent);
expect(overview.querySelectorAll('.client-security-inventory .client-data-fact')).toHaveLength(6);
expect(securityFacts).toEqual([...originalOverview.querySelectorAll('.client-data-fact strong')].map(item => item.textContent));
const diagram = map.querySelector('.client-security-map-scroll > svg')!;
expect(getComputedStyle(diagram).width).toBe('100%');
expect(getComputedStyle(map.querySelector('.client-security-map-scroll')!).overflow).toBe('visible');
vi.spyOn(map, 'getBoundingClientRect').mockReturnValue({ width: 1400 } as DOMRect);
await act(async () => resizeCallbacks.get(map)!());
expect(diagram.getAttribute('viewBox')).toBe(`0 0 1400 ${groups.length * 28 + 24}`);
expect(map.querySelector('.client-security-map-category .client-security-map-hit')!.getAttribute('x')).toBe('900');
expect(map.querySelector('.client-security-domain-track')!.getAttribute('width')).toBe('80');
expect(getComputedStyle(disclosure.querySelector('summary > svg')!).width).not.toBe('1040px');
expect(panel.querySelectorAll('.client-security-flow')).not.toHaveLength(0);
expect(panel.querySelector('svg[role="group"]')!.textContent).toContain('104');
const category = groups[0].querySelector('.client-security-group-toggle')!;
expect(category.getAttribute('aria-expanded')).toBe('false');
const scroll = vi.fn(); groups[0].scrollIntoView = scroll;
const mapCategory = map.querySelector('.client-security-map-category[role="button"]')!;
await act(async () => mapCategory.dispatchEvent(new MouseEvent('click', { bubbles: true })));
expect(category.getAttribute('aria-expanded')).toBe('true');
expect(document.activeElement).toBe(category);
expect(scroll).toHaveBeenCalled();
await act(async () => category.click());
expect(category.getAttribute('aria-expanded')).toBe('false');
await act(async () => mapCategory.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
expect(category.getAttribute('aria-expanded')).toBe('true');
await act(async () => category.click());
await act(async () => mapCategory.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })));
expect(category.getAttribute('aria-expanded')).toBe('true');
expect(groups[0].textContent).toContain('Technical approach');
expect(groups[0].querySelectorAll('.client-security-finding')).toHaveLength(104);
expect(groups[0].textContent).not.toContain('Passed control');
const finding = groups[0].querySelector('.client-security-finding-toggle')!;
await act(async () => finding.click());
expect(finding.getAttribute('aria-expanded')).toBe('true');
expect(groups[0].textContent).toContain('Synthetic retained explanation.');
expect(groups[0].textContent).toContain('Synthetic exact remediation.');
await act(async () => tabs[0].click()); await act(async () => tabs[1].click());
expect(category.getAttribute('aria-expanded')).toBe('true');
expect(finding.getAttribute('aria-expanded')).toBe('true');
await act(async () => finding.click());
expect(groups[0].querySelector('.client-security-finding-detail')).toBeNull();
expect(setFilter).not.toHaveBeenCalled(); expect(openWork).not.toHaveBeenCalled();
expect(JSON.stringify(useApp().dataset)).toBe(original);
await act(async () => setEngineEnabled('report', false));
expect(panel.textContent).not.toContain('Technical approach');
expect(panel.textContent).toContain('105 deviations');
await act(async () => setEngineEnabled('context', false));
expect(panel.querySelector('.client-security-map')).toBeNull();
expect(panel.textContent).toContain('105 deviations');
expect(panel.textContent).toContain('All findings');
expect([...originalOverview.querySelectorAll('.client-domains > ul b')].map(row => row.textContent)).toEqual(domainCountsBefore);
} finally { await act(async () => root.unmount()); style.remove(); }
});
it('counts a rolled-up GPO once and keeps distinct stored baseline fixes separate', async () => {
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
document.documentElement.dataset.theme = theme;
const sheet = makeSheet('Synthetic GPO', [['Name', 'Status', 'Category'], ['Stored setting', 'Fail', 'GPOs']], '', 'synthetic.csv', { isProjectSheet: true });
const record = sheet.analysis.records[0];
record.policyBaselineComparisons = ['A', 'B'].map(name => ({ baseline: `Synthetic baseline ${name}`, status: 'Fail', summary: 'Stored comparison', context: '', scopeNotice: '', explanation: '',
remediation: `Retained fix ${name}`, recommendations: [{ template: `Template ${name}`, settingId: 'Synthetic exact setting', comparison: 'Fail', expected: name, additional: [], missing: [] }] }));
const dataset = { fileName: 'Synthetic', fileSize: 0, lastModified: 0, format: 'csv', rawText: '', profileId: 'generic', scanTool: 'Generic', sheets: [sheet] };
const original = JSON.stringify(record);
const host = document.createElement('div'); document.body.append(host); const root = createRoot(host);
try {
await act(async () => root.render());
await act(async () => host.querySelector('.client-security-group-toggle')!.click());
await act(async () => host.querySelector('.client-security-finding-toggle')!.click());
expect(host.querySelectorAll('.client-security-finding')).toHaveLength(1);
expect(host.textContent).toContain('Retained fix A'); expect(host.textContent).toContain('Retained fix B');
expect(JSON.stringify(record)).toBe(original);
} finally { await act(async () => root.unmount()); }
});
});