62 lines
3.5 KiB
TypeScript
62 lines
3.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { act, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { expect, it, vi } from 'vitest';
|
|
import { DatahubHistoryOverview, type DatahubTimeslotSelection } from '../../src/features/project-import/DatahubHistoryOverview';
|
|
import type { DatahubTimeslotResultMetrics } from '../../src/features/project-import/datahub-scan-analysis';
|
|
import { donutArcPath } from '../../src/components/DonutMetricCard/donut-arc';
|
|
|
|
it('shows loading instead of zero after selecting Dummy, then the loaded status counts', () => {
|
|
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
|
const project = {
|
|
id: 'dummy', name: 'Dummy', description: '', attributes: {},
|
|
createdAt: '2026-07-22T00:00:00Z', updatedAt: '2026-07-22T00:00:00Z'
|
|
};
|
|
let complete!: () => void;
|
|
function Harness() {
|
|
const [selection, setSelection] = useState<DatahubTimeslotSelection | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [metrics, setMetrics] = useState<DatahubTimeslotResultMetrics | null>(null);
|
|
complete = () => {
|
|
setMetrics({ all: 1833, deviation: 477, passed: 282, notApplicable: 4, notRun: 171, error: 2 });
|
|
setBusy(false);
|
|
};
|
|
return <DatahubHistoryOverview
|
|
projects={[project]} projectData={{}} projectHistory={{}} projectGpoData={{}}
|
|
selection={selection} timeslotMetrics={metrics} loading={false} comparisonBusy={busy} comparisonError={null}
|
|
onCreate={() => undefined} onShow={() => undefined} onOpen={() => undefined}
|
|
onSelectProject={projectId => {
|
|
setMetrics(null);
|
|
setBusy(true);
|
|
setSelection({ projectId, slots: [{ id: 'slot', runIds: ['run'], assessmentIds: ['assessment'], effectiveAt: '2026-07-22T00:00:00Z' }] });
|
|
}}
|
|
/>;
|
|
}
|
|
const container = document.createElement('div');
|
|
const root = createRoot(container);
|
|
try {
|
|
act(() => root.render(<Harness/>));
|
|
expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(0);
|
|
expect(container.querySelector('.donut-metric-card[aria-label="Results All: Select client"]')).not.toBeNull();
|
|
|
|
act(() => container.querySelector<HTMLButtonElement>('[aria-label="Mandant Dummy auswählen"]')!.click());
|
|
expect(container.querySelector('[aria-label="Selected client result status"]')?.getAttribute('aria-busy')).toBe('true');
|
|
expect(container.querySelectorAll('.donut-metric-card[aria-label$="Loading…"]')).toHaveLength(6);
|
|
expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(0);
|
|
expect(container.querySelector('.donut-metric-rack')?.textContent).not.toContain('0%');
|
|
|
|
act(() => complete());
|
|
expect(container.querySelector('[aria-label="Selected client result status"]')?.getAttribute('aria-busy')).toBe('false');
|
|
expect(container.querySelector('.donut-metric-card[aria-label="Results All: 1,833, 100%"]')).not.toBeNull();
|
|
expect(container.querySelector('.donut-metric-card[aria-label="Deviation: 477, 26%"]')).not.toBeNull();
|
|
const smallResult = container.querySelector('.donut-metric-card[aria-label="Not Applicable: 4, <1%"]');
|
|
expect(smallResult).not.toBeNull();
|
|
expect(smallResult?.querySelector('.donut-small-arc-marker')).not.toBeNull();
|
|
expect(smallResult?.querySelector('.donut-metric-card__progress')?.getAttribute('d')).toBe(donutArcPath(4 / 1833 * 100));
|
|
expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(6);
|
|
} finally {
|
|
act(() => root.unmount());
|
|
vi.unstubAllGlobals();
|
|
}
|
|
});
|