En este post exploraremos cómo configurar un flujo de trabajo de CI/CD utilizando GitHub Actions para un proyecto de Vue.js, asegurando que el despliegue en GitHub Pages solo se realice cuando las pruebas unitarias sean exitosas.

Esto es especialmente útil para mantener la calidad del código y automatizar tareas repetitivas como correr tests, construir el proyecto y desplegar.

¿Por qué usar CI/CD?

Integrar CI/CD permite automatizar las verificaciones de calidad del código, asegurarse de que solo se despliegue código funcional y reducir los errores manuales al automatizar el proceso de despliegue.

Configuración del workflow

El archivo de configuración del flujo de trabajo en GitHub Actions se ve así:

name: CI/CD Pipeline for Vue.js

on:
  push:
    branches:
      - main  

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16

    - name: Install dependencies
      run: npm install

    - name: Run unit tests
      run: npm run test:unit

    - name: Build Vue.js project
      run: npm run build

    - name: Deploy to GitHub Pages
      if: ${{ success() }}
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

¿Cómo funciona?

Cuando se hace un push a la rama main, GitHub Actions comienza el proceso con varias etapas. Primero, instala las dependencias necesarias con npm install.

Luego, ejecuta las pruebas unitarias del proyecto usando npm run test:unit.

Si las pruebas pasan correctamente, se ejecuta la construcción del proyecto con npm run build, generando los archivos de producción en la carpeta dist.

Si todo ha ido bien, el proyecto se despliega automáticamente en GitHub Pages.

Configuración de permisos

Es importante asegurarse de que GitHub Actions tenemos los permisos necesarios para realizar el despliegue. Para esto:

1. Debemos ir a la configuración del repositorio en GitHub.
2. Acceder a la sección Settings > Actions > General.
3. En el apartado Workflow permissions ,seleccionamos la opción Read and Write permissions y guardamos los cambios.

Ejemplo práctico

Supongamos que tenemos un componente Counter.vue:

<!-- components/Counter.vue -->

<script setup lang="ts">
  import { ref } from "vue";

  const count = ref(0);

  function increment() {
    count.value ++;
  };
</script>

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

Para probar este componente, crearemos una prueba unitaria con @vue/test-utils :

// __test__/components/Counter.test.ts

import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('increments the count when button is clicked', async () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('0');
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('1');
  });
});

Este archivo de prueba se ejecutará durante el proceso de CI, y si alguna de las pruebas falla, el flujo de trabajo se detendrá antes de llegar al despliegue.

Esto garantiza que solo se despliegue código que pase todas las pruebas.

Beneficios

Usar GitHub Actions para CI/CD y GitHub Pages ofrece múltiples ventajas. Principalmente, automatiza el proceso de verificación y despliegue de manera que siempre se haga de forma controlada y sin intervención manual.

Esto mejora la calidad del proyecto y permite detectar errores rápidamente. Además, como el flujo está automatizado, no es necesario realizar pasos manuales, lo que ahorra tiempo y reduce el riesgo de cometer errores.