일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ts error
- CloudFlare
- https
- typeScript
- TLS
- Testing
- svelte
- msw
- devtools
- JavaScript
- ViTE
- vue-cli
- http3
- rendering
- web vital
- CSS
- 비동기
- csr
- aws
- caching
- vue
- Cypress
- custom command
- SSR
- vue3
- e2e
- import.meta.env
- api test
- 선택자
- QUIC
- Today
- Total
목록FrontEnd (42)
Develop Note by J.S.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kIbOF/btsoDJPah5f/Iu4GFjYLSqwTfRoPSewk70/img.png)
Cypress Test 코드 작성 시 Store의 데이터를 확인하기 위하여 Pinia - Cypress 연동 테스트를 진행 하였습니다. Vuex 또한 동일한 방법으로 적용 할 수 있습니다. 1. 테스트 방법에 차이점 알아두어야 할 점은 현재까지의 Cypress 테스트 코드는 사용자의 Action을 기준으로 테스트 코드를 작성 하였으며, cy.get(), cy.should() 를 이용하여 element정보와 기대값을 비교하였고, 4sec (Default wating time) 를 대기하여 Action에 대한 결과를 체크하였습니다. 현재 구현한 Store연동 테스트 코드는 비동기적인 테스트 환경이 제공되지 않습니다. 즉, 사용자 Action에 따라 Dom의 Element가 기대값을 기다리는 것처럼 테스트 되..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lqqip/btsoyVIdmpc/uThgl0SJ3KJryPZtvwLPTK/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bUoWdS/btsnSZZDqUU/FK5BuKSKP3uKaeg9ssbpSK/img.png)
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}]`)...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ys2Z6/btsnLaeD4Jr/IHicV7X3OMlCzXpyl6rHTk/img.png)
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..
Cypress에서 주로 사용되는 Method의 기능설명 및 Assertions, 주 사용 기능 예제 대해 정리하였습니다. 1. Cypress Method cy.visit(): 특정 URL에 대한 페이지 방문을 수행합니다. cy.get(): DOM 요소를 선택하기 위해 사용되며, 선택자, 클래스, ID 등을 통해 요소를 찾습니다. - cy.get('[data-cy=Selector]') .contains(): 텍스트를 기반으로 DOM 요소를 선택합니다. 해당 텍스트를 포함하는 요소를 찾습니다. .type(): 텍스트 입력을 시뮬레이션하기 위해 사용됩니다. 입력 필드에 텍스트를 입력하는 동작을 수행합니다. - enter 키 입력 cy.get('[data-cy=search]').type({enter}) .cli..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MAgDr/btsnnVikbpX/kFOejLsWsjQTllCuRTC6Y0/img.png)
Cypress의 선택자의 경우 아래 이미지와 같은 방법이 있으며, Cypress 공식 문서에 따르면 변화의 가능성이 낮은 방법이 안전하다고 명시되어 있습니다 . Cypress 테스팅 코드 작성 시 자주 사용되는 기능을 Custome Command로 설정하여 코드를 효율적으로 작성 할 수 있습니다. Command 사용법에 대한 간단한 예제입니다. 1. cypress/support/command.ts // cy.get() Command등록 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`) }) 2. cypress/support/e2e.ts import './commands' 3. cypress/suppor..