🍋 테스트 코드 커버리지 - 진행중

🫚  라인 커버리지

코드 한 줄이 한번 이상 실행이 중족 되는 경우를 말한다.

 

LineCoverageComp.vue

<template>
  <div>
    {{ reversedMsg }}
    <button data-btn="btn" @click="evetnClick">버튼</button>
  </div>
</template>
<script>
const Component = {
  data() {
    return {
      msg: 'Test coverage',
      val: false
    }
  },
  computed: {
    reversedMsg() {
      return this.reverseString(this.msg)
    }
  },
  methods: {
    reverseString(str) {
      return str.split('').reverse().join('')
    },
    evetnClick() {
      if (this.val === true) {
        console.log("success")
      }
    }
  }
}

export default Component
</script>
<style scoped></style>

linecoverage.spec.js

import { shallowMount } from "@vue/test-utils";
import LineCoverageComp from '@/components/LineCoverageComp.vue'
describe('Line Coverage comp test', () => {
  test('test123', () => {
    shallowMount(LineCoverageComp)
  });

  test("btn click", async () => {
    const wrapper = shallowMount(LineCoverageComp);
    const btn = wrapper.findComponent('[data-btn="btn"]');

    await btn.trigger('click')
  })
});

위와 같이 실행하면,  26번째 라인이 실행되지 않는다. 그리하여 라인 커버리지가 83.33%가 나오게 된다.

 

 

🍆  결정 커버리지

if문 같은 조건문이 존재할때 , true / false인 경우 모두를 충족하는 경우를 말한다.

 

DecisionComponent.vue

<template>
  <div>
    <button data-btn="condition" @click="conditionClick(2, 1)">버튼</button>
  </div>
</template>
<script>
const Component = {
  name: 'DecisionComponent',

  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {
    decisionClick(a, b) {
      if (a > b) {
        console.log("pass condition")
      }
      else {
        console.log("no pass")
      }
    }
  },
}
export default Component;
</script>
<style scoped></style>

decisioncomponent.spec.js

import { shallowMount } from "@vue/test-utils";
import DecisionComponent from '@/components/DecisionComponent.vue'
describe('결정 커버리지 컴퍼넌트 테스트', () => {
  test('decisionClick 클릭-1', () => {
    const wrapper = shallowMount(DecisionComponent);
    wrapper.vm.decisionClick(2, 1)
  });
});

 

위와 같이 작성했을 경우 true인 조건만 만족하기 때문에, 결정 테스트 커버러지가 50%이다.

그리하여 false인 조건 케이스도 만들어주었다.

import { shallowMount } from "@vue/test-utils";
import DecisionComponent from '@/components/DecisionComponent.vue'
describe('결정 커버리지 컴퍼넌트 테스트', () => {
  test('decisionClick 클릭-1', () => {
    const wrapper = shallowMount(DecisionComponent);
    wrapper.vm.decisionClick(2, 1)
  });
  test('decisionClick 클릭-2', () => {
    const wrapper = shallowMount(DecisionComponent);
    wrapper.vm.decisionClick(1, 2)
  });
});

decisionClick 클릭-2 테스트케이스를 만들어 조건이 false인 경우도 만들어 주었다.

결과는 아래처럼 100%으로 뜨는 것을 알 수 있다.

결정커버리지