# Guia de Teste - Refatoração Modular Kannabium

## 📋 Pré-Requisitos

- [ ] Node.js v22+ (para testes de estrutura)
- [ ] Navegador moderno com suporte a ES6 modules (Chrome, Firefox, Safari, Edge)
- [ ] Servidor HTTP local (não abra com `file://` - modules requerem HTTPS/HTTP)

## 🧪 Teste 1: Validação de Estrutura (Node.js)

```bash
cd /home/biodev/bioDevOps/thca_Synthase_C_sativa

# Verificar sintaxe de todos os módulos
node -c modules/config.js
node -c modules/utils.js
node -c modules/pdb-manager.js
node -c modules/script-builder.js
node -c modules/viewer-manager.js
node -c modules/canvas-renderer.js
node -c modules/ui-manager.js
node -c modules/main.js

# Executar teste de estrutura
node test-structure.mjs
```

**Resultado esperado:**
```
✓ TESTE 1: Verificar existência de arquivos
✓ TESTE 2: Validação de Sintaxe
✓ TESTE 3: Estrutura de Dependências
✓ TESTE 4: Análise de Tamanho
```

## 🌐 Teste 2: Teste em Navegador

### 2.1 Iniciar Servidor Local

```bash
# Opção 1: Python
python -m http.server 8000

# Opção 2: Node.js
npx http-server -p 8000

# Opção 3: Node.js (alternativa)
npx serve -p 8000

# Opção 4: Deno
deno run --allow-net --allow-read https://deno.land/std@0.208.0/http/file_server.ts
```

### 2.2 Abrir no Navegador

```
http://localhost:8000
```

### 2.3 Verificações na Console

Abrir Developer Tools (F12) e executar:

```javascript
// Deve retornar a instância de KannabiumApp
window.kannabiumApp

// Acessar módulos individuais
window.kannabiumApp.ui
window.kannabiumApp.pdb
window.kannabiumApp.script
window.kannabiumApp.viewer
window.kannabiumApp.canvas
```

## ✅ Teste 3: Fluxo Completo da Aplicação

### Cenário 1: Carregamento Padrão
1. [ ] Página carrega sem erros
2. [ ] PDB padrão carregado (3VTE.pdb)
3. [ ] Preview do script aparece
4. [ ] Visualizador 3D renderiza corretamente
5. [ ] Console não mostra erros críticos

**Verificação:**
```javascript
// Setup
window.kannabiumApp.pdb.getCurrentSource() // deve ser 'default'
window.kannabiumApp.viewer.getStatus() // deve indicar sucesso
```

### Cenário 2: Mudança de Cores
1. [ ] Alterar cor do Domínio I
2. [ ] Clicar em "Atualizar script"
3. [ ] Preview atualiza com nova cor
4. [ ] Visualizador 3D muda cor

**Verificação:**
```javascript
const config = window.kannabiumApp.ui.getVisualizationConfig();
console.log(config.domainOneColor); // deve ser a nova cor
```

### Cenário 3: Upload de PDB
1. [ ] Selecionar "Usar PDB carregado"
2. [ ] Escolher arquivo PDB local
3. [ ] Script atualiza com novo arquivo
4. [ ] PDB status mostra upload

**Verificação:**
```javascript
window.kannabiumApp.pdb.getCurrentSource() // deve ser 'upload'
window.kannabiumApp.pdb.getCurrentFileName() // nome do arquivo
```

### Cenário 4: Download de Script
1. [ ] Alterar nome do output (ex: "meu_script")
2. [ ] Clicar botão "Baixar"
3. [ ] Arquivo `meu_script.pml` baixa localmente
4. [ ] Conteúdo é um script PyMOL válido

**Verificação:**
```javascript
// Simular download
const script = document.querySelector('#scriptPreview').textContent;
console.log(script.startsWith('reinitialize')); // true
console.log(script.includes('set_color')); // true
```

## 🔍 Teste 4: Validação de Módulos

### Config Module
```javascript
import { CONFIG } from './modules/config.js';

console.log(CONFIG.STRUCTURE_COLORS); // 8 cores definidas
console.log(CONFIG.RESIDUE_INDICES); // indices de resíduos
```

### Utils Module
```javascript
import * as utils from './modules/utils.js';

console.log(utils.hexToRgb('#ff8a1e')); // [255, 138, 30]
console.log(utils.sanitizeObjectName('123test!@#')); // 'obj_123test'
console.log(utils.isLikelyPdbContent('HEADER ...')); // true
```

### PDBManager Module
```javascript
import { PDBManager } from './modules/pdb-manager.js';

const pdb = new PDBManager();
pdb.setDefault('HEADER ...');
console.log(pdb.getCurrentSource()); // 'default'
```

### ScriptBuilder Module
```javascript
import { ScriptBuilder } from './modules/script-builder.js';

const builder = new ScriptBuilder();
builder.registerColor('test', '#ff0000');
const script = builder.build({ objectName: 'test' });
console.log(script.includes('reinitialize')); // true
```

### UIManager Module
```javascript
import { UIManager } from './modules/ui-manager.js';

// Nota: Requer DOM estar pronto
const ui = new UIManager();
console.log(ui.getElement('form')); // elemento do formulário
console.log(ui.getInputValue('outputName')); // nome do output
```

## 🐛 Teste 5: Tratamento de Erros

### Erro 1: PDB Vazio
1. [ ] Chamar `app.loadPdb('')`
2. [ ] Deve mostrar aviso no console
3. [ ] Não deve quebrar aplicação

### Erro 2: 3Dmol Indisponível
1. [ ] Bloquear carregamento de 3Dmol
2. [ ] Deve fazer fallback para canvas
3. [ ] Aplicação continua funcional

### Erro 3: Arquivo PDB Inválido
1. [ ] Fazer upload de arquivo não-PDB
2. [ ] Deve mostrar erro
3. [ ] Manter PDB anterior

**Verificação:**
```javascript
window.kannabiumApp.viewer.getMode(); // 'webgl' ou 'canvas'
window.kannabiumApp.viewer.getStatus(); // mensagem de status
```

## 📊 Teste 6: Performance

### Métricas de Inicialização
```javascript
// No console, executar:
window.performance.mark('app-start');
// ... usar app ...
window.performance.mark('app-end');
window.performance.measure('app-duration', 'app-start', 'app-end');
window.performance.getEntriesByType('measure')[0];
```

**Objetivo:** 
- Inicialização: < 2s
- Atualização preview: < 300ms
- Rendering 3D: < 500ms

## 📝 Teste 7: Compatibilidade do Navegador

| Navegador | ES6 Modules | Suportado | Data |
|-----------|-------------|----------|------|
| Chrome 90+ | ✓ | Sim | - |
| Firefox 67+ | ✓ | Sim | - |
| Safari 14+ | ✓ | Sim | - |
| Edge 15+ | ✓ | Sim | - |

**Testar em:**
- [ ] Chrome (Desktop)
- [ ] Firefox (Desktop)
- [ ] Safari (macOS ou iPad)
- [ ] Firefox (Mobile)
- [ ] Chrome (Mobile)

## 🧹 Teste 8: Limpeza

### Verificar Globais
```javascript
// Não devem existir mais:
console.log(typeof form); // undefined
console.log(typeof customColors); // undefined
console.log(typeof viewerInstance); // undefined

// Apenas esta deve existir:
console.log(window.kannabiumApp); // KannabiumApp instance
```

## 📝 Checklist de Validação Final

### Estrutura
- [ ] `modules/` contém 8 arquivos
- [ ] `modules/main.js` é o entry point
- [ ] `index.html` usa `type="module"`
- [ ] Sintaxe validada em todos os módulos

### Funcionalidade
- [ ] Página carrega sem erros
- [ ] PDB padrão renderiza
- [ ] Colors mudam em tempo real
- [ ] Upload de PDB funciona
- [ ] Download de script funciona

### Performance
- [ ] Inicialização < 2s
- [ ] Preview atualiza suavemente
- [ ] Sem vazamento de memória

### Compatibilidade
- [ ] Funciona em chromium-based
- [ ] Funciona em Firefox
- [ ] Funciona em Safari
- [ ] Funciona em mobile

### Código
- [ ] Sem globals poluídas
- [ ] Cada módulo responsável por 1 job
- [ ] Código legível e comentado
- [ ] Sem código morto

## 🚀 Próximas Etapas Após Validação

1. [ ] Remover `app.js` antigo e criar backup
2. [ ] Documentar quebras de compatibilidade (se houver)
3. [ ] Atualizar `deploy_uolhost/` 
4. [ ] Deploy para produção
5. [ ] Monitorar erros em produção
6. [ ] Iteração 2: adicionar mais testes

## 📞 Troubleshooting

### "Erro: modules não carregam"
- Verificar: servidor HTTP está coletando headers CORS corretos
- Solução: usar `http://` não `file://`

### "Referência de window undefined"
- Causa: módulo rodando em Node.js
- Solução: rodar em navegador

### "3Dmol não carrega"
- Verificar: arquivo local `3Dmol-min.js` existe
- Solução: fallback automático para canvas

### "Preview não atualiza"
- Verificar: debounce de 300ms
- Solução: fazer mudança visível, esperar 500ms

---

**Última atualização:** 15-04-2026  
**Versão modular:** 1.0.0
