Aqui está um exemplo: Meu aplicativo Web contém elementos arrastáveis. Ao arrastar um elemento, o navegador produz uma "imagem fantasma". Quero remover a "imagem fantasma" ao arrastar e escrevo um teste para esse comportamento.
Meu problema é que inicialmente não tenho idéia de como corrigir esse bug e a única maneira de escrever um teste é depois de corrigi-lo.
Em uma função simples como let sum = (a, b) => a - b, você pode escrever um teste para saber por sum(1, 2)que não é igual 3antes de escrever qualquer código.
No caso que estou descrevendo, não posso testar, porque não sei qual é a verificação (não sei qual deve ser a afirmação).
Uma solução para o problema descrito é:
let dataTransfer = e.dataTransfer
let canvas = document.createElement('canvas');
canvas.style.opacity = '0';
canvas.style.position = 'absolute';
canvas.style.top = '-1000px';
dataTransfer.effectAllowed = 'none';
document.body.appendChild(canvas);
dataTransfer.setDragImage(canvas, 0, 0);
Eu não poderia saber que essa era a solução. Eu não poderia nem ter escrito o teste depois de encontrar a solução on-line, porque a única maneira de saber se ela realmente funcionava era adicionar esse código à minha base de código e verificar com o navegador se tinha o efeito desejado. O teste teve que ser escrito após o código, que vai contra o TDD.
Qual seria a abordagem TDD para esse problema? Escrever o teste antes do código é obrigatório ou opcional?
fonte
Respostas:
Quando entendi corretamente, você não pode nem escrever um teste automatizado confiável para o seu exemplo de "imagem fantasma" depois de encontrar uma solução, pois a única maneira de verificar o comportamento correto é olhar para a tela e verificar se não há imagem fantasma não mais. Isso me dá a impressão de que o título original fez a pergunta errada. A verdadeira questão deve ser
E a resposta é: para vários tipos de problemas de interface do usuário, você não . Claro, pode-se tentar automatizar a criação da interface do usuário mostrando o problema de alguma forma e tentar implementar algo como uma comparação de captura de tela, mas isso geralmente é propenso a erros, quebradiço e não é econômico.
Especialmente o design da interface do usuário "test drive" ou aprimoramentos da interface do usuário por testes automatizados escritos com antecedência são literalmente impossíveis. Você "conduz" o design da interface do usuário fazendo uma melhoria, mostra o resultado a um humano (você, alguns testadores ou usuário) e solicita feedback.
Portanto, aceite o fato de que o TDD não é uma bala de prata e, para alguns tipos de problemas, o teste manual ainda faz mais sentido do que os testes automatizados. Se você tem um processo de teste sistemático, talvez com alguns testadores dedicados, a melhor coisa a fazer é adicionar o caso ao seu plano de teste.
fonte
Uma maneira é aplicar um análogo de uma solução de pico .
James Shore descreveu desta maneira:
A idéia básica é que você abaixe as ferramentas de design enquanto descobre o que está acontecendo. Depois de se orientar, você retoma as ferramentas de design.
O truque: você traz o conhecimento de sua investigação de volta à sua base de código de produção, mas não traz o código . Em vez disso, você o recria enquanto usa suas técnicas de design disciplinado.
Cavalos para cursos.
EDITAR:
Gostaria de sugerir uma ortografia um pouco diferente: "Como você pode automatizar um teste se a automatização do teste não é rentável?"
A resposta, é claro, é "você não". Em vez disso, esforce-se para separar sua implementação em duas partes - uma grande parte em que o teste é econômico e uma menor que é muito simples de quebrar.
Portanto, ao trabalhar com código de terceiros, teremos um shell muito fino de código que atua como um proxy para a biblioteca de terceiros. No teste, substituímos esse shell por um "teste duplo", que verifica o protocolo , sem se preocupar que produz os efeitos desejados.
Para testar a integração de nossos códigos com o código real de terceiros, contamos com outras técnicas (verificação visual, chamadas de suporte técnico, otimismo ...)
Pode ser útil manter alguns artefatos de demonstração por perto, para que você possa verificar se suas suposições ainda são válidas ao atualizar a biblioteca de terceiros.
fonte
Apenas com uma perspectiva diferente, o teste em torno da interface do usuário / GUI pode ser feito um pouco melhor em relação ao teste de aceitação (testes centrados no recurso / negócio de fluxo de trabalho).
Para a web, acho que estruturas como o selenium webdriver têm o potencial de se aproximar do teste correto, mas a sobrecarga para começar pode ser um pouco demais, e é uma mudança no fluxo observado no TDD em relação apenas aos testes de unidade .
A parte que ajudaria especificamente a sua situação é algo chamado Modelo de Objeto de Página ( https://www.guru99.com/page-object-model-pom-page-factory-in-selenium-ultimate-guide.html ). Isso permite um mapeamento explícito da GUI em tempo de execução para algum código, nomeando métodos / eventos / membros da classe.
Os principais argumentos contra isso seriam a sobrecarga, e que essa sobrecarga geralmente poderia ser vista no final do ciclo de desenvolvimento. A sobrecarga é que os testes exigem algum invólucro que parece criar um trabalho duplicado.
No futuro, isso dependeria do custo / benefício da equipe e dos negócios, portanto poderia ser um tópico benéfico a ser discutido para determinar expectativas e pontos de vista.
fonte
Como é uma imagem fantasma? Se você criou uma interface fictícia de uma cor conhecida, onde coloca seu componente arrastável? Haveria uma cor específica presente se houvesse uma imagem fantasma.
Então o teste poderia testar a ausência da cor da imagem fantasma.
Esse teste seria razoavelmente durável e factível.
fonte