우리는 이전 단계에서 많은 기본 교육을 받았으므로 이제 몇 가지 간단한 일을 할 수 있습니다. 전체 텍스트 검색 기능을 추가하고 싶습니다 (예, 정말 간단합니다!). 동시에, 우리는 또한 엔드 투 엔드 테스트를 작성할 것입니다. 좋은 엔드 투 엔드 테스트는 많은 도움이 될 수 있기 때문입니다. 회귀가 발생하면 앱과 보고서를 빠르게 모니터링합니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F Step -3
우리 앱에는 이제 검색 창이 있습니다. 사용자가 검색 창에 들어갈 때 페이지의 전화 목록이 변경됩니다.
2 단계와 3 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
제어 장치
우리는 컨트롤러를 변경하지 않습니다.
주형
app/index.html
<div> <div> <div> <!-사이드 바 컨텐츠-> 검색 : <입력 ng-model = "query"> </div> <div> <!-바디 내용-> <ul> <li ng-repeat = "전화 | 전화 | 필터 : 쿼리"> {{폰 .name}} <p> {</li> </ul> </ul> </ul> </li> </div> </div>이제 <입력> 태그를 추가하고 AngularJS의 $ 필터 기능을 사용하여 NGREPEAT 지침의 입력을 처리합니다.
이를 통해 사용자는 검색 기준을 입력하고 즉시 전화 목록의 검색 결과를 볼 수 있습니다. 새 코드를 설명해 봅시다 :
데이터 바인딩 : 이것은 AngularJS의 핵심 기능입니다. 페이지가로드되면 AngularJS는 입력 상자의 속성 값 이름을 기반으로 데이터 모델에서 동일한 이름의 변수와 바인딩하여 둘 사이의 동기화를 보장합니다.
이 코드에서 입력 상자에서 사용자가 입력 한 데이터 이름은 쿼리라고하며, 이는 목록 반복자 (전화로 전화 | 필터 : 쿼리`)에 의해 필터에 대한 입력으로 즉시 사용됩니다. 데이터 모델이 반복자 입력의 변화를 일으키면 반복자는 DOM을 효율적으로 업데이트하여 최신 데이터 모델을 반영 할 수 있습니다.
필터 필터 사용 : 필터 기능은 쿼리 값을 사용하여 쿼리 레코드와 일치하는 새 배열을 만듭니다.
NGREPEAT는 필터 필터에서 생성 된 모바일 레코드 데이터 배열을 기반으로 뷰를 자동으로 업데이트합니다. 전체 프로세스는 개발자에게 투명합니다.
시험
2 단계에서는 테스트를 작성하고 실행하는 방법을 배웠습니다. 단위 테스트는 JS로 작성하는 컨트롤러 및 기타 구성 요소를 테스트하는 데 매우 편리하지만 DOM 작업 및 응용 프로그램 통합을 쉽게 테스트 할 수는 없습니다. 이를 위해 엔드 투 엔드 테스트가 더 나은 선택입니다.
검색 기능은 전적으로 템플릿 및 데이터 바인딩을 통해 구현되므로 첫 번째 엔드 투 엔드 테스트에서 이러한 기능이 우리의 기대에 부응하고 있는지 확인합니다.
테스트/e2e/시나리오스 :
설명 ( 'phonecat app', function () {seciption ( '전화 목록보기', function () {prevereach () {browser (). Navigateto ( '../../ app/index.html');}); '폰 목록을 사용자 유형으로 필터링해야한다', function () {reperet ( ').).). 입력 ( 'nexus') ( '. phones li').이 테스트 코드의 구문은 이전에 Jasmine에서 쓴 단위 테스트와 매우 유사 해 보이지만 엔드 투 엔드 테스트는 AngularJS 엔드 투 엔드 테스터가 제공하는 인터페이스를 사용합니다.
엔드 투 엔드 테스트를 실행하고 새 브라우저 탭에서 다음 중 하나를 열어줍니다.
node.js 사용자 : http : // localhost : 8000/test/e2e/runner.html
다른 HTTP 서버를 사용하는 사용자 : http : // localhost : [port-number]/[context-path] /test/e2e/runner.html
방문자 : http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
이 테스트는 검색 상자와 반복자가 올바르게 통합되었는지 확인합니다. AngularJS에서 엔드 투 엔드 테스트를 작성하는 것이 얼마나 쉬운 지 찾을 수 있습니다. 이 예제는 단순한 테스트 일 뿐이지 만 복잡하고 읽기 쉬운 엔드 투 엔드 테스트를 쉽게 구축 할 수 있습니다.
관행
query 모델의 현재 값을 실시간으로 표시하려면 index.html 템플릿에 바인딩 {{query}} a {{query}}을 추가 한 다음 입력 상자의 값에 따라 어떻게 변경되는지 관찰하십시오.
이제 HTML 페이지 제목에 쿼리 모델의 값을 어떻게 표시 할 수 있는지 살펴 보겠습니다.
제목 태그에 바인딩을 추가한다고 생각할 수도 있습니다.
<title> Google 전화 갤러리 : {{query}} </title>
그러나 페이지를 다시로드하면 원하는 결과를 얻을 수 없습니다. 쿼리 모델이 본문 요소에 의해 정의 된 범위 내에서만 유효하기 때문입니다.
<body ng-controller = "phonelistctrl">
<title> 요소가 쿼리 모델에 바인딩하려면 NGController 선언을 HTML 요소로 이동해야합니다. 제목 및 신체 요소의 공통 조상이기 때문입니다.
<html ng-app ng-controller = "phonelistctrl">
본문 요소에서 NG-Controller 선언을 삭제하십시오.
제목 요소에 두 개의 곱슬 브레이스를 바인딩 할 때 목표를 달성 할 수 있지만 페이지가로드 될 때 이미 사용자에게 표시되어 있음을 알 수 있습니다. 더 나은 솔루션은 페이지를로드 할 때 사용자에게 보이지 않는 NGBIND 또는 NGBINDTEMPLATE 지침을 사용하는 것입니다.
<title ng-bind-template = "Google 전화 갤러리 : {{query}}"> Google 전화 갤러리 </title>
테스트/e2e/시나리오스의 설명 블록에 다음 엔드 투 엔드 테스트 코드를 추가하십시오.
IT ( 'id'status " ', function () {excl (element ('#hatus '). text ()). tomatch (/current filter :/s*$/); input ('query '). enth ('nexus '); expl ('#status '). text ()) ( '#status')를 사용하여 바인딩의 값 만 테스트합니다.브라우저를 새로 고치면 엔드 투 엔드 테스터가 테스트 실패를보고합니다. 테스트를 통과하려면 index.html을 편집하고 쿼리 바인딩 인 "상태"와 현재 필터 : 접두사가있는 div 또는 p 요소를 추가하십시오. 예를 들어:
<div id = "status"> 현재 필터 : {{query}} </div>
일시 정지 ()를 추가하십시오. 엔드 투 엔드 테스트에 대한 진술을하고 다시 실행하십시오. 당신은 테스터가 일시 중지된다는 것을 알게 될 것입니다! 이를 통해 테스트 실행 중에 응용 프로그램 상태를 볼 수 있습니다. 테스트 응용 프로그램은 실시간입니다! 검색 컨텐츠를 변경하여이를 증명할 수 있습니다. 약간의 경험을 통해 엔드 투 엔드 테스트에서 문제를 빠르게 찾는 데 이것이 얼마나 중요한지 알게 될 것입니다.
요약
이제 전체 텍스트 검색 기능을 추가하고 검색이 옳다는 것을 증명하기 위해 테스트를 완료했습니다! 이제 4 단계로 이동하여 모바일 앱에 분류 기능이 추가되는 것을 보겠습니다.
위의 것은 AngularJS Ierator 필터링 데이터의 편집이며 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!