test(button): adiciona testes e2e com cypress nos samples

[alinelariguet]

test(button): adiciona testes e2e com cypress nos samples

Resumo

Configura o Cypress no monorepo e adiciona testes E2E para os 3 samples existentes do componente po-button: basic, labs e social-network.

Os samples originais (em projects/ui/) são importados diretamente no app.module.ts via caminho relativo e servidos em rotas (/button/basic, /button/labs, /button/social-network). Um path mapping no tsconfig.app.json resolve @po-ui/ng-components para os fontes locais, permitindo que os samples funcionem sem build prévio da lib.

39 testes no total:

• po-button-basic.cy.ts — 5 testes (renderização, click/alert, kind padrão, disabled, classe CSS)
• po-button-labs.cy.ts — 25 testes (estado inicial, label, disabled, loading, danger, 4 ícones, kind, type, size, interação Danger↔Tertiary, click/dialog, restore completo)
• po-button-social-network.cy.ts — 9 testes (widget, dados dos amigos, botões de ação, fluxos Confirm/Ignore/Block, mensagem final, avatar)

Demonstração

Vídeo da execução dos samples e testes disponível na sessão Devin.

Atualizações desde última revisão

• Corrigida formatação Prettier em 3 arquivos (po-button-labs.cy.ts, po-button-social-network.cy.ts, app.module.ts)
• Nota CI: o job "Test ui" apresenta 4 falhas em PoPopoverComponent (focus/tab trapping) — são testes pré-existentes, sem relação com as mudanças desta PR

Checklist de Revisão

• cypress/support/e2e.ts suprime todas as exceções — O handler Cypress.on('uncaught:exception', () => false) impede que erros reais da aplicação falhem os testes. Avaliar se é aceitável ou se deveria ser mais seletivo.
• Seletores acoplados ao DOM interno — Testes usam seletores como po-icon i.an-newspaper, span.po-checkbox, .po-button-loading-icon. Se a estrutura interna dos componentes mudar, os testes quebrarão. Avaliar se data-testid seria preferível.
• Path mapping no tsconfig.app.json — "@po-ui/ng-components": ["projects/ui/src/public-api"] sobrescreve o mapeamento do tsconfig.json raiz (./dist/ng-components). Verificar se isso não impacta outros usos do projeto app ou builds de CI.
• Modificação do app.module.ts e app.component.html — O projeto app antes era vazio. Confirmar que adicionar declarations, rotas e <router-outlet> não quebra nenhum uso existente.
• Executar os testes localmente — validar os 39 testes conforme o plano abaixo.

Plano de Testes

1. Clonar a branch e rodar npm install
2. Iniciar o dev server: npx ng serve app --port 4200
3. Em outro terminal, executar os testes: npx cypress run --spec "cypress/e2e/po-button/**/*.cy.ts" --browser chrome
4. Validar que todos os 39 testes passam
5. (Opcional) Abrir a interface do Cypress (npx cypress open) e rodar os testes interativamente para visualizar o comportamento

Notes

• Sessão Devin: https://totvs.devinenterprise.com/sessions/001c7a7a7d924d32a53528d41e2f7cb5
• Solicitado por: @alinelariguet
• Os commits foram rebaseados para corrigir o header do commit (limite de 72 caracteres do commitlint)
• Formatação Prettier aplicada em seguida para corrigir lint

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 potential issue.

View 3 additional findings in Devin Review.

[devin-ai-integration]

🟡 Blanket suppression of all uncaught exceptions silently masks real application errors in E2E tests

The Cypress.on('uncaught:exception', () => { return false; }) handler at cypress/support/e2e.ts:4-6 unconditionally swallows every uncaught exception thrown by the application under test. This means if the Angular app throws a real runtime error (e.g., null reference, failed service call, broken binding), the Cypress tests will still pass. This defeats a key purpose of E2E testing — catching runtime failures — and can mask real regressions. The handler should either be scoped to known/expected exceptions (e.g., filtering by err.message) or removed entirely so that genuine application errors cause test failures.

Suggested change

	Cypress.on('uncaught:exception', () => {
	// Previne falhas de teste por exceções não tratadas da aplicação
	return false;
	Cypress.on('uncaught:exception', (err) => {
	// Ignore known third-party or framework errors that are not actionable
	if (err.message.includes('ResizeObserver loop') || err.message.includes('Script error')) {
	return false;
	}
	// Let all other exceptions fail the test
	return true;
	});

---

Was this helpful? React with 👍 or 👎 to provide feedback.