🎲 vue + jest를 이용한 login 구현

🤹🏻‍♂️ 로그인 기능

> 간단한 로그인을 기능을 구현하고자 하며, 입력값은 id/pw만 존재한다.

🚎 테스트 케이스

id/pw 비어있을 경우 alert을 띄운다.
id/pw 입력 후 성공적으로 끝날 경우 main으로 이동
로그인시 정보가 맞지 않는 경우
로그인 api에서 서버에러가 발생 한 경우

🧩 사전작업

* LoginPage.vue를 만든다.
* 테스트 할 loginpage.test.js를 만든다

<!-- LoginPage.vue -->
<template>
  <div>
  </div>
</template>
<script>
export default {
  setup() {
    //
  },
};
</script>
<style></style>

기본적으로 비어있는 vue 파일을 만든다.

//loginpage.test.js
import LoginPage from '../LoginPage.vue';
import { shallowMount } from '@vue/test-utils';
describe('LoginPage.vue 단위테스트', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(LoginPage);
  });
  test('id/pw 비어있을 경우 alert을 띄운다.', () => {});
});

shallowMount를 통해서 vue파일을 가져온다. shallMount는 jest에서 렌더링된 vue컴퍼넌트를 생성한다.

🎮 테스트 케이스 1 : id/pw 비어있을 경우 alert을 띄운다.

<!-- LoginPage.vue -->
<template>
  <div>
    <form>
      <label>Id :</label>
      <input type="text" id="id" v-model="form.id" /> <br /><br />

      <label>Pw :</label>
      <input type="password" id="password" v-model="form.password" /> <br /><br />
    </form>
  </div>
</template>
<script>
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      id: '',
      password: '',
    });

    return {
      form,
    };
  },
};
</script>
<style></style>

간단한 id,pw를 입력을 위해 form을 만든다.

reactive를 이용하여 id,password를 만든다.(v-model에 선언하기 위해)

//loginpage.test.js
import LoginPage from '../LoginPage.vue';
import { shallowMount } from '@vue/test-utils';
describe('LoginPage.vue 단위테스트', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(LoginPage);
  });
  test('id/pw 비어있을 경우 alert을 띄운다.', async () => {
    const id = await wrapper.find('#id');
    const pw = await wrapper.find('#password');
    const idValue = id.element.value;
    const pwValue = pw.element.value;
    
    await wrapper.find('form').trigger('submit.prevent');
    if (!idValue || !pwValue) {
      alert('id또는 pw를 확인해주세요.');
    }
  });
});

기존 loginpage.test.js 에서 추가한 사항은 아래와 같다

find함수를 통해 id,pw를 찾는다.
find함수를 통해 id,pw 찾은것을 value를 통해 idValue,pwValue에 할당한다.
idValue 또는 pwValue에 빈값이 있을 경우 alert('id또는 pw를 확인해주세요.') 를 띄운다.

하지만 에러가 뜬다. 아래 에러를 보면 Not implemented이다. 대충 window에 alert가 없다는 뜻으로 추정된다.

//loginpage.test.js
import LoginPage from '../LoginPage.vue';
import { shallowMount } from '@vue/test-utils';
/* 새롭게 추가된 부분! alert을 mockImplementation 해줘야 한다. */
jest.spyOn(window, 'alert').mockImplementation(() => {});
describe('LoginPage.vue 단위테스트', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(LoginPage);
  });
  test('id/pw 비어있을 경우 alert을 띄운다.', async () => {
    const id = await wrapper.find('#id');
    const pw = await wrapper.find('#password');
    const idValue = id.element.value;
    const pwValue = pw.element.value;
    if (!idValue || !pwValue) {
      alert('id또는 pw를 확인해주세요.');
    }
  });
});

추가 한 후에는 성공적으로 Pass 한것을 알 수 있다.

<!-- LoginPage.vue -->
<template>
  <div>
    <form @submit.prevent="submit">
      <label>Id :</label>
      <input type="text" id="id" v-model="form.id" /> <br /><br />

      <label>Pw :</label>
      <input type="password" id="password" v-model="form.password" /> <br /><br />
    </form>
  </div>
</template>
<script>
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      id: '',
      password: '',
    });
	
    //submit 함수 추가!
    const submit = () => {
      if (!form.id || !form.password) {
        alert('id또는 pw를 확인해주세요.');
        return false;
      }
    };

    return {
      form,
      submit,
    };
  },
};
</script>
<style></style>

//loginpage.test.js
import LoginPage from '../LoginPage.vue';
import { shallowMount } from '@vue/test-utils';
//alert 가짜 함수 만들기
jest.spyOn(window, 'alert').mockImplementation(() => {});
describe('LoginPage.vue 단위테스트', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(LoginPage);
  });
  test('id/pw 비어있을 경우 alert을 띄운다.', async () => {
    const id = await wrapper.find('#id');
    const pw = await wrapper.find('#password');
    const idValue = id.element.value;
    const pwValue = pw.element.value;

    await wrapper.find('form').trigger('submit.prevent');

    if (!idValue || !pwValue) {
      //alert을 호출하면서 alert에 어떤 인자를 넣었는지 테스트 한다.
      expect(alert).toBeCalledWith('id또는 pw를 확인해주세요.');
    }
  });
});

처음에는 test코드에서 alert을 호출하였으나, 작성하다보니 원본파일에서 alert을 호출하는게 맞는것 같아, LoginPage.vue에 id,pw에 비어있을 경우 추가하였다.

그리고 loginpage.test.js에서는 idValue,pwValue가 비어있을 경우 alert함수가 "id또는 pw를 확인해주세요." 를 호출하였는지 확인하기 위해 toBeCalledWith를 사용하였다.

//loginpage.test.js
import LoginPage from '../LoginPage.vue';
import { shallowMount } from '@vue/test-utils';
//alert 가짜 함수 만들기
jest.spyOn(window, 'alert').mockImplementation(() => {});
describe('LoginPage.vue 단위테스트', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(LoginPage);
  });
  test('id/pw 비어있을 경우 alert을 띄운다.', async () => {
    await wrapper.find('form').trigger('submit.prevent');
	//비어있을경우 LoginPage.vue에서 alert를 호출할 것이고, 여기에서 호출여부를 파악할 수 있도록 변경하였다.
    expect(alert).toBeCalledWith('id또는 pw를 확인해주세요.');
    // mock은 하고 나서 clear하는것이 좋다
    alert.mockClear();
  });
});

if문을 삭제하였다. 이미 submit 함수를 통해 값이 비어있을 경우 alert을 호출하기 때문에 loginpage.test.js에서 호출여부만 확인하도록 바꾸었다. 그리고 마지막으로 mockClear를 통해 비워줬다.

이로서 4가지 테스트 케이스 중 한가지가 해결되었다.

~~id/pw 비어있을 경우 alert을 띄운다.~~
id/pw 입력 후 성공적으로 끝날 경우 main으로 이동
로그인시 정보가 맞지 않는 경우
로그인 api에서 서버에러가 발생 한 경우

🥅 테스트 케이스 2 : id/pw 입력 후 성공적으로 끝날 경우 main으로 이동

🎾 사전작업

//loginpage.test.js
//새롭게 추가
import { login } from '@/api/login';
//api/login을 전체로 mock 만들기
jest.mock('@/api/login');

로그인 api를 import 하고 @/api/login 부분을 mock 해준다.

<!-- LoginPage.vue -->
<template>
  <div>
    <form @submit.prevent="submit">
      <label>Id :</label>
      <input type="text" id="id" v-model="form.id" /> <br /><br />

      <label>Pw :</label>
      <input type="password" id="password" v-model="form.password" /> <br /><br />
    </form>
  </div>
</template>
<script>
import { reactive } from 'vue';
import { login } from '@/api/login';
export default {
  setup() {
    const form = reactive({
      id: '',
      password: '',
    });

    const submit = () => {
      if (!form.id || !form.password) {
        alert('id또는 pw를 확인해주세요.');
        return false;
      }
      
      login({
        UserId: form.id,
        PassWord: form.password,
      });
    };

    return {
      form,
      submit,
    };
  },
};
</script>
<style></style>

> 여기서는 api를 호출하는 부분이 있다. submit을 호출 할때 login함수를 호출하자 login함수는 axios를 통해서 회원인증하는 함수이다.

test('id/pw 입력 후 성공적으로 끝날 경우 main으로 이동', async () => {
    login.mockImplementation(() => {});
    await wrapper.find('#id').setValue('chleorjs37@gmail.com');
    await wrapper.find('#password').setValue('testpassword');

    await wrapper.find('form').trigger('submit.prevent');

    await expect(login).toHaveBeenCalled();
  });

> login 부분을 즉시 구현한다(뒤에서 Promise형태로 바꿀 예정이다.) 그리고 login 호출 확인을 위해 toHaveBeenCalled()를 사용하였다.

하지만 login함수는 axios호출 이므로 return을 Promise으로 리턴한다. 그리하여 login.mockImplementation(() => {}) 부분을 Promise형태로 return 하게 만들자.

test('id/pw 입력 후 성공적으로 끝날 경우 main으로 이동', async () => {
    //Promise형태로 리턴하면서 status는 201로 돌려준다.
    login.mockImplementation(() => {
      return new Promise(resolve => {
        resolve({
          status: 201,
        });
      });
    });
    await wrapper.find('#id').setValue('chleorjs37@gmail.com');
    await wrapper.find('#password').setValue('testpassword');

    await wrapper.find('form').trigger('submit.prevent');

    await expect(login).toHaveBeenCalled();
    expect(alert).toBeCalledWith('로그인 되었습니다.');
  });

login부분을 Promise형태로 변경하였다. 상태를 201로 돌려주었다. 그리고 성공적일 경우 alert을 호출하였는지 확인하기 위해 toBeCalledWith으로 확인하였다.

하지만 아직 router.push('/main') 을 호출하였는지는 테스트 하지 않았다.

//loginpage.test.js
import { useRouter } from 'vue-router';//vue-router mock
jest.mock('vue-router', () => ({
  useRouter: jest.fn(() => ({
    push: () => {},
  })),
}));

실제 router가 아닌 가짜 호출을 하기위해 vue-router를 mock만들어주고, 빈 함수 push를 만들어준다.

//loginpage.test.js
//push 호출 여부 감시를 위해 가짜 함수 만들기
let push = null;
beforeEach(() => {
    push = jest.fn();
    useRouter.mockImplementation(() => ({
      push,
    }));
    wrapper = shallowMount(LoginPage);
});

useRouter에서 즉시함수를 구현하면서, push를 가짜 함수로 만든다.

test('id/pw 입력 후 성공적으로 끝날 경우 main으로 이동', async () => {
    // 앞 코드 생략
	expect(push).toHaveBeenCalledWith('/main');
})

push가 '/main'으로 호출하였는지 검사하기 위해 toHaveBeenCalledWith를 사용하였다.

하지만 오류가 뜬다. LoginPage 에서는 실제로 호출한적이 없다는것 같다. "LoginPage.vue"에서 router 호출하는 부분을 추가하자

//LoginPage.vue
const submit = () => {
      if (!form.id || !form.password) {
        alert('id또는 pw를 확인해주세요.');
        return false;
      }

      login({
        UserId: form.id,
        PassWord: form.password,
      })
        .then(value => {
          const { status } = value;
          if (status === 201) {
            alert('로그인 되었습니다.');
            //router.push 호출
            router.push('/main');
          }
        })
        .catch(err => {});
    };

vue파일에서 router.push('/main')을 호출하였더니, PASS를 뜨는것을 확인할 수 있다.

이로서 4가지 테스트 케이스 중 두가지가 해결되었다.

~~id/pw 비어있을 경우 alert을 띄운다.~~
~~id/pw 입력 후 성공적으로 끝날 경우 main으로 이동~~
로그인시 정보가 맞지 않는 경우
로그인 api에서 서버에러가 발생 한 경우

🏜 테스트 케이스 3 : 로그인시 정보가 맞지 않는 경우

> 로그인이 실패하는 경우는 http code가 201면서, code:'NOT_VALID' 인 경우 "로그인정보가 맞지 않다" 라고 가정한다.

test('로그인시 정보가 맞지 않는 경우', () => {
    login.mockImplementation(() => {
      return new Promise(resolve => {
        resolve({
          status: 500,
          code: 'NOT_VALID',
        });
      });
    });
  });

일단 login을 즉시 구현하여, status: 500 && code:'NOT_VALID' 으로 Promise으로 리턴한다.

test('로그인시 정보가 맞지 않는 경우', async () => {
    login.mockImplementation(() => {
      return new Promise((_, reject) => {
        reject({
          status: 500,
          code: 'NOT_VALID',
        });
      });
    });

    await wrapper.find('#id').setValue('chleorjs37@gmail.com');
    await wrapper.find('#password').setValue('testpassword');

    await wrapper.find('form').trigger('submit.prevent');

    expect(alert).toBeCalledWith('로그인 정보를 확인해주세요.');
  });

똑같이 submit을 트리거 시켜 toBeCalledWith을 이용하여 alert을 호출하는지 확인해본다.

하지만 에러가 뜬다. 이것은 실제 코드에서 err 처리를 하지 않아서 생긴문제이다. 그렇기 때문에 실제 코드에서도 err에 대한 처리를 해줘야 한다.

//LoginPage.vue
// form에서 submit하는 함수
const submit = () => {
      if (!form.id || !form.password) {
        alert('id또는 pw를 확인해주세요.');
        return false;
      }

      login({
        UserId: form.id,
        PassWord: form.password,
      })
        .then(value => {
          const { status, data } = value;
          if (status === 201) {
            alert('로그인 되었습니다.');
            router.push('/main');
          }
        })
        .catch(err => {
          const { status, code } = err;
     	  //에러에 대한 추가된 부분
          if (status === 500 && code === 'NOT_VALID') {
            alert('로그인 정보를 확인해주세요.');
          }
        });
    };

로그인 정보가 맞지 않는 경우 PASS가 되었다.

이로서 4가지 테스트 케이스 중 세가지가 해결되었다.

~~id/pw 비어있을 경우 alert을 띄운다.~~
~~id/pw 입력 후 성공적으로 끝날 경우 main으로 이동~~
~~로그인시 정보가 맞지 않는 경우~~
로그인 api에서 서버에러가 발생 한 경우

🚏 테스트 케이스 4 : 로그인 API에서 서버에러가 발생 한 경우

단순히 서버에서 500을 return해줄 경우 서버에서 에러가 있다고 간주한다.

//loginpage.test.js
test('로그인 api에서 서버에러가 발생 한 경우', async () => {
    login.mockImplementation(() => {
      return new Promise((_, reject) => {
        reject({
          status: 500,
        });
      });
    });
    await wrapper.find('#id').setValue('chleorjs37@gmail.com');
    await wrapper.find('#password').setValue('testpassword');

    await wrapper.find('form').trigger('submit.prevent');

    expect(alert).toBeCalledWith('서버에서 에러가 발생하였습니다.');
  });

//LoginPage.vue
 const submit = () => {
 	login({
        UserId: form.id,
        PassWord: form.password,
      })
        .then(value => {
          const { status, data } = value;
          if (status === 201) {
            alert('로그인 되었습니다.');
            router.push('/main');
          }
        })
        .catch(err => {
          const { status, code } = err;
          if (status === 500 && code === 'NOT_VALID') {
            alert('로그인 정보를 확인해주세요.');
          } else if (status === 500) {
          //추가된 부분
            alert('서버에서 에러가 발생하였습니다.');
          }
        });
 }

submit함수에서 alert함수를 호출하였는지 toBeCalledWith를 통해서 확인하였고 , PASS가 뜬지 확인 할 수 있다.

이로서 4가지 테스트 케이스 모두 해결하였다.

~~id/pw 비어있을 경우 alert을 띄운다.~~
~~id/pw 입력 후 성공적으로 끝날 경우 main으로 이동~~
~~로그인시 정보가 맞지 않는 경우~~
~~로그인 api에서 서버에러가 발생 한 경우~~

간단한 로그인 구현을 jest를 이용해보았다. 간단한 작업같지만, mock 하는 것부터 , 호출여부 확인 까지 생각보다 한걸음한걸음 쉽지는 않았다. 실무에서 쓸 수 있도록 평소에 연습을 많이 하도록 하자.

'Vue' 카테고리의 다른 글

👀 vscode 에서 EditorConfig 쓰기 (0)	2023.06.02
Vue + jest + typescript 세팅 (0)	2023.05.01
🖖 vue jest router 생긴 문제 (0)	2023.03.16
👊 vue jest study기록 (0)	2023.03.03
🙎 vue에서 scss를 통해 간단하게 theme별로 관리해보기 (2)	2023.01.24

one step

🎲 vue + jest를 이용한 login 구현

🤹🏻‍♂️ 로그인 기능

🚎 테스트 케이스

🧩 사전작업

🎮 테스트 케이스 1 : id/pw 비어있을 경우 alert을 띄운다.

🥅 테스트 케이스 2 : id/pw 입력 후 성공적으로 끝날 경우 main으로 이동

🏜 테스트 케이스 3 : 로그인시 정보가 맞지 않는 경우

🚏 테스트 케이스 4 : 로그인 API에서 서버에러가 발생 한 경우

'Vue' 카테고리의 다른 글

댓글

티스토리툴바

🎲 vue + jest를 이용한 login 구현

🤹🏻‍♂️ 로그인 기능

🚎 테스트 케이스

🧩 사전작업

🎮 테스트 케이스 1 : id/pw 비어있을 경우 alert을 띄운다.

🥅 테스트 케이스 2 : id/pw 입력 후 성공적으로 끝날 경우 main으로 이동

🏜 테스트 케이스 3 : 로그인시 정보가 맞지 않는 경우

🚏 테스트 케이스 4 : 로그인 API에서 서버에러가 발생 한 경우

'Vue' 카테고리의 다른 글

관련글

댓글

티스토리툴바