Intro
Eu estive explorando testes de unidade e teste de cobertura para JavaScript como eu trabalho em um novo aplicativo do SharePoint para SharePoint online no escritório 365 Suite. Os caminhos de pesquisa óbvio levaram-me a Qunit.js e logo depois que, Para Blanket.js.
QUnit deixe-me criar testes de unidade e agrupá-los em módulos. Um módulo é apenas uma maneira simples de organizar testes relacionados. (Não tenho certeza se que vou usá-lo como pretendido, Mas funcionou para mim até agora com o pequeno conjunto de testes que definiu até agora).
Blanket.js integra com Qunit e ele vai me mostrar as linhas reais de JavaScript que foram – e mais importante – não foram realmente executadas no decurso da execução dos testes. Esta é a "cobertura" – linhas que executado são cobertas pelo teste, enquanto outros não são.
Entre a criação de casos de teste boas e visualização de cobertura, Podemos reduzir o risco de que nosso código escondido defeitos. Bons tempos.
Qunit
Supondo que você tenha seu Visual Studio projeto configurado, Comece baixando o pacote de instalação JavaScript http://qunitjs.com. Adicione o JavaScript e CSS correspondente à sua solução. Mina parece com isso:
Figura 1
Como você pode ver, Eu estava usando 1.13.0 na época, eu escrevi este post de blog. Não se esqueça de baixar e adicionar o arquivo CSS.
Que saia do caminho, próximo passo é criar algum tipo de equipamento de teste e referenciar os bits Qunit. Estou testando um monte de funções em um arquivo de script chamado "QuizUtil.js", então eu criei uma página HTML chamada "QuizUtil_test.html", como mostrado:
Figura 2
Aqui está o código:
<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/TR/1998/REC-xml-19980210 1999/xhtml">
<cabeça>
<título>Teste de QuizUtil com Qunit</título>
<link rel= "stylesheet" href="../CSS/qunit-1.13.0.css" />
<script tipo= text/javascript"" src="QuizUtil.js" dados-capa></script>
<script type ="text/javascript" src ="qunit-1.13.0.js"></script>
<script type ="text/javascript" src ="blanket.min.js"></script>
<script>
módulo("getIDFromLookup");
teste("QuizUtil getIDFromLookupField", função () {
var goodValue = "1;#Paul Galvin";
igual(getIDFromLookupField(goodValue) + 1, 2), "ID do [" + goodValue + "] + 1 deve ser 2";
igual(getIDFromLookupField(indefinido), indefinido, "O argumento de entrada indefinido deve retornar o resultado indefinido.");
igual(getIDFromLookupField(""), indefinido, "O argumento de entrada vazio deve retornar um valor indefinido.");
igual(getIDFromLookupField("gobbledigood3-thq;ada dkvn;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), indefinido,"Deve sempre retornar um conversível de resultado para um número inteiro");
igual(getIDFromLookupField("2;#outra pessoa"), "2", "Verificação [2;#outra pessoa].");
igual(getIDFromLookupField("9834524;#valor longo"), "9834524", "Teste de grande valor.");
notEqual(getIDFromLookupField("5;#qualquer um", 6), 6, "Testar um notEqual (5 Não é igual a 6 para esta amostra: [5;#qualquer um]");
});
módulo("htmlEscape");
teste("QuizUtil htmlEscape()", função () {
igual(htmlEscape("<"), "<", "Escapando um menos que o operador ('<')");
igual(htmlEscape("<classe div = "someclass">Algum texto</div>"), "<classe div ="SomeClass">Algum texto</div>", "Sequência de teste mais complexa.");
});
módulo("getDateAsCaml");
teste("QuizUtil getDateAsCaml()", função () {
igual(getDateAsCaml(Novo Data("31/12/2013")), "2013-12-31T:00:00:00", "Teste codificada data: [12/31/2013]");
igual(getDateAsCaml(Novo Data("01/05/2014")), "2014-01-05T:00:00:00", "Teste codificada data: [01/05/2014]");
igual(getDateAsCaml(Novo Data("01/31/2014")), "2014-01-31T:00:00:00", "Teste codificada data: [01/31/2014]");
igual(getTodayAsCaml(), getDateAsCaml(Novo Data()), "getTodayAsCaml() deve ser igual getDateAsCaml(nova data())");
igual(getDateAsCaml("valor absurdo"), indefinido, "Tente obter a data de um valor absurdo.");
igual(getDateAsCaml(indefinido), indefinido, "Tente obter a data da [indefinido] Data.");
});
módulo("getParameterByName");
teste("QuizUtil getParameterByName (da cadeia de caracteres de consulta)", função () {
igual(getParameterByName(indefinido), indefinido, "Tentar obter parâmetro indefinido deve retornar indefinido.");
igual(getParameterByName("não existe"), indefinido, "Tentar obter o valor do parâmetro, quando sabemos que o parâmetro não existe.");
});
módulo("Cookies");
teste("QuizUtil várias funções do cookie.", função () {
igual(setCookie("teste", "1", -1), getCookieValue("teste"), "Obter um cookie eu definir deve funcionar.");
igual(setCookie("anycookie", "1", -1), verdadeiro, "Definir uma cozedura válido deve retornar 'verdadeiro'.");
igual(setCookie("nome do cookie louco !@#$%"%\^&*(()?/><.,", "1", -1), verdadeiro, "Definir um nome de cookie ruim deve retornar 'falso'.");
igual(setCookie(indefinido, "1", -1), indefinido, "Passando indefinido como o nome do cookie.");
igual(getCookieValue("não existe"), "", "Cookie não existe teste.");
});
</script>
</cabeça>
<corpo>
<div ID= "qunit"></div>
<div ID= "qunit-dispositivo elétrico"></div>
</corpo>
</HTML>
Existem várias coisas a acontecer aqui:
- Referenciando o meu código (QuizUtil.js)
- Referência Qunity.js
- Definição de alguns módulos (getIDFromLookup, Cookies, e outros)
- Colocando um <div> cuja ID é "qunit".
Em seguida, Só parar nesta página e você obter algo como isto:
Figura 3
Se você olhar no topo, Você tem algumas opções, dois dos quais são interessantes:
- Ocultar passada testes: Bem óbvio. Pode ajudar o seu olho vê apenas as áreas de problema e não um monte de desordem.
- Módulo: (Deixe cair para baixo): Isso filtrará os testes até apenas os grupos de testes que você quer.
Quanto os testes se-alguns comentários:
- Escusado será dizer que você precisa para escrever seu código de tal forma que é testável em primeiro lugar. Usando a ferramenta pode ajudar a impor essa disciplina. Por exemplo, Eu tinha uma função chamada "getTodayAsCaml()”. Isso não é muito testável, uma vez que não leva nenhum argumento de entrada e para testá-lo para a igualdade, precisamos atualizar constantemente o código de teste para refletir a data atual. Eu refatorado isso adicionando um parâmetro de entrada de dados, em seguida, passando a data atual, quando eu quero a data atual no formato do CAML.
- O quadro de Qunit documentos seus próprios testes e parece bastante robusto. Ele pode fazer coisas simples, como teste de igualdade e também tem suporte para chamadas de estilo ajax ("real" ou fictícios usando seu favorito mocker).
- Passando pelo processo também força você a pensar em casos extremos – o que acontece com o "indefinido" ou null é passado para uma função. Torna absolutamente simples testar esses cenários para fora. Coisas boas.
Cobertura com Blanket.js
Blanket.js complementa Qunit seguindo as linhas reais de código que executar durante o curso da executando os testes. Então mesmo que é um aplicativo totalmente separado integra direito em Qunit, Ele joga muito bem – parece que é um app sem emenda.
Isto é blanket.js em ação:
Figura 4
Figura 5
(Você realmente tem que clicar sobre a opção "Ativar a cobertura" no topo [Ver figura 3] para permitir isto.)
As linhas realçadas em figura 5 Não foram executados por qualquer um dos meus testes, Então eu preciso elaborar um teste que faz com que eles executar se quero cobertura completa.
Se blanket.js a trabalhar, seguindo estes passos:
- Baixá-lo http://blanketjs.org/.
- Adicioná-lo ao seu projeto
- Atualize sua página de equipamento de teste (QuizUtil_test.html no meu caso) como segue:
- O código de referência
- Decore seu <script> referência como este:
<script tipo= text/javascript"" src="QuizUtil.js" dados-capa></script>
Blanket.js pega o atributo "dados-capa" e faz sua mágica. Ganchos em Qunit, atualiza a interface do usuário para adicionar a opção "Ativar cobertura" e voila!
Resumo (TL; DR)
Use Qunit para escrever seus casos de teste.
- Faça o download
- Adicioná-lo ao seu projeto
- Escrever uma página de teste arnês
- Criar seus testes
- Alguns dos seu código seja testável refatorar
- Ser criativo! Acho que de loucura, impossíveis cenários e testá-los de qualquer maneira.
Use blanket.js para garantir a cobertura
- Certifique-se de que qunit está funcionando
- Baixar blanket.js e adicioná-lo ao seu projeto
- Adicioná-lo à sua página de equipamento de teste:
- Adicionar uma referência a blanket.js
- Adicionar um atributo "dados-capa" para seus <script> Tag
- Executar testes Qunit.
Eu nunca fiz isso antes e tinha umas coisas rudimentares, trabalhando em um punhado de horas.
Teste feliz!
</fim>
Subscreva ao meu blog.
Siga-me no Twitter em http://www.twitter.com/pagalvin
