notification.test.ts

import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';

import {
	GAP_STACKING,
	MAX_NOTIFICATIONS_PER_POSITION,
	Notification,
	OFFSET,
} from '../notification';

const ensurePopoverMethods = (): void => {
	if (!HTMLElement.prototype.showPopover) {
		HTMLElement.prototype.showPopover = function showPopover(): void {
			this.toggleAttribute('open', true);
			this.style.display = 'flex';
		};
	}

	if (!HTMLElement.prototype.hidePopover) {
		HTMLElement.prototype.hidePopover = function hidePopover(): void {
			this.removeAttribute('open');
			this.style.display = '';
		};
	}
};

const expectOffset = (value: string, expectedOffset: number): void => {
	expect(value).toContain(`${expectedOffset}px`);
};

describe('notification accessibility behavior', () => {
	let notification: Notification;

	beforeEach(() => {
		ensurePopoverMethods();
		Notification.instance = undefined;
		document.body.innerHTML = '';
		vi.useFakeTimers();
		notification = new Notification();
	});

	afterEach(() => {
		vi.runOnlyPendingTimers();
		vi.useRealTimers();
		document.body.innerHTML = '';
		Notification.instance = undefined;
	});

	it('keeps focus on the trigger and exposes inline messages through a polite live region', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Copy link';
		document.body.append(trigger);
		trigger.focus();

		const showInlinePromise = notification.showInline({
			element: trigger,
			message: 'Link copied to clipboard.',
		});

		await vi.advanceTimersByTimeAsync(50);
		await showInlinePromise;

		const inlineMessage = document.querySelector('.z-notification-inline');

		expect(document.activeElement).toBe(trigger);
		expect(inlineMessage).not.toBeNull();
		expect(inlineMessage?.getAttribute('role')).toBe('status');
		expect(inlineMessage?.getAttribute('aria-live')).toBe('polite');
		expect(inlineMessage?.getAttribute('aria-atomic')).toBe('true');
		expect((inlineMessage as HTMLElement | null)?.innerText).toBe('Link copied to clipboard.');
	});

	it('keeps top-right notification controls in rendered keyboard order and exposes an assertive live message', async () => {
		const message = 'Publishing failed. Check the form and try again.';

		notification.show({
			message,
			status: 'error',
			button: {
				text: 'Retry',
				onClick: vi.fn(),
			},
		});

		const user = userEvent.setup({
			advanceTimers: vi.advanceTimersByTime,
		});
		const notificationMessage = screen.getByText(message);
		const closeButton = screen.getByRole('button', { name: 'Meldung schließen' });
		const actionButton = screen.getByRole('button', { name: 'Retry' });

		expect(notificationMessage).not.toBeNull();
		expect(notificationMessage.textContent).toBe(message);

		await user.tab();
		expect(document.activeElement).toBe(actionButton);

		await user.tab();
		expect(document.activeElement).toBe(closeButton);
	});

	it('allows keyboard navigation to link actions in top-right notifications', async () => {
		notification.show({
			message: 'A new version of notification is available.',
			status: 'info',
			link: {
				text: 'Open docs',
				href: 'https://example.com/docs',
			},
		});

		const user = userEvent.setup({
			advanceTimers: vi.advanceTimersByTime,
		});
		const closeButton = screen.getByRole('button', { name: 'Meldung schließen' });
		const actionLink = screen.getByRole('link', { name: 'Open docs' });

		await user.tab();
		expect(document.activeElement).toBe(actionLink);

		await user.tab();
		expect(document.activeElement).toBe(closeButton);
		expect(actionLink.getAttribute('href')).toBe('https://example.com/docs');
	});

	it('inserts anchored top-right notifications next to the triggering element', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Save';
		document.body.append(trigger);
		const message = 'Profile saved successfully.';

		notification.show({
			element: trigger,
			message,
			status: 'success',
		});

		const container = document.querySelector('.z-notification');

		expect(trigger.nextElementSibling).toBe(container);
		expect(document.body.querySelectorAll('.z-notification')).toHaveLength(1);
		expect(document.querySelector('dialog')).toBeNull();
		expect(container?.getAttribute('popover')).toBe('manual');
		expect(container?.classList.contains('z-notification--top-right')).toBe(true);
		expect(container?.nodeName).toBe('DIV');
		expect(screen.getByText(message)).not.toBeNull();
	});

	it('stacks multiple anchored top-right notifications by index', () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Save';
		document.body.append(trigger);

		const rectSpy = vi
			.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
			.mockImplementation(function getBoundingClientRect(this: HTMLElement): DOMRect {
				const height = this.classList.contains('z-notification') ? 40 : 20;
				return {
					x: 0,
					y: 0,
					top: 0,
					left: 0,
					right: 100,
					bottom: height,
					width: 100,
					height,
					toJSON: () => ({}),
				} as DOMRect;
			});

		notification.show({
			element: trigger,
			message: 'First saved toast.',
			status: 'success',
		});
		notification.show({
			element: trigger,
			message: 'Second saved toast.',
			status: 'success',
		});

		const notifications = Array.from(
			document.querySelectorAll('.z-notification'),
		) as HTMLElement[];
		expect(notifications).toHaveLength(2);

		const n1 = notifications[0];
		const n2 = notifications[1];

		expectOffset(n1.style.top, OFFSET + 40 + GAP_STACKING);
		expectOffset(n1.style.right, OFFSET);
		expectOffset(n2.style.top, OFFSET);
		expectOffset(n2.style.right, OFFSET);

		expect(trigger.nextElementSibling).toBe(n1);
		expect(n1.nextElementSibling).toBe(n2);
		expect(n1.style.top).not.toBe(n2.style.top);

		rectSpy.mockRestore();
	});

	it('keeps stacks separate across top-right, top, and bottom positions', () => {
		const rectSpy = vi
			.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
			.mockImplementation(function getBoundingClientRect(this: HTMLElement): DOMRect {
				const height = this.classList.contains('z-notification') ? 40 : 20;
				return {
					x: 0,
					y: 0,
					top: 0,
					left: 0,
					right: 100,
					bottom: height,
					width: 100,
					height,
					toJSON: () => ({}),
				} as DOMRect;
			});

		notification.show({
			message: 'Top-right notification.',
			status: 'info',
		});
		notification.show({
			message: 'Top notification.',
			position: 'top',
			status: 'info',
		});
		notification.show({
			message: 'Bottom notification.',
			position: 'bottom',
			status: 'info',
		});

		const toasts = Array.from(document.querySelectorAll('.z-notification')) as HTMLElement[];

		expect(toasts).toHaveLength(3);
		expect(toasts[0].className).toContain('z-notification--top-right');
		expectOffset(toasts[0].style.top, OFFSET);
		expectOffset(toasts[0].style.right, OFFSET);
		expect(toasts[1].className).toContain('z-notification--top');
		expectOffset(toasts[1].style.top, OFFSET);
		expect(toasts[1].style.right).toBe('0px');
		expect(toasts[2].className).toContain('z-notification--bottom');
		expectOffset(toasts[2].style.bottom, OFFSET);

		rectSpy.mockRestore();
	});

	it('removes inline notifications after the configured timeout', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Copy link';
		document.body.append(trigger);

		const showInlinePromise = notification.showInline({
			element: trigger,
			message: 'Link copied to clipboard.',
		});

		await vi.advanceTimersByTimeAsync(50);
		await showInlinePromise;

		expect(screen.getByRole('status')).not.toBeNull();

		await vi.advanceTimersByTimeAsync(notification.notificationTimeout);

		expect(screen.queryByRole('status')).toBeNull();
	});

	it('removes inline notifications on outside pointer interaction', async () => {
		const trigger = document.createElement('button');
		const outside = document.createElement('button');
		trigger.textContent = 'Copy link';
		outside.textContent = 'Outside';
		document.body.append(trigger, outside);

		const showInlinePromise = notification.showInline({
			element: trigger,
			message: 'Link copied to clipboard.',
		});

		await vi.advanceTimersByTimeAsync(50);
		await showInlinePromise;

		outside.dispatchEvent(new Event('pointerup', { bubbles: true }));

		expect(screen.queryByRole('status')).toBeNull();
	});

	it('removes inline notifications after a large scroll delta', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Copy link';
		document.body.append(trigger);

		const showInlinePromise = notification.showInline({
			element: trigger,
			message: 'Link copied to clipboard.',
		});

		await vi.advanceTimersByTimeAsync(50);
		await showInlinePromise;

		Object.defineProperty(window, 'scrollY', {
			configurable: true,
			value: 150,
		});

		document.dispatchEvent(new Event('scroll'));

		expect(screen.queryByRole('status')).toBeNull();
	});

	it('removes top-right notifications after the configured timeout', async () => {
		const message = 'Publishing failed. Check the form and try again.';

		notification.show({
			message,
			status: 'error',
			hasTimer: true,
		});

		expect(screen.getByText(message)).not.toBeNull();

		await vi.advanceTimersByTimeAsync(notification.notificationTimeout);

		expect(screen.queryByText(message)).toBeNull();
	});

	it('pauses and resumes the top-right notification timeout on pointer hover', async () => {
		const message = 'Publishing failed. Check the form and try again.';

		notification.show({
			message,
			status: 'error',
			hasTimer: true,
		});

		const notificationMessage = screen.getByText(message);
		const notificationElement = notificationMessage.closest(
			'.z-notification',
		) as HTMLElement | null;
		expect(notificationElement).not.toBeNull();

		await vi.advanceTimersByTimeAsync(2000);
		notificationElement?.dispatchEvent(new Event('pointerenter'));
		await vi.advanceTimersByTimeAsync(4000);

		expect(screen.getByText(message)).toBe(notificationMessage);

		notificationElement?.dispatchEvent(new Event('pointerleave'));
		await vi.advanceTimersByTimeAsync(1999);
		expect(screen.getByText(message)).toBe(notificationMessage);

		await vi.advanceTimersByTimeAsync(1);
		expect(screen.queryByText(message)).toBeNull();
	});

	it('invokes the action callback and removes the notification on click', async () => {
		const onClick = vi.fn();
		const trigger = document.createElement('button');
		const user = userEvent.setup({
			advanceTimers: vi.advanceTimersByTime,
		});
		const message = 'Publishing failed. Check the form and try again.';
		trigger.textContent = 'Open notification';
		document.body.append(trigger);
		trigger.focus();

		notification.show({
			element: trigger,
			message,
			status: 'error',
			button: {
				text: 'Retry',
				onClick,
			},
		});
		expect(screen.queryByText(message)).not.toBeNull();

		await user.click(screen.getByRole('button', { name: 'Retry', hidden: true }));

		expect(onClick).toHaveBeenCalledTimes(1);
		expect(screen.queryByText(message)).toBeNull();
		// focus back to trigger element
		expect(document.activeElement).toBe(trigger);
	});

	it('removes top-right notifications when the close button is clicked', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Open notification';
		document.body.append(trigger);
		trigger.focus();

		const user = userEvent.setup({
			advanceTimers: vi.advanceTimersByTime,
		});

		notification.show({
			element: trigger,
			message: 'A new version of notification is available.',
			status: 'info',
			link: {
				text: 'Open docs',
				href: 'https://example.com/docs',
			},
		});

		await user.click(screen.getByRole('button', { name: 'Meldung schließen', hidden: true }));

		expect(screen.queryByText('A new version of notification is available.')).toBeNull();
		expect(document.activeElement).toBe(trigger);
	});

	it('keeps only the most recent maxNotifications top-right notifications', async () => {
		notification.show({ message: 'First notification', status: 'info' });
		notification.show({ message: 'Second notification', status: 'info' });
		notification.show({ message: 'Third notification', status: 'info' });
		notification.show({ message: 'Fourth notification', status: 'info' });

		expect(screen.queryAllByText(/notification$/)).toHaveLength(MAX_NOTIFICATIONS_PER_POSITION);
		expect(screen.queryByText('First notification')).toBeNull();
		expect(screen.getByText('Second notification')).not.toBeNull();
		expect(screen.getByText('Third notification')).not.toBeNull();
		expect(screen.getByText('Fourth notification')).not.toBeNull();
	});

	it('reflows a stack only once when overflow removes the oldest notification', () => {
		const reflowSpy = vi.spyOn(notification, 'positionNotifications');

		notification.show({ message: 'First notification', status: 'info' });
		notification.show({ message: 'Second notification', status: 'info' });
		notification.show({ message: 'Third notification', status: 'info' });
		notification.show({ message: 'Fourth notification', status: 'info' });

		expect(reflowSpy).toHaveBeenCalledTimes(4);
	});

	it('renders top-positioned notifications with an icon when a matching symbol exists', async () => {
		document.body.innerHTML = `
			<svg aria-hidden="true">
				<symbol id="svg-info" viewBox="0 0 18 18"></symbol>
			</svg>`;

		notification.show({
			position: 'top',
			icon: 'info',
			message: 'Heads up.',
			status: 'info',
		});

		const container = document.querySelector('.z-notification');
		const icon = document.querySelector('.z-notification__icon');

		expect(container?.className).toContain('z-notification--top');
		expect(icon).not.toBeNull();
	});

	it('renders top-positioned notifications with the top placement class', () => {
		notification.show({
			position: 'top',
			message: 'Top notification.',
			status: 'info',
		});

		const container = document.querySelector('.z-notification') as HTMLElement | null;

		expect(container?.className).toContain('z-notification--top');
		expectOffset(container?.style.top ?? '', OFFSET);
		expect(container?.style.bottom).toBe('auto');
	});

	it('renders bottom-positioned notifications with the bottom placement class', () => {
		notification.show({
			position: 'bottom',
			message: 'Bottom notification.',
			status: 'info',
		});

		const container = document.querySelector('.z-notification') as HTMLElement | null;

		expect(container?.className).toContain('z-notification--bottom');
		expectOffset(container?.style.bottom ?? '', OFFSET);
		expect(container?.style.top).toBe('auto');
	});

	it('stacks top notifications independently up to the maximum per position', () => {
		const rectSpy = vi
			.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
			.mockImplementation(function getBoundingClientRect(this: HTMLElement): DOMRect {
				const height = this.classList.contains('z-notification') ? 40 : 20;
				return {
					x: 0,
					y: 0,
					top: 0,
					left: 0,
					right: 100,
					bottom: height,
					width: 100,
					height,
					toJSON: () => ({}),
				} as DOMRect;
			});

		notification.show({ message: 'Top 1', position: 'top', status: 'info' });
		notification.show({ message: 'Top 2', position: 'top', status: 'info' });
		notification.show({ message: 'Top 3', position: 'top', status: 'info' });
		notification.show({ message: 'Top 4', position: 'top', status: 'info' });

		const toasts = Array.from(document.querySelectorAll('.z-notification')) as HTMLElement[];

		expect(toasts).toHaveLength(MAX_NOTIFICATIONS_PER_POSITION);
		expect(screen.queryByText('Top 1')).toBeNull();
		expect(screen.getByText('Top 2')).not.toBeNull();
		expect(screen.getByText('Top 3')).not.toBeNull();
		expect(screen.getByText('Top 4')).not.toBeNull();
		expectOffset(toasts[0].style.top, OFFSET + (40 + GAP_STACKING) * 2);
		expectOffset(toasts[1].style.top, OFFSET + 40 + GAP_STACKING);
		expectOffset(toasts[2].style.top, OFFSET);
		expect(toasts[0].style.top).not.toBe(toasts[1].style.top);
		expect(toasts[1].style.top).not.toBe(toasts[2].style.top);

		rectSpy.mockRestore();
	});

	it('stacks bottom notifications independently up to the maximum per position', () => {
		const rectSpy = vi
			.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
			.mockImplementation(function getBoundingClientRect(this: HTMLElement): DOMRect {
				const height = this.classList.contains('z-notification') ? 40 : 20;
				return {
					x: 0,
					y: 0,
					top: 0,
					left: 0,
					right: 100,
					bottom: height,
					width: 100,
					height,
					toJSON: () => ({}),
				} as DOMRect;
			});

		notification.show({ message: 'Bottom 1', position: 'bottom', status: 'info' });
		notification.show({ message: 'Bottom 2', position: 'bottom', status: 'info' });
		notification.show({ message: 'Bottom 3', position: 'bottom', status: 'info' });
		notification.show({ message: 'Bottom 4', position: 'bottom', status: 'info' });

		const toasts = Array.from(document.querySelectorAll('.z-notification')) as HTMLElement[];

		expect(toasts).toHaveLength(MAX_NOTIFICATIONS_PER_POSITION);
		expect(screen.queryByText('Bottom 1')).toBeNull();
		expect(screen.getByText('Bottom 2')).not.toBeNull();
		expect(screen.getByText('Bottom 3')).not.toBeNull();
		expect(screen.getByText('Bottom 4')).not.toBeNull();
		expectOffset(toasts[0].style.bottom, OFFSET + (40 + GAP_STACKING) * 2);
		expectOffset(toasts[1].style.bottom, OFFSET + 40 + GAP_STACKING);
		expectOffset(toasts[2].style.bottom, OFFSET);
		expect(toasts[0].style.bottom).not.toBe(toasts[1].style.bottom);
		expect(toasts[1].style.bottom).not.toBe(toasts[2].style.bottom);

		rectSpy.mockRestore();
	});

	it('renders top-right notifications with a right offset and icon when a matching symbol exists', async () => {
		document.body.innerHTML = `
			<svg aria-hidden="true">
				<symbol id="svg-info" viewBox="0 0 18 18"></symbol>
			</svg>`;

		notification.show({
			icon: 'info',
			message: 'Foo.',
			status: 'info',
		});

		const container = document.querySelector('.z-notification') as HTMLElement | null;
		const icon = document.querySelector('.z-notification__icon');

		expect(container?.className).toContain('z-notification--top-right');
		expectOffset(container?.style.right ?? '', OFFSET);
		expect(container?.style.left).toBe('auto');
		expect(icon).not.toBeNull();
	});

	it('renders a notification displaying users an error message', async () => {
		notification.show({
			message: 'This is an error notification.',
			status: 'error',
		});
		const container = document.querySelector('.z-notification');
		expect(container?.className).toContain('z-notification--error');
	});

	it('renders notification with timer', async () => {
		notification.show({
			message: 'This is an error notification with timer.',
			status: 'error',
			hasTimer: true,
		});
		const closeButton = screen.getByRole('button', {
			name: 'Meldung schließen',
			hidden: true,
		}) as HTMLButtonElement;
		expect(closeButton.className).toContain('z-notification__close-btn--timer');
	});

	it('renders notification without timer being visible permanently', async () => {
		notification.show({
			message: 'This is an error notification without timer.',
			status: 'error',
			hasTimer: false,
		});
		const closeButton = screen.getByRole('button', {
			name: 'Meldung schließen',
			hidden: true,
		}) as HTMLButtonElement;
		expect(closeButton?.className).not.toContain('z-notification__close-btn--timer');
	});

	it('replaces a notification with the same group', async () => {
		notification.show({
			group: 'foo',
			message: 'First foo notification',
		});

		expect(screen.getByText('First foo notification')).not.toBeNull();

		notification.show({
			group: 'foo',
			message: 'Second foo notification',
		});

		expect(screen.queryByText('First foo notification')).toBeNull();
		expect(screen.getByText('Second foo notification')).not.toBeNull();
	});

	it('replaces notifications with the same group only within the same position stack', async () => {
		notification.show({
			group: 'foo',
			position: 'top',
			message: 'Top foo notification',
		});

		notification.show({
			group: 'foo',
			position: 'bottom',
			message: 'Bottom foo notification',
		});

		notification.show({
			group: 'foo',
			position: 'top',
			message: 'Replacement top foo notification',
		});

		expect(screen.queryByText('Top foo notification')).toBeNull();
		expect(screen.getByText('Replacement top foo notification')).not.toBeNull();
		expect(screen.getByText('Bottom foo notification')).not.toBeNull();
		expect(document.querySelectorAll('.z-notification')).toHaveLength(2);
	});

	it('does not replace notifications with different groups', async () => {
		notification.show({
			group: 'foo',
			message: 'Foo notification',
		});

		notification.show({
			group: 'share',
			message: 'Share notification',
		});

		expect(screen.getByText('Foo notification')).not.toBeNull();
		expect(screen.getByText('Share notification')).not.toBeNull();
	});

	it('dispatches notification-removed event when timer expires', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Trigger';
		document.body.append(trigger);

		const eventHandler = vi.fn();
		document.addEventListener('notification-removed', eventHandler);

		notification.show({
			element: trigger,
			message: 'Dispatch event after timer ended',
			status: 'info',
			hasTimer: true,
		});

		await vi.advanceTimersByTimeAsync(notification.notificationTimeout);

		expect(eventHandler).toHaveBeenCalledTimes(1);
		expect(eventHandler.mock.calls[0][0].detail.originator).toBe(trigger);

		document.removeEventListener('notification-removed', eventHandler);
	});

	it('dispatches notification-removed event when closed manually', async () => {
		const trigger = document.createElement('button');
		trigger.textContent = 'Trigger';
		document.body.append(trigger);

		const user = userEvent.setup({
			advanceTimers: vi.advanceTimersByTime,
		});

		const eventHandler = vi.fn();
		document.addEventListener('notification-removed', eventHandler);

		notification.show({
			element: trigger,
			message: 'Dispatch Event manual with close button',
			status: 'info',
			hasTimer: true,
		});

		await user.click(screen.getByRole('button', { name: 'Meldung schließen', hidden: true }));

		expect(eventHandler).toHaveBeenCalledTimes(1);
		expect(eventHandler.mock.calls[0][0].detail.originator).toBe(trigger);

		document.removeEventListener('notification-removed', eventHandler);
	});

	it('dispatches events only for notifications whose timer expires, not for replaced ones', async () => {
		const trigger1 = document.createElement('button');
		const trigger2 = document.createElement('button');
		trigger1.textContent = 'Trigger 1';
		trigger2.textContent = 'Trigger 2';
		document.body.append(trigger1, trigger2);

		const eventHandler = vi.fn();
		document.addEventListener('notification-removed', eventHandler);

		// First notification with timer
		notification.show({
			element: trigger1,
			group: 'test-group',
			message: 'First notification',
			status: 'info',
			hasTimer: true,
		});

		// Advance time partially (not enough to trigger timeout)
		await vi.advanceTimersByTimeAsync(1000);

		// Second notification replaces the first one (same group)
		notification.show({
			element: trigger2,
			group: 'test-group',
			message: 'Second notification',
			status: 'info',
			hasTimer: true,
		});

		// First notification was replaced, no event should have been dispatched yet
		expect(eventHandler).not.toHaveBeenCalled();
		expect(screen.queryByText('First notification')).toBeNull();
		expect(screen.getByText('Second notification')).not.toBeNull();

		// Wait for second notification's timer to expire
		await vi.advanceTimersByTimeAsync(notification.notificationTimeout);

		// Only one event should be dispatched (from second notification)
		expect(eventHandler).toHaveBeenCalledTimes(1);
		expect(eventHandler.mock.calls[0][0].detail.originator).toBe(trigger2);

		document.removeEventListener('notification-removed', eventHandler);
	});
});