139. 이메일 유효성 검사 기능 동작 테스트 코드로 확인

1. isUsernameValid 함수 이메일 유효성 검사 기능 테스트 코드로 확인

 

- MainFrom.vue

<template>
  <div class="contents">
    <div class="form-wrapper form-wrapper-sm">
      <form @submit.prevent="submitForm" class="form">
        <div>
          <label for="username">id:</label>
          <input id="username" type="text" v-model="username" />
          <p class="validation-text">
            <span class="warning" v-if="!isUsernameValid && username">
              Please enter an email address
            </span>
          </p>
        </div>
        <div>
          <label for="password">pw:</label>
          <input id="password" type="text" v-model="password" />
        </div>
        <button
          :disabled="!isUsernameValid || !password"
          type="submit"
          class="btn"
        >
          로그인
        </button>
      </form>
      <p class="log">{{ logMessage }}</p>
    </div>
  </div>
</template>

<script>
import { validateEmail } from '@/utils/validation';

export default {
  data() {
    return {
      // form values
      username: '',
      password: '',
      // log
      logMessage: '',
    };
  },
  computed: {
    isUsernameValid() {
      return validateEmail(this.username);
    },
  },
  methods: {
    async submitForm() {
      try {
        // 비즈니스 로직
        const userData = {
          username: this.username,
          password: this.password,
        };
        await this.$store.dispatch('LOGIN', userData);
        this.$router.push('/main');
      } catch (error) {
        // 에러 핸들링할 코드
        console.log(error.response.data);
        this.logMessage = error.response.data;
      } finally {
        this.initForm();
      }
    },
    initForm() {
      this.username = '';
      this.password = '';
    },
  },
};
</script>

<style>
.btn {
  color: white;
}
</style>

 

- MainFrom.spec.js

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@abc.com',
        };
      },
    });
    // find() 는 LoginFrom 컴포넌트가 화면에 부착되었을때 템플릿 안에있는 태그, 특정 HTML 요소를 쫒아갈수있는 특정 API이다.
    const idinput = wrapper.find('#username');
    console.log('인풋 박스의 값', idinput.element.value);
    console.log(wrapper.vm.isUsernameValid);
  });
});