Desmistificando testes de unidade no Vue

Desmistificando testes de unidade no Vue | Alura Cursos Online

<template>
  <div>
    <label for="qtd">Quantidade</label>
    <input type="number" v-model="quantidade">
    <button id="incrementar" @click="incrementar">+ 1</button>
    <button id="decrementar" @click="decrementar">- 1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      quantidade: 0,
    };
  },
  methods: {
    incrementar() {
      this.quantidade += 1;
    },
    decrementar() {
      this.quantidade -= 1;
    },
  },
};
</script>

import { mount } from '@vue/test-utils';
import QuantidadeCarrinho from '@/components/QuantidadeCarrinho.vue';
describe('QuantidadeCarrinho.vue', () => {
  test('aumenta a quantidade em um ao clicar no btn +', async () => {
    const wrapper = mount(QuantidadeCarrinho);
    await wrapper.find('#incrementar').trigger('click');
    const input = wrapper.find('input');
    const quantidade = input.element.value;
    expect(quantidade).toBe('1');
  });
});

  test('após definição de um valor no input, aumenta a quantidade em um ao clicar no btn +', async () => {
    const wrapper = mount(QuantidadeCarrinho);
    const input = wrapper.find('input');
    input.setValue('5');
    await wrapper.find('#incrementar').trigger('click');
    const quantidade = input.element.value;
    expect(quantidade).toBe('6');
  });

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Desmistificando testes de unidade no Vue

Vinicios Neves

Explore por tópico

Vinicios Neves

Inscreva-se em nossa Newsletter

Explore por tópico

Leia também