Preparar uma app para QA
Da criação do projeto ao primeiro report de teste na triagem, com as etapas de admin e de dev.
Ao fim, sua app mostra o botão do Mira e um report enviado por ela aparece na triagem do projeto.
Duas pessoas percorrem esta trilha. O admin configura o projeto no dashboard e o dev mexe no código da app. Cada etapa diz quem faz.
Pré-requisitos
- Uma conta de administrador no Mira, ou de Mantenedor do projeto para as etapas 2 e 3.
- Uma app que o dev consegue alterar e publicar. Com bundler, use o pacote npm. Sem bundler, a tag de script.
- Chrome ou Edge. O widget foi testado nesses dois.
Passos
Criar o projeto
Quem faz: admin.
Em Administração do Mira, Projetos, clique em Novo projeto. Informe o Nome do projeto, a URL do app e o Nome do Ambiente (Produção por padrão) e clique em Criar projeto. Em Mais opções você escolhe os Mantenedores. O dashboard abre o Guia de configuração.
Resultado: o projeto existe com uma chave como loja-demo-a3f92c1b, e o primeiro ambiente já tem a origem da URL informada. Detalhes em Projetos.
Conferir o ambiente e as origens
Quem faz: admin.
Em Configurações do projeto, Ambientes, confira a origem do primeiro ambiente. Para outro ambiente, como staging, clique em Novo ambiente, dê o nome e liste as origens da app, uma por linha. Copie o ID do projeto em Geral e passe ao dev.
Resultado: o ambiente está na lista. O formato das origens está em Ambientes e origens.
Liberar a CSP
Quem faz: dev.
Se a app tem Content-Security-Policy, adicione a URL do Mira em connect-src e em script-src.
Resultado: o navegador deixa de bloquear as chamadas ao Mira. Sem CSP, esta etapa não pede nada. Veja Integrar uma app.
Instalar o bridge e ativar o widget
Quem faz: dev.
O passo Captura e primeiro report do guia mostra o código já com a URL da instância, em duas abas. Em npm, instale o @mira/bridge pela URL da instância e crie o bootstrap.ts que chama mira.init() antes de carregar a app. Em Script, para app sem bundler, cole a tag <script src=".../widget/v1/mira.js"> e o mira.init no <head>, antes dos scripts da app. O código de cada ambiente está em Integrar uma app.
Resultado: com a app rodando numa origem cadastrada, o botão flutuante do Mira aparece no canto da página.
Enviar um report de teste
Quem faz: dev.
Clique no botão. Na primeira vez, o widget pede o login: clique em Entrar, aprove o código mostrado na janela do Mira e confirme o projeto e o ambiente. O report abre num diálogo com o tipo em Bug; preencha o título e clique em Criar.
Resultado: o painel troca o formulário por Report enviado.
Conferir na triagem
Quem faz: admin.
Abra Reports no projeto.
Resultado: o report enviado aparece na lista com o status Backlog, no ambiente certo.
Conferir que deu certo
Abra o report e confira que ele traz a URL da página e os anexos automáticos de console e rede. Se faltam, confira se o mira.init() não passa capture: false. As opções estão em SDK.
Problemas comuns
| Sintoma | O que fazer |
|---|---|
| O botão não aparece | Confira se VITE_MIRA_URL está preenchida no build e se o bootstrap.ts é o primeiro import |
| O login diz que não há ambiente para a origem | Cadastre exatamente a origem da barra de endereço, com a porta |
| A janela de login não abre | Permita popups para a app ou abra o endereço mostrado no widget |
| Erro de CSP no console | Inclua o host do Mira em connect-src e script-src |
O console mostra widget indisponível na instância | A CSP bloqueia script-src do Mira, ou a instância não serve /widget/v1/widget.js |
A lista completa está em Integrar uma app.