Interface web complète : formulaire d'ajout (URL directe ou recherche de chaîne) et panneau de file d'attente avec sondage de la progression. - views/downloadForm/ : sélecteur de mode (vidéo/audio/miniature) partagé, ajout direct par URL, recherche de chaîne (GET /api/channel) avec ajout par résultat. Construction DOM via createElement/textContent (jamais d'innerHTML avec du texte venant de YouTube), pas juste par prudence : ça évite aussi tout risque d'injection depuis un titre de vidéo. - views/queuePanel/ : sonde GET /api/queue toutes les 1,5s, affiche statut/ progression/erreur par élément, annulation et lien de téléchargement natif (<a download>, pas de fetch+blob). - api/ : clients fetch typés (channelApi, queueApi), chaque await dans son propre try/catch avec message d'erreur adapté (réseau vs HTTP vs JSON). - QueueItem gagne un champ title optionnel (purement informatif, jamais utilisé pour construire la commande yt-dlp) pour un affichage plus parlant qu'une URL brute. - client/tsconfig.json + build.mjs : cible ES2022 (nécessaire pour Error.cause, jusque-là ES2020). - Vitest ajouté côté client (fonctions pures de src/format.ts ; le câblage DOM est vérifié manuellement, pas de jsdom pour l'instant). Deux bugs réels trouvés et corrigés en testant dans un vrai navigateur (pas seulement en lisant le code) : - CSS : un attribut `hidden` sur un conteneur `display: flex` se faisait écraser par cette règle (même spécificité, la feuille de l'auteur gagne) - les deux panneaux d'options restaient visibles en même temps. - server/src/routes/channel.ts : ne mappait vers 502 que les YtDlpError (code de sortie non nul), pas les erreurs brutes de spawn (ex. binaire introuvable - ENOENT), qui remontaient donc en 500 générique. Corrigé + test de non-régression. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
35 lines
970 B
TypeScript
35 lines
970 B
TypeScript
import { describe, expect, it } from 'vitest';
|
||
import { formatDuration, formatUploadDate } from '../src/format';
|
||
|
||
describe('formatDuration', () => {
|
||
it('formate en m:ss sous une heure', () => {
|
||
expect(formatDuration(65)).toBe('1:05');
|
||
});
|
||
|
||
it('complète les secondes avec un zéro', () => {
|
||
expect(formatDuration(60)).toBe('1:00');
|
||
});
|
||
|
||
it('formate en h:mm:ss au-delà d’une heure', () => {
|
||
expect(formatDuration(3725)).toBe('1:02:05');
|
||
});
|
||
|
||
it('retourne une chaîne vide si inconnue', () => {
|
||
expect(formatDuration(null)).toBe('');
|
||
});
|
||
});
|
||
|
||
describe('formatUploadDate', () => {
|
||
it('formate YYYYMMDD en JJ/MM/AAAA', () => {
|
||
expect(formatUploadDate('20260315')).toBe('15/03/2026');
|
||
});
|
||
|
||
it('retourne une chaîne vide si inconnue', () => {
|
||
expect(formatUploadDate(null)).toBe('');
|
||
});
|
||
|
||
it('retourne une chaîne vide si mal formée', () => {
|
||
expect(formatUploadDate('abc')).toBe('');
|
||
expect(formatUploadDate('2026-03-15')).toBe('');
|
||
});
|
||
});
|