/**
* Component: Request Card Tests
* Documentation: documentation/frontend/components.md
*/
// @vitest-environment jsdom
import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
const cancelRequestMock = vi.hoisted(() => vi.fn());
vi.mock('@/lib/hooks/useRequests', () => ({
useCancelRequest: () => ({ cancelRequest: cancelRequestMock, isLoading: false }),
}));
vi.mock('next/image', () => ({
__esModule: true,
default: (props: any) =>
,
}));
vi.mock('@/contexts/PreferencesContext', () => ({
usePreferences: () => ({ squareCovers: false, setSquareCovers: vi.fn(), cardSize: 5, setCardSize: vi.fn() }),
}));
vi.mock('@/contexts/AuthContext', () => ({
useAuth: () => ({
user: { id: 'user-1', role: 'user' },
accessToken: 'test-token',
isLoading: false,
login: vi.fn(),
logout: vi.fn(),
refreshToken: vi.fn(),
setAuthData: vi.fn(),
}),
}));
const baseRequest = {
id: 'req-1',
status: 'pending',
progress: 0,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
audiobook: {
id: 'book-1',
title: 'Test Book',
author: 'Test Author',
},
};
describe('RequestCard', () => {
beforeEach(() => {
cancelRequestMock.mockReset();
});
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
it('shows progress and active indicator for downloads', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render(
);
expect(screen.getByText('Downloading')).toBeInTheDocument();
expect(screen.getByText('Active')).toBeInTheDocument();
expect(screen.getByText('45%')).toBeInTheDocument();
});
it('toggles the error message for failed requests', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render(
);
fireEvent.click(screen.getByRole('button', { name: 'Show error' }));
expect(await screen.findByText('Failure details')).toBeInTheDocument();
});
it('triggers cancel action', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
cancelRequestMock.mockResolvedValueOnce(undefined);
vi.spyOn(window, 'confirm').mockReturnValue(true);
render();
fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
fireEvent.click(screen.getByRole('button', { name: 'Cancel request' }));
await waitFor(() => {
expect(cancelRequestMock).toHaveBeenCalledWith('req-1');
});
});
it('does not show manual search or interactive search buttons', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render();
expect(screen.queryByRole('button', { name: 'Manual Search' })).toBeNull();
expect(screen.queryByRole('button', { name: 'Interactive Search' })).toBeNull();
});
it('shows setup indicator when progress is zero', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render(
);
expect(screen.getByText('Setting up...')).toBeInTheDocument();
});
it('hides action buttons when showActions is false', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render();
expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
});
it('does not cancel when confirmation is declined', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
vi.spyOn(window, 'confirm').mockReturnValue(false);
render();
fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
await waitFor(() => {
expect(cancelRequestMock).not.toHaveBeenCalled();
});
});
it('shows completed timestamp when available', async () => {
const { RequestCard } = await import('@/components/requests/RequestCard');
render(
);
expect(screen.getByText(/Completed/)).toBeInTheDocument();
});
});