반응형 테스트코드10 😙 스냅샷 테스트 ✋ 스냅샷 테스트스냅샷은 한순간 캡쳐하는것과 같다. 순간의 모습을 포착하여 그 모습을 예상한것과 비교하여 테스트 하는방법이다.예를 들어 관리자,멤버,게스트에 따라 나오는 화면들이 다른데, 한번 예시로 적용해보았다. 🤟 권한별 화면간단하게 ADMIN,MEMBER,GUEST 일때 서로의 화면이 다르게 나타난다.간단예제이지만, 실제서비스에서는 화면이 더욱더 복잡할것이다. 관리자 멤버 게스트 😾 스냅샷테스트로 테스트코드 작성ROLE을 바꿔가면서 단위테스트를 하였고, 각각의 단위테스트가 끝나면, ROLE를 GUEST으로 변경하였다.import { shallowMount } from '@vue/test-utils';import SnapShotView from '../../Sn.. 2024. 12. 3. 📰 hls 테스트 코드 작성 📁 HLS(HTTP 라이브 스트리밍) 테스트 목록재생을 누르면 노래가 시작된다중지를 누르면 노래가 중지가된다노래가 끝나면, 1.5초 이후 다시 처음부터 시작한다위와같이 내용은 간단하다. 블로그 전용이므로 복잡한로직은 제거하고, 순수하게 재생/중지/노래가끝났을때의 처리 정도만 실시하였다. 아래는 원본코드이며, m3u8 url를 가진 주소를 이용하여 $VideoPlayer를 이용하여 노래를 재생/중지를 이용한다. ($VideoPlayer 안에는 hls.js에서 사용할수 있는 기능들을 객체로 만들어놓았고, $VideoPlayer 따로 만든 이유는 어느 화면에서든 공통에서 작성할 수 있도록 하기위해 globalProperties 이용하여 만들었다.)$VideoPlayer는 아래와 같은 기능을 가지고 있다se.. 2024. 10. 1. 🐵 테스트코드 작성시 실제 vuex사용하기(mocking아님) 🫎 vuex 사용한 구조HocView.vue에서 store의 actions에 선언된 "apidummyApi1" 을 호출하고 다음으로는 Node Server에서 api를 요청한 다음api에서 받은 결과값을 세팅한 이후 getters를 통해 Hoview.vue에서 messageComp를 통해 보여준다. 🐔 테스트 케이스버튼을 클릭하면 messageComp에 표시되는것이 "TEST" 라는 문장이 세팅이 되어야 한다 😚 테스트코드 작성시 실제 vuex를 세팅실제 사용중인 store를 import하고 plugins에 store를 추가해준다.import { shallowMount } from '@vue/test-utils'import HocView from '../../HocView.vue'// 실제 사용중.. 2024. 8. 23. 🌊 vuex jest 테스트 코드 작성 🌦️ 컴퍼넌트가 아닌 vuex에 대한 테스트 코드 작성지난번에는 컴퍼넌트에서 vuex에 대한 테스트를 실시하였다면, 이번에는 vuex에 대한 코드를 작성할 것이다. 일단 vuex 코드는 아래와 같다.간단하게 사용자 정보세팅과, counter가 존재한다.import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { userInfo: { name: '', age: 0 }, counter: 1 }, mutations: { setUserInfo(state, payload) { state.userInfo = payload }, setCou.. 2024. 6. 17. 이전 1 2 3 다음 반응형
