Ir para o conteúdo
ou

Software livre Brasil

 Voltar a Thiago Avelino
Tela cheia

Porque fazer teste unitario em javascript?

22 de Julho de 2011, 0:00 , por Software Livre Brasil - 0sem comentários ainda | Ninguém está seguindo este artigo ainda.
Visualizado 91 vezes

É complicado confiar em um software que não tem teste unitario, hoje estava escrevendo alguns códigos em JavaScript e resolvi escrever esse post pois muitos desenvolvedores JavaScript não costuma testar seus códigos.

QUnit é um Framework open source de teste unitário para JavaScript, ele foi desenvolvido para fazer teste unitarios no desenvolviemento do proprio Jquery mas é capas de testar qual quer código Javascript (Ate mesmo testar código Javascript do lado do servidor NodeJS)

Em baixo segue o exemplo de uma implementação simples:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
  <script>
    function calc(val1, val2, oper){
      val1 = typeof val1 == 'undefined' ? 0 : val1
      val2 = typeof val2 == 'undefined' ? 0 : val2
      oper = typeof oper == 'undefined' ? "+" : oper

      if(oper == "+")
        cal = val1 + val2
      else if(oper == "-")
        cal = val1 - val2
      else
        cal = false

      return cal
    }
  </script>

  <script>
    $(document).ready(function(){

      module("Test render html")
      test("test valor in #test1", function(){
        equals("ok ok ok", $("#test1").html())
        notEqual("ok ok ok ", $("#test1").html())
      })

      module("Test function calc()")
      test("test basic return 10", function(){
        equals(10, calc(10))
        notEqual(10, calc(11))
      })

      test("test basic sum 2 parameter", function(){
        equals(20, calc(10, 10))
        notEqual(21, calc(10, 10))
        deepEqual(20, calc(10, 10))
        notStrictEqual("20", calc(10, 10))
      })

      test("set operator +", function(){
        equals(20, calc(10, 10, "+"))
        equals(false, calc(10, 10, "..."))
      })

      test("set operator -", function(){
        equals(1, calc(10, 9, "-"))
      })

    })
  </script>

</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture">test markup, will be hidden</div>

  <div id="test1">ok ok ok</div>
</body>
</html>

Esse código assima estou fazendo dois tipo de teste, um modulo de item renderizado na pagina e outro modulo de teste de uma função de calculo.

Segue abaixo o print de como ficou o test: Alt text



Fonte: http://feedproxy.google.com/~r/pyAvelino/~3/Ep2w7ARiqKM/

0sem comentários ainda

Enviar um comentário

Os campos são obrigatórios.

Se você é um usuário registrado, pode se identificar e ser reconhecido automaticamente.