Elquer Carlos

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:

  1. 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.

  2. 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.

Fim do ato