Este será el primer artículo de muchos donde ire documentando mi proceso de aprendizaje de Vue. Es cierto que ya he hecho alguna pequeña aplicación con Vue hace ya bastante tiempo. En esta serie de post que voy a empezar voy a retomarlo todo desde cero.

## Creando un componente

Para crear una aplicación vue tenemos vue cli, un paquete global de npm que podemos instalar con:
```
npm install -g @vue/cli
```

Utilizando vue cli podemos crear proyectos partiendo de distintas boilerplates. La oficial es "webpack" ( vue init webpack my-project) pero podemos utilizar cualquier otra de github. En este repositorio hay muchas de ellas, yo voy a utilizar la oficial.

Lo que haré será crear un pequeño componente para dar una valoración. Lo llamaré rating-component.

```
vue create ratings-component
```

Una de las cosas que nos preguntará es el preset que queremos. Elegiremos default.

Abrimos el proyecto con nuestro ide (yo utilizo VSCode) y ejecutamos el servidor en modo desarrollo. Para esto yo prefiero utilizar la consola del VSCode.

```
cd rating-component && code .
```
Luego en la consola de VSCode (ábrela con cmd + shift + t):
```
npm run dev
```
Veremos nuestra aplicación funcionando en localhost:8080

## Eslint

Instalamos los siguientes paquetes:

```
npm install --save-dev eslint eslint-plugin-vue@next
```

Creamos un fichero .eslintrc.js y añadimos:

```javascript
module.exports = {
  root: true,
  env: {
    browser: true,
    jest: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
  rules: {
    "no-console": ["error", { allow: ["warn", "error", "info"] }],
  },
};

```

Por último, podemos configurar VSCode para que fixee los errores al guardar. Para ello creamos una carpeta .vscode en la raiz del proyecto, dentro creamos un fichero settings.json y añadimos:
```javascript
{
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  }
}
```
De esta forma ahora al guardar se fixeará nuestro codigo.

## Vue dev tools

Para debugear correctamente, es recomendable instalar las vue.js dev tools en nuestro navegador. Puedes encontrarlo en las extensiones de Firefox, Chrome o Safari. Aquí te dejo el enlace para las de [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es)

## Creando nuestro componente

Una de las características de Vue es que el HTML, el JS y el CSS se suelen definir en el mismo fichero (con extensión .vue). El contenido de nuestro fichero se divide en tres secciones:

```javascript
<template>
  /* HTML  */
</template>

<script>
  /* JS  */
</script>

<style>
  /* CSS */
</style>
```

Vamos a crear un fichero Ratings.vue dentro de src/components con este contenido. Simplemente mostrarermos un h1 que diga Ratings, y le damos un nombre al componente (Ratings):
```javascript
<template> 
  <h1>Ratings</h1> 
</template>

<script>

export default {
  name: "Ratings"
};

</script>

<style></style>
```
Lo siguiente que haremos es ir a App.vue e importarlo dentro de <script> </script>:

```javascript
import Ratings from "./components/Ratings";
```

Lo declaramos como componente:

```javascript
export default {
  name: "App",
  components: {
    HelloWorld,
    Ratings
  }
};
```

Y lo usamos:
```html
<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <HelloWorld />
    <Ratings />
  </div>
</template>
```

Verás que ahora aparece el texto Ratings en la web.

Ahora que ya tenemos nuestro componente funcionando, vamos a limpiar App.vue para quedarnos solo con nuestro componente Ratings:
```javascript
<template>
  <div id="app">
    <Ratings />
  </div>
</template>

<script>

import Ratings from "./components/Ratings";

export default {
  name: "App",
  components: {
    Ratings
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

```

Lo siguiente que haremos es instalar una libreria de iconos para mostrar estrellas rellenas o vacias en funcion de la valoración que vayamos a darle a nuestro componente ratings.

```
npm i vue-unicons
```

En main.js, importaremos la libreria y los iconos que queremos. En este caso queremos star y star monochrome.
```javascript
import Vue from "vue";
import Unicon from "vue-unicons";
import { uniStar, uniStarMonochrome } from "vue-unicons/src/icons";
import App from "./App";

Unicon.add([uniStar, uniStarMonochrome]);
Vue.use(Unicon);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  render: h => h(App)
});
```

Ahora en Ratings, utilizamos estos dos iconos:
```html
<template>
  <div>
    <ul>
      <li>
        <unicon name="star" fill="orange" />
      </li>
      <li>
        <unicon name="star" fill="orange" icon-style="monochrome" />
      </li>
    </ul>
  </div>
</template>
```

Para quitarle el estilo de lista (los puntos), en el css indicaoms list-style: none:
```html
<style>
ul {
  list-style: none;
}
</style>
```

Ahora mismo deberiamos ver dos estrellas naranjas (una rellenada y otra sin rellenar). En nuestro componente, vamos a permitir valorar del 1 al 10, por lo que vamos a añadir 10 estrellas vacias de momento. Utilizaremos un v-for para mostrar 10 estrellas vacias:
```html
<template>
  <div>
    <ul>
      <li v-for="n in 10" :key="n">
        <unicon name="star" fill="orange" />
      </li>
    </ul>
  </div>
</template>
```

Aún podemos hacerlo mejor. Definiremos dos variables para controlar nuestro componente.
stars: numero de estrellas seleccionadas
maxStars: numero máximo de estrellas que podemos utilizar.

Para ello utilizaremos la propiedad data:

```javascript
export default {
  name: "Ratings",
  data() {
    return {
       stars: 0,
       maxStars: 10
    }
  }
};
```
Y reemplazamos el numero 10 del v-for por maxStars.

Queremos que nuestras estrellas se muestren de forma horizontal. Vamos a hacerlo modificando la lista en los estilos:
```html
<style>
ul {
  list-style: none;
}
li {
  float: left;
}
</style>
```

## Primera funcionalidad. Estrellas seleccionadas

Lo primero que vamos a hacer es que se muestren tantas estrellas rellenas como indiquemos en la variable stars (que ahora mismo es igual a 0.

Vamos a ponerle un valor de 6.

A continuación, en nuestro v-for sabemos que la n es el numero en el bucle. Queremos que si el numero de stars es 6, se muestren 6 rellenas.

En unicons, la forma de cambiar de rellena a no rellena es utilizando la propiedad icon-style. Si es monochrome, aparece rellena y si es line (por defecto es line) aparece solo el borde. Lo que vamos a hacer es bindear la propiedad icon-style para que interprete el resultado en base a una logica.

```html
 <unicon name="star" fill="orange" v-bind:icon-style="n <= stars ? 'monochrome' : 'line'" />
```

Si n (la estrella en el array) es menor o igual que el numero de estrellas, indicamos que sea monochrome y si no, sera line.

Es decir, si stars vale 6, las seis primeras estrellas seran monochrome y las cuatro útlimas seran line.

El v-bind se puede abreviar poniendo únicamente los dos puntos:
```
 <unicon name="star" fill="orange" :icon-style="n <= stars ? 'monochrome' : 'line'" />
```

Puedes comprobar que el código funciona correctamente.

## Añadiendo un texto descriptivo

Lo siguiente que queremos hacer es mostrar un texto que indique la valoración, en nuestro caso: n de maxStars. Colocamos lo siguiente a continuación del cierre de </ul>

```html
<span>{{ stars }} de {{ maxStars }}</span>
```

Podemos hacerlo mejor usarlo una computed propierty. Este tipo de elementos son valores que se actualizan cuando otros cambian. Vamos a crear una computed property llamada counter:

```javascript
 computed: {
   counter() {
     return `${this.stars} de ${this.maxStars}`
   }
 }
```

Y reemplazamos el texto del <span></span> por:

```html
 <span>{{ counter }}</span>
```

Vemos que se sigue viendo igual. En cuanto al estilo, vamos a hacer unos cuantos retoques. Modificamos nuestro div para que muestre el texto debajo de la lista. Por supuesto podríamos / deberiamos crear clases en vez de dar estilos a los elementos directamente, pero no es el objetivo de este post:
```html
<style>
div {
  display: flex;
  flex-direction: column;
}
ul {
  list-style: none;
}
li {
  float: left;
}
</style>
```

Vemos que las estrellas salen muy separadas respecto al texto. Esto es porque las listas tienen un margen y un padding por defecto. Vamos a actualizar li y ul con margin: 0 y padding: 0:
```css
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  margin: 0;
  padding: 0;
}
```

## Modificando la valoracion

Queremos que cuando el usuario clique en una estrella, la valoración se modifique a ese valor. Por ejemplo si clica en la estrella número 2, la valoración debe ser 2. Para ello, vamos a utilizar el evento @click y llamaremos una funcion que se llame setRate a la que le pasaremos la estrella en el array que se ha clicado:

```html
 <li v-for="n in maxStars" :key="n" **@click="setRate(n)"**>
```

Para modificar las stars de data, necesitamos crear el método setRate y actualizar el valor utilizando lo que recibimos por parámetro:

```javascript
 methods: {
   setRate(star) {
     this.stars = star;
   }
 }
```

Ahora puedes comprobar que cada vez que clicamos en una estrella diferente, el rate cambia.

## Haciendo el componente reutilizable

hasta ahora hemos definido internamente el valor inicial y el maximo valor que pueden dar los usuarios. Para que el componente sea reutilizable, estos valores deben de poder recibirse desde un componente padre. Es decir, en unas aplicaciones querremos un rating del 1 al 5, en otras del 1 al 10, etc.

Para ello vamos a definir dos props: selectedStars y maxStars

```javascript
props: ["selectedStars", "maxStars"],
```

maxStars no va a cambiar, por lo que podemos usarlo directamente pero en el caso de selectedStars, lo que haremos será inicializar nuestra variable stars dentro de data, al valor que recibimos por parámetro:

```javascript
 data() {
   return {
      stars: this.selectedStars
   }
 },
```

Por último, para pasarle las props a nuestro componente utilizamos el shorthand de v-bind (dos puntos) en App.vue:

```html
<Ratings :maxStars="10" :selectedStars="3" />
```

## Testing. Configurando el entorno

Para testear nuestro componente vamos a moverlo a una carpeta. 

Creamos una carpeta Ratings dentro de components y movemos nuestro componente ahi. Actualizamos el import en App.vue y procedemos a crear nuestro fichero Ratings.test.js.

Si empezaramos a escribir nuestro terst, veríamos una serie de warnings indicandote que las palabras describe and it no están definidas. Es un error de eslint. Para solucionarlo añadiremos jest a los entornos de eslint (.eslintrc):
```javascript
 ... 
 env: {
   browser: true,
   jest: true
 },
...
```

Ahora instalaremos Jest y [vue-testing-library](https://github.com/testing-library/vue-testing-library) para empezar a testear.

```
npm install --save-dev jest @testing-library/vue
```

Vue testing library funciona igual que la version de react, por lo que si estas acostumbrad@ a react testing library, te será muy familiar.

Por último, nos queda configurar Jest. Creamos un fichero jest.config.js en el root de nuestro proyecto con la siguiente configuración:

```javascript
const path = require("path");

module.exports = {
  rootDir: path.resolve("./"),
  moduleFileExtensions: ["js", "json", "vue"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  testURL: "http://localhost",
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
  transformIgnorePatterns: ["/node_modules/(?!vue-unicons).+(js|vue)$"],
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  coverageDirectory: "<rootDir>/coverage",
  collectCoverageFrom: [
    "src/**/*.{js,vue}",
    "!src/main.js",
    "!**/node_modules/**",
  ],
};

```

Para ejecutar los test, recuerda que has de ejecutar el comando **jest**. Puedes crearte una serie de scripts en el package.json para ejecutar jest en modo watch y jest con coverage:

```javascript
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
```

Cuando lanzes el comando coverage, aparte de ver la cobertura por consola se te crearán los ficheros correspondientes en la carpeta coverage del proyecto.

## Creando nuestro test

Vamos a importar render, screen y fireEvent en nuestro fichero de test, las depedencias de Unicon para poder testear el componetne con iconos y el componente que vamos a testear (Ratings). Inicializamos Unicon como hicimos en el main.js:

```javascript
import { render, screen, fireEvent } from "@testing-library/vue";
import Vue from "vue";
import Unicon from "vue-unicons";
import { uniStar, uniStarMonochrome } from "vue-unicons/src/icons";
import Ratings from "./Ratings";

Unicon.add([uniStar, uniStarMonochrome]);
Vue.use(Unicon);
```

Antes de continuar, vamos a añadir un par de propiedades a nuestro Ratings.vue para poder acceder a los iconos:

```html
<ul>
  <li
    v-for="n in maxStars"
    :key="n"
    role="rating-icon"
    :data-testid="`icon-${n}`"
    @click="setRate(n)"
  >
    <unicon
      name="star"
      fill="orange"
      :data-testid="n <= stars ? 'filled-star' : 'empty-star'"
      :icon-style="n <= stars ? 'monochrome' : 'line'"
    />
  </li>
</ul>
```

El primer test que vamos a hacer es comprobar que se renderizan tantas estrellas como indicamos con la propiedad maxStars:

```javascript
describe("Ratings.vue", () => {
  it("should render as many stars as we indicate using the maxStars property", () => {
    render(Ratings, {
      props: {
        maxStars: 10
      }
    });
    expect(screen.queryAllByRole("rating-icon").length).toBe(10);
  });
});

```

El segundo caso será comprobar que hay tantas estrellas filled como indicamos en selectedStars:

```javascript
  it("should render as many filled stars as we indicate using the selectedStars property", () => {
    render(Ratings, {
      props: {
        maxStars: 10,
        selectedStars: 6
      }
    });
    expect(screen.queryAllByTestId("filled-star").length).toBe(6);
    expect(screen.queryAllByTestId("empty-star").length).toBe(4);
  });

```

En el tercer caso, comprobaremos que el texto aparece y es correcto:

```javascript
  it("should show a text with the amount of selected stars", () => {
    render(Ratings, {
      props: {
        maxStars: 10,
        selectedStars: 6
      }
    });
    expect(screen.getByText("6 de 10")).toBeTruthy();
  });

```

Y en el último comprobaremos que al seleccionar otro rating, el numero de estrellas rellenadas y el numero de estrellas vacias cambian, así como el texto:

```javascript
  it("should change the rating when select another one", async () => {
    render(Ratings, {
      props: {
        maxStars: 10,
        selectedStars: 6
      }
    });

    const icons = screen.queryAllByRole("rating-icon");
    expect(icons.length).toBe(10);
    expect(screen.queryAllByTestId("filled-star").length).toBe(6);
    expect(screen.queryAllByTestId("empty-star").length).toBe(4);
    expect(screen.getByText("6 de 10")).toBeTruthy();
    await fireEvent.click(screen.getByTestId("icon-2"));
    expect(screen.queryAllByTestId("filled-star").length).toBe(2);
    expect(screen.queryAllByTestId("empty-star").length).toBe(8);
    expect(screen.getByText("2 de 10")).toBeTruthy();
  });
```

Y con esto ya tendríamos un 100% de cobertura en nuestro componente.

Espero que te sea de utilidad y si tienes sugerencias o mejores enfoques no dudes en comentar, este articulo es basado en mi aprendizaje de Vue.

¡Un saludo!


Crearé un componente desde cero con Vue.JS y lo testearé con jest y vue-testing-library

Aprendiendo Vue - Componente con Test unitarios


En 1999 **Martin Flowler** decía: Cualquier tont@ puede escribir un código que un ordenador entienda. L@s buen@s programadores escriben codigo que los humanos entienden.

Muchas veces nos encontramos con código imposible de mantener, o el cual no sabemos si cambiándolo modificamos algun comportamiento que no queremos debido a que no está testeado, o incluso somos nosotr@s mism@s l@s que creamos un código para completar una tarea sin importarnos que esté testeado, sea escalable y mantenible ya que nuestra misión es hacer una feature.

Realmente, como desarrolladores debemos ser profesionales. Un código cuando es dificil de testear, tiene todas las papeletas para ser refactorizado y es una señal bastante fiable de lo acoplado que está al resto de la aplicación, pero...¿qué es refactorizar?

La **definición de refactorizar** es realizar un cambio en la estructura interna de un software para hacerlo mas facil de entender y mas barato de modificar, sin cambiar su comportamiento. 

Para cumplir la última premisa, debemos de tener una forma fiable y medible para saber si el comportamiento ha cambiado o no. Esto lo podemos realizar con test: unitarios, de integracion y e2e.

En este punto, sabemos dos cosas:

1. Que és refactorizar
2. Para refactorizar, necesitamos probar nuestro código.

Hay un principio boy scout en el desarrollo de software que dice que, cuando te encuentres un codigo, intenta dejarlo mejor que como lo encontraste. Obviamente no podemos pasar el día refactorizando cada fichero que abramos, pero si podemos mejorar los ficheros en los que tenemos que trabajar para implementar una nueva característica o resolver un bug.

## Primero hay que aprender a gatear, luego a andar y luego podremos correr

Cuando tenemos que añadir una característica nueva a nuestro código pero no esta estructurado correctamente, primero debemos refactorizarlo para que dicha característica sea facil de implementar y luego debemos añadir la característica. Esto debes hacerlo en procesos separados, es decir, primero refactoriza (commitea) y luego añade la característica (commitea), de esta forma en una revision de código es mucho mas sencillo explicar el motivo del refactoring y explicar la funcionalidad sin mezclar una cosa con la otra.

Tenemos que ser conscientes que no estamos refactorizando cuando cambiamos el código sin tener tests que verifiquen que no ha cambiado su comportamiento. Únicamente estamos cambiando código, pero no refactorizando. 

El mejor consejo que te puedo dar cuando tienes un codigo muy grande y acoplado, es empezar a separar poco a poco. Igual que cuando un policía forense se encuentra una escena del crimen, debemos de empezar a buscar pruebas que nos digan que ocurre y nos permitan poco a poco entender lo que ocurre. Una vez tenemos una prueba ("este trozo de codigo hace X") podemos sacarlo a una funcion independiente y testearlo.

## Usa funciones puras

Un buen consejo aqui es hacer funciones puras, es decir, dado el mismo input, devuelvan siempre el mismo output. De esta forma, podemos testearla facilmente y ya  habremos dado un pequeño paso en nuestro refactor. Recuerda: la mutabilidad es el demonio 🤣

## Un buen nombre

Otro buen consejo es dar un buen nombre a nuestras funciones y variables. X, Y, Z, aux ...no son un buen nombre. El código debe de contar que hace sin entrar a ver su implementación.

Lo cierto es que es bastante habitual hablar de todo esto pero en la práctica nadie, o muy poca gente lo hace. Es normal y entendible, muchas veces no disponemos de todo el tiempo del mundo para hacer un codigo perfecto. En este caso, te puedo dar **tres consejos**:

1. **Aprende TDD.** Si para crear tu código haces tu test primero, automáticamente tendrás tu codigo testeado y a su vez documentado. Al principio el desarrollo será lento, pero poco a poco irás cogiendo velocidad hasta que empiezes a entregar un código de alta calidad testeado. Tus clientes o tu empresa verá que el codigo de pepito tiene muy pocos bugs o en el caso de tenerlos, es facil detectar dónde y arreglarlo al tener una buena covertura de test.

2. En lo que aprendes TDD, puedes crear tu test despues de hacer una feature. Lo mejor es que sigas los principios DRY (Don't repeat yourself) and KISS (Keep it stupid simple). De esta forma aunque no puedas testearlo todo (por ejemplo, no tienes tiempo para aprender como testear un custom hook en React), la mayoria de funciones y utilidades podrás testearlas.

3. Si no sabes como testear, en lo que aprendes como testear, añade comentarios a tus funciones que detallen como deben de funcionar y un TODO para reemplazar ese comentario por un test o una serie de tests que comprueben (y a su vez documenten) su comportamiento.

## Referencias y documentación

Como punto final a esta entrada de blog, te dejo por aqui referencias a libros que te serán de utilidad:

**- Clean Code: A Handbook of Agile Software Craftsmanship (Robert C. Martin)**
**- Refactoring: Improving the Design of Existing Code (Martin Fowler)**

Por último, si eres desarrollador frontend y te gusta React, este libro es muy bueno para empezar con TDD:

**- React Test Driven Development (Daniel Irvine)**

¿Tienes libros, articulos o referencias que quieras recomendar? ¡Deja un comentario!


Cuando decimos refactorizar, ¿realmente estamos refactorizando o simplemente cambiando un código sin mejorarlo? En esta entrada hablaremos de refactorizar y algunos consejos para hacerlo.

Testear y refactorizar. El camino hacia un buen software.


En este articulo comentaré algunas extensiones de VSCode que te ayudarán a ser mas productivo/a. Como sabes, trabajo con Javascript / Typescript y mayormente react asi que estarán enfocadas a eso. ¡Empecemos!

## Snippets
Utilizo esta extensión para crear componentes o hooks de react:

[es7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Tiene soporte para Typescript también, lo que es genial.Para usar el snippet pero con Typescript, solo tienes que añadir ts delante (en vez de rfac, tsrfac por ejemplo):

![image](https://user-images.githubusercontent.com/6088653/81432285-915b8600-915a-11ea-9a91-d5b141f4bd65.png)
 
![image](https://user-images.githubusercontent.com/6088653/81432386-be0f9d80-915a-11ea-98c8-81c45276bca2.png)

Si quieres una personalización avanzada de tus componentes y crear directorios customizados como por ejemplo añadir ficheros de tests o storybook por defecto, puedes usar Hygen. De esta herramienta hablaré en otro post.

## Error linting
Utilizo Error Lens para detectar errores en mi código.:

[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

![image](https://user-images.githubusercontent.com/6088653/81433636-cd8fe600-915c-11ea-897a-ba99f3072fd0.png)

## Import cost
Si te preocupa cuanto ocupa una librería al importarla (y si no te preocupa, debería 😉), import cost te informará de el coste de importarla. En el caso de React, tiene un coste de 3.3K.

[Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

## Npm intellisense
Te ayudará a autocompletar el import de modulos que hayas instalado a traves de npm:

[NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

![image](https://user-images.githubusercontent.com/6088653/81434071-79393600-915d-11ea-8960-5509658c4cce.png)

## Paste JSON as Code

Esta es una de mis favoritas. Te genera interfaces de Typescript utilizando un JSON como origen, lo que es mágico. SI necesitas generar un modelo a partir de un JSON, es perfecta. Yo normalmente lo utilizo para generar modelos a partir de respuestas de APIs de terceros:

[Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)

Imagina que tenemos este JSON:
```
{ "name":"John", "age":30, "car":null }
```
Si quieres generar el tipado para este JSON, solo presiona comando + shift + P y escribe:
```
Open quicktype for JSON
```
![image](https://user-images.githubusercontent.com/6088653/81434592-52c7ca80-915e-11ea-8dd5-7c2ff04c61da.png)

Un fichero TS aparecera con todo tipado. Maravilloso ¿verdad? 🤩

## Jest Runner
Si trabajas con JEst y creas test para tu codigo ( si no lo haces, es un buen momento para empezar a hacerlo), esta extension te ayudara a ejecutar ficheros de test de forma individual.

[Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)

Clickando con el boton derecho dentro del fichero de test y seleccionando Run Jest File, ejecutaras los test de ese fichero:
![image](https://user-images.githubusercontent.com/6088653/81435340-9c64e500-915f-11ea-9682-59bce1df0d3d.png)

(En este caso el test ha fallado intencionadamente 😜)

## Git Blame
Cuando trabajas en equipo y quieres saber quien cambió el código, utilizando esta extension puedes verlo fácilmente.

[Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)

Solo haz click en la linea que quieres mirar, y Git Blame te dirá quién lo cambió y cuando:
![image](https://user-images.githubusercontent.com/6088653/81435943-84da2c00-9160-11ea-823d-37206ed1cf00.png)

## Git History
Esta extensión te dará información sobre el historial de cambios en un fichero.

[Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

Haciendo click derecho en el fichero y seleccionando Git History puedes ver toda la información además de comparar los cambios con tu workspace actual.

![image](https://user-images.githubusercontent.com/6088653/81436112-cec31200-9160-11ea-9c1f-862ffef37ee0.png)

## Quokka
Esta extensión te ayudará a crear archivos Javascript / Typescript que se ejecutan en modo watch, por lo que puedes fácilmente comprobar el resultado del código. Es muy útil para probar rapidamente funciones. 

[Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

Para usarlo, pulsa cmd + shift + p y escribe Quokka. Verás las opciones disponibles:

![image](https://user-images.githubusercontent.com/6088653/81436389-53159500-9161-11ea-9bbc-cc2af533f2ce.png)

Ahora si dentro de un fichero generado por Quokka utilizas un console.log para ver el resultado, lo veras directamente en el fichero. 

![image](https://user-images.githubusercontent.com/6088653/81436464-75a7ae00-9161-11ea-9c46-43dd2144fbf8.png)

## Theme

Si te preguntas que tema utilizo en VSCode, es el siguiente:

[Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

Hay muchas mas extensiones interesantes, muchas de ellas. Algunas famosas que seguro conoceras son ESLint, Prettier y Debugger for Chrome. Si conoces alguna otra interesante, te agradecería que lo compartieras en un comentario.

¡Nos vemos en el próximo post!


En este post veremos una serie de extensiones de VSCode que nos harán mas productivos a la hora de trabajar.

Extensiones que te gustará tener en tu VSCode


Para mostrar una barra de carga mientras cargamos la próxima página, utilizaremos el hook useRouter de NextJS que nos proveerá de una serie de event listeners a los que podemos suscribirnos y hacer acciones en respuesta a un cambio de ruta.

Para mostrar la barra de carga, utilizaremos NProgress:

```
npm install nprogress
```

Lo siguiente que haremos es crear un custom hook que llamaremos useLoading. Dentro del hook, nos suscribiremos a los eventos del router. Cuando el path cambie, ejecutaremos NProgress.start() para mostrar la barra de carga y cuando haya terminado de cargarse la ruta, ejecutaremos NProgress.done() para ocultarla.

useLayout.tsx
```javascript
import * as React from "react";
import { useRouter } from "next/router";
import NProgress from "nprogress";

export const useLoading = () => {
  const router = useRouter();

  React.useEffect(() => {
    const handleStart = () => NProgress.start();
    const handleComplete = () => NProgress.done();

    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);
    router.events.on("routeChangeError", handleComplete);

    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
      router.events.off("routeChangeError", handleComplete);
    };
  });
};
```
Para mostrar la barra de carga en todas las páginas, necesitamos añadir los estilos de NProgress globalmente. Recuerda importar ese fichero .css en _app.tsx:

```css
/* NProgress */

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

```

Por último, importaremos nuestro custom hook en cada página. Una buena idea es crearte un componente Layout que importe el hook y que reciba el contenido de cada página como children. De esta forma lo reutilzamos de una forma mas cómoda. 

```javascript
import Head from "next/head";
import { useLoading } from "components/useLoading";

type LayoutProps = {
  children: React.ReactChild | React.ReactChild[];
  title: string;
}

export const Layout: React.SFC<LayoutProps> = ({
  children,
  title,
}) => {
  useLoading();
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        ></meta>
      </Head>
        {children}
    </>
  );
};
```

Y esto es tódo. Espero que te haya gustado y si tienes alguna duda, no dudes en dejarla en los comentarios o escribirme en twitter a @ivanbtrujillo.

Aprenderemos como añadir una barra de carga en NextJS que sea reutilizable en distintas páginas usando un custom hook (useLoading).

IvánTrujillo

Últimos posts

Aprendiendo Vue - Componente con Test unitarios

Testear y refactorizar. El camino hacia un buen software.

Extensiones que te gustará tener en tu VSCode

Añadiendo un loader cross-page en NextJS

Me gusta trabajar con