UIKit 100% migrado e CSRF global nos endpoints de fetch
Marco histórico: UIKit 100% zerado em todas as pastas de páginas. CSRF global em todos os endpoints JS e fix de flakiness em testes Playwright.
Esse commit era o destino: zera UIKit em TODAS as pastas de paginas (100% migrado).
A migração de UIKit para Bootstrap 5 começou há dias e avançou módulo por módulo — alguns via script automatizado, outros manualmente onde o contexto exigia. Hoje o último grupo de arquivos foi migrado. Não existe mais uma única ocorrência de UIKit nas views do projeto. É Bootstrap 5 de ponta a ponta.
O segundo trabalho relevante foi o CSRF global para todos os endpoints chamados via JavaScript. A abordagem anterior era adicionar CSRF pontualmente onde parecia mais crítico. O problema: endpoints “menos críticos” também precisam de proteção — upload de avatar, notificações, push, qualquer endpoint que aceita fetch JSON de formulário.
A mudança foi criar fetchComCsrf() — um wrapper que automaticamente inclui o token CSRF em toda chamada fetch() POST do sistema:
// em vez de fetch direto sem token
fetch('/ajaxphp/upload_avatar.php', { method: 'POST', body: formData });
// wrapper que inclui CSRF automaticamente
fetchComCsrf('/ajaxphp/upload_avatar.php', { body: formData });
Com isso, adicionar CSRF a novos endpoints é automático — você usa fetchComCsrf e não precisa lembrar de incluir o token manualmente.
O terceiro tema do dia foi o fix de flakiness nos testes Playwright. Testes que passam às vezes e falham outras são piores do que não ter teste — eles minam a confiança no suite de testes. O problema estava em duas coisas:
-
Race condition: a promise de ler o body HTTP estava correndo com um
location.reload()disparado pela resposta. Ler o body dentro do predicate resolve isso. -
Verificação de response body vs comportamento observável: em vez de verificar o que a API retornou no body, o teste verifica o que mudou na UI — o comportamento que o usuário vê, não o detalhe de implementação da resposta.
// verificação frágil (o que a API retornou)
await expect(response.body()).toContain('success');
// verificação robusta (o que o usuário vê)
await expect(page.locator('.alert-success')).toBeVisible();
Também iniciei a configuração do Elquer.com — gravando os primeiros vídeos sobre o projeto. Do código para o conteúdo.