공부 정리 공부 정리

테스트

• E2E 테스트 - Headless 테스트 및 테스트 동영상 생성

  테스트/E2E 테스트 (Vue) 2021. 9. 15. 10:36

  E2E 테스트 - Headless 테스트 및 테스트 동영상 생성 - Headless Browser(헤드리스 브라우저)는 GUI 없는 웹 브라우저 - CLI를 통해 실행 1. /package.json 수정 ... "scripts": { ... "test:e2e": "cypress open", "test:e2e:headless": "cypress run" ... 2. npm run test:e2e:headless 실행 - /cypress/videos 폴더가 생성 - 해당 폴더 내에 테스트 동영상이 생성됨

  Read More
• E2E 테스트 - About 페이지 이동 시나리오 테스트

  테스트/E2E 테스트 (Vue) 2021. 9. 15. 07:57

  E2E 테스트 - About 페이지 이동 시나리오 테스트 1. /cypress/integration/moveAbout.test.js 생성 /** * 검색(메인) 페이지로 접근한 후, * Header About 네비게이션 버튼을 클릭, * About 페이지에서 정보를 확인 * 그리고 영화 상세 페이지로 이동한 후, * Header 사용자 로고를 클릭하면 * 다시 About 페이지에서 정보를 확인 */ describe('About 페이지 이동', () => { it('메인 페이지로 접근', () => { cy.visit('/') cy.get('header .nav-link.active') .contains('Search') }) it('About 페이지로 이동', () => { cy.get('header ...

  Read More
• E2E 테스트 - 영화 검색 시나리오 테스트

  테스트/E2E 테스트 (Vue) 2021. 9. 11. 20:27

  E2E 테스트 - 영화 검색 시나리오 테스트 1. /cypress/integration/searchMovie.test.js 생성 /** * 검색(메인) 페이지로 접근한 후, * 영화 제목을 'frozen'으로, 표시 개수를 30개로 입력, * 'Apply' 버튼을 클릭해 영화 목록을 검색 (검색 조건에 맞게 출력되는지 확인) * 영화 목록에서 'Frozen II' (겨울왕국2) 영화 아이템을 클릭하면, * 영화 상세 정보 페이지로 이동 * 상세 정보 페이지에서 해당 영화 정보를 확인 */ describe('영화 검색(겨울왕국2', () => { it('검색 페이지로 접근', () => { cy.visit('/') cy.get('header .nav-link.active') .contains('Search..

  Read More
• E2E 테스트 - 테스트 환경 구성

  테스트/E2E 테스트 (Vue) 2021. 9. 11. 02:38

  E2E 테스트 - 테스트 환경 구성 1. npm i -D cypress eslint-plugin-cypress 설치 2. package.json 수정 { ... "scripts": { ... "test:e2e": "cypress open" }, ... } 3. .eslintrc.js 수정 module.exports = { env: { ... 'cypress/globals': true }, plugins: [ 'cypress' ], ... } 첫 테스트 1. /cypress/integration/first.test.js 생성 describe('첫 번째 테스트', () => { // E2E(cypress) 테스트 it() = 단위 테스트 test() it('프로젝트 페이지 이동', () => { // E2E..

  Read More
• 단위 테스트 - Movie 스토어

  테스트/단위 테스트 (Vue) 2021. 9. 10. 02:37

  단위 테스트 - Movie 스토어 Movie.js /* 영화 검색과 관련된 데이터를 취급하는 용도 */ import axios from 'axios' import _uniqBy from 'lodash/uniqBy' const _defaultMessage = 'Search for the movie title!' export default { namespaced: true, state: () => ({ movies: [], message: _defaultMessage, loading: false, theMovie: {} }), getters: {}, mutations: { updateState(state, payload) { Object.keys(payload).forEach(key => { state[ke..

  Read More
• 단위 테스트 - Movie 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 9. 10:22

  단위 테스트 - Movie 컴포넌트 Movie.vue ... ... Movie.test.js import { shallowMount } from '@vue/test-utils' import store from '~/store' import router from '~/routes' import loadImage from '~/plugins/loadImage' import Movie from '~/routes/Movie' describe('routes/Movie.vue', () => { let wrapper beforeEach(async () => { window.scrollTo = jest.fn() // 영화 상세 페이지 이동 router.push('/movie/tt1234567') // 페이지 완료까지 ..

  Read More
• 단위 테스트 - Search 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 8. 01:10

  단위 테스트 - Search 컴포넌트 Search.vue All Years {{ item }} Apply ... Search.test.js import { shallowMount } from '@vue/test-utils' import Search from '~/components/Search' describe('components/Sarch.vue', () => { let wrapper beforeEach(() => { wrapper = shallowMount(Search) }) test('선택 가능한 연도의 개수가 일치합니다', () => { const year = wrapper.vm.filters.find(f => f.name === 'year') // 2021 - 1985 + 1 = 37 cons..

  Read More
• 단위 테스트 - Header 컴포넌트

  테스트/단위 테스트 (Vue) 2021. 9. 7. 16:27

  단위 테스트 - Header 컴포넌트 Header.vue {{ nav.name }} ... Header.test.js import { shallowMount } from '@vue/test-utils' import router from '~/routes' import store from '~/store' import Header from '~/components/Header' describe('components/Header.vue', () => { let wrapper // 각각의 테스트가 동작하기 직전에 실행 beforeEach(async () => { // window.scrollTo를 모의 함수로 동작하는 것처럼 구성 window.scrollTo = jest.fn() // 페이지 이동 router..

  Read More