응용 프로그램의 복잡성과 크기가 증가하면 새로운 기능의 신뢰성, 버그 캡처 및 회귀 테스트에 대한 수동 테스트에 의존하는 것이 비현실적입니다.
이 문제를 해결하기 위해, 우리는 사용자 작업을 모방하기 위해 각도 시나리오 러너를 설정하고 각도 응용 프로그램의 견고성을 확인하도록 도와줍니다.
1. 요약
우리는 응용 프로그램의 동작을 설명하고 특정 주와 상호 작용하기 위해 JavaScript 시나리오 테스트를 작성할 수 있습니다. 시나리오는 하나 이상의 "IT"블록 (이를 응용 프로그램의 요구 사항으로 취급 할 수 있음)으로 구성되며, 이는 명령 및 기대치로 구성됩니다. 이 명령은 러너에게 응용 프로그램에서 무언가를하도록 지시하고 (예 : 페이지로 이동하거나 버튼을 클릭하는 등), 기대치는 러너에게 State (예 : 특정 도메인 또는 현재 URL의 값)에 대해 무언가를 판단하도록 지시합니다. 기대가 실패하면 러너는 이것을 "it"로 태그하고 다음 "it"으로 계속됩니다. 시나리오에는 통과 여부에 관계없이 각 "IT"블록 전후에 실행되는 "Exporeach"및 "After"블록을 가질 수 있습니다.
위의 요소 외에도 시나리오에는 "IT"블록에서 중복 코드를 피하기위한 도우미 기능도 포함될 수 있습니다.
간단한 시나리오 예는 다음과 같습니다.
설명 ( 'buzz client', function () {it ( 'work results', function () {입력 ( 'user'). enter ( 'jacksparrow'); element ( ': button'); excl ( 'ul li'). count ()). li '). count (). toequal (1);};이 시나리오는 네트워크 클라이언트의 요구 사항을 설명하며 명시 적으로 사용자를 필터링 할 수 있어야합니다. "사용자"입력 상자에 값을 입력하여 페이지의 유일한 버튼을 클릭 한 다음 10 개의 항목 목록이 있는지 확인합니다. 그런 다음 "꿀벌"을 "FilterText"의 입력 상자에 들어간 다음 목록이 하나의 항목으로만 줄어드는지 확인합니다.
다음 API 장에는 러너에서 사용할 수있는 명령 및 기대가 나와 있습니다.
2. API
소스 코드 : https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
정지시키다()
콘솔에서 recume ()을 호출 할 때까지 테스트 실행을 일시 중지합니다 (러너 인터페이스에서 이력서 링크를 클릭 할 수도 있습니다).
수면 (초)
n 초 동안 테스트 실행을 일시 중지합니다.
브라우저 (). Navigateto (URL)
지정된 URL을 세트 프레임에로드하십시오.
브라우저 (). Navigateto (URL, FN)
테스트 프레임에서 FN이 반환 한 URL을로드하십시오. 여기서 URL 매개 변수는 테스트 출력으로 사용됩니다. 이 API는 대상 URL이 동적 일 때 사용할 수 있습니다 (테스트를 작성할 때 주소는 여전히 알려져 있지 않음).
브라우저 (). Reload ()
테스트 프레임에서 현재로드 된 페이지를 새로 고치십시오.
브라우저 (). Window (). href ()
Window.location.href 테스트 프레임의 현재 페이지로 돌아갑니다.
브라우저 (). Window (). Path ()
테스트 프레임의 현재 페이지의 Window.location.PathName을 반환합니다.
브라우저 (). Window (). 검색 ()
Window.location.search test frame의 현재 페이지의 검색으로 돌아갑니다.
브라우저 (). window (). hash ()
테스트 프레임의 현재 페이지의 window.location.hash ( #포함)를 반환합니다.
브라우저 (). location (). url ()
현재 페이지의 $ location.url ()의 결과를 반환합니다 (http://docs.angularjs.org/api/ng.$location)
브라우저 (). 위치 (). Path ()
현재 페이지 (http://docs.angularjs.org/api/ng.$location)의 $ location.path ()의 결과를 반환합니다.
브라우저 (). location (). 검색 ()
현재 페이지의 $ 위치 결과를 반환하십시오. 검색 () (http://docs.angularjs.org/api/ng.$location)
브라우저 (). 위치 (). hash ()
$ 위치의 결과를 반환하십시오. 현재 페이지의 해시 ()
기대 (미래). {Matcher}
주어진 미래의 값이 매치자를 만족시키는 지 여부를 결정합니다. 모든 API 선언은 실행 된 후 얻은 지정된 값으로 미래 객체를 반환합니다. 매치자는 Angular.scenario.matcher를 사용하여 정의되며 미래의 가치를 사용하여 기대치를 실행합니다. 예를 들어:
예상 (browser () .location () .href ()) .toequal ( 'http://www.google.com');
expling (future) .not (). {matcher}
주어진 미래의 값이 지정된 매치 업체의 예상 기대치와 반대되는지 여부를 결정합니다.
사용 (선택기, 레이블)
다음 DSL 요소 선택을 범위로 만듭니다. (아마도 선택기의 범위를 제한하고 레이블 추정치는 출력 테스트에 사용됩니다)
예:
사용 ( '#foo', " 'foo'text field"). 입력 ( 'bar')
바인딩 (이름)
지정된 이름과 일치하는 첫 번째 바인딩 (아마도 ng-bind와 관련)을 반환합니다.
입력 (이름) .Enter (값)
지정된 값을 지정된 양식 필드에 입력하십시오.
입력 (이름) .check ()
지정된 이름의 확인란을 선택하거나 선택 취소하십시오.
입력 (이름) .Select (값)
지정된 이름의 무선 중간 값으로 입력 [type =”radio”]을 선택하십시오.
입력 (이름) .Val ()
지정된 이름의 입력의 현재 값을 반환합니다.
리피터 (선택기, 레이블) .count ()
지정된 선택기 (jQuery selector)와 일치하는 리피터의 행 수를 반환합니다. 레이블은 테스트 출력으로 만 사용됩니다.
리피터 ( '#products table', 'product list'). count () // 행 수
리피터 (선택기, 레이블) .ROW (색인)
배열을 반환하여 지정된 인덱스와 일치하는 리피터에 지정된 행을 바인딩합니다. 레이블은 출력 테스트에만 사용됩니다.
리피터 ( '#products table', 'products list'). row (1) // 배열로 행의 모든 바인딩
리피터 (선택기, 레이블) .column (바인딩)
지정된 선택기 (jQuery selector)와 일치하는 지정된 바인딩과 일치하는 리피터의 열 값으로 배열을 반환합니다. 레이블은 출력 테스트에만 사용됩니다.
Repeater ( '#products table', 'product list'). 열 ( 'product.name') // 배열의 모든 행에서 모든 값
선택 (이름) .option (value)
지정된 이름의 선택에서 값을 지정하려면 옵션을 선택하십시오.
선택 (이름) .option (value1, value2)
지정된 이름의 선택에서 지정된 값의 옵션 (객관식)을 선택하십시오.
요소 (selector, label) .count ()
지정된 선택기와 일치하는 요소 수를 반환합니다. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (selector, label) .click ()
지정된 선택기와 일치하는 요소를 클릭하십시오. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (선택기, 레이블) .Query (FN)
지정된 FN (selectedElements, done)을 실행하고 selectedElement는 지정된 선택기와 일치하는 요소 세트입니다. FN이 실행 된 후에 실행될 함수입니다. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (selector, label). {method} ()
지정된 선택기와 일치하는 요소에서 메소드를 실행하는 반환 값을 반환합니다. 이 방법은 Val, Text, HTML, 높이, 내부, 외부, 너비, 내폭, 외부, 위치, 스크롤 링프, 스크롤 탑, 오프셋 일 수 있습니다. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (selector, label). {method} (값)
지정된 선택기와 일치하는 요소에서 지정된 메소드를 실행하고 키와 값을 매개 변수로 사용하십시오. 이 방법은 Val, Text, HTML, 높이, 내부, 외부, 너비, 내폭, 외부, 위치, 스크롤 링프, 스크롤 탑, 오프셋 일 수 있습니다. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (selector, label). {method} (키)
지정된 선택기와 일치하는 요소에서 지정된 메소드를 실행 한 결과를 반환합니다. 이러한 방법은 다음과 같은 jQuery 방법이 될 수 있습니다 : att, prop, css. 레이블은 테스트 출력으로 만 사용됩니다.
요소 (selector, label). {method} (키, 값)
지정된 선택기와 일치하는 요소에서 메소드를 실행하고 키와 값을 매개 변수로 취하십시오. 이러한 방법은 다음과 같은 jQuery 방법이 될 수 있습니다 : att, prop, css. 레이블은 테스트 출력으로 만 사용됩니다.
JavaScript는 강력한 표현을 제공하는 동적으로 입력 한 언어이지만 컴파일러의 도움을 거의 제공하지 않습니다. 따라서 JavaScript로 작성된 모든 코드에는 많은 포괄적 인 테스트가 필요하다고 생각합니다. Angular에는 응용 프로그램을보다 쉽게 테스트 할 수있는 많은 기능이 있습니다. 따라서 우리는 테스트를 작성하지 않는 변명이 없습니다. (-_- !!)
위의 것은 AngularJS E2E 테스트에 대한 정보 모음입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!