Develop Note by J.S.

Cypress Test 코드 작성 시 Store의 데이터를 확인하기 위하여 Pinia - Cypress 연동 테스트를 진행 하였습니다. Vuex 또한 동일한 방법으로 적용 할 수 있습니다. 1. 테스트 방법에 차이점 알아두어야 할 점은 현재까지의 Cypress 테스트 코드는 사용자의 Action을 기준으로 테스트 코드를 작성 하였으며, cy.get(), cy.should() 를 이용하여 element정보와 기대값을 비교하였고, 4sec (Default wating time) 를 대기하여 Action에 대한 결과를 체크하였습니다. 현재 구현한 Store연동 테스트 코드는 비동기적인 테스트 환경이 제공되지 않습니다. 즉, 사용자 Action에 따라 Dom의 Element가 기대값을 기다리는 것처럼 테스트 되..

1. TDD TDD (Test Drive Development)는 테스트 주도 개발이라고 합니다. 테스트를 먼저 작성하고 테스트의 패스여부를 기준으로 개발을 진행하는 것입니다. 테스트가 모두 통과 될 때까지 테스트 -> 코드 작성 -> 테스트를 반복합니다. TDD는 초기에 테스트 코드를 작성해야하는 초기투자시간이 필요한 단점이 있지만, 코드의 품질 향상 및 장기적인 측면에서 개발과 테스트를 동시에 함으로 써 오류를 조기에 잡아내어 궁극적으로는 개발속도가 향상 될 수 있습니다. 2. BDD BDD (Behavior Driven Development)는 행동 주도 개발이라고 합니다. 사용자의 행위에 기준을 두고 테스트하며 개발을 진행하는 것입니다. BDD는 TDD의 한 종류로 볼 수 있는데, TDD에서 사용..

1. 동적 컴포넌트 동적 컴포넌트 :is 는 선택된 탭에 따라 렌더링되는 컴포넌트 기능 및 권한에 따라 노출되는 컴포넌트 기능 등등, 환경에 따른 동적 컴포넌트 렌더링 기능입니다. 2. 예제코드 동적 컴포넌트 렌더링 방법에 대한 예제 코드 입니다. markRow : 객체를 원시로 표현한 뒤 반환하여 반응형 시스템에서 관찰되지 않아 불필요한 재렌더링을 줄여 애플리케이션의 성능을 최적화함. markRow로 인하여 watch가 동작되지 않을 경우 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); 참고사이트 https..

1. AND 선택자다중 조건을 모두 만족하는 엘리먼트를 선택하는 경우// 공백 없이 선택자를 붙여서 사용.class1#id2 { color : red;}div.className1.className2 { color : black;}2. OR 선택자다중 조건 중 1개라도 만족하는 경우// , 기호로 구분.class1, id2 { color : red;}div.className1, .className2 { color : black;}3. 중첩 선택자 (자손 선택자)특정 부모요소 안에 있는 특정 자손을 모두 선택하는 경우/* scss */.container { div { .child { .name { color: red; ..

Cypress의 Custom Commend를 활용한 Login, Logout Test 입니다. 1. Commend 등록 cypress/support/commonds.ts 파일과 cypress/support/index.d.ts 에 사용할 Custom Command를 정의합니다. // cypress/support/commands.ts file // 요소 가져오기 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`); }); // 요소 접근 후 클릭 Cypress.Commands.add('actionClick', (selector) => { return cy.get(`[data-cy=${selector}]`)...

verbatimModuleSyntax Typescript 5.0 부터 Module elision(생략)를 명확하게 할 수 있는 옵션입니다. 만약 Type 지정만을 위한 import일 경우 빌드 시 해당 import가 삭제(elision)되는데, 해당 옵션으로 인해, type지정을 위한 import인 경우 type-only 형식으로 import해야 합니다. 1) Error Message 2) Type 키워드 사용

Cypress에 MSW(Mock Service Worker) 를 적용하여 테스트 하는 환경 세팅 방법입니다 . cypress/support/e2e.ts (or index.ts : cypress 버전에 따라 다름)에서 기존에 mockup api를 정의한 /src 디렉토리 내 mocking 파일을 불러와 Worker를 시작합니다. 1. e2e.ts import './commands'; import { setupWorker } from 'msw'; import authMocking from '@/services/mocking/auth.mocking'; // 경로문제발생! export const mocking = setupWorker(...authMocking); before(() => { // MSW 워커를 ..

Cypress에서 로그인 버튼 클릭 시 API 요청 및 응답에 대한 E2E Test 및 Component Test 예제를 작성하였습니다. 1. Cypress API TEST 종류 Cypress의 API TEST는 Spying과 Spying & Stubbing 및 Dynamic Stubbing 이 있습니다. // spying cy.intercept('/users/**') cy.intercept('GET', '/users*') cy.intercept({ method: 'GET', url: '/users*', hostname: 'localhost', }) // spying and response stubbing cy.intercept('POST', '/users*', { statusCode: 201, body..