Vue.JS

Test Driven Development

David Daza

Full Stack Developer - Random Monkey / Datasketch

 @ddazal

 @_daviddaza

https://globant.com/

Lugar · Bebidas · Comida

Agradecimientos

Recursos

Slides: https://slides.com/ddazal/vue-js-testing/

Github: https://github.com/ddazal/vue-js-testing

Antes de empezar

🦟 👀

¿Qué es testing?

¿Por qué deberíamos hacerlo?

No bugs*

Documentación

Código de calidad

Mejor arquitectura

Tipos de test

Test unitarios

Test End2End

Test de integración

Ejemplo

// rectangle.js

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

Rectangle.prototype.getPerimeter = function getPerimeter() {
  return 2 * (this.width + this.height);
};

Rectangle.prototype.getArea = function getArea() {
  return this.width * this.height;
};

Rectangle.prototype.getDiagonal = function getDiagonal() {
  return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));
};

module.exports = { Rectangle };

// tests/rectangle.spec.js

const { Rectangle } = require("../rectangle");

describe("Rectangle", () => {
  test("Calcula el perímetro correctamente", () => {
    const rect = new Rectangle(3, 4);
    expect(rect.getPerimeter()).toBe(14);
  });
  test("Calcula el área correctamente", () => {
    const rect = new Rectangle(3, 4);
    expect(rect.getArea()).toBe(12);
  });
  test("Calcula la diagonal correctamente", () => {
    const rect = new Rectangle(3, 4);
    expect(rect.getDiagonal()).toBe(5);
  });
});

// tests/rectangle.spec.js

const { Rectangle } = require("../rectangle");

let rect;

describe("Rectangle", () => {
  beforeEach(() => {
    rect = new Rectangle(3, 4);
  });
  test("Calcula el perímetro correctamente", () => {
    expect(rect.getPerimeter()).toBe(14);
  });
  test("Calcula el área correctamente", () => {
    expect(rect.getArea()).toBe(12);
  });
  test("Calcula la diagonal correctamente", () => {
    expect(rect.getDiagonal()).toBe(5);
  });
});

// rectangle.js

function Rectangle(width, height) {
  _checkArgs(width, height);
  this.width = width;
  this.height = height;
}

function _checkArgs(a, b) {
  if (a === undefined || b === undefined) {
    throw new Error("Two arguments must be provided");
  }
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("Both arguments must be a number");
  }
}
// tests/rectangle.js

describe("Rectangle", () => {
  describe("Es instanciado correctamente", () => {
    beforeEach(() => {
      rect = new Rectangle(3, 4);
    });
    test("Calcula el perímetro correctamente", () => {
      expect(rect.getPerimeter()).toBe(14);
    });
    test("Calcula el área correctamente", () => {
      expect(rect.getArea()).toBe(12);
    });
    test("Calcula la diagonal correctamente", () => {
      expect(rect.getDiagonal()).toBe(5);
    });
  });
});
// tests/rectangle.js

describe("Rectangle", () => {
  describe("Es instanciado correctamente", () => { /* ... */ })
  describe("Es instanciado incorrectamente", () => {
    test("Arroja un error si faltan argumentos", () => {
      expect(() => new Rectangle(3)).toThrow("Two arguments must be provided");
    });
    test("Arroja un error si alguno de los argumentos no es un número", () => {
      expect(() => new Rectangle(3, "4")).toThrow(
        "Both arguments must be a number"
      );
    });
  });
});

Test Driven Development

Ciclo TDD

Falla

Pasa

Refactor

Tests en Vue

Tests en Vue

Component.vue

Input

Output

  • Interacción

  • Props

  • Store

  • Eventos

  • Render

  • Funciones

mount

Component

shallowMount

Component

Component A

Component B

Component C

event

props

event

props

Happy hour

Happy hour

Add task

Ir a un meetup sobre unit testing

Practicar unit testing

Construir una app con test

1 / 3 TASKS COMPLETED

Add task

Ir a un meetup sobre unit testing

Practicar unit testing

Construir una app con test

1 / 3 TASKS COMPLETED

TodoInput

TodoList

TodoProgress

Todo

Add task

Ir a un meetup sobre unit testing

Practicar unit testing

Construir una app con test

1 / 3 TASKS COMPLETED

TodoInput

Como usuario quiero escribir mis tareas pendientes

Add task

Ir a un meetup sobre unit testing

Practicar unit testing

Construir una app con test

1 / 3 TASKS COMPLETED

TodoList

Como usuario quiero ver las tareas que he creado

Como usuario quiero poder marcar una tarea como completada

Add task

Ir a un meetup sobre unit testing

Practicar unit testing

Construir una app con test

1 / 3 TASKS COMPLETED

TodoProgress

Como usuario quiero ver el progreso de mis tareas

¡GRACIAS!

 @_daviddaza

 @ddazal

Vue.JS Testing

By David Daza

Made with Slides.com

Vue.JS Testing

Slides para Meetup de Vue.JS en Bogotá. Septiembre 19, 2019.

  • 319

More from David Daza