|
| 1 | +import '@testing-library/jest-dom/vitest'; |
| 2 | +import { configureI18n } from '@simple-module-py/i18n'; |
| 3 | +import { render, screen } from '@testing-library/react'; |
| 4 | +import { describe, expect, test, vi } from 'vitest'; |
| 5 | + |
| 6 | +configureI18n({ |
| 7 | + locale: 'en', |
| 8 | + messages: { |
| 9 | + 'file_storage.table.select_all': 'Select every file on this page', |
| 10 | + 'file_storage.table.select_row': 'Select {name}', |
| 11 | + 'file_storage.table.filename': 'File', |
| 12 | + 'file_storage.table.type': 'Type', |
| 13 | + 'file_storage.table.size': 'Size', |
| 14 | + 'file_storage.table.uploaded_by': 'Uploaded by', |
| 15 | + 'file_storage.table.when': 'When', |
| 16 | + 'file_storage.table.actions': 'Actions', |
| 17 | + 'file_storage.actions.download': 'Download', |
| 18 | + }, |
| 19 | +}); |
| 20 | + |
| 21 | +import { FileTable } from '../file_storage/pages/components/FileTable'; |
| 22 | +import type { StoredFile } from '../file_storage/pages/types'; |
| 23 | + |
| 24 | +const FILES: StoredFile[] = [ |
| 25 | + { |
| 26 | + id: 'f1', |
| 27 | + filename: 'quarterly.pdf', |
| 28 | + content_type: 'application/pdf', |
| 29 | + size_bytes: 2048, |
| 30 | + uploaded_by_label: 'admin', |
| 31 | + created_at: '2026-09-03T10:00:00Z', |
| 32 | + } as StoredFile, |
| 33 | +]; |
| 34 | + |
| 35 | +function renderTable(selectedIds: string[] = []) { |
| 36 | + return render( |
| 37 | + <FileTable |
| 38 | + files={FILES} |
| 39 | + selectedIds={selectedIds} |
| 40 | + canDelete |
| 41 | + onToggleRow={vi.fn()} |
| 42 | + onToggleAll={vi.fn()} |
| 43 | + empty={null} |
| 44 | + />, |
| 45 | + ); |
| 46 | +} |
| 47 | + |
| 48 | +describe('FileTable selection checkboxes', () => { |
| 49 | + test('both checkboxes are named for a screen reader', () => { |
| 50 | + renderTable(); |
| 51 | + |
| 52 | + expect( |
| 53 | + screen.getByRole('checkbox', { name: 'Select every file on this page' }), |
| 54 | + ).toBeInTheDocument(); |
| 55 | + expect(screen.getByRole('checkbox', { name: /quarterly\.pdf/ })).toBeInTheDocument(); |
| 56 | + }); |
| 57 | + |
| 58 | + test('both checkboxes carry the 44px phone bleed', () => { |
| 59 | + renderTable(); |
| 60 | + |
| 61 | + for (const name of ['Select every file on this page', /quarterly\.pdf/] as const) { |
| 62 | + expect(screen.getByRole('checkbox', { name })).toHaveClass('max-lg:before:-inset-3.5'); |
| 63 | + } |
| 64 | + }); |
| 65 | + |
| 66 | + test('the header row is tall enough on phones to hold that bleed', () => { |
| 67 | + renderTable(); |
| 68 | + |
| 69 | + // The 14px above the select-all box has nowhere to go otherwise: the |
| 70 | + // table container is `overflow-x-auto` inside an `overflow-hidden` card, |
| 71 | + // and a clipped overflow region is not hit-testable. A 56px header row |
| 72 | + // centres the 16px box with 20px of cell either side, so the whole target |
| 73 | + // stays inside. |
| 74 | + const cell = screen |
| 75 | + .getByRole('checkbox', { name: 'Select every file on this page' }) |
| 76 | + .closest('th'); |
| 77 | + |
| 78 | + expect(cell).toHaveClass('max-lg:h-14'); |
| 79 | + }); |
| 80 | + |
| 81 | + test('the header reports the all-selected state', () => { |
| 82 | + renderTable(['f1']); |
| 83 | + |
| 84 | + expect(screen.getByRole('checkbox', { name: 'Select every file on this page' })).toBeChecked(); |
| 85 | + }); |
| 86 | +}); |
0 commit comments