DEV Community: Veritechie

Behavior Driven Development [BDD]

Veritechie — Fri, 18 Feb 2022 12:33:01 +0000

Propósito y beneficios de usar BDD

En lo más profundo, BDD se trata de tener conversaciones para ayudar a los equipos a superar los requisitos mal interpretados y problemas de entrega
Las ideas y conceptos se comparten discutiendo ejemplos concretos de la vida real de los requisitos y comportamientos del producto
BDD permite que las partes interesadas, clientes, devs, hablen en un idioma común (Gherkin) sobre la entrega.
BDD valora la colaboración por encima de los documentos de requisitos que normalmente se pueden mal interpretar
BDD permite creación de documentación para la solución técnica.

Por qué SHIFT LEFT

Básicamente se trata de mover las actividades de testing más hacia la izquierda del proceso de desarrollo. La idea es anticipar y tener en cuenta el testing desde el principio.

Ventaja 1. Las pruebas se hacen antes, por lo que el feedback se obtiene antes, los potenciales problemas se descubren y se pueden resolver antes mejorando así la calidad del producto final.

ventaja 2. Seguramente este hecho apoye a que se desarrollen componentes testeables, más fáciles de probar y de automatizar. Esto aporta un gran valor.

ventaja 3. Sharing is caring y se ha comprobado que cuando se testea solo se tiene menos cuidado, a diferencia de compartir las tareas fomentando la colaboración el éxito es mayor.

3 prácticas a aplicar

Descubre a través de la colaboración
Formulación (Documentación)
Automatización de la documentación

Términos clave

Gherkin tiene 3 componentes clave: Feature, Scenario & Steps (GWT)

Feature (Elemento de alto nivel)

Es la descripción de la funcionalidad a desarrollar.

Scenario (Elemento de tipo comportamiento)

Una feature tiene uno o varios scenarios, que son distintas características que se tienen que desarrollar para poder conseguir lo que nos hemos propuesto entregar.

Steps (GWT) (Elementos de tipo acción)

Given: Precondiciones para que se puedan ejecutar x acciones. Tu puedes tener varios "And" si se necesita para acumular acciones.
When: Condiciones de las acciones que se van a ejecutar.
Then: Resultado esperado de las acciones ejecutadas.

Ejemplo

Feature: Inicio de sesión en udemy
Scenario: Inicio de sesión con usuario y password
Given: El usuario tiene que introducir de manera correcta el usuario y password, que ha registrado con anterioridad.
When: El usuario hace click en "iniciar sesión"
Then: El usuario inicia sesión de manera correcta.

Gherkin
Feature > User Story > Gherkin Feature > Scenario(s) > G.Steps

BDD Feature Best Practices

Empieza con una persona. Recuerda que un cliente no es necesariamente un comprador.
Escribir "Declarative features"; Describir como si lo hiciera un usuario, de manera muy humana.
Insertar una narración; Describen en una oración lo que hace una feature. Las narrativas son importantes para imaginar por qué está implementando una función en primer lugar
Escribe la feature con la intención de cambiar el comportamiento del cliente. Afectará al patrón de prueba.
BDD se centra en featureFiles no en story files.
Las features deben de ser independientes entre si y proporcionar un cambio de comportamiento de la funcionalidad.
Use Story Mapping cuando una característica constituya un flujo de trabajo.

Features

Todas las Gherkin features son independientes unas de otras.
Cada feature o scenario deben ser ejecutadas independientemente.
Todos los steps deben tener info independiente (y sin son steps entre 50 - 80 caracteres mucho mejor).

Cucumber

La mejor forma de usar Gherkin es con Cucumber, un framework de testing con soporte para BDD, dónde las especificaciones BDD están escritas de acuerdo al patrón “Given-When-Then”. (Osease, en Gherkin)

Cucumber, puede generarnos los casos de prueba de la aplicación y darnos una mayor velocidad en el desarrollo del software

Este verifica que el software cumpla con la especificación y genera un informe que indica ✅ éxito o ❌ falla para cada scenario.

Este es un primer contacto de lo que BDD puede ofrecer y parece muy poderoso. Veremos en los próximos pasos :)

Bracket Pair Colorizer nativo en VSC

Veritechie — Wed, 26 Jan 2022 15:33:55 +0000

Soy super fan de la extensión Bracket Pair Colorizer y ahora viene lo bueno...

¡YA ES NATIVO EN VSC Y MUUUUCHO MÁS RÁPIDO!

Configuración

Elimina la extensión Bracket Pair Colorizer
Actualiza VSC
Vamos a añadir en settings.json la línea que nos permitirá usar nativamente esta extensión, ejecutamos:
Windows - Ctrl + Shift ⇧ + P
Mac - ⌘ + Shift ⇧ + P
Escribe "settings"
Haz click en "preferences: open settings(JSON)"

Añade la siguiente línea (puedes ayudarte con la imagen también)

"editor.bracketPairColorization.enabled": true

¡TADAAAAA! ¡Así de fácil! :)

VSC Tips ¡Aquí!

Deploy Node + Express + Mongo Atlas con fetch de React en Heroku (MERN App)

Veritechie — Wed, 17 Nov 2021 17:12:24 +0000

Si has llegado aquí es porque tienes un proyecto que reúne las siguientes características:

Proyecto de React.JS con fetch apuntado a un proyecto de backend y deployeado con Github Pages. (Te dejo aquí el enlace al post que hice para deployear en gh-pages)
Proyecto de backend con Express + Node, utilizando MongoDB Atlas como base de datos.

Ambos proyectos (Front y Back) funcionan en local y se alojan en Github

En resumen, lo que tendremos al final será nuestro proyecto de react alojado en gh-pages y nuestro proyecto de back de node y express alojado en Heroku.

Deploy Backend en Heroku

1. Configurar deploy automático en Heroku

Me gustó este método porque automáticamente cada vez que hacemos un cambio en nuestro repositorio de github, este será modificado directamente en Heroku.

Para eso vamos a crear una nueva app Create new app en heroku, accedemos a la pestaña de deploy y como Deployment method usamos GitHub.

Buscamos el repositorio al que queremos conectarnos. Search. Si existe el repositorio, lo encontrará con éxito.

Un poco más abajo, en Automatic deploys hacemos click en el botón Enable Automatic Deploys

Esto quedaría mas o menos así 👇🏽

2. Configurar URI de Mongo en Heroku

Resume pasos previos para usar Mongo Atlas

Configurar cluster gratuito
bbdd mongoimport de local a una bbdd de atlas
Configurar usuario y contraseña de acceso a bbdd
Activar cluster (Network access)

Te dejo un recurso para hacer esto aquí

En la pestaña Database, le damos al botón Connect

Copiamos la url

mongodb+srv://<username>:<password>@sandbox.tvib4.mongodb.net/nombreDeMiBBDD?retryWrites=true&w=majority

Modifica el usuario y contraseña por los que has configurado. Pon el nombre de la bbdd que estás utilizando.

Volvemos a Heroku > Settings > Config Vars > Reveal Config Vars y pegamos la url en VALUE como indica la imagen.

En KEY ponemos el nombre de la variable que hemos configurado anteriormente en nuestro proyecto:

3. Cambios en tu backend para que funcione Heroku

Nos vamos a nuestro proyecto y vamos a configurar un par de cosas necesarias para que podamos deployear en heroku.

Dentro de Package.json

"scripts": {
    "start": "node ./archivoDeArranqueDeNode.js"
  }

No more nodemon. Heroku va a interceptar este nuevo script que acabamos de configurar y se arrancará con npm start

Dentro de tu archivoDeArranqueDeNode.js

const PORT = process.env.PORT || 3000;

const server = app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`)
})

Configuramos la variable de entorno PORT. Cuando despleguemos a producción queremos que escuche en el puerto que Heroku nos asigne en esta variable de entorno (process.env.PORT). Para hacerlo usamos el operador lógico or ||, lo que hace, es quedarse con el primer valor que no arroje undefined de todos los valores que pongamos separados por este operador.

Hagamos la magia, subamos estos cambios a Git y veremos en Heroku como se hace el deploy automático.

Si vamos a Heroku y accedemos a More > View Logs, veremos como nuestro PORT está escuchando en 37457.

Y en overview:

Ejecución de promesas

Veritechie — Fri, 12 Nov 2021 09:24:25 +0000

¿Cuánto tiempo tarda en ejecutarse una secuencia de promesas?

const promesa1 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve(1)
  }, 1000)
});

const promesa2 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve(2)
  }, 2000)
});

const promesa3 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve(3)
  }, 3000)
});


console.time('promesas')
Promise.all([promesa1, promesa2, promesa3]).then(function(result) {
  console.log(result);
  console.timeEnd('promesas')
})

Exactamente 3 segundos (aproximadamente) ¿Sabes por qué?

Cuando empiezan a ejecutarse todas entran en la web API y el temporizador se ejecutará durante tanto tiempo como el segundo parámetro MÁXIMO que le hemos pasado a una de las promesas, es decir, 3000 en este caso.

Te recomiendo el siguiente enlace para hacer tus pruebas:
LatenFlip.com

Deploy tu proyecto de React.JS en Github-Pages

Veritechie — Thu, 11 Nov 2021 09:51:42 +0000

¡Ya está!, mi proyecto funciona en local y ya está subido y guardadito en un repositorio en github! ¡Quiero la magia de github pages!

Github-pages: Servicio que me ofrece Github para poder almacenar en la nube mi proyecto y visualizarlo.

Abrimos la terminal de nuestro ID favorito donde tengamos ubicado nuestro proyecto e instalamos el paquete de Gh-pages

npm i -D gh-pages

(Con -D lo instamamos en el package.json como devDependencies)

En nuestro archivo package.json añadimos la siguiente linea, justo debajo de "name": "nombredetuproyecto", por ejemplo.

"homepage":"https://GITHUBUSER.github.io/REPONAME"

Introduce tu nombre de usuario y el nombre de tu repositorio de Github y agrégalo arriba.

En el mismo archivo, dentro de "scripts": {, añade:

 "predeploy": "npm run build",
 "deploy": "gh-pages -d build"

¡Volvemos a la terminal! Ahora ejecutamos:

npm run build

Y por último...

npm run deploy

¿Cómo sé que he tenido éxito?, algo así te tiene que mostrar:

Además si actualizas tu repositorio en github verás que fue creada la rama de gh-pages. La url de acceso debería de verse así:

https://GITHUBUSER.github.io/REPONAME/

Si te fijas bien podrás ver actualizado en tu repo que github-pages está activo!

¡Enjoy!

JavaScript visualizado: Event Loop

Veritechie — Wed, 10 Nov 2021 19:52:15 +0000

¿Qué es Event Loop y por qué debería importarte?

JavaScript es de un solo subproceso: solo se puede ejecutar una tarea a la vez. Ahora imagina que estás ejecutando una tarea que tarda en terminar 30 segundos… Esperamos 30 segundos antes de que suceda cualquier otra cosa, ¿no es de locos?.

Por suerte el navegador nos brinda algunas funciones que el motor JS en si no nos da: Una Web API. Esto incluye la API DOM, setTimeout, solicitudes HTTP, etc. Esto puede ayudarte a crear un comportamiento asincrónico y sin bloqueos.

Cuando invocamos una función se añade a algo llamado “callstack” (pila de llamadas). Es parte del motor JS, no forma parte del navegador.

Es una pila, por lo que es el primero en entrar y el último en salir. (como un montón de tortitas, piénsalo así). Cuando una función devuelve un valor, sale de la pila.

las funciones se envían a la pila de llamadas cuando se invocan y desaparecen cuando devuelven un valor

La función de respuesta devuelve una función setTimeOut.
Este nos lo proporciona la web API: nos permite retrasar las tareas sin bloquear el hilo principal.

La función callback que pasamos a la función setTimeOut,
la función de flecha ()=> { return 'Hey' } se añade a la web API.
Mientras tanto, la función setTimeOut y la de respuesta se eliminan del *callstack. *¡Ambas han devuelto sus valores!

setTimeOut es proporcionado por el navegador, la web API se encarga de callback que le pasamos.

En web API, un temporizador se ejecutará durante tanto tiempo como el segundo argumento que le pasemos (1000ms). El callback no se añade inmediatamente a la pila de llamadas, sino que se pasa a algo llamado cola (queue).

Cuando el timer ha terminado (1000 ms en este caso), el callback se pasa a la cola de callback

Esto puede ser una parte confusa: No significa que la función de callback se añade al callstack (por lo tanto, devuelve un valor) después de 1000ms, simplemente se añade a la cola después de 1000ms. Pero es una cola, ¡la función tiene que esperar su turno!

Ahora esta es la parte que estábamos esperando… Es hora de que event loop haga su única tarea: ¡conectar la cola con el callstack! Si el callstack está vacío, si todas las funciones invocadas anteriormente han devuelto sus valores y se han eliminado del stack, el primer elemento en la cola se añade al callstack. En este caso, no se invocó ninguna otra función, lo que significa que el callstack estaba vacío cuando el tiempo de la función de callback era el primer elemento de la cola.

El event Loop mira la cola de callback y de callstack. Si el callstack está vacío, pone el primer elemento en la cola

El callback es añadido al callstack es invocada. Una vez el valor es retornado, se saca de la pila del stack.

Leer esto es divertido, pero solo te sentirás cómodo con esto si trabajas con ello una y otra vez. Intenta averiguar qué se registra en la consola si ejecutamos lo siguiente:

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

Echemos un vistazo rápido a lo que sucede cuando ejecutamos este código en un navegador:

Invocamos bar. bar devuelve una función deSetTimeOut
El callback que pasamos a setTimeOut se agrega a la web API, la función setTimeOut y la barra se eliminan del callstack.
El timer se ejecuta, mientras tanto foo es invocada y imprime First. foo devuelve (undefined), baz es invocada y el callback es añadido a la cola
baz imprime Third. El event loop ve que el callstack está vacío después de que baz se retorne, después de lo cual el callback se agrega a la pila de llamadas.
El callback imprime Second

Link a la versión original del artículo: ✨♻️ JavaScript Visualized: Event Loop. Thank you Lydia Hallie, for making me take off 🚀.

🔥 El infierno de var

Veritechie — Tue, 09 Nov 2021 15:32:53 +0000

¿Que crees que imprimirá por pantalla este fragmento de código?

for (**var** i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log("Pues...",i);
    }, 1000);
}

SPOILER….

…………

Si tu respuesta fue Pues...6 ¡estás en lo cierto!, además te aparecerá justo una línea más arriba un numerito que identifica el número de setTimeOut lanzado. Este es aleatorio y a priori no sirve para nada, ¡solo FYI!

¿Sabes por qué?

Cuando declaramos una función con*var, el ámbito es su *contexto de ejecución en curso*,* que puede ser la función que la contiene o un ámbito global. Entonces podemos esperarnos resultados inesperados. Es por eso que es mejor que intentes evitar declarar variables con la palabra var. ¡pasa de eso!.

Sin embargo… ¿que pasa si lanzamos este mismo fragmento de código?
Nótese el cambio de var por let

for (**let** i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log("Pues...",i);
    }, 1000);
}

Sí amiguitos, ahora nos ejecuta el bucle tal y como deseamos. Gracias a la magia del scope, es una variable local que solamente está definida dentro de la función.

RECAP: ¡No al var, si al let! (o const!)

Just JavaScript

Veritechie — Sun, 07 Nov 2021 18:13:45 +0000

Antecedentes: Todo el mundo sabe que programar no es una tarea sencilla. Nunca sabes por donde empezar, a veces no entiendes nada y empiezas a dar vueltas; estudias (a tu manera) el código de otros compañeros, miras como loco stackoverflow… pero llega un momento que sientes que algo no va bien. Te falta algo. En mi caso lo llamaría conocimiento básico, entendimiento del propio lenguaje sobre todo antes de dar el salto a otros frameworks de JS (react, vue, angular…). Porque una cosa es estudiar la base de todo lenguaje de programación. Pero otra cosa es estudiar el por qué.

Just Javascript es el modelo mental de cómo funciona JavaScript.
En definitiva: mejorar nuestra comprensión acerca de este lenguaje.

Dan Abramov y Maggie Appleton están detrás de estas mágicas explicaciones.

De que se trata

Se divide en pequeñas lecciones (en total 9) que se envían por correo y en ella, aparte de los **modelos mentales fundamentales **que rodean a Javascript, se completa con una serie de ejercicios que te harán comprender mucho mejor lo que se explica.

A tu ritmo

Para que te hagas una idea, a mi me ha llevado 8 días en hacerlo.
1 hora por cada lección + ejercicios.

Lo recomiendo encarecidamente si como yo, estás empezando, tienes todavía dudas sobre el principio de Javascript y quieres saber cosas tan curiosas como
por qué 0.1 + 0.2 === 0.3 es false. Merece muchísimo la pena.

Puedes suscribirte aquí: Just Javascript

¿Y a ti, se te ocurre algún curso que merezca la pena para aprender el interior de Javascript?