Similar Posts
Testear páginas web con AVA y PhantomJS
Estoy colaborando junto a @jlantunez y @belelros en WebSlides, un proyecto open source que permite crear presentaciones usando un navegador web de forma increíble.
Para hacer las cosas bien, vamos a incluir pruebas de testing, y para ello he mirado cómo hacerlo con AVA y PhantomJS. El problema con el que me he encontrado ha sido que todo es asíncrono y a veces da un poco de problemas esperar a cargar la página para que AVA empiece a realizar las pruebas.
Además no es plan de cargar la página en cada una de las pruebas, por lo que cargo la página una vez y luego realizo las pruebas necesarias. Esto me obliga a que las pruebas sean secuenciales en vez de en paralelo, pero bueno, tampoco es mucho problema.
Como me he roto la cabeza intentado averiguar cómo hacer, ya que soy un tanto novato en esto, pongo el código para aquel que lo necesite, aunque bueno, en breve estará en GitHub:
// Cargo las librerías
let phantom = require("phantom");
import test from 'ava';
// Para almacenar lo que PhantomJS necesita
let ph_, page_, status_;
// Función que carga la página
const load = async () => {
await phantom.create().then(async ph => {
ph_ = ph;
return await ph_.createPage();
}).then(page => {
page_ = page;
return page_.open('http://webslides.tv/');
}).then(status => {
status_ = status;
return true;
}).catch(e => console.log(e));
}
// Tests
test.serial("Page loaded", async t => {
await load();
t.is(status_, 'success');
});
test.serial('#webslides exits', async t => {
await page_
.evaluate( () => document.querySelector('#webslides') != null )
.then( ws => { t.truthy(ws); } );
});
test.serial('WebSlides object exits', async t => {
await page_
.evaluate( () => window.ws != null )
.then( ws => { t.truthy(ws); } );
});
/**
* Last test
*/
test.serial('Closing', async t => {
await page_.close();
ph_.exit();
t.true(true);
});
Laboratorio: filtrado de tablas
Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.
Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.
La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “lÃquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
![]()
Ejemplos de javascripts optimizados
Si el otro dÃa os contábamos cómo agilizar tus javascripts, hoy os hacemos referencia a ejemplos sobre esos consejos.
Aunque si soy sincero, no tengo muy claro que se gane mucho tiempo cargando dinámicamente los scripts y retrasando la ejecución para esperar a que se cargue. O si realmente hay diferencia, que no será mucha y menos con las velocidades que suele tener actualmente la mayoria de la gente, si merece la pena tanta cosa. Si el script lo cargamos inicialmente y luego lo utilizamos en todas nuestras páginas, la optimización serÃa suficiente.
Yo creo que la mejor solución es no tirar tanto de librerÃas y crear los scripts necesarios para tu aplicación.
Speed Up Your Javascript, Part 2: Downloadable Examples!
VÃa / Dzone
Hacer un botón de ‘Ver código fuente’
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.
‘Bocadillos’ en tu web
Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librerÃa prototype, la css e incluir la siguiente lÃnea para que funcione:
<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>
Yo como unica pega, intentarÃa hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.
VÃa / Fresqui
jQuery CodeView: plugin para ver el codigo HTML
jQuery CodeView es un plugin que nos permite mostrar el código HTML de un elemento de la página.
Su uso sería así:
jQuery("#javascript_block").codeview();
jQuery("#javascript_block").codeview({
fontSize: "1.2em",
tabToSpace: -1,
feedColor: false
});
Vía / DZone
