/** * Tests for FolderReadmePanel (#1268). */ import { describe, it, expect, beforeEach, vi } from 'vitest'; import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { http, HttpResponse } from 'msw'; import { render } from '../utils'; import { FolderReadmePanel } from '../../components/FolderReadmePanel'; import { server } from '../mocks/server'; describe('FolderReadmePanel', () => { beforeEach(() => { // localStorage is a vi.fn() mock in setup.ts (no real persistence) and // calls/return values leak across tests — reset it so each test starts // with the collapse preference unset (expanded). vi.mocked(localStorage.getItem).mockReturnValue(null); vi.mocked(localStorage.setItem).mockClear(); }); it('renders nothing when the folder has no markdown (404)', async () => { server.use( http.get('/api/v1/library/folders/:id/readme', () => HttpResponse.json({ detail: 'No markdown' }, { status: 404 }), ), ); render(); // Wait briefly so the query has time to resolve, then confirm no panel // chrome leaked into the DOM (the test render util mounts toast/provider // wrappers, so we can't assert `container.firstChild === null`). await waitFor(() => { expect(screen.queryByText('Truncated')).not.toBeInTheDocument(); expect(document.querySelector('button[type="button"] svg.lucide-file-text')).toBeNull(); }); }); it('renders markdown content and the filename when present', async () => { server.use( http.get('/api/v1/library/folders/:id/readme', () => HttpResponse.json({ filename: 'README.md', content: '# Robot model\n\nA cute robot.', truncated: false, }), ), ); render(); expect(await screen.findByText('README.md')).toBeInTheDocument(); expect(await screen.findByRole('heading', { name: 'Robot model' })).toBeInTheDocument(); expect(screen.getByText('A cute robot.')).toBeInTheDocument(); }); it('shows a Truncated chip when the API flags the content as clipped', async () => { server.use( http.get('/api/v1/library/folders/:id/readme', () => HttpResponse.json({ filename: 'description.md', content: 'very long content', truncated: true, }), ), ); render(); expect(await screen.findByText('Truncated')).toBeInTheDocument(); }); it('collapses to a reopen control and hides the content, persisting the choice (#2520)', async () => { server.use( http.get('/api/v1/library/folders/:id/readme', () => HttpResponse.json({ filename: 'README.md', content: '# Robot model\n\nA cute robot.', truncated: false, }), ), ); const user = userEvent.setup(); render(); // Expanded by default: content visible. expect(await screen.findByRole('heading', { name: 'Robot model' })).toBeInTheDocument(); // Collapse hides the markdown body... await user.click(screen.getByRole('button', { name: 'Hide README' })); await waitFor(() => { expect(screen.queryByRole('heading', { name: 'Robot model' })).not.toBeInTheDocument(); }); // ...and offers a reopen control + persists the choice. expect(screen.getAllByRole('button', { name: 'Show README' }).length).toBeGreaterThan(0); expect(localStorage.setItem).toHaveBeenCalledWith('fileManager.readmeCollapsed', '1'); }); it('starts collapsed when the persisted preference is collapsed (#2520)', async () => { vi.mocked(localStorage.getItem).mockImplementation((k) => k === 'fileManager.readmeCollapsed' ? '1' : null, ); server.use( http.get('/api/v1/library/folders/:id/readme', () => HttpResponse.json({ filename: 'README.md', content: '# Robot model\n\nA cute robot.', truncated: false, }), ), ); render(); // Reopen control is present; the markdown body is not rendered. expect((await screen.findAllByRole('button', { name: 'Show README' })).length).toBeGreaterThan(0); expect(screen.queryByRole('heading', { name: 'Robot model' })).not.toBeInTheDocument(); }); });