Testing

Para realizar tests unitarios dentro de Rails y Vue se puede usar Jest y Vue Test Utils. Como siempre, la documentación de Vue es un buen punto de partida.

En proyectos nuevos Potassium ya incluye los archivos y la configuración necesaria para empezar a testear. En proyectos antiguos sigue los siguientes pasos para tener un ambiente listo para realizar pruebas de manera local.

> yarn add jest vue-jest babel-jest @vue/test-utils jest-serializer-vue babel-core@^7.0.0-bridge.0 --dev

// https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
package.json
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "roots": [
      "app/javascript"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/javascript"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "app/javascript/$1"
    },
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  },

---

Para ejecutar los tests en un ambiente CI (como CircleCI), copia los cambios correspondientes de bin/ci_build, .circleci/config.yml y docker-compose.ci

---

> yarn test
 FAIL  config/webpack/test.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

Un ejemplo de test básico usando el componente que instala el setup:

App.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Platanus!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

App.spec.js

import { shallowMount } from '@vue/test-utils';
import App from './app.vue';

describe('app.vue', () => {
  it('displays message on load', () => {
    const wrapper = shallowMount(App);
    expect(wrapper.find('p').text()).toEqual('Hello Platanus!');
  });
});

 PASS  app/javascript/app.spec.js
  app.vue
    ✓ displays message on load (25ms)