cucumberjs / meteor / testing

Testando Meteoro com CucumberJS

Introdução

Agora que a velocidade foi eleita a plataforma de teste oficial do Meteor, vale a pena gastar algum tempo para aprender a coisa.

Este é um exemplo de como testar um aplicativo Meteor no lado do cliente com o CucumberJS e o navegador sem cabeça Zombie .

Configuração

Precisamos de um aplicativo Meteor para testar e da estrutura de teste para executar nossos testes. Vamos configurar tudo

Criação do aplicativo

este é um aplicativo Meteor normal criado com meteor create myApp

uma vez que a pasta do aplicativo existe, precisamos de uma testspasta nela com a seguinte estrutura
+ testes
++ recursos
+++ step_definitions
+++ suporte

o mundo do pepino

o ambiente de teste é configurado em um arquivo chamado world.coffeeou world.jsque vai para a supportpasta. Nossa configuração é world.coffeee se parece com isto:

module.exports = ->
  @World = class MultiWorld extends Cucumber.World
    constructor: ->
      @zombie = new Cucumber.World.Zombie
      @selenium = new Cucumber.World.Selenium if Package.selenium?
      @protractor = new Cucumber.World.Protractor if Package.selenium?
      super

pacotes mrt

esses pacotes podem ser instalados com mrt add
* velocity
* cucumber
* velocity-html-reporter

A aplicação

O aplicativo é o padrão do Meteor com apenas um pequeno ajuste: adicionamos um campo de entrada e tratamos o changeevento nele para ter algo para testar.

HTML

<head>
   <link rel="icon" sizes="16x16 32x32" href="/favicon.png?v=2">
   <title>app</title>
</head>

<body>
{{> hello}}
</body>

<template name="hello">
   <h1 id="greeting">Hello {{name}}!</h1>
   <input id="name"/><br>
   {{greeting}}
   <input type="button" value="Click"/>

</template>

JavaScript modelo

if (Meteor.isClient) {
   Template.hello.helpers(
      {
         greeting: function () {
            console.log("retunring greeting text")
            return "Welcome to app.";
         },

         name: function() {
            return Session.get("name");
         }
      })

   Template.hello.events(
      {
         'change #name': function () {
            console.log("changing the name");
            Session.set("name", $("#name").val());
         },

         'click input': function () {
            // template data, if any, is available in 'this'
            if (typeof console !== 'undefined')
               console.log("You pressed the button");
         }
      });
}

Testes

Agora precisamos de um teste. No Cucumber, isso é Featureimplementado em JavaScript ou CoffeeScript.

Arquivo de recurso

o arquivo que contém a descrição está e deve ser colocado na pasta do aplicativo. O nome do arquivo é significativo e deve ser usado na definição e implementação dos cenários de teste. Você pode ler tudo sobre isso na documentação do CucumberJs.hello.featuretests/features

@zombie
Feature: Display hello world on the home page

  Scenario: Go to the home page and see the hello world message
    Given the application has been created
    When I go to the home page and enter "Micha" in the name field
    Then I should see "Hello Micha!" on the page

Implementação de teste

Para ter algo para executar, precisamos implementar o recurso em um arquivo javascript. O arquivo deve ser chamado em nosso caso. O nome deve ser o mesmo do recursohello.js

module.exports = function () {

   this.Given(/^the application has been created$/, function (callback) {
      callback();
   });

   this.When(/^I go to the home page and enter "([^"]*)" in the name field$/, function (name, callback) {
      var z = this.zombie
      z.home(function(){
         z.browser.fill("#name", name)
         z.browser.evaluate("$('#name').change()");
         z.browser.wait(1000, callback);
      })
   });

   this.Then(/^I should see "([^"]*)" on the page$/, function (greeting, callback) {
      var browser = this.zombie.browser;
      var actualGreeting = browser.text("#greeting");
      if(greeting == actualGreeting) {
         callback();
      } else {
         callback.fail(actualGreeting + " not equal to expected " + greeting);
      }
   });
}

Se você está familiarizado com zombieJs, deve ter notado que o evento de mudança não foi disparado da maneira usual de zumbi com, browser.firemas com a avaliação de algum javascript, z.browser.evaluate("$('#name').change()")isso foi necessário, pois a maneira normal não funcionava com meteoro. Isso provavelmente está relacionado ao problema 181 em zumbi

Execução

você pode clonar o repositório com todos os arquivos do github comclone git@github.com:drgorb/meteor-cucumber-example.git

mude para o diretório do aplicativo e inicie com mrtvocê deve ver os testes passarem

Related Posts