63 lines
3.3 KiB
TypeScript
63 lines
3.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { act, createElement } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { DashboardDonutCard, DashboardLargeCard, DashboardMetricBars } from '../../src/features/dashboard/DashboardPanel';
|
|
|
|
describe('dashboard progressive disclosure', () => {
|
|
it('shows complete metric content initially and minimizes it to the header', () => {
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
const container = document.createElement('div');
|
|
const root = createRoot(container);
|
|
|
|
act(() => root.render(createElement(DashboardLargeCard, {
|
|
title: 'Synthetic coverage',
|
|
meta: '10 observations',
|
|
summary: { label: 'Observed', value: 8 },
|
|
details: createElement('p', { className: 'synthetic-extra' }, 'Additional synthetic detail')
|
|
}, createElement(DashboardMetricBars, { items: [{ label: 'Visible synthetic metric', value: 8, tone: 'coverage' }] }))));
|
|
|
|
const toggle = container.querySelector('.client-info-card-toggle') as HTMLButtonElement;
|
|
expect(toggle.querySelector('.triangle-icon-down')).not.toBeNull();
|
|
expect(toggle.getAttribute('aria-expanded')).toBe('true');
|
|
expect(container.querySelector('.client-info-card-details')).not.toBeNull();
|
|
expect(container.querySelector('.client-info-bar-label')?.textContent).toBe('Visible synthetic metric');
|
|
expect(container.querySelector('.synthetic-extra')?.textContent).toBe('Additional synthetic detail');
|
|
|
|
const header = container.querySelector('.client-info-card > header') as HTMLElement;
|
|
act(() => toggle.dispatchEvent(new MouseEvent('click', { bubbles: true })));
|
|
expect(toggle.querySelector('.triangle-icon-right')).not.toBeNull();
|
|
expect(toggle.getAttribute('aria-expanded')).toBe('false');
|
|
expect(container.querySelector('.client-info-card-content')).toBeNull();
|
|
|
|
act(() => header.dispatchEvent(new MouseEvent('click', { bubbles: true })));
|
|
expect(container.querySelector('.client-info-card-details')).not.toBeNull();
|
|
expect((container.querySelector('.client-info-bar-track i') as HTMLElement).style.getPropertyValue('--share')).toBe('100%');
|
|
act(() => root.unmount());
|
|
});
|
|
|
|
it('minimizes donut cards through the complete title bar', () => {
|
|
const container = document.createElement('div');
|
|
const root = createRoot(container);
|
|
|
|
act(() => root.render(createElement(DashboardDonutCard, {
|
|
title: 'Synthetic distribution',
|
|
meta: '10 records',
|
|
children: createElement('div', { className: 'synthetic-donut' }, 'Synthetic donut')
|
|
})));
|
|
|
|
const toggle = container.querySelector('.client-info-card-toggle') as HTMLButtonElement;
|
|
expect(toggle.querySelector('.triangle-icon-down')).not.toBeNull();
|
|
expect(toggle.getAttribute('aria-expanded')).toBe('true');
|
|
expect(container.querySelector('.synthetic-donut')).not.toBeNull();
|
|
|
|
const heading = container.querySelector('.client-info-card-heading') as HTMLElement;
|
|
act(() => heading.dispatchEvent(new MouseEvent('click', { bubbles: true })));
|
|
expect(toggle.querySelector('.triangle-icon-right')).not.toBeNull();
|
|
expect(toggle.getAttribute('aria-expanded')).toBe('false');
|
|
expect(container.querySelector('.client-info-card-content')).toBeNull();
|
|
act(() => root.unmount());
|
|
});
|
|
});
|