@silasfmartins/testhub 1.0.0

package/scripts/init-frontend.ts

@@ -0,0 +1,727 @@
+#!/usr/bin/env node
+// @ts-nocheck
+
+import fs from 'node:fs'
+import { execSync } from 'child_process'
+import yaml from 'js-yaml'
+import path from 'path'
+import {
+  generateBiomeConfigString,
+  generateCoverageReadme,
+  generatePackageJson,
+  generateTsConfigForProject,
+  generateVitestConfigString,
+  getLatestVersions,
+} from './package-versions.js'
+import { setupUltracite } from './ultracite-setup.js'
+
+const root = process.cwd()
+const catalogPath = path.join(root, 'catalog-info.yaml')
+
+if (!fs.existsSync(catalogPath)) {
+  console.error('❌ Arquivo catalog-info.yaml não encontrado.')
+  process.exit(1)
+}
+
+const catalog = yaml.load(fs.readFileSync(catalogPath, 'utf-8')) as Record<string, unknown>
+const projectName = catalog?.metadata?.name || 'meu-projeto'
+const projectNameUnderscore = projectName.replace(/-/g, '_')
+
+const write = (filePath: string, content: string) => {
+  const fullPath = path.join(root, filePath)
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true })
+  fs.writeFileSync(fullPath, content)
+}
+
+async function main() {
+  console.log('🚀 Inicializando projeto Frontend com versões atualizadas...')
+  console.log(`📦 Projeto: ${projectName}`)
+  console.log('')
+
+  // ✅ Buscar versões mais recentes
+  const versions = await getLatestVersions()
+
+  // ✅ Gerar package.json com versões atualizadas
+  const packageJsonContent = generatePackageJson(
+    projectName,
+    'frontend',
+    versions,
+  )
+
+  // ✅ Gerar tsconfig.json baseado no AutoCore
+  const tsconfigContent = generateTsConfigForProject('frontend')
+
+  // ✅ Gerar vitest.config.ts baseado no AutoCore (NOVO!)
+  const vitestConfigContent = generateVitestConfigString('frontend')
+
+  // ✅ Gerar biome.json sincronizado com AutoCore
+  const biomeConfigContent = generateBiomeConfigString()
+
+  console.log('📝 Criando arquivos do projeto...')
+
+  // package.json com versões dinâmicas
+  write('package.json', JSON.stringify(packageJsonContent, null, 2))
+
+  // ✅ tsconfig.json sempre sincronizado com o AutoCore
+  write('tsconfig.json', JSON.stringify(tsconfigContent, null, 2))
+
+  // ✅ vitest.config.ts sempre sincronizado com o AutoCore (NOVO!)
+  write('vitest.config.ts', vitestConfigContent)
+
+  // ✅ biome.json sincronizado automaticamente com o AutoCore
+  write('biome.json', biomeConfigContent)
+
+  // playwright.config.ts
+  write(
+    'playwright.config.ts',
+    `
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  globalSetup: '@silasfmartins/testhub/setup',
+  reporter: [['list'], ['html', { open: 'never' }], ['@silasfmartins/testhub/reporter']],
+  testDir: './tests',
+  testMatch: ['**/**/*.spec.ts', '**/**/*.test.ts'],
+  timeout: 1_800_000,
+  expect: {
+    timeout: 1_800_000,
+  },
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  use: {
+    baseURL: '',
+    screenshot: 'on',
+    trace: 'on',
+    video: 'on',
+  },
+  projects: [
+    // ✅ Projetos "headless" (sem browser) — para SSH, API, Banco, Mobile
+    {
+      name: 'ssh',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'api',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'banco',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'mobile',
+      use: { browserName: undefined },
+    },
+
+    // ✅ Projetos de browser — só serão usados se você solicitar via --project
+    {
+      name: 'chromium',
+      use: {
+        browserName: 'chromium',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        browserName: 'firefox',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        browserName: 'webkit',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+  ],
+});
+`,
+  )
+
+  // .npmrc
+  write(
+    '.npmrc',
+    `registry=https://pkgs.dev.azure.com/telefonica-vivo-brasil/_packaging/DevOps/npm/registry/`,
+  )
+
+  // .gitignore
+  write(
+    '.gitignore',
+    `# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+playwright-videos
+/playwright-videos/
+/playwright-videos
+
+# Tests e logs
+/tests
+/logs
+
+# Environment files
+.env
+.env.preprod
+.env.esteira1
+.env.esteira2
+.env.prodlike
+.env.prod
+
+.vscode
+.vscode/
+docs
+docs/
+
+# AutoCore específicos
+.test-data-store.json
+.env.lock
+.configlogger.lock
+
+# VS Code
+.vscode/settings.json
+.github/
+.github
+
+# Biome
+.biome.log
+
+# Coverage
+coverage/
+*.lcov
+
+# Screenshots e videos
+/test-results/
+/playwright-report/`,
+  )
+
+  // Arquivo de environment padrão
+  write(
+    '.env',
+    `# Arquivo que seleciona o ambiente a ser utilizado
+ENV=preprod`,
+  )
+
+  // Arquivo de environment padrão
+  write(
+    '.env.preprod',
+    `# Configurações de ambiente para preprod
+BASE_URL=https://your-app.preprod.com
+NAVIGATION_TIMEOUT=15000
+SLOW_MO=0
+WORKERS=undefined
+RETRIES=0
+# Adicione suas variáveis específicas aqui`,
+  )
+
+  // Arquivo de environment esteira1
+  write(
+    '.env.esteira1',
+    `# Configurações de ambiente para esteira1
+BASE_URL=https://your-app.esteira1.com
+# Adicione suas variáveis específicas aqui`,
+  )
+
+  // Arquivo de environment esteira2
+  write(
+    '.env.esteira2',
+    `# Configurações de ambiente para esteira2
+BASE_URL=https://your-app.esteira2.com
+# Adicione suas variáveis específicas aqui`,
+  )
+
+  // Arquivo de environment prodlike
+  write(
+    '.env.prodlike',
+    `# Configurações de ambiente para prodlike
+BASE_URL=https://your-app.prodlike.com
+# Adicione suas variáveis específicas aqui`,
+  )
+
+  // Attributes exemplo
+  write(
+    'src/attributes/AttributesAcessarPagina.ts',
+    `export class AttributesAcessarPagina {
+  protected readonly modal = '//h5[text()="Acesso Ferramentas"]'
+}`,
+  )
+
+    //env.ts
+  write('src/env.ts', `import { config } from 'dotenv'
+
+config()
+
+const rawEnv = {
+  ENV: process.env.ENV,
+}
+export const env = rawEnv
+`)
+
+  // Page Object para Dashboard
+  write(
+    'src/pages/AcessarPagina.ts',
+    `import { WebActions } from '@silasfmartins/testhub'
+import { AttributesAcessarPagina } from '../attributes/AttributesAcessarPagina.js'
+
+export default class AcessarPagina extends AttributesAcessarPagina {
+  async navigateToLoginPage(): Promise<void> {
+    await WebActions.navigateTo('/', 'Página inicial')
+  }
+
+  async validarModal(): Promise<void> {
+    await WebActions.waitForVisible(
+      this.modal,
+      5000,
+      'Título Acesso Ferramentas'
+    )
+  }
+}
+`,
+  )
+
+  // Attributes para Dashboard
+  write(
+    'src/attributes/AttributesAcessarPagina.ts',
+    `import { type ILocator, TestContext } from '@silasfmartins/testhub'
+
+export class AttributesAcessarPagina {
+  protected get modal(): ILocator {
+    return TestContext.page.locator('//h5[text()="Acesso Ferramentas"]')
+  }
+}
+`,
+  )
+
+  // Exemplo de teste básico (padrão recomendado)
+  write(
+    'tests/login.spec.ts',
+    `import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import AcessarPagina from '../src/pages/AcessarPagina.js'
+
+test.describe('Página Inicial', () => {
+  test('Deve visitar a página inicial [octane-123456]', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo
+    await TestAnnotations.setSystem('MEU_SISTEMA')
+    await new AcessarPagina().navigateToLoginPage()
+  })
+})
+`,
+  )
+
+  // Pipeline Azure DevOps
+  write(
+    '.azuredevops/azure-pipeline.yml',
+    `trigger:
+  batch: true
+  branches:
+    include:
+    - 'master'
+  paths:
+    include:
+    - '*'
+    exclude:
+    - .azuredevops/*
+    - docs/*
+    - catalog-info.yaml
+    - mkdocs.yml
+    - scripts.py
+    - catalog/*
+
+resources:
+  repositories:
+    - repository: CodePlay
+      name: DevOps/Vivo.CodePlay.Pipelines
+      type: git
+      ref: refs/heads/test-playwright
+      endpoint: CodePlay
+
+pool:
+  name: GeneralPurposeLinuxAgentsCI
+
+extends:
+  template: tech_products/qa/build/pipeline_node_npm.yml@CodePlay
+  parameters:
+    jobName: 'build_${projectNameUnderscore}_pkg'
+    commitSHA: '$(Build.SourceVersion)'
+    registryServiceConnection: 'ACR-DEVOPS'
+    govAppAcronym: ''
+    skipScan: false  # Alterado para false para executar Fortify e SonarQube
+`,
+  )
+
+  // SonarQube configuration
+  write(
+    '.azuredevops/sonar-project.properties',
+    `################### NÃO ALTERAR!!! ###################
+# Informações gerais sobre o projeto.                #
+# Todas as variáveis de ambiente são fornecidas pela #
+# automação, não alterar!                            #
+######################################################
+
+sonar.projectDescription=Projeto Frontend com AutoCore
+sonar.analysis.orgName=\${env.AZ_ORG_NAME}
+sonar.analysis.buildAuthor=\${env.AZ_BUILD_AUTHOR}
+sonar.scm.exclusions.disabled=false
+sonar.scm.forceReloadAll=true
+sonar.log.level=DEBUG
+sonar.verbose=true
+sonar.sourceEncoding=UTF-8
+
+# Diretórios e arquivos relevantes para Node.js/TypeScript
+sonar.sources=src
+sonar.inclusions=**/*.ts
+sonar.test.inclusions=**/*.spec.ts,**/*.test.ts
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# Exclusões de cobertura e análise
+sonar.exclusions=node_modules/**,dist/**,coverage/**,**/*.config.js,**/*.config.ts
+sonar.coverage.exclusions=**/*.d.ts,node_modules/**,dist/**,coverage/**,**/*.config.js,**/*.config.ts,**/*.spec.ts,**/*.test.ts
+sonar.test.exclusions=node_modules/**,dist/**,coverage/**
+
+# Configurações específicas para projetos Frontend
+sonar.javascript.environments=browser,node
+sonar.typescript.node=true
+`,
+  )
+
+  // ✅ Estrutura de testes
+  console.log('📝 Criando estrutura de testes...')
+
+  // tests/example.spec.ts - Teste E2E com Playwright
+  write(
+    'tests/example.spec.ts',
+    `import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import AcessarPagina from '../src/pages/AcessarPagina.js'
+
+test.describe('Página Inicial', () => {
+  test('Deve visitar a página inicial [octane-123456]', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo
+    await TestAnnotations.setSystem('MEU_SISTEMA')
+    await new AcessarPagina().navigateToLoginPage()
+  })
+})
+`,
+  )
+
+  // README.md
+  write(
+    'README.md',
+    `# ${projectName}
+
+Projeto de automação de testes Frontend baseado no TestHub (AutoCore).
+
+## 🚀 Como usar
+
+### Instalação de dependências
+\`\`\`bash
+npm install
+\`\`\`
+
+### Executar testes
+\`\`\`bash
+# Ambiente preprod
+npm run test:preprod
+
+# Ambiente esteira1
+npm run test:esteira1
+
+# Ambiente esteira2
+npm run test:esteira2
+
+# Ambiente prodlike
+npm run test:prodlike
+\`\`\`
+
+### Gerar Artefato para Projetos de Cenários
+npm run build
+
+### Configuração de ambiente
+
+1. Configure as variáveis de ambiente nos arquivos \`.env.*\`
+2. Defina BASE_URL para cada ambiente
+3. Configure viewport, timeouts conforme necessário
+
+## 📋 Estrutura do projeto
+
+\`\`\`
+${projectName}/
+├── src/
+│   ├── pages/        # Page Objects para interação com páginas
+│   └── attributes/          # Seletores e elementos das páginas
+│   └── setup/fixtures               # Fixtures e setup customizado (opcional)
+|   └── env.ts                # Configuração de environment
+├── tests/                   # Arquivos de teste
+├── .env.*                  # Variáveis de ambiente por ambiente
+├── playwright.config.ts    # Configuração do Playwright
+├── tsconfig.json          # Configuração TypeScript (sincronizada)
+├── biome.json           # Configuração Biome (sincronizada)
+└── README.md            # Esta documentação
+\`\`\`
+
+## 🔧 Desenvolvimento
+
+- **TypeScript**: Configurado e sincronizado com AutoCore
+- **Playwright**: Framework de testes E2E
+- **AutoCore**: Biblioteca de utilitários para automação
+- **Page Object Model**: Padrão de design implementado
+- **Suporte a múltiplos browsers**: Chrome, Firefox, Safari
+- **Biome**: Linting e formatação (configuração sincronizada)
+- **Ultracite**: Experiência de desenvolvimento aprimorada
+
+## 📊 Relatórios
+
+Os relatórios são gerados automaticamente em:
+- \`playwright-report/\` - Relatório HTML visual
+- \`test-results/\` - Resultados detalhados e artifacts
+- Logs estruturados no console
+- Screenshots automáticos em falhas
+- Vídeos de execução (quando habilitados)
+
+## 🧪 Exemplos de Uso
+
+### Teste básico de página
+\`\`\`typescript
+// ✅ Importe 'test' do @silasfmartins/testhub - a page é injetada automaticamente!
+import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import PageLogin from '../src/pages/PageLogin.js';
+
+test.describe('Login', () => {
+  test('Login test', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo;
+    await TestAnnotations.setSystem('MEU_SISTEMA');
+    
+    await new PageLogin().navigateToLogin();
+  });
+});
+\`\`\`
+
+### Page Object personalizado
+\`\`\`typescript
+import { WebActions, TestContext } from '@silasfmartins/testhub';
+import { AttributesMyPage } from '../attributes/AttributesMyPage.js';
+
+export class MyPage extends AttributesMyPage {
+  async clickButton(buttonName: string) {
+    // Exemplo seguro sem usar template-placeholder dentro do README template
+    // const button = TestContext.page.locator("button:has-text('" + buttonName + "')");
+    await WebActions.click(this.button, 'Clicando em ' + buttonName);
+  }
+}
+\`\`\`
+
+## 🔧 Comandos Úteis
+
+\`\`\`bash
+# Desenvolvimento
+npm run test:preprod         # Executar testes em preprod
+npm run test:preprod:chromium # Executar apenas no Chrome
+npm run ui:preprod          # Interface visual dos testes
+npm run debug:preprod       # Modo debug
+
+# Qualidade de código
+npx biome check            # Verificar código com Biome
+npx biome format           # Formatar código com Biome
+npx biome check --apply    # Aplicar correções automáticas
+
+# Debug avançado
+npm run test:preprod -- --debug        # Executar em modo debug
+npm run test:preprod -- --headed       # Executar com interface visual
+npm run test:preprod -- --ui           # Executar com UI do Playwright
+npm run test:preprod -- --trace=on     # Executar com traces habilitados
+\`\`\`
+
+## 🎯 Configuração de Ambiente
+
+### Para debug local:
+\`\`\`bash
+# Ativar modo lento
+SLOW_MO=1000 npm run test:preprod
+\`\`\`
+
+## 🔄 Sincronização com AutoCore
+
+Este projeto mantém sincronização automática com o AutoCore para:
+
+- **tsconfig.json**: Configuração de compilação TypeScript
+- **biome.json**: Configuração de linting e formatação
+- **Versões de dependências**: Sempre atualizadas
+
+Para sincronizar manualmente:
+\`\`\`bash
+npm i
+\`\`\`
+
+## 📈 Métricas e Monitoramento
+
+- **Relatórios HTML**: Visualização rica dos resultados
+- **Logs estruturados**: Para análise e debugging
+- **Screenshots automáticos**: Em caso de falhas
+- **Vídeos de execução**: Para análise detalhada
+- **Traces do Playwright**: Para debug avançado
+- **Métricas de performance**: Tempo de carregamento de páginas
+
+## 🎨 Boas Práticas
+
+### Page Object Model:
+- **Separação clara**: Attributes (seletores) e Page Objects (ações)
+- **Reutilização**: Métodos comuns entre páginas
+- **Manutenibilidade**: Fácil atualização quando UI muda
+
+### Seletores:
+- **Prioridade**: data-testid > id > class > text
+- **Estabilidade**: Evitar seletores frágeis como CSS complexos
+- **Consistência**: Padrão de nomenclatura uniforme
+
+### Testes:
+- **Independência**: Cada teste deve ser independente
+- **Limpeza**: Setup e teardown adequados
+- **Assertivas**: Validações claras e específicas
+
+## 🆘 Resolução de Problemas
+
+### Erro de timeout
+\`\`\`bash
+# Aumentar timeout no playwright.config.ts
+timeout: 120000  # 2 minutos
+
+# Ou aumentar timeout específico
+NAVIGATION_TIMEOUT=30000 npm run test:preprod
+\`\`\`
+
+### Problemas de seletores
+\`\`\`bash
+# Usar modo debug para inspecionar elementos
+npm run debug:preprod
+\`\`\`
+
+### Performance lenta
+\`\`\`bash
+# Reduzir workers em CI
+workers: process.env.WORKERS ? 1 : undefined
+
+# Desabilitar recursos desnecessários
+video: 'retain-on-failure'  # Ao invés de 'on'
+\`\`\`
+
+### Atualizar dependências
+\`\`\`bash
+npx npm-check-updates -u && npm install
+npx playwright install  # Atualizar browsers
+\`\`\`
+
+## 📝 Contribuição
+
+1. Mantenha os padrões de código (Biome configurado)
+2. Adicione testes para novas funcionalidades
+3. Use o Page Object Model
+4. Documente seletores complexos
+5. Valide em múltiplos browsers quando relevante
+
+## 📚 Referências
+
+- [AutoCore WebSite](http://brtlvlty0559pl:3002/)
+- [Playwright Documentation](https://playwright.dev/)
+- [Page Object Model](https://playwright.dev/docs/pom)
+- [Best Practices](https://playwright.dev/docs/best-practices)
+
+---
+
+**Gerado automaticamente pelo AutoCore v${versions?.dependencies?.['@silasfmartins/testhub'] || 'latest'}**
+`,
+  )
+
+  // 📊 README específico para Coverage
+  const coverageReadmeTemplate = generateCoverageReadme(projectName)
+  write('docs/COVERAGE.md', coverageReadmeTemplate)
+
+  console.log('📊 Documentação de cobertura criada: docs/COVERAGE.md')
+
+  // 📦 Instalação de dependências NPM
+  console.log('📦 Instalando dependências NPM...')
+  try {
+    execSync('npm install', {
+      stdio: 'inherit',
+      cwd: root,
+    })
+    console.log('✅ Dependências NPM instaladas com sucesso')
+  } catch (err) {
+    console.warn('⚠️ Erro ao instalar dependências automaticamente', err)
+    console.log('💡 Execute manualmente: npm install')
+  }
+
+  // 🎭 CRÍTICO: Sempre instalar browsers Playwright
+  console.log('🎭 Instalando browsers Playwright...')
+  try {
+    execSync('npx playwright install', {
+      stdio: 'inherit',
+      cwd: root,
+    })
+    console.log('✅ Browsers Playwright instalados com sucesso')
+  } catch (err) {
+    console.warn('⚠️ Erro ao instalar browsers automaticamente', err)
+    console.log('💡 Execute manualmente: npx playwright install')
+  }
+
+  // ✅ Configurar Ultracite automaticamente
+  console.log('🤖 Configurando ambiente de desenvolvimento...')
+  await setupUltracite(root)
+
+  // ✅ Garantir sincronização final do biome.json
+  console.log('🔧 Sincronizando configuração do Biome...')
+  const finalBiomeConfig = generateBiomeConfigString()
+  write('biome.json', finalBiomeConfig)
+
+  // ✅ Instalação finalizada com sucesso
+
+  console.log('')
+  console.log('🎉 Projeto Frontend gerado com sucesso!')
+  console.log('')
+  console.log('📋 Próximos passos:')
+  console.log('   1. Configure suas variáveis de ambiente nos arquivos .env.*')
+  console.log('   2. Adicione sua BASE_URL nos ambientes')
+  console.log('   3. Execute: npm run test:preprod')
+  console.log('   4. O Ultracite está configurado para VS Code')
+  console.log('')
+  console.log('🛠️ Comandos úteis:')
+  console.log('   npm run test:preprod         - Executar testes em preprod')
+  console.log('   npm run test:esteira1        - Executar testes em esteira1')
+  console.log('   npm run test:esteira2        - Executar testes em esteira2')
+  console.log('   npm run test:prodlike        - Executar testes em prodlike')
+  console.log('   npm run ui:preprod          - Interface visual dos testes')
+  console.log('   npm run debug:preprod       - Modo debug')
+  console.log('   npx biome check            - Verificar código com Biome')
+  console.log('   npx biome format           - Formatar código com Biome')
+  console.log('')
+  console.log('✅ Configurações sincronizadas com AutoCore:')
+  console.log('   📝 tsconfig.json - Compilação TypeScript')
+  console.log('   🎨 biome.json - Linting e formatação (SINCRONIZADO)')
+  console.log('   🤖 Ultracite - Experiência de desenvolvimento')
+  console.log('   📦 Dependências - Versões mais recentes')
+  console.log('   🎭 Playwright - Configuração otimizada para frontend')
+  console.log('   🌐 Browsers - Chromium, Firefox e WebKit instalados')
+  console.log('')
+  console.log('🚀 Projeto pronto para desenvolvimento de testes frontend!')
+}
+
+// Executar função principal
+main().catch((error) => {
+  console.error('❌ Erro durante inicialização:', error)
+  process.exit(1)
+})