javascript - BDD framework para el frontend?

tdd yui

Question

En el lado del servidor tenemos Rspec / Cucumber para el desarrollo de BDD (ruby) vowsjs (node.js)

¿Hay algún framework BDD para usar en los navegadores web (no qUnit o YUI test ya que estos son solo para TDD)?

Answer 1

Ahora hay karma-cucumberjs que puede hacer pruebas de pepino en navegadores reales, así como en PhantomJS.

https://github.com/s9tpepper/karma-cucumberjs

Answer 2

Aquí hay una lista de marcos de prueba listados en el wiki del nodo.

cucumber-js ve prometedor. Aquí hay una muestra de la sintaxis:

Fuente de la característica

Feature: Simple maths
In order to do maths
As a developer
I want to increment variables
Scenario: Increment variable once
Given a variable set to 1
When I increment the variable by 1
Then the variable should contain 2

Definiciones de pasos

var variable;
Given(/^a variable set to (/d+)$/, function(number, callback) {
variable = parseInt(number);
callback();
});
When(/^I increment the variable by (/d+)$/, function(number, callback) {
variable += parseInt(number);
callback();
});
Then(/^the variable should contain (/d+)$/, function(number, callback) {
if (variable != parseInt(number))
throw(new Error(''Variable should contain ''+number+'' but it contains ''+variable+''.''));
callback();
});

Answer 3

Creo que jasmine es solo un marco TDD, no un BDD, porque no tiene las dos capas de abstracción que tienen los marcos BDD:

1. qué hacemos? (normalmente en archivos txt)
2. ¿Como hacemos eso? (Implementación reutilizable en javascript)

Pero eso está bien, es un buen punto de partida. Tampoco me gusta reinventar la rueda (usando un lenguaje basado en txt). He encontrado un marco BDD, que se basa en jasmine, para mí esta fue la solución perfecta: https://github.com/DealerDotCom/karma-jasmine-cucumber

Por ejemplo:

specs.js (lo que hacemos)

feature(''Calculator: add'')
.scenario(''should be able to add 2 numbers together'')
.when(''I enter "1"'')
.and(''I add "2"'')
.then(''I should get "3"'')
.scenario(''should be able to add to a result of a previous addition'')
.given(''I added "1" and "2"'')
.when(''I add "3"'')
.then(''I should get "6"'')

steps.js (como lo hacemos)

featureSteps(''Calculator:'')
.before(function(){
this.values = [];
this.total = null;
})
.given(''I added "(.*)" and "(.*)"'', function(first, second){
this.when(''I enter "'' + first + ''"'');
this.when(''I add "'' + second + ''"'');
})
.when(''I enter "(.*)"'', function(val){
this.values.push(val * 1);
})
.when(''I add "(.*)"'', function(val){
this.values.push(val * 1);
this.total = this.values[0] + this.values[1];
this.values = [this.total];
})
.then(''I should get "(.*)"'', function(val){
expect(this.total).toBe(val * 1);
})

Actualización 2016-02-16:

Después de unos meses de práctica con BDD, terminé con descripciones de funciones basadas en txt y ofc. con pepinillo. Creo que es mejor escribir algo de alto nivel de abstracción en las descripciones de las características en lugar de lo que escribí anteriormente en mi ejemplo de karma-jazmín-pepino. Por mi antiguo ejemplo, preferiría escribir algo como esto hoy en día:

 Scenario: Addition of numbers
Given I have multiple numbers
When I add these numbers together
Then I should get their sum as result

Así es como me gusta actualmente. Utilizo para permitir que las definiciones de los pasos establezcan los valores de los dispositivos y las aserciones, pero ofc. Puedes dar Examples con gherkin si quieres:

 Scenario: Addition of numbers
Given I have <multiple numbers>
When I add these numbers together
Then I should get <their sum> as result
Examples:
| multiple numbers | their sum |
| 1, 2, 3, 6 | 12 |
| 8, 5 | 13 |
| 5, -10, 32 | 27 |

cucumber-js traduce estas 3 filas a 3 escenarios, por ejemplo:

 Given I have 1, 2, 3, 6
When I add these numbers together
Then I should get 12 as result

Tal vez sea algo más fácil de depurar, pero debe escribir el analizador para estos valores, por ejemplo, dividir la cadena "1, 2, 3, 6" y analizar los valores para obtener la matriz de números. Creo que puedes decidir qué camino es mejor para ti.

Lo que es realmente interesante con las descripciones de características de alto nivel de abstracción es que puede escribir múltiples definiciones de pasos diferentes. Entonces, por ejemplo, puede probar 2 apis diferentes, que hacen lo mismo, o seguir con el ejemplo de la calculadora, puede escribir pruebas e2e para múltiples interfaces de usuario (cli, aplicación web, etc.) o puede escribir una prueba simple, que prueba el dominio solamente. De todas formas las descripciones de las características son más o menos reutilizables.

Actualización 2016-04-15:

Decidí usar Yadda con mocha lugar de cucumber-js con jasmine . También me gustaron el pepino y el jazmín, pero creo que Yadda y mocha son más flexibles.

Answer 4

Echa un vistazo a jazmín

describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() {
expect(yourCode).toBeLotsBetter();
});
});

http://pivotal.github.com/jasmine/

https://github.com/pivotal/jasmine

Debería ser (sic) muy familiar para una persona rubí

Answer 5

Me gustaría segundo Jasmine, también echar un vistazo a Jasmine-species

También es de destacar el Kyuri : es un analizador Gherkin (el pepino DSL) para javascript, originalmente apuntaba a Vows.js, pero también puede generar resguardos de javascript antiguos (sin embargo, en este momento todavía tiene muchos errores).

Answer 6

También puedes mirar a Yadda . En lugar de ser un marco de prueba independiente como CucumberJS, permite utilizar una sintaxis similar a Gherkin de otros marcos como Mocha, Jasmine, CasperJS, Zombie, Qunit, etc.