Dos Ideas. - Contribuciones del usuario [es]

Test de javascript con QUnit

2011-08-15T23:33:04Z

190.49.189.88: /* Escribir test unitarios con QUnit */

== ¿Qué es QUnit? ==

QUnit es una potente herramienta para testear javascript.

== Escribir test unitarios con QUnit ==

Lo primero que se debe hacer es configurar el ambiente de test.

Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.

<code xml="xml">
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
</code>

Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:

<code xml="xml">
<h1 id="QUnit-header">QUnit Test Suite</h1>
<h2 id="QUnit-banner"></h2>
<div id="QUnit-testrunner-toolbar"></div>
<h2 id="QUnit-userAgent"></h2>
<ol id="QUnit-tests"></ol>
</code>

A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.

<code xml="xml">

<!DOCTYPE html>
<html>
<head>
<title>Dos Ideas - QUnit</title>
<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 type="text/javascript" src="dosIdeas.js"></script>


<script type="text/javascript" src="dosIdeasTest.js"></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>
</body>
</html>

</code>

El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.

El archivo dosIdeasTest.js:

<code xml="xml">

$(document).ready(function(){

module("dosIdeasTest");

test('probando validarImporte()', function() {
ok(validarImporte("1112"),'El importe es 1112');
ok(!validarImporte("11A12"),'El importe es 11A12');
ok(!validarImporte("A1112"),'El importe es A1112');
ok(!validarImporte("1112A"),'El importe es 1112A');
})

test('probando extraerSubCadena()', function() {
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
equal(extraerSubCadena("dosIdeas",3,5),'deas');
})

});

</code>

<br> El archivo dosIdeas.js:

<code xml="xml">

function validarImporte(importe) {

if (importe.length == 0) {
return false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
return false;
}
}
return true;
}

function extraerSubCadena(cadena, posicionInicial, longitud)
{
return cadena.substr(posicionInicial, longitud);
}

</code>

El resultado de los test quedan de la siguiente manera:

[[Image:DosIdeasQUnitResultado.jpg]]

Descargar ejemplo

[[File: demoQunit.zip]]

Test de javascript con QUnit

2011-08-15T23:10:26Z

190.49.189.88: /* Escribir test unitarios con QUnit */

== ¿Qué es QUnit? ==

QUnit es una potente herramienta para testear javascript.

== Escribir test unitarios con QUnit ==

Lo primero que se debe hacer es configurar el ambiente de test.

Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.

<code xml>
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
</code>

Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:

<code xml>
<h1 id="QUnit-header">QUnit Test Suite</h1>
<h2 id="QUnit-banner"></h2>
<div id="QUnit-testrunner-toolbar"></div>
<h2 id="QUnit-userAgent"></h2>
<ol id="QUnit-tests"></ol>
</code>

A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.

<code xml>

<!DOCTYPE html>
<html>
<head>
<title>Dos Ideas - QUnit</title>
<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 type="text/javascript" src="dosIdeas.js"></script>


<script type="text/javascript" src="dosIdeasTest.js"></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>
</body>
</html>

</code>

El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.

El archivo dosIdeasTest.js:

<code xml>

$(document).ready(function(){

module("dosIdeasTest");

test('probando validarImporte()', function() {
ok(validarImporte("1112"),'El importe es 1112');
ok(!validarImporte("11A12"),'El importe es 11A12');
ok(!validarImporte("A1112"),'El importe es A1112');
ok(!validarImporte("1112A"),'El importe es 1112A');
})

test('probando extraerSubCadena()', function() {
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
equal(extraerSubCadena("dosIdeas",3,5),'deas');
})

});

</code>

El archivo dosIdeas.js:

<code xml>

function validarImporte(importe) {

if (importe.length == 0) {
return false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
return false;
}
}
return true;
}

function extraerSubCadena(cadena, posicionInicial, longitud)
{
return cadena.substr(posicionInicial, longitud);
}

</code>

El resultado de los test quedan de la siguiente manera:

[[Image:DosIdeasQUnitResultado.jpg]]

Test de javascript con QUnit

2011-08-15T23:09:46Z

190.49.189.88: /* Escribir test unitarios con QUnit */

== ¿Qué es QUnit? ==

QUnit es una potente herramienta para testear javascript.

== Escribir test unitarios con QUnit ==

Lo primero que se debe hacer es configurar el ambiente de test.

Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.

<code xml>
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
</code>

Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:

<code xml>
<h1 id="QUnit-header">QUnit Test Suite</h1>
<h2 id="QUnit-banner"></h2>
<div id="QUnit-testrunner-toolbar"></div>
<h2 id="QUnit-userAgent"></h2>
<ol id="QUnit-tests"></ol>
</code>

A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.

<code xml>

<!DOCTYPE html>
<html>
<head>
<title>Dos Ideas - QUnit</title>
<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 type="text/javascript" src="dosIdeas.js"></script>


<script type="text/javascript" src="dosIdeasTest.js"></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>
</body>
</html>

</code>

El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.

El archivo dosIdeasTest.js:

<code xml>

$(document).ready(function(){

module("dosIdeasTest");

test('probando validarImporte()', function() {
ok(validarImporte("1112"),'El importe es 1112');
ok(!validarImporte("11A12"),'El importe es 11A12');
ok(!validarImporte("A1112"),'El importe es A1112');
ok(!validarImporte("1112A"),'El importe es 1112A');
})

test('probando extraerSubCadena()', function() {
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
equal(extraerSubCadena("dosIdeas",3,5),'deas');
})

});

</code>

El archivo dosIdeas.js:

<code xml>

function validarImporte(importe) {

if (importe.length == 0) {
return false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
return false;
}
}
return true;
}

function extraerSubCadena(cadena, posicionInicial, longitud)
{
return cadena.substr(posicionInicial, longitud);
}

</code>

El resultado de los test quedan de la siguiente manera:
[[Image:DosIdeasQUnitResultado.jpg]]

Test de javascript con QUnit

2011-08-15T22:58:16Z

190.49.189.88: /* Escribir test unitarios con QUnit */

== ¿Qué es QUnit? ==

QUnit es una potente herramienta para testear javascript.

== Escribir test unitarios con QUnit ==

Lo primero que se debe hacer es configurar el ambiente de test.

Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.

<code xml>
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
</code>

Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:

<code xml>
<h1 id="QUnit-header">QUnit Test Suite</h1>
<h2 id="QUnit-banner"></h2>
<div id="QUnit-testrunner-toolbar"></div>
<h2 id="QUnit-userAgent"></h2>
<ol id="QUnit-tests"></ol>
</code>

A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.

<code xml>

<!DOCTYPE html>
<html>
<head>
<title>Dos Ideas - QUnit</title>
<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 type="text/javascript" src="dosIdeas.js"></script>


<script type="text/javascript" src="dosIdeasTest.js"></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>
</body>
</html>

</code>

El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.

El archivo dosIdeasTest.js:

<code xml>

$(document).ready(function(){

module("dosIdeasTest");

test('probando validarImporte()', function() {
ok(validarImporte("1112"),'El importe es 1112');
ok(!validarImporte("11A12"),'El importe es 11A12');
ok(!validarImporte("A1112"),'El importe es A1112');
ok(!validarImporte("1112A"),'El importe es 1112A');
})

test('probando extraerSubCadena()', function() {
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
equal(extraerSubCadena("dosIdeas",3,5),'deas');
})

});

</code>

El archivo dosIdeas.js:

<code xml>

function validarImporte(importe) {
esImporteValido = true;

if (importe.length == 0) {
mensajeError = 'Ingresá el importe a pagar.';
esImporteValido = false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
mensajeError = "El importe a pagar debe ser numérico, mayor a cero con hasta 2 decimales.";
esImporteValido = false;
}
}
return esImporteValido;
}

function extraerSubCadena(cadena, posicionInicial, longitud)
{
return cadena.substr(posicionInicial, longitud);
}

</code>

[[Image:DosIdeasQUnitResultado.jpg]]

Test de javascript con QUnit

2011-08-15T22:52:14Z

190.49.189.88: /* Escribir test unitarios con QUnit */

== ¿Qué es QUnit? ==

QUnit es una potente herramienta para testear javascript.

== Escribir test unitarios con QUnit ==

Lo primero que se debe hacer es configurar el ambiente de test.

Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.

<code xml>
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
</code>

Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:

<code xml>
<h1 id="QUnit-header">QUnit Test Suite</h1>
<h2 id="QUnit-banner"></h2>
<div id="QUnit-testrunner-toolbar"></div>
<h2 id="QUnit-userAgent"></h2>
<ol id="QUnit-tests"></ol>
</code>

<code xml>

<!DOCTYPE html>
<html>
<head>
<title>Dos Ideas - QUnit</title>
<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 type="text/javascript" src="dosIdeas.js"></script>


<script type="text/javascript" src="dosIdeasTest.js"></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>
</body>
</html>

</code>

El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.

El archivo dosIdeasTest.js:

<code xml>

$(document).ready(function(){

module("dosIdeasTest");

test('probando validarImporte()', function() {
ok(validarImporte("1112"),'El importe es 1112');
ok(!validarImporte("11A12"),'El importe es 11A12');
ok(!validarImporte("A1112"),'El importe es A1112');
ok(!validarImporte("1112A"),'El importe es 1112A');
})

test('probando extraerSubCadena()', function() {
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
equal(extraerSubCadena("dosIdeas",3,5),'deas');
})

});

</code>

El archivo dosIdeas.js:

<code xml>

function validarImporte(importe) {
esImporteValido = true;

if (importe.length == 0) {
mensajeError = 'Ingresá el importe a pagar.';
esImporteValido = false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
mensajeError = "El importe a pagar debe ser numérico, mayor a cero con hasta 2 decimales.";
esImporteValido = false;
}
}
return esImporteValido;
}

function extraerSubCadena(cadena, posicionInicial, longitud)
{
return cadena.substr(posicionInicial, longitud);
}

</code>

[[Image:DosIdeasQUnitResultado.jpg]]