Migración de componentes iniciada
Otra semana terminada. Los exámenes limitaron mi progreso esta semana, pero el proyecto avanzó significativamente. Cuatro logros clave:
- Arreglado el proceso de construcción para producción.
- Añadido test runner.
- Migrado el primer componente a Angular 2.
- Añadido el primer test para un componente migrado.
Arreglando el proceso de construcción
La semana pasada el entorno de desarrollo estaba listo, y presumiblemente el de distribución también. Pero a lo largo de la semana, noté que la build distribuida causaba problemas con los elementos de la cuadrícula en la sala de vídeo chat. Después de probar varias configuraciones de Webpack, rastreé los problemas hasta el proceso de uglify.
El problema involucraba el sistema de cuadrícula de la sala de vídeo,
implementado con
angular-gridster. Podía
venir de los estilos de angular-gridster o del módulo JavaScript. Primero,
intenté importar el CSS de la librería directamente sin Webpack. Falló. La
solución: usar la versión fuente en lugar de la minificada en vendors.ts.
Extraño, ya que ambas versiones deberían comportarse igual. Independientemente,
la versión fuente soluciona el problema, y Webpack minifica todo el código de
todas formas, incluyendo vendor.ts.
Añadiendo test runner
Más fácil de lo esperado. Usé
angular2-webpack-starter
de @AngularClass como inspiración. Después de
adaptar sus archivos webpack.test.js y karma.conf.js con cambios menores,
todo funcionó. El código abierto en su mejor expresión: Don't Repeat Yourself.
Migrando el primer componente
Esperaba este momento desde que envié mi propuesta al GSoC. Empecé con el componente más simple de Jangouts: el pie de página. Solo muestra un enlace a SUSE y la versión de Jangouts.
En el antiguo Jangouts (pre-migración), el pie de página consistía en una simple
directiva de Angular 1 con una plantilla y una plantilla
jade. Gulp la renderizaba, inyectando la versión
actual.
El nuevo pie de página sigue siendo simple: un
archivo TypeScript
(definición de componente con una clase vacía) y una
plantilla Angular 2.
La diferencia clave: nada modifica la plantilla para inyectar la versión. En su
lugar, el DefinePlugin de
Webpack añade la versión como constante global en tiempo de construcción,
leyendo de package.json.
Dos beneficios: el pie de página es ahora un componente Angular puro, y es más fácil de probar.
Añadiendo tests
Añadir tests en toda la plataforma es esencial durante la migración a Angular 2.
El nuevo componente de pie de página tiene sus propios tests. Simplemente
verifican que la variable version esté definida correctamente. Pero estos
tests sirven un segundo propósito: confirman que el test runner y el reporter de
cobertura funcionan correctamente.