desy-html 6.4.1 → 6.5.0

package/docs/index.html

@@ -14,9 +14,9 @@
   <h2>¿Cómo comenzar?</h2>
   <ul>
     <li>Ejecuta primero <code>npm install</code></li>
-    <li>Utiliza <code>npm run dev</code> para generar el CSS de <code>src/styles.css</code> a <code>/dist/styles.css</code>, este proceso escucha cambios en los archivos njk, css y html, y recarga browser-sync.</li>
-    <li>Usa <code>npm run prod</code> para generar el CSS, purgarlo (excluir las clases CSS que no se usan) y minificarlo.</li>
-    <li>Dependencias: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS y CSSnano configurado en PostCSS</li>
+    <li>Ejecuta <code>npm run dev</code> para escuchar cambios en los archivos njk, css y html, para renderizarlos y recargar el servidor local con browser-sync.</li>
+    <li>Usa <code>npm run prod</code> para generar el CSS y minificarlo.</li>
+    <li>Dependencias: Node.js v12.18.3, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: <a href="package.json">Ver package.json</a></li>
   </ul>
 
   <h2>¿Cómo comienzo un proyecto que usa los componentes de desy-html?</h2>
@@ -36,8 +36,30 @@
   <h2>Descarga el código fuente</h2>
   <p>El código de este proyecto está publicado en un repositorio público de Bitbucket. Puedes hacer un fork o descargarlo desde aqui: <a href="https://bitbucket.org/sdaragon/desy-html">https://bitbucket.org/sdaragon/desy-html/</a></p>
 
+  <h2>Test visuales con BackstopJS</h2>
+
+  <p>Para testear el estado visual de cada uno de los componentes usamos la librería <a href="https://garris.github.io/BackstopJS/">BackstopJS</a>, que genera unas capturas bitmap iniciales del estado de cada uno de los componentes llamadas referencias y que son la base sobre la que comparar en los tests. Estas capturas bitmap de referencias se hacen con las páginas de componentes que hay publicadas en la rama master en su sitio web: <a href="https://desy.aragon.es/desy-html">https://desy.aragon.es/desy-html</a></p>
+
+  <p>Cuando hacemos cambios en nuestra rama y antes de crear una nueva pull request debemos lanzar el test así: <code>npm run backstop-test:test</code>, esto creara unas capturas de nuestros cambios locales. Estas se comparan con las de referencia y si hay algún cambio visual nos lo indica en un reporte visual, al finalizar los test. Este reporte se abre automaticamente en el navegador y nos permite visualizar los cambios que hay entre la base y nuestros cambios.</p>
+
+  <p>Instrucciones:</p>
+  <ul>
+    <li>Ejecutar el servidor local con: <code>npm run prod</code> y dejarlo activo mientras hacemos los tests.</li>
+    <li>Testear cambios con: <code>npm run backstop-test:test</code>. Compara lo renderizado en nuestro local con las referencias aprobadas previamente. Al finalizar abre en el navegador un reporte visual.</li>
+    <li>Si los cambios no son correctos, corregir.</li>
+    <li>Si los cambios son correctos, aprobarlos con: <code>npm run backstop-test:approve</code>. Esto guarda las capturas de los cambios aprobados como nuevas referencias.</li>
+    <li>Commitear cambios y hacer el pull request.</li>
+  </ul>
+
+  <p>Si queremos generar las referencias de nuevo desde lo que está en master publicado en <a href="https://desy.aragon.es/desy-html">https://desy.aragon.es/desy-html</a> debemos ejecutar: <code>npm run backstop-test:reference</code>. Este script apenas lo vamos a usar ya que las referencias ya estarán creadas. Úsalo sólo si no tienes las certeza de que las referencias no sean correctas. </p>
+
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.6.5.0</h3>
+  <ul class="text-sm">
+    <li>Added Backstop.js visual regression testing library.</li>
+    <li>Improved documentation.</li>
+  </ul>
   <h3>v.6.4.1</h3>
   <ul class="text-sm">
     <li>Fixed notification close.</li>

package/gulpfile.js

@@ -30,8 +30,9 @@ const DESTINATION_STYLESHEET = './dist/css/';
 function bs(cb) {
   browserSync.init({
     server: {
-      baseDir: './dist/'
-    }
+      baseDir: './dist/',
+    },
+    notify: false
   });
 
   cb();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
@@ -25,14 +25,18 @@
   },
   "main": "src/js/index.js",
   "scripts": {
-    "dev": "gulp",
-    "prod": "NODE_ENV=production gulp prod"
+    "dev": "gulp --no-notify",
+    "prod": "NODE_ENV=production gulp prod",
+    "backstop-test:approve": "backstop approve --config=test/backstop_config/backstop.config.js",
+    "backstop-test:reference": "backstop reference --config=test/backstop_config/backstop.config.js",
+    "backstop-test:test": "backstop test --config=test/backstop_config/backstop.config.js"
   },
   "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.2",
     "autoprefixer": "^10.0.2",
+    "backstopjs": "^6.1.1",
     "hex-rgb": "^4.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.15",