140. 로그인 컴포넌트 첫번째 테스트 코드 작성

1. 사용자 관점의 테스트 코드 작성방법

 

테스트 코드는 항상 사용자 관점에서 처리되어야 하는 코드를 검증하는 코드가 들어가야한다.

버튼 클릭했을시 어떻게 되는지, 이메일 양식으로 ID를 입력 안했을시 어떻게 되는지 등

import loginFrom from './LoginForm.vue';
// import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';

describe('loginFrom.vue', () => {
  test('ID는 email 형식이 아니면 경고 메시지가 출력된다', () => {
    const wrapper = shallowMount(loginFrom, {
      data() {
        return {
          username: 'test',
        };
      },
    });

    const warnuingText = wrapper.find('.warning');

    // exists는 Data가 있으면 true, 없으면 false를 반환
    expect(warnuingText.exists()).toBeTruthy();
  });

  test('ID와 PW가 입력되지 않으면 로그인 버튼이 비활성화 된다', () => {
    // 테스트 코드가 잘 작동될려는지 볼려면 올바른 데이터 말고 틀린 데이터 먼저 넣어봐야한다
    const wrapper = shallowMount(loginFrom, {
      data() {
        return {
          username: '',
          password: '',
        };
      },
    });

    const btn = wrapper.find('button');
    // toBeTruthy는 앞에있는 값이 True일 것이다라고 예측
    expect(btn.element.disabled).toBeTruthy();
  });
});