import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import DistributionBar from './DistributionBar.svelte';

afterEach(cleanup);

describe('DistributionBar — total=0 branch', () => {
	it('shows 0% / 0% widths when both counts are zero (avoids NaN)', async () => {
		render(DistributionBar, {
			outCount: 0,
			inCount: 0,
			senderName: 'Anna',
			receiverName: 'Bert'
		});

		const segments = document.querySelectorAll('[data-testid="dist-bar-segment"]');
		expect(segments).toHaveLength(2);
		expect((segments[0] as HTMLElement).style.width).toBe('0%');
		expect((segments[1] as HTMLElement).style.width).toBe('100%');
	});

	it('shows 100% / 0% widths when only outCount is non-zero', async () => {
		render(DistributionBar, {
			outCount: 5,
			inCount: 0,
			senderName: 'Anna',
			receiverName: 'Bert'
		});

		const segments = document.querySelectorAll('[data-testid="dist-bar-segment"]');
		expect((segments[0] as HTMLElement).style.width).toBe('100%');
		expect((segments[1] as HTMLElement).style.width).toBe('0%');
	});
});