2022/06/26 (7) 썸네일형 리스트형 리액트 테스트 : 폼(Form) 테스트 TLDR: mocking을 이용하여 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. > jest.fn 테스트 케이스 작성 시에는 소프트웨어가 사용되는 how에 집중하는게 좋습니다. faker 라이브러리를 사용하여 매번 가짜 데이터를 만들 수 있습니다. 테스트 객체를 쉽게 만들기 위해 오브젝트 팩터리 함수를 사용합니다. 사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할.. 리액트 테스트 : implementation details을 피하기 TLDR 구현 세부사항과 관련없는 테스트 사용자가 보는것처럼 테스트 마크업과 관련없는 유즈케이스 테스트 스크린 유틸리티 인터랙션 > 유저이벤트 눈에 보이는 데이터 중 핵심에 초점 이전 포스트에서 사용자가 사용하는 방법 (렌더링 결과와 프롭) => (인터랙션) => (렌더링 결과와 프롭) 측면에서 테스트해야 함을 이해했습니다. UI 측면의 테스트는 사용자가 보고, 듣고, 느끼는 것에 관한 것입니다. implementation details "구현 세부사항"은 추상화가 특정 결과를 달성하는 방법(how)을 나타내는 용어입니다. 코드의 표현력 덕분에 완전히 다른 구현 세부 사항(how)을 사용하여 동일한 결과를 얻을 수 있습니다. const multiply = (a, b) => a * b // 는 아래와 같습.. 리액트 테스트 : React Testing Library로 Counter 테스트하기 React Testing Library는 상용구 제거, 테스트 환경 자동 초기화 등 다양한 기능을 제공합니다. React Testing Library는 DOM Testing Library의 React 구현입니다. (다른 구현으로는 React Native Testing Library 등이 있습니다). 이전 게시물에서 작성한 코드 변경하기 돔 생성 보일러플레이트 제거 이벤트 보일러플레이트 제거 테스트 환경 초기화 보일러플레이트 제거 import * as React from 'react' import {render, fireEvent} from '@testing-library/react' import Counter from '../../components/counter' test('counter increme.. 리액트 테스트 : 라이브러리 없이 Counter 테스트하기 소프트웨어를 사용하는 것처럼 테스트하라- @kentcdodds 자바스크립트 테스트는 무엇일까요? 어떤 상태를 설정하고, 어떤 동작을 수행하고, 새로운 상태에 대한 주장을 하는 코드일 뿐입니다. 상태 > 동작 > 새로운 상태(assertion) 아래의 간단한 카운터 컴포넌트를 위의 원칙에 따라 테스트해 봅시다. 테스트 작성 시, 두 사용자를 고려합니다. 최종 사용자 : 사용자들이 내 코드와 인터랙션 하는 방법(버튼 클릭 등) 개발자 사용자 : 개발자들이 내 코드를 사용하는 방법 (렌더링, 함수 호출 등) 테스트 사용자(The Test User)는 고려 대상이 아닙니다! 리액트 컴포넌트 관점에서 개발자 사용자는 react-dom의 createRoot API(React Native와 유사한 개념)를 사용하여 .. CSS 애니메이션 : 접근성 전정기관 장애가 있는 사람들에겐 잘못된 애니메이션이 불쾌감을 유발할 수 있음 미디어 쿼리의 prefers-reduced-motion를 통해 애니메이션 효과를 줄일 수 있는 옵션 제공하기 1. 애니메이션 디폴트, 설정으로 끄기 .fancy-box { width: 100px; height: 100px; transform: scale(1); transition: transform 300ms; } .fancy-box:hover { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .fancy-box { transition: none; } } 2. 애니메이션 없음 디폴트, 설정으로 on .fancy-box { width: 100px; heigh.. CSS 애니메이션 : 설계 Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon.. CSS 애니메이션 : 성능 느린 애니메이션은 사용자 경험을 망칩니다. 우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다. 이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다. 안그러면 사용자는 버벅거림을 느끼게 됩니다. 애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다. 픽셀 파이프라인 화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다. 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다. 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다. 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다. 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채.. 이전 1 다음
