jasmine 2.x / javascript / requirejs

JavaScript – Integrando Jasmine com RequireJs (AMD)

Coleção AngularJs Meetup South London | Este artigo

Como usar RequireJs com Jasmine 2.x

o tis preto

Este artigo apresentará as alterações que você precisa fazer para migrar seu código e o executor de teste padrão SpecRunner.html para usar RequireJs. Vamos cobrir:

  • Mudanças na configuração padrão do Jasmine
  • Configuração de RequireJs
  • Mudanças em nossas bibliotecas e especificações.

Código fonte disponível em gsans / jasmine-require-bootstrap (Github).

Jasmine Default Setup

Encontre as etapas para configurar o Jasmine aqui . Vamos usar essa estrutura de pastas.

├───src
├───tests
│   └───lib
└───vendor

Seu SpecRunner.html deve ser semelhante a este:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine Spec Runner v2.0.0</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine.css">

  <script type="text/javascript" src="lib/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/boot.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="../src/my-library.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="../src/my-library.specs.js"></script>

</head>

<body>
</body>
</html>

É assim que my-library.js e my-library.specs.js se parecem

// my-library.js
var myLibrary = (function() {
  function sayHello() {
    return "Hello";
  }
  return {
    sayHello: sayHello
  };
})();

// my-library.specs.js
describe("my-library", function(){
  describe("sayHello", function(){
    it("should say Hello", function(){
      expect(myLibrary.sayHello()).toEqual("Hello");
    })
  })
})

Se você tiver um nó instalado em sua máquina, você pode usar http-server para executar o SpecRunner.html passando a única especificação em nosso conjunto .


SpecRunner.html output

Configuração de RequireJs

Para usar RequireJs, teremos que alterar nossa página SpecRunner.html anterior para o seguinte:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine Spec Runner v2.0.0</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine.css">
  <script type="text/javascript" src="../vendor/require.js" data-main="main"></script>
</head>
<body>
</body>
</html>

Removemos todos os arquivos de scripts externos e deixamos apenas o require.js .

Note como nós omitimos o  js extensão para main.js . É assim que RequireJs identifica arquivos por padrão.

Arquivo de configura̤̣o RequireJs Рmain.js

Em main.js definiremos as opções de configuração para carregar todas as dependências e inicializar o Jasmine.

// Requirejs Configuration Options
require.config({
  // to set the default folder
  baseUrl: '../src', 
  // paths: maps ids with paths (no extension)
  paths: {
      'jasmine': ['../tests/lib/jasmine'],
      'jasmine-html': ['../tests/lib/jasmine-html'],
      'jasmine-boot': ['../tests/lib/boot']
  },
  // shim: makes external libraries compatible with requirejs (AMD)
  shim: {
    'jasmine-html': {
      deps : ['jasmine']
    },
    'jasmine-boot': {
      deps : ['jasmine', 'jasmine-html']
    }
  }
});

Usamos jasmine-boot como um alias para boot.js

RequireJs Bootstrap

Esta configuração começará com o identificador de inicialização jasmine. Ele tem duas dependências: jasmine e jasmine-html. Como jasmine-html tem jasmine como uma dependência, ele continuará a carregar jasmine.js, em seguida jasmine-html.js e finalmente boot.js como estava fazendo em nosso runner original.

Usamos _require () _ para carregar dependências antes de executar nosso código.

require(['jasmine-boot'], function () {
  require(['my-library.specs'], function(){
    //trigger Jasmine
    window.onload();
  })
});

O código anterior carregará todas as dependências de inicialização do jasmine e continuará com nossas especificações em my-library.specs.js .

Observe que se tivéssemos movido my-library.specs para o mesmo nível que_jasmine-boot_, ele poderia ter sido carregado antes que todas as dependências jasmine-boot fossem concluídas.

Depois que todos os arquivos de script são carregados, acionamos window.onload () conforme Jasmine se conecta a esse evento para inicializar seu mecanismo.

Mudanças em nossa biblioteca

Para criar nossa biblioteca, iremos envolvê-la usando define. Como não temos dependências, ele estará vazio. Observe também como adicionamos uma instrução return no final, para que possa ser usada em outros módulos por meio de parâmetros sem poluir o objeto janela global .

define([], function(){

  var myLibrary = (function() {
    function sayHello() {
      return "Hello";
    }
    return {
      sayHello: sayHello
    };
  })();

  return myLibrary;
})

Usamos define () para definir nossas bibliotecas. Isso pode carregar dependências e retornar uma instância para outros usarem.

Mudanças em nossas especificações

Para migrar nossas especificações, vamos repetir o mesmo que fizemos antes. Neste caso, temos uma dependência, pois precisamos carregar my-library.js para executar nossos testes.

define(['my-library'], function(myLibrary){

  describe("my-library", function(){
    describe("sayHello", function(){
      it("should say Hello", function(){
        expect(myLibrary.sayHello()).toEqual("Hello");
      })
    })
  })

})

O parâmetro myLibrary obterá a instância retornada pela nova definição de nossa biblioteca.

Agora podemos executar nossos testes aproveitando as funções auxiliares do RequireJ, tornando a experiência de teste mais agradável.

Recursos

Angular – Teste de Unidade com Jasmine

Coleção AngularJs Meetup South London | Este artigo

Related Posts