Diferencia entre revisiones de «Test de javascript con QUnit»
(→Escribir test unitarios con QUnit) |
(→Escribir test unitarios con QUnit) |
||
| Línea 3: | Línea 3: | ||
QUnit es una potente herramienta para testear javascript. | QUnit es una potente herramienta para testear javascript. | ||
| − | == Escribir test unitarios con QUnit == | + | == Escribir test unitarios con QUnit == |
Lo primero que se debe hacer es configurar el ambiente de test. | 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. | + | 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> | + | <code xml="xml"> |
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" /> | <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> | <script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script> | ||
| − | </code> | + | </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: | + | 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> | + | <code xml="xml"> |
<h1 id="QUnit-header">QUnit Test Suite</h1> | <h1 id="QUnit-header">QUnit Test Suite</h1> | ||
<h2 id="QUnit-banner"></h2> | <h2 id="QUnit-banner"></h2> | ||
| Línea 22: | Línea 22: | ||
<h2 id="QUnit-userAgent"></h2> | <h2 id="QUnit-userAgent"></h2> | ||
<ol id="QUnit-tests"></ol> | <ol id="QUnit-tests"></ol> | ||
| − | </code> | + | </code> |
| − | A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit. | + | 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> | + | <code xml="xml"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Línea 54: | Línea 54: | ||
</html> | </html> | ||
| − | </code> | + | </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 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: | + | El archivo dosIdeasTest.js: |
| − | <code xml> | + | <code xml="xml"> |
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Línea 80: | Línea 80: | ||
}); | }); | ||
| − | </code> | + | </code> |
| + | <br> El archivo dosIdeas.js: | ||
| − | + | <code xml="xml"> | |
| − | |||
| − | <code xml> | ||
function validarImporte(importe) { | function validarImporte(importe) { | ||
| Línea 104: | Línea 103: | ||
} | } | ||
| − | </code> | + | </code> |
| + | |||
| + | El resultado de los test quedan de la siguiente manera: | ||
| + | |||
| + | [[Image:DosIdeasQUnitResultado.jpg]] | ||
| − | + | Descargar ejemplo | |
| − | [[ | + | [[File: demoQunit.zip]] |
Revisión del 23:33 15 ago 2011
Contenido
¿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.
<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>
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:
QUnit Test Suite
A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.
<!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>
QUnit example
</body> </html>
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:
$(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'); })
});
El archivo dosIdeas.js:
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); }
El resultado de los test quedan de la siguiente manera:
Descargar ejemplo
