# jasmine

soshin_dev

테스트 코드를 도입하기로 한 이유 1. 기존 서비스 코드의 리팩토링 시 기존 서비스에 영향을 주지 않게 하기 위해 기존 서비스 코드에서 작동하던 로직들을 수정할 일이 있거나, 리팩토링 해야할 일이 있을 때, 해당 코드를 수정했을 때 어디 부분까지 이 코드가 영향을 미치는지, 수정해도 이상이 없는지 여부 등을 체크하기 어렵고, 놓치게 되어 에러가 발생하는 문제가 있었기 때문에, 테스트 코드를 도입하여 수정 시 어디 부분에 영향을 미치고, 어떤 부분에서 에러가 일어나는지 확실하게 체크하여 유지보수 및 신기술 도입 등에 도움을 주기 위해 필요했습니다. 2. 코드의 구조 및 품질 향상을 위해 테스트 코드를 작성하기 위해서는 테스트 코드를 작성하기 쉽게 코드를 작성해야합니다. 테스트 코드를 작성하기 쉬운 코드란 , 한 함수에서는 하나의 로직만 수행해야하며, 많은 파라미터를 받아선 안되고, 제어할 수 없는 코드가 있으면 안된다 등이 있는데 이 것들은 모두 테스트코드 에

bami

Jasmine Jasmine은 자바스크립트 단위 테스팅 프레임워크입니다. 테스트 과정을 일일히 작성할 순 있지만 그렇게 하면 효율이 떨어지므로 프레임워크를 통해 간편하게 환경을 구축하고 테스트를 합니다. TDD가 중요한 개발 기법으로 떠오르는 만큼 테스팅 프레임워크 하나 정도는 다뤄 볼만 하기에 자스민을 들고와봤습니다. 이 포스트는 (4.0.0 버전을 기준으로 작성되었습니다.) 자스민 설치하기 링크에서 자스민 .zip파일을 다운로드해주세요. 그리고 압축 푼 파일을 프로젝트 파일로 복사 붙여넣기 해줍니다. 이때 압축 푼 파일의 spec과 src 폴더 내부에 예시 코드가 있는데 이들은 삭제해도 무방합니다. ![](https://i

ffwang

Jasmine github 에 들어가서 starter 파일을 다운받거나, CDN을 사용할 수 있다. cdn css, js파일을 불러와 html 내에 link, script로 넣어준다. 내가 테스트 할 js 파일을 생성한다. 이 파일을 html에 script로 연결시킨다. 그리고 실행시키면 웹페이지에 테스트 결과가 나온다. >1 spec, 1 failure (빨간색) Get year dates > should be a number Expected '2019' to be 2019. spec : it failure : number가 아니라 string이어서 실패했다. >1 spec, 0 failure (초록색) => 성공 >1 spec, 0 failure (초록색) => 성공 >2 spec, 1 failure (빨간색) Get year dates > should be next year Expected 2023 to be 2020. 2

motiveko

E2E는 정리하지 않는다. 나도 모르기 때문이다. 자바스크립트 테스트 도구 테스트 도구에는 크게 테스트 구동 환경을 제공하는 테스트 러너와 테스트 코드 작성에 사용되는 테스트 프레임워크로 나뉜다. 세부적으로 나누면 단언/테스트더블 라이브러리들이 있는데 추세적으로 다 테스트 프레임워크에 포함된다. 테스트 러너 테스트 러너는 테스트 파일을 읽어들여 실행하고, 결과를 특정한 형식으로 출력해준다. 수행결과를 리포터(Reporter)를 이용해 출력하거나, Watcher를 이용해 코드 변경시 즉시 재실행한다. node 등장 이전에는 자바스크립트 실행 환경이 무조건 브라우저여서 테스트 코드를 직접 브라우저에서 실행 후 실행 페이지나 콘솔을 통해 결과를 확인했는데, node 등장으로 브라우저 없이도 테스트를 자동화 할 수 있게 되었다. 테스트 러너는 Karma와 같이 브라우저에서 실행하는 러너와 Jest와 같이 nod

ddosang

1. TDD 1. 객체 생성 패턴 > 모듈 패턴 : 클로저를 이용해서 값을 은닉. 캡슐화를 왜하는데?????? 에 대한 의문이 계속 있었는데, 예시를 드느라고 변수를 하나만 넣고 get set 하는 함수를 다 구현해서 그냥 객체랑 차이가 없어보였던 것 같다. 해당 객체에 필요한 변수가 여러개이고, 어떤 것은 은닉하고 어떤 것은 읽기만 가능하고 어떤 변수는 읽기 쓰기가 다 가능해야 한다면..? 이렇게 쓰는 수 밖에! > 사용자 정의 타입 패턴 : 생성자 함수 사용. 값이 은닉되진 않음. 그냥 객체 생성 > 모듈 + 사용자 정의 타입 패턴 2. 데이터 관리 객체, 뷰어 객체 데이터 관리 객체 : 데이터를 은닉하고 있다가 필요할때 다른 객체에 전달하거나 수정하는 객체 뷰어 객체 : 데이터, 인풋, 버튼, 뷰어를 연결하는 객체 > 데이터 관리 객체 textManager.js textManager.spec.j

ddosang

1. DOM 1. createElement outerHTML : innerHTML : 요소에 포함된 HTML 마크업 -> XSS 공격 가능. 그래서 Node.textContent 같은 걸로 입력값 처리 필요. innerText : 요소 + 자손의 렌더링된 텍스트 콘텐츠 (사람이 읽을 수 있는 요소만 처리.) CSS 렌더링 됨. 공백 인식X textContent : 노드의 텍스트 콘텐츠. 공백 문자 인식. tag 빼고 text 다 들어감. 텍스트만 처리할 때는 이걸로 하는 것이 성능상 유리하다. 2. insertAdjacentHTML 3. 노드 탐색 노드 : 각 요소, 속성, 콘텐츠를 표현하는 단위를 모두 노드라고 한다. 주석, Text값, 줄바꿈 ... 4. 이벤트 객체, 흐름 >- 이벤트 객체 : 이벤트에서 호출되는 함수에는 이벤트와 관련된 정보를 가지고 있는 인자가 전