단위 테스트 Backbone.js 응용 프로그램-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

단위 테스트 Backbone.js 응용 프로그램

Lisa Kudrow

Feb 24, 2025 am 09:38 AM

단위 테스트 Backbone.js 응용 프로그램 시간을 보낸 후, 일 , 웹 애플리케이션을위한 멋진 새로운 기능을 마무리 할 수 있습니다. 마침내 실제로 볼 준비가되었습니다. 새 코드를 JavaScript 기반에 추가하고 릴리스 후보를 빌드 한 후 브라우저를 발사하여 놀랄 것으로 예상합니다. 그런 다음… 어 오… 새로운 기능은 잘 작동 할 수 있지만 앱의 다른 중요한 부분은 터치 를 개발하는 동안 새로운 버전을 개발하지 못했습니다. 이제 기존 코드를 어떻게 파괴했는지 알아 내기 위해 며칠간의 작업을 통해 역 추적의 도전에 직면 해 있습니다. 행복한 날은 확실히 다시 여기에 있지 않습니다. 바로 시나리오는 내가 인정하고 싶은 것보다 더 많이 물었습니다. 그리고 잠시 코딩 된 적이 있다면 아마도 그것을 보았을 것입니다. 그러나이 시나리오를 그렇게 고통스럽게 만드는 이유를 고려하십시오. 새로운 코드가 기존 코드를 깨뜨렸 기 때문이 아닙니다. 그것은 개발에서 불가피합니다. 진정한 고통은 파손을 알아 차리는 데 너무 오래 걸렸다는 것입니다. 응용 프로그램이 작동한다는 것을 알게 된 이후 많은 개발로 버그가 숨어있을 수있는 방대한 양의 코드가 있습니다. 그리고 그것은 건초 더미에서 바늘을 사냥하는 것처럼 보일지 모르지만, 우리는 그것을 찍을 수밖에 없습니다. . 이 기사에서는 JavaScript 개발 에서이 시나리오를 진정으로 추방 할 것입니다. 더 이상 바늘을 찾는 몇 시간, 며칠 또는 몇 주 동안 코드를 파헤치지 않습니다. 우리가 채택 할 원리는 간단한 것입니다. 를 만들 자마자 버그를 찾으십시오. 좋아요; 우리는 버그를 소개하는 코드를 작성할 때 즉시 알려주는 개발 환경과 프로세스를 설정할 것입니다. 또한 초기 개발이 완료되면 프로세스에 참여한 추가 노력은 낭비되지 않습니다. 우리의 개발 버그를 포착하는 것과 동일한 테스트 코드는 통합 환경에서 완전히 재사용 할 수 있습니다. 테스트를 소스 코드 관리 시스템에 쉽게 통합하여 코드 기반에 들어가기 전에 버그를 차단할 수 있습니다.

다음 네 섹션에서는 먼저 JavaScript 테스트 환경에 필요한 도구를 살펴 보겠습니다. 그런 다음 이해하기에 충분히 간단하지만 실제 프로덕션 웹 응용 프로그램에 존재할 수있는 모든 기능과 기능이있는 사소한 응용 프로그램을 고려할 것입니다. 마지막 두 섹션은 개발 중에 환경을 사용하여 예제 앱을 테스트하고 초기 개발이 완료되면 통합 중에 환경을 테스트 할 수있는 방법을 보여줍니다. 키 테이크 아웃

개발 중 조기 버그 감지를 강조하여 후기 단계에서 복잡한 문제를 방지하여 원활한 코딩 경험을 보장하고 역 추적을 최소화합니다. 브라우저 및 Node.js 환경과의 호환성으로 인해 모카를 핵심 테스트 프레임 워크로 활용하여 개발에서 통합 테스트로 원활한 전환이 가능합니다. 는 테스트 가독성과 유연성을 향상시키기 위해 Chai Assertion Library를 통합하여 다른 개발자 선호도를 제공하는 여러 스타일 (Assert, Expect, Expect)을 제공합니다. <.>는 Sinon.js를 사용하여 스파이, 스터브 및 모의를 생성하는데, 이는 운영에 영향을 미치지 않고 외부 라이브러리 및 서비스와의 상호 작용을 테스트하는 데 필수적입니다. 테스트를 사용하여 연속 테스트 환경을 설정하여 코드 변경시 테스트를 자동으로 실행하여 응용 프로그램의 건강에 대한 즉각적인 피드백을 제공합니다. 개발 중에는 모델, 뷰 및 컬렉션에 대한 세부 단위 테스트를 작성하여 각 구성 요소가 분리되어 올바르게 작동하는지 확인합니다. node.js로 명령 줄 실행에 대한 단위 테스트를 조정하여 통합 테스트로 원활하게 전환하여 제작 환경에서 예상대로 응용 프로그램이 작동하도록합니다.

JavaScript 테스트 환경 조립

단위 테스트 너바나에는 워크 벤치에 없을 수있는 일부 개발 도구가 필요합니다 (아직). 좋은 것과 나쁜 소식은 옵션이 풍부하다는 것입니다. 그것은 우리에게 옵션을 제공하기 때문에 좋은 소식이며, 오늘날 프론트 엔드 개발의 속도는 너무 많은 옵션이 있다는 것을 의미하기 때문에 나쁜 소식입니다. 우리의 평가에 중점을두기 위해 두 가지 목표에 대해 명확하게합시다. 다른 모든 것은 부차적입니다 :

우리의 환경은 개발 중 마찰이없는 지속적인 테스트를 지원해야합니다 개발 중에 생성 된 테스트는 통합에서 똑같이 사용할 수 있어야합니다.

실행 환경

JavaScript 코딩의 경우 최신 웹 브라우저보다 더 나은 개발 환경이 없습니다. 취향이 FireBug 또는 WebKit의 개발자 도구이든, 브라우저는 라이브 DOM 검사 및 편집, 전체 대화식 디버깅 및 정교한 성능 분석을 지원합니다. 웹 브라우저는 개발에 적합하므로 테스트 도구 및 환경은 브라우저 내 개발과 통합해야합니다. 그러나 웹 브라우저는 통합 테스트에 적합하지 않습니다. 통합 테스트는 종종 클라우드 어딘가 (또는 데이터 센터 어딘가에) 서버에서 발생합니다. 이러한 시스템에는 그래픽 사용자 인터페이스가 없으며 최신 웹 브라우저가 훨씬 적습니다. 효율적인 통합 테스트를 위해서는 간단한 명령 줄 스크립트와이를 지원하는 JavaScript 실행 환경이 필요합니다. 이러한 요구 사항의 경우 선택 도구는 Node.js입니다. 다른 명령 줄 JavaScript 환경이 있지만 Node.js와 일치하는 폭과 깊이는 없습니다. 통합 단계에서 테스트 도구는 node.js. 와 통합해야합니다. 테스트 프레임 워크 이제 테스트 도구가 웹 브라우저와 Node.js 환경을 모두 지원해야 함을 확립 했으므로 핵심 테스트 프레임 워크를 선택할 수있는 선택을 좁힐 수 있습니다. 많은 JavaScript 테스트 프레임 워크가 존재하지만 대부분 브라우저 테스트에 대해 크게 편향되어 있습니다. node.js로 작업하는 것은 일반적으로 가능하지만 종종 무한한 해킹이나 조정이 필요합니다. 이 문제를 겪지 않는 한 가지 프레임 워크는 Mocha입니다.

Mocha는 노드와 브라우저에서 실행되는 기능이 풍부한 JavaScript 테스트 프레임 워크로 간단하고 재미있는 테스트를 간단하고 재미있게 만듭니다.

원래 Node.js 용으로 개발 된 Mocha는 웹 브라우저도 쉽게 지원하기 위해 확장되었습니다. Mocha를 테스트 프레임 워크로 사용하면 수정없이 개발 및 통합을 지원하는 테스트를 작성할 수 있습니다. Assertion Library

일부 JavaScript 테스트 프레임 워크와 달리 Mocha는 최대의 유연성을 위해 설계되었습니다. 결과적으로, 우리는 그것을 완성하기 위해 몇 가지 추가 조각을 선택해야합니다. 특히 JavaScript Assertion Library가 필요합니다. 이를 위해 우리는 Chai Assertion Library에 의존 할 것입니다. Chai는 모든 일반적인 어설 션 스타일을 지원한다는 점에서 다소 독특합니다 -

assert

, expect, 및 해야합니다. Assertion Styles는 테스트에서 테스트를 작성하는 방법을 결정합니다. 암호. 덮개 아래에서, 그것들은 모두 동등합니다. 한 어설 션 스타일에서 다른 어설 스 스타일로 테스트를 쉽게 번역 할 수 있습니다. 어설 션 스타일의 주요 차이점은 가독성입니다. 어설 션 스타일의 선택은 주로 당신 (또는 당신의 팀)이 가장 읽기 쉬운 스타일과 가장 이해하기 쉬운 테스트를 생성하는 스타일에 달려 있습니다. 차이점을 보려면 다음 코드에 대한 사소한 테스트 개발을 고려하십시오. 전통적인 Assert 스타일 테스트는 다음과 같이 작성 될 수 있습니다 그 테스트는 작업이 완료되지만 구식 유닛 테스트에 익숙하지 않으면 읽고 해석하기가 조금 어려울 수 있습니다. 대체 어설 션 스타일은 다음을 사용합니다 대부분의 개발자는 Assert 스타일의 테스트보다 기대 스타일의 주장을 읽고 이해하기가 더 쉽습니다. 세 번째 대안은 테스트 어설 션을 자연 언어와 훨씬 더 비슷하게 만듭니다.

Chai 라이브러리는 세 가지 주장 스타일을 모두 지원합니다. 이 기사에서 우리는해야 할 것입니다.

<span>var sum = 2 + 2;</span>

스파이, 스터브 및 모의 이 기사에서 고려할 사소한 예를 포함하여 대부분의 웹 앱은 타사 라이브러리 및 서비스에 의존합니다. 대부분의 경우 코드를 테스트하려면 라이브러리 및 서비스를 관찰하거나 제어해야합니다. Sinon.js 라이브러리는 이러한 상호 작용을 테스트하기위한 많은 도구를 제공합니다. 이러한 도구는 세 가지 일반적인 클래스로 속합니다 :

스파이 . 테스트중인 코드 이외의 기능에 대한 호출을 관찰하는 테스트 코드. 스파이는 이러한 외부 기능의 작동을 방해하지 않습니다. 그들은 단지 호출과 반환 값을 기록합니다.

assert<span>.equal(sum, 4, "sum should equal 4");</span>

스터브 . 테스트중인 코드 이외의 기능에 대한 호출에 대한 테스트 코드. 스텁 코드는 외부 기능을 복제하려고 시도하지 않습니다. 테스트중인 코드가 외부 함수에 액세스 할 때 해결되지 않은 오류를 방지합니다.

모의 . 테스트중인 코드 이외의 기능 또는 서비스를 모방하는 테스트 코드. 모의를 사용하면 테스트 코드가 해당 함수 또는 서비스에서 반환 값을 지정하여 코드의 응답을 확인할 수 있습니다.

<span>expect(sum).to.equal(4);</span>

Sinon.js 라이브러리 자체와 함께, 우리는 Chai에 대한 Sinon.js Assertions와 함께 표준 Chai Assertion Library를 증대시킬 수 있습니다. 단위 테스트 개발 환경

테스트 워크 벤치의 최종 도구는 단위 테스트를위한 개발 환경입니다. 이 예에서는 Test'em을 사용합니다. Test'em은 지속적인 테스트 환경을 설정하고 실행하기위한 편리한 스크립트 모음입니다. 우리가 선택했다면 스크립트를 직접 작성하고 수동으로 환경을 관리 할 수 있습니다. 그러나 Toby Ho (Test'em의 제작자)는 문제를 구할 수있는 멋진 패키지를 만들었습니다. 예제 응용 프로그램 테스트 환경이 작동하는 것을 보려면 간단한 응용 프로그램을 고려해 봅시다. 이 응용 프로그램에는 실제 응용 프로그램에 필요한 모든 기능이 포함되어 있습니다. (응용 프로그램의 완전한 소스 코드는 Github에서 사용할 수 있습니다.)

사용자는 자신의 TODO 목록을 볼 수 있으며 확인란을 클릭하여 할 일표의 상태를 전환 할 수 있습니다. TODOS 데이터베이스 우리의 응용 프로그램은 ToDOS에 대한 정보를 보유하는 데이터베이스 테이블로 시작합니다. 다음은 해당 테이블을 만들 때 사용할 수있는 SQL입니다.

그리고 테이블이 몇 가지 테스트 데이터를 넣은 방법을 보는 방법은 다음과 같습니다.

제목

완료

1A 데이터베이스의 샘플 할인 항목 2 another 샘플 todo item1 3yet 다른 샘플 todo item0 테이블에서 알 수 있듯이, 우리의 Todos는 기본 키 (ID), 제목 및 상태 비트 만 포함하여 완료되었는지 여부를 나타냅니다. a rest api

웹 애플리케이션은이 데이터베이스에 대한 액세스가 필요하므로 표준 REST 인터페이스를 제공합니다. API는 루비 컨벤션을 따르지만 모든 서버 기술로 쉽게 구현할 수 있습니다. 특히 :

> get api/todos 데이터베이스에서 모든 행의 JSON 인코딩 어레이를 반환합니다. > aPi/todos/nnn get get aid id id id id with nnn. > post api/todos는 요청에 JSON에 인코딩 된 정보를 사용하여 데이터베이스에 새로운 할 일을 추가합니다. > Put Put API/TODOS/NNN은 요청에 JSON에 인코딩 된 정보를 사용하여 NNN과 동일한 ID로 TODO를 업데이트합니다. 삭제 API/TODOS/NNN은 데이터베이스에서 NNN과 동일한 ID를 사용하여 TODO를 삭제합니다.
var sum = 2 + 2;
Ruby를 특별히 좋아하지 않으면 소스 코드에는이 API의 완전한 PHP 구현이 포함되어 있습니다. JavaScript 라이브러리 우리의 겸손한 응용 프로그램은 라이브러리없이 순수한 JavaScript로 구현하기에 충분히 간단하지만 훨씬 더 큰 계획이 있습니다. 우리는 작게 시작할 수 있지만 결국 앱에는 놀라운 기능과 유쾌한 사용자 인터페이스가 있습니다. 그 날을 준비하기 위해 우리는 최고의 킬러 앱을 지원할 수있는 프레임 워크를 구축 할 것입니다 :
DOM 조작, 이벤트 처리 및 서버 통신 용 jQuery <.> aUNDSCORE.JS는 많은 유능한 유틸리티로 핵심 언어를 향상시킵니다. <.> backbone.js는 모델과보기 측면에서 응용 프로그램의 구조를 정의합니다.
an html skeleton 이제 우리는 응용 프로그램을 구성 할 구성 요소를 알았으므로 지원할 HTML 골격을 정의 할 수 있습니다. 그것에 대해 멋진 것은 없습니다 (아직), 최소한의 HTML5 문서, 일부 JavaScript 파일 및 사물을 시작하기위한 작은 코드입니다.
.
개발 중 테스트
이제 도구를 선택하고 응용 프로그램을 지정 했으므로 이제 개발을 시작할 차례입니다. 첫 번째 작업은 도구를 설치하는 것입니다 도구 설치 브라우저에서 개발 될 것이지만 테스트 환경은 node.js에 의존합니다. 따라서 첫 번째 단계는 Node.js 및 Node 패키지 관리자 (NPM)를 설치하는 것입니다. Node.js 웹 사이트에는 OS X, Windows, Linux 및 Sunos 용 실행 가능한 바이너리와 다른 운영 체제의 소스 코드가 있습니다. 설치 프로그램을 실행 한 후 명령 줄에서 node.js 및 npm을 모두 확인할 수 있습니다.
필요한 모든 것은 노드 패키지로 편리하게 사용할 수 있습니다. 노드 패키지 관리자는 의존성뿐만 아니라 설치를 처리 할 수 있습니다.
프로젝트 구조 생성 이 예제의 소스 코드에는 다음 15 개의 파일이있는 완전한 프로젝트 구조가 포함되어 있습니다.
여기 각 폴더와 파일에 포함 된 내용은 다음과 같습니다
<..> todos.html : 위에 표시된 응용 프로그램을위한 Skeleton HTML 파일. reddem.json : test'em의 구성 파일; 우리는 이것을 곧 자세히 살펴볼 것입니다.
API/: REST API 구현을위한 폴더.
API/HTACCESS : REST API를 지원하는 Apache 웹 서버의 샘플 구성. api/todos.php : 나머지 API를 구현하려는 PHP 코드
<:> lib/: 앱 자체와 테스트 프레임 워크에서 사용하는 JavaScript 라이브러리의 폴더.
lib/backbone-min.js : backbone.js lib/chai.js : Chai Assertion Library lib/jquery-1.9.0.min.js : jQuery의 미니스트 버전 lib/sinon-1.5.2.js : sinon.js 라이브러리 lib/sinon-chai.js : sinon.js chai lib/indentscore-min.js : aUNDSCORE.JS의 미니딩 버전
MySQL/: 응용 프로그램의 MySQL 코드를위한 폴더.
mysql/todos.sql : mysql 명령은 응용 프로그램 데이터베이스를 생성합니다
PHP-LIB/: PHP 라이브러리를위한 폴더 및 응용 프로그램의 REST API를위한 구성.
PHP-LIB/DBCONFIG.INC.PHP : REST API에 대한 PHP 데이터베이스 구성
SRC/: 클라이언트 측 애플리케이션 코드를위한 폴더.
> src/app-todos.js : 우리의 응용 프로그램.
테스트/: 테스트 코드 폴더.
테스트/App-Todos-test.js : 응용 프로그램의 테스트 코드 test/mocha.opts : Mocha의 구성 옵션; 다음 섹션 에서이 부분을 살펴 보겠습니다.

개발 중에, 우리는 세 가지 파일 인 reddem.json, src/app-todos.js 및 test/app-todos-test.js. 테스트 구성 실제 개발 전 마지막 단계는 테스트 구성을 정의하는 것입니다. 이 구성은 JSON 형식의 reddem.json에 있으며 텍스트 편집기에서 만들 수있을 정도로 간단합니다. 우리는 단순히 Mocha (Test'em이 여러 프레임 워크 지원)를 사용하고 있음을 지정하고 응용 프로그램 및 테스트 코드가 요구하는 JavaScript 파일을 나열합니다.
개발을 시작하십시오 마지막으로, 우리는 코딩 할 준비가되었습니다. 명령 쉘에서 프로젝트의 루트 폴더로 이동하여 명령 테드를 실행하십시오. 테스트 스크립트가 실행되어 터미널 창을 지우고 오른쪽 상단에 URL을 제공합니다. 해당 URL을 선택한 브라우저에 복사하여 붙여 넣으십시오.
웹 브라우저를 시작하자마자 정의한 테스트를 자동으로 실행합니다. 방금 개발을 시작했기 때문에 코드 나 테스트 사례도 없습니다. 브라우저는 우리에게 친절하게 지적 할 것입니다.

테스트를 시작한 터미널 창도 우리에게 상태를 줄 것입니다. 첫 번째 테스트 사례 진정한 테스트 중심 개발의 정신으로, 우리는 Test/App-todos-test.js 파일에 첫 번째 테스트 사례를 작성하는 것으로 시작합니다. 좋은 웹 앱과 마찬가지로 글로벌 이름 우주 오염을 최소화하려고합니다. 이를 위해 우리는 모든 코드를 포함하기 위해 단일 글로벌 변수 인 TodoApp에 의존합니다. 첫 번째 테스트 케이스는 글로벌 이름 공간 변수가 존재하는지 확인합니다.
보시다시피, 우리는 Mocha에게 우리가 Chai Assertions를 사용하고 있다고 Mocha에게 알리기 위해 예비 진술이 필요합니다. 그런 다음 테스트 작성을 시작할 수 있습니다. 컨벤션에 의해 JavaScript 테스트는 블록으로 구성됩니다 (서브 블록에 중첩 될 수 있음). 각 블록은 설명 () 함수 호출로 시작하여 테스트하는 코드의 부분을 식별합니다. 이 경우 전체 응용 프로그램을 테스트하고 있으므로 설명하는 첫 번째 매개 변수입니다. 테스트 블록 내에서 각 테스트 사례를 테스트 한 것으로 문서화합니다. 이것이 IT () 함수의 목적입니다. 모든 테스트 사례를 읽는 방법은 Describ ()와 IT () 문자열을 단일 문으로 결합하는 것입니다. 따라서 첫 번째 테스트 사례는
입니다
응용 프로그램은 이름 공간 의 글로벌 변수를 만듭니다
var sum = 2 + 2;
테스트 코드 자체는 IT () 블록 내부에 있습니다. 우리의 테스트 사례는 입니다
이제 우리는 완전한 테스트 사례가 있습니다. 파일을 저장하자마자 Test`Em이 자동으로 인수됩니다. 파일 중 하나가 변경되었으므로 즉시 테스트를 다시 시작합니다. 놀랍게도 (아직 응용 프로그램에 대한 코드를 작성하지 않았기 때문에) 첫 번째 테스트는 실패합니다. .
터미널 윈도우도 자동으로 업데이트됩니다
테스트 패스를 만들려면 글로벌 이름 공간 변수를 만들어야합니다. 우리는 srcapp-todos.js 파일로 전환하고 필요한 코드를 추가합니다.

파일을 저장하자마자 다시 한 번 테스트를 시작하십시오. 우리는 즉시 테스트 사례에 대한 업데이트 된 결과를 얻습니다
잠시 뒤로 물러서서 무슨 일이 일어나고 있는지 고려하십시오! 테스트 코드 나 응용 프로그램을 변경할 때마다 테스트는 즉시 전체 테스트 스위트를 다시 실행합니다. 우리가해야 할 일은 Test'em의 브라우저 또는 터미널 창을 화면 모서리에 보관하기 만하면 를 개발할 때 코드의 건강을 실시간으로 볼 수 있습니다. 버그가 우리가 작동하는 곳과 다른 코드의 일부에서 버그가 나타나더라도 버그를 소개하자마자 알게 될 것입니다. 더 이상 버그를 소개했을 때 몇 시간, 며칠 또는 몇 주 동안 새로운 코드를 파헤치지 마십시오. 모델 테스트 개발 환경이 이제 완전히 확립되면 응용 프로그램 개발을 시작할 수 있습니다. 우리의 앱은 Todos 목록을 보여 주므로 Todos의 모델을 만드는 것이 좋습니다. 이 모델은 TODO의 제목과 상태를 모두 추적해야합니다. 합리적인 기본값으로 TODO를 만들 수있는 단위 테스트를 추가하겠습니다.
주목할 가치가있는이 테스트에는 몇 가지 측면이 있습니다
우리는 서로 내 안에 테스트 블록을 둥지 할 수 있습니다. 하나의 테스트 블록에는 TODO 모델에 대한 모든 단위 테스트가 포함되며 해당 테스트의 하위 블록은 초기화에 중점을 둡니다. 테스트 블록 내에서 모든 테스트 전에 실행할 기능을 정의 할 수 있습니다. 이것이 바로 Projecteach () 블록의 목적입니다. 위의 예에서는 모든 테스트 전에 새로운 TODO 인스턴스를 만들고 있습니다.
Mocha 프레임 워크는 자동으로 JavaScript 컨텍스트 (즉, 이것의 값)가 모든 테스트 사례에 대해 일관성이 있는지 확인합니다. 그렇기 때문에 우리는 이것을 하나의 함수 (prevereach () 매개 변수)로 정의하고 다른 함수 (예 : it () 매개 변수)에서 안전하게 참조 할 수 있습니다. Mocha 가이 일관성을 제공하기 위해 무대 뒤에서 작업하지 않으면 JavaScript는 각 기능에 대해 다른 컨텍스트를 정의합니다.
물론 우리는 아직 모델 코드를 작성하지 않았으므로 모든 테스트가 실패합니다. (그리고 우리는 즉시 그것을 알게 될 것입니다.) 그러나 우리가 모델에 대한 코드를 추가하면 테스트가 통과되고 우리가가는 길에 있습니다.
var sum = 2 + 2;
.
타사 기능 에 스터브 사용 이제 우리는 Todos에 대한 간단한 모델을 갖기 때문에 그 행동을 정의 할 수 있습니다. 모델이 수행해야 할 한 가지는 속성이 변경 될 때마다 데이터베이스를 업데이트하는 것입니다. 그러나 단위 테스트 환경에는 실제 데이터베이스가 없습니다. 반면에 우리는 실제로 데이터베이스 업데이트를 수행하기 위해 코드를 작성하지 않습니다. 오히려 우리는 그 상호 작용을 처리하기 위해 백본에 의존하고 있습니다. 이 테스트 사례에 대한 단위 테스트 전략을 제안합니다. 백본 모델은 Save () 메소드를 사용하여 모델을 지속하는 모든 백업 저장소를 업데이트한다는 것입니다. 우리의 경우 Backing Store는 데이터베이스입니다. 우리가 사용할 수있는 단위 테스트 코드는 다음과 같습니다
우리는 각 테스트 전에 몇 가지 추가 코드를 포함 시켰으며 각 테스트 후에 실행할 코드 섹션을 추가했습니다. 이 추가 코드는 코드에서 다른 함수를 효과적으로 무효화하는 함수 인 Sinon Stub을 관리합니다. 우리의 경우 스터브는 this.todo의 save () 메소드를 무효화합니다. 스터브가 제자리에 있으면 메소드에 대한 호출은 실제로 Backnone 라이브러리로 이동하지 않습니다. 대신, Sinon은 해당 전화를 가로 채서 즉시 돌아옵니다. 이 행동은 중요합니다. 단위 테스트 환경에서 실제 백본 저장 () 메소드를 실행하려고하면 데이터베이스 또는 서버 API가 없어서 호출이 실패합니다. 스터브가 제자리에 있으면 테스트 케이스가이를 사용하여 모델의 동작을 확인할 수 있습니다. 첫 번째 테스트 사례에서는 즉시 TODO의 타이틀을 새로운 값으로 설정했습니다. 제목 속성을 변경하므로 모델이 백업 스토어를 업데이트하기를 원합니다. 확인하기 위해 스텁이 호출되었는지 확인합니다. 모델이 이러한 테스트를 통과하도록하려면 변경 이벤트를 찾고 적절하게 응답 할 수 있습니다.

뷰 테스트
var sum = 2 + 2;
물론, 우리의 앱은 실제로 사용자에게 Todos를 표시하지 않으면 HTML을 만들어야하는 경우 아무도하지 않습니다. 해당 기능에 백본보기를 사용합니다. 사소한 앱에서 우리는 단순히 각 todo를 목록 항목으로 렌더링하기를 원합니다. 우리를 시작할 테스트 사례는 다음과 같습니다.

우리는 두 가지 테스트 사례로보기 테스트를 시작합니다. 먼저 View의 Render () 메소드가보기 자체를 반환해야합니다. 그것은 메소드 체인을 허용하기 때문에 백본의 일반적이고 매우 편리한 컨벤션입니다. 두 번째 테스트 케이스는 렌더가 생성하는 HTML 요소가 목록 항목 (
)인지 확인합니다. 이 테스트를 통과하는 데 필요한 코드는 간단한 백본보기입니다.

다음으로, 우리는 해당 목록 항목보기의 자세한 내용을 개발할 수 있습니다. 예를 들어, 우리는 전체 목록 항목이 다음과 같은 것을 보이기를 원합니다.
assert.equal(sum, 4, "sum should equal 4");

테스트 사례의 경우 jQuery를 활용하여보기의 주요 요소에서 개별 요소를 추출 할 수 있습니다.
마지막 테스트 사례에서는 Model 's Save () 메소드를 스팅했습니다. 우리는 기본값에서 속성을 변경하고 있기 때문에 모델은 그 후원 저장소로 변경을 계속 유지하려고 노력할 것입니다. 그러나 단위 테스트 환경에는 데이터베이스 나 서버 API가 없습니다. 스터브는 누락 된 구성 요소를 대신하여 테스트가 오류없이 진행할 수 있도록합니다. 이 테스트를 통과하려면 우리의 견해에 몇 가지 추가 코드를 추가해야합니다.
expect(sum).to.equal(4);

> 테스트 모델/뷰 상호 작용
이제 뷰 구현이 올바른 HTML 마크 업을 생성하는지 확인 했으므로 모델과의 상호 작용을 테스트 할 수 있습니다. 특히 사용자가 확인란을 클릭하여 TODO의 상태를 전환 할 수 있도록하려고합니다. 테스트 환경에는 실제 인간 사용자가 필요하지 않으므로 jQuery를 사용하여 클릭 이벤트를 생성합니다. 그러나 그렇게하려면 실제 라이브 돔에 컨텐츠를 추가해야합니다. 이 내용은 테스트
sum.should.equal(4);
픽스처 로 알려져 있습니다. 단위 테스트 코드는 다음과 같습니다.

우리는 다시 한 번 Todo 's Save () 메소드를 스터브하고 있음을 알 수 있습니다. 그렇지 않으면, 백본은 시뮬레이션 된 클릭으로 TODO 상태를 변경할 때 존재하지 않는 후원 저장소를 업데이트하려고합니다. 테스트 사례 자체의 경우, 우리는 픽스팅의 ID가있는
요소를 생성하는 것으로 시작하고 해당 요소를 라이브 문서에 추가합니다. 이 경우 라이브 문서는 테스트 결과를 표시하는 웹 페이지입니다. 테스트 케이스를 확인한 직후에 요소를 제거하지만 디스플레이 속성을 없음으로 설정하여 Mocha의 테스트 결과 표시를 방해하지 않습니다. 이 기능을 구현하는 코드에는 TODO 모델에 작은 추가 기능이 포함되어 있습니다. 추가는 새로운 togglestatus () 메소드입니다
보기에서, 우리는 요소의 클릭 이벤트를 잡고 모델 에이 메소드를 호출하려고합니다.
컬렉션 테스트 이 시점에서 우리의 응용 프로그램은 거의 완료되었습니다. 나머지 기능은 모든 토도를 함께 수집하는 것입니다. 당연히 백본 컬렉션을 사용합니다. 우리는 실제로 컬렉션에 특별한 일을하지 않을 것이므로 실제로 단위 테스트가 필요하지 않습니다. .
var sum = 2 + 2;
그러나 그러나 우리는 컬렉션의 관점 구현이 적절한 지 확인할 수 있습니다. 우리는 그 견해를 반대되지 않은 목록으로 렌더링하기를 원합니다 (
). 테스트 사례에는 이전에 보지 못한 기능이 필요하지 않습니다.

뷰 구현도 간단합니다. 컬렉션에 추가를 추적하고보기를 업데이트합니다. 초기 렌더 ()의 경우 한 번에 하나씩 컬렉션에 모든 모델을 추가합니다.
assert.equal(sum, 4, "sum should equal 4");
보너스 테스트 : API 확인 REST API는 백본이 기대하는 API와 완벽하게 일치하기 때문에 API 상호 작용을 관리하기 위해 사용자 정의 코드가 필요하지 않았습니다. 결과적으로 단위 테스트 사례가 필요하지 않습니다. 현실 세계에서는 운이 좋지 않을 수도 있습니다. API가 백본 컨벤션을 준수하지 않으면 비표준 API를 다루기 위해 일부 백본 코드를 무시하거나 확장해야 할 수도 있습니다. 이 추가 코드에는 단위 테스트도 필요합니다. 다행히도 단위 테스트 환경에서도 API 상호 작용을 테스트하는 것은 비교적 쉽습니다. API 상호 작용을 테스트하는 가장 쉬운 방법은 Sinon.js의 가짜 서버 기능에 의존합니다. 불행히도,이 기능은 Sinon의 브라우저 구현에서만 사용할 수 있습니다 (현재). Node.js 구현에서 명시 적으로 제외됩니다. Node.js에서 실행할 수있는 해킹이 있지만 해킹은 상당히 부서지기 쉬우 며 내부 구현 세부 사항에 의존합니다. 가능하면 피하는 것이 가장 좋습니다. 다행히도 Sinon의 가짜 서버 없이는 갈 수 있습니다. 비밀은 백본이 jQuery의 $ .ajax () 함수에 의존하여 REST API를 구현한다는 것을 알고 있습니다. 해당 함수를 스터브하여 API 상호 작용을 가로 채울 수 있습니다. 우리가 함수를 스터브 할 때, 우리는 우리 자신의 응답을 대체하고 싶을 것입니다. 스터브의 수율 () 방법은 우리에게 그 기회를 정확하게 제공합니다. 스텁을 호출 할 때 어떤 추가 조치를 취해야하는지 Sinon에게 알려줍니다. 다음은 REST API를 사용하여 컬렉션을 올바르게 초기화하는지 확인하기위한 완전한 테스트 사례입니다.

완성! 다음 스크린 샷에서 볼 수 있듯이 이제 모든 단위 테스트 케이스를 전달하는 코드를 작성했습니다. 적어도 한동안 개발이 완료됩니다.
var sum = 2 + 2;

통합 중 테스트 이제 앱의 클라이언트 측 개발 개발이 완료되었으므로 (이를 증명하기위한 테스트가 있음) JavaScript를 소스 코드 관리 시스템에 안전하게 집어 넣을 수 있습니다. 그런 다음 전체 응용 프로그램의 빌드 프로세스에 통합 될 수 있습니다. 이 과정의 일환으로 개발 한 모든 테스트 사례를 실행하려고합니다. 이를 통해 최종 배포를 구성하는 코드가 정의한 모든 테스트를 통과 할 수 있습니다. 또한 새로운 버그를 부주의하게 도입하는 코드에 대한 "사소한 조정"으로부터 보호 할 것입니다. 빌드 프로세스 중에는 웹 브라우저가 아닌 명령 줄에서 테스트를 실행하고 싶을 것입니다. 우리는 개별 테스트 사례의 세부 사항이 필요하지 않으며, 모두가 통과한다는 확신 일뿐입니다. node.js를 사용하면이 요구 사항을 쉽게 수용 할 수 있습니다. 소스 코드 및 단위 테스트 코드 파일에 몇 가지 작은 추가 만하면됩니다. 우리는 또한 테스트 코드를 조정해야합니다. 테스트 스크립트는 자체 라이브러리 (JQuery, Chai, Sinon.js 및 Sinon-Chai)에 액세스해야합니다. 또한 웹 브라우저의 문서 객체 모델 (DOM)을 시뮬레이션하려면 약간의 추가 기능을 추가해야합니다. 클릭 처리에 대한 테스트를 위해서는 웹 페이지에 "Fixture"
를 일시적으로 추가해야했습니다. 물론 Node.js에는 일반적으로 웹 페이지가 없습니다. 그러나 JSDOM 노드 패키지를 사용하면 하나를 모방 할 수 있습니다. 아래 코드는 테스트를 위해 최소한의 시뮬레이션 된 웹 페이지를 만듭니다.

var sum = 2 + 2;
조건부는이 명령문을 랩핑하여 웹 브라우저 대신 Node.js 환경에서 실행 중인지 확인합니다. 브라우저에서는 추가 진술이 필요하지 않으므로 안전하게 건너 뛸 수 있습니다.
. 이러한 변경 사항을 사용하면 명령 줄에서 전체 테스트 제품군을 실행할 수 있습니다. 프로젝트의 루트 폴더로 이동하여 Mocha 명령을 실행하십시오. 결과는 매우 친숙해 보인다.

물론, Mocha는 출구 레벨을 반환하여 모든 테스트가 통과되었는지 여부를 나타냅니다. 이를 통해 지속적인 통합 프로세스의 일부로 테스트를 자동화하거나 단순히 우리 자신의 정신을 보존하기위한 로컬 사전 커밋 스크립트로서.
결론 이 시점에서 우리는 목표를 달성했습니다. 우리는 개발 중에 백그라운드에서 실행되는 단위 테스트 환경이 있으며 테스트가 실패하면 즉시 알려줍니다. 테스트는 웹 브라우저에서 실행되므로 코딩하는 동안 브라우저의 개발 도구에 대한 전체 액세스 권한을 제공합니다. 동일한 테스트도 명령 줄 스크립트에서 똑같이 잘 실행되므로 빌드 또는 통합 프로세스 중에 실행을 자동화 할 수 있습니다. 자원
여기 기사에 사용 된 주요 단위 테스트 리소스가 있습니다.

명령 줄 JavaScript 실행 환경 : node.js
JavaScript 단위 테스트 프레임 워크 : Mocha
<:> 테스트 개발 환경 : Test'em JavaScript Assertion Library : Chai Assertion Library 스파이, 스터브 및 모의 : sinon.js 추가 어설 션 : chai 에 대한 sinon.js Assertions
단위 테스트 backbone.js 응용 프로그램에서 자주 묻는 질문 (FAQ) backbone.js 응용 프로그램에서 단위 테스트의 중요성은 무엇입니까?

단위 테스트는 소프트웨어 개발의 중요한 측면, 특히 Backbone.js 애플리케이션에서 중요한 측면입니다. 여기에는 소프트웨어의 개별 구성 요소를 테스트하여 예상대로 작동하도록합니다. 이는 개발 프로세스 초기에 버그를 식별하고 수정하여 시간과 자원을 절약 할 수 있습니다. 또한, 장치 테스트는 코드 리팩토링을 용이하게합니다. 개발자는 코드를 변경하고 변경 사항이 기존 기능을 위반했는지 신속하게 확인할 수 있으므로 코드 리팩토링을 용이하게합니다. 또한 쓰기 테스트는 종종 모듈화와 코드의 응집력이 향상되므로 코드의 설계를 향상시킵니다. backbone.js의 단위 테스트는 다른 JavaScript 프레임 워크와 어떻게 비교됩니까?
다른 JavaScript 프레임 워크와 마찬가지로 Application의 품질을 보장하기 위해 단위 테스트를 지원합니다. 그러나 Backbone.js는 유연성과 단순성으로 인해 두드러집니다. 응용 프로그램을 구조화하는 방법을 지시하지 않으므로 개발자에게 적합한 응용 프로그램을 자유롭게 설계 할 수 있습니다. 이 유연성은 단위 테스트로 확장되어 개발자가 선호하는 테스트 도구 및 방법론을 선택할 수 있습니다. 또한 Backbone.js는 다른 프레임 워크에 비해 발자국이 더 작아 단위 테스트에 더 빠르고 효율적입니다.
Backbone.js에서 단위 테스트에 어떤 도구를 사용할 수 있습니까? Backbone.js에서 단위 테스트에 사용할 수있는 몇 가지 도구가 있습니다. 인기있는 것 중 일부에는 Mocha, Jasmine 및 Jest가 있습니다. Mocha는 기능이 풍부한 JavaScript 테스트 프레임 워크로 개발자에게 응용 프로그램을 테스트하는 간단한 방법을 제공합니다. Jasmine은 JavaScript 코드를 테스트하기위한 행동 중심 개발 프레임 워크입니다. 브라우저, DOM 또는 JavaScript 프레임 워크에 의존하지 않으므로 Backbone.js 응용 프로그램을 테스트하는 데 이상적입니다. 반면에 Jest는 대규모 웹 응용 프로그램에 대한 단순성 및 지원에 중점을 둔 포괄적 인 테스트 솔루션입니다.
backbone.js 응용 프로그램에 대한 단위 테스트를 어떻게 작성합니까? backbone.js 응용 프로그램에 대한 테스트에는 응용 프로그램의 각 구성 요소에 대한 테스트 케이스를 작성해야합니다. 여기에는 모델, 뷰 및 컬렉션이 포함됩니다. 각 테스트 사례는 구성 요소의 특정 기능을 포괄해야하며 다른 테스트 사례와 무관해야합니다. Mocha 또는 Jasmine과 같은 테스트 프레임 워크를 사용하여 테스트를 작성할 수 있습니다. 이 프레임 워크는 테스트 사례를 정의하고 테스트 환경을 설정 및 찢어 내고 주장을하는 기능을 제공합니다.
Backbone.js에서 단위 테스트를 어떻게 실행합니까? JS는 사용중인 테스트 프레임 워크에 따라 다릅니다. 예를 들어, Mocha를 사용하는 경우 Mocha 명령 줄 도구를 사용하여 테스트를 실행할 수 있습니다. Jasmine을 사용하는 경우 Jasmine Command-Line 도구를 사용하여 테스트를 실행할 수 있습니다. 이 도구는 개별 테스트 사례, 전체 테스트 스위트 또는 응용 프로그램의 모든 테스트를 실행할 수있는 옵션을 제공합니다. 또한 통과, 실패 및 건너 뛰는 테스트 수를 포함하여 테스트 결과에 대한 자세한 보고서를 제공합니다.
Backbone.js에서 단위 테스트를 자동화 할 수 있습니까? backbone.js에서 단위 테스트를 자동화합니다. 자동화에는 코드를 변경할 때마다 테스트를 자동으로 실행하는 CI (Continuous Integration) 시스템을 설정해야합니다. 이를 통해 변경 사항에 의해 도입 된 버그가 즉시 잡히도록합니다. Jenkins, Travis CI 및 Circleci와 같은 몇 가지 CI 도구가 JavaScript를 지원하고 Backbone.js에서 장치 테스트를 자동화하는 데 사용할 수 있습니다. backbone.js에서 단위 테스트를위한 몇 가지 모범 사례는 무엇입니까? 가능한 모든 에지 케이스를 테스트합니다. TDD (Test-Driven Development)로 알려진 실제 코드를 작성하기 전에 테스트를 작성하는 것이 중요합니다. 이렇게하면 코드가 테스트 가능하고 더 나은 소프트웨어를 설계 할 수 있도록 도와줍니다.

backbone.js에서 실패한 단위 테스트를 디버그하는 방법?

backbone.js에서 실패한 단위 테스트를 디버깅하여 테스트를 분석합니다. 실패의 원인을 확인하려면보고합니다. 대부분의 테스트 프레임 워크는 문제를 정확히 찾아 낼 수있는 자세한 오류 메시지를 제공합니다. Chrome DevTools 또는 Node.js 디버거와 같은 디버깅 도구를 사용하여 코드를 밟고 변수 및 기능 호출을 검사 할 수 있습니다.
단위 테스트 Backbone.js에서 모의 및 스터브를 사용할 수 있습니까? > 예, 단위 테스트 백본에서 조롱과 스터브를 사용할 수 있습니다. 모의와 스텁은 실제 물체의 동작을 시뮬레이션하는 가짜 물체입니다. 이들은 시스템의 나머지 부분에서 테스트되는 구성 요소를 분리하는 데 사용됩니다. 이를 통해 테스트를보다 신뢰할 수 있고 쉽게 작성할 수 있습니다. Sinon.js와 같은 여러 라이브러리가 모의 및 스터브를 생성하고 관리하는 기능을 제공하는 여러 라이브러리가 있습니다.

backbone.js에서 단위 테스트의 성능을 향상시키는 방법?

개선 backbone.js에서 단위 테스트의 성능은 테스트 및 테스트 환경을 최적화하는 것입니다. 여기에는 빠르게 실행하고 테스트를 병렬로 실행하고 빠른 테스트 프레임 워크를 사용하는 효율적인 테스트 작성이 포함됩니다. 프로파일 링 도구를 사용하여 테스트 과정에서 느린 테스트 및 병목 현상을 식별 할 수 있습니다.