spectator
1.0.0
각도 테스트를 단순화하는 강력한 도구
Spectator는 모든 보일러 플레이트 grunt 작업을 제거하여 읽을 수 있고 매끄럽고 간소화 된 단위 테스트를 남길 수 있습니다.
✅ 각도 구성 요소, 지침 및 서비스 테스트 지원
hasy 쉬운 dom 쿼리
Keyboard 키보드/마우스/터치 이벤트를 트리거하기위한 API를 청소하십시오
ng-content 테스트
Custom Custom Jasmine/Jest 매칭 (Tohaveclass, Tobedisabled.)
✅ 라우팅 테스트 지원
HTTP 테스트 지원
✅ 입력 구성 요소에 대한 내장 지원
component 제공자를위한 내장 지원
✅ 자동 모형 제공자
∎ 강력하게 입력했습니다
✅ 농담 지원
후원은 Ngneat 라이브러리의 지속적인 개발 및 유지 보수를 지원합니다. 회사에 비즈니스 및 응용 프로그램 개발의 핵심으로 Ngneat를 후원하도록 요청하십시오.
금 스폰서가되어 지원을 높이고 상위 5 개 저장소의 ReadMe에 로고를 두드러지게 표시하십시오.
골드 스폰서가되어 후원을 늘리고 README의 상위 3 개 저장소에서 눈에 띄게 전시 된 로고로 스포트라이트를 즐기십시오.
청동 스폰서가되어 Github의 Readme에 로고를 받으십시오.
특징
목차
설치
NPM
방사
테스트 구성 요소
중첩 된 연기 가능한 전망
문자열 선택기
유형 선택기
DOM 선택기
선택 요소를 테스트합니다
조롱 구성 요소
단일 구성 요소/지침 각도 모듈 테스트
맞춤형 이벤트
이벤트 제작자
이벤트 API
키보드 헬퍼
마우스 도우미
쿼리
연기 가능한 견해
호스트로 테스트
사용자 정의 호스트 구성 요소
라우팅으로 테스트
내비게이션 트리거
RouterTestingModule 과 통합 테스트
라우팅 옵션
테스트 지시문
테스트 서비스
추가 옵션
테스트 파이프
사용자 정의 호스트 구성 요소 사용
조롱 제공자
Oninit 의존성 조롱
조롱 생성자 종속성
농담 지원
HTTP로 테스트
글로벌 주사
구성 요소 제공자
맞춤형 매치 자
도식
기본 회로도 컬렉션
작업중인 관중 및 JEST 샘플 리포 및 카르마 비교
핵심 팀
기고자
npm install @ngneat/spectator --save-dev
yarn add @ngneat/spectator --dev
createComponentFactory() 함수를 사용하여 테스트하려는 구성 요소 클래스를 전달하여 구성 요소 공장을 만듭니다. createComponentFactory() 각 it 블록에서 새로운 구성 요소를 생성하는 함수를 반환합니다.
'@ngneat/spectator'에서 {spectator, createcomponentfactory}; import {buttoncomponent} from './button.component ';describe('buttoncomponent', () => {
관중 : Spectator <buttoncomponent>;
const createComponent = createComponentFactory (buttonComponent);
prevereach (() => spectator = createComponent ());
( '기본적으로 성공 클래스가 있어야한다', () => {epcist (spectator.query ( 'button')). ToHaveClass ( 'success');
});
'[classname] 입력에 따라 클래스 이름을 설정해야합니다', () => {spectator.setinput ( 'classname', 'danger'); excling (spectator.query ( 'button')). ToHaveClass ( ' Danger '); excling (spectator.query ('button ')).
});}); createComponentFactory 함수는 기본 각도 테스트 모듈 옵션을 확장하는 다음 옵션을 선택적으로 취할 수 있습니다.
const createcomponent = createComponentFactory ({
구성 요소 : ButtonComponent,
가져 오기 : [],
제공자 : [],
선언 : [],
EntpertComponents : [],
ComponentProviders : [], // 구성 요소의 공급자를 무시합니다
ComponentViewProviders : [], // 구성 요소의보기 공급자를 재정의합니다
ResidentEmodules : [], // Modules를 재정의합니다
ResponseComponents : [], // 독립형 구성 요소 테스트시 구성 요소 오버라이드 구성 요소
과도한 방향 : [], // 독립형 지침 테스트시 지시서 오버라이드 지시문
OverridePipes : [], // 독립형 파이프 테스트시 파이프 오버라이드 파이프
모의 : [], // 자동으로 조롱 할 공급자
ComponentMocks : [], // 자동으로 조롱 할 구성 요소 제공 업체
ComponentViewProvidersMocks : [], // 구성 요소보기 제공 업체가 자동으로 조롱됩니다.
DetectChanges : false, // 기본값은 true입니다
declarecomponent : false, // 기본값은 true입니다
비활성화 : 거짓, // 기본값은 true입니다
얕은 : true, // default to false
DEFERBLOCKBEHAVIOR : DEFERBLOCKBEHAVIOR // DEFERBLOCKBEHAVIOR.PLAYTHROUGH}); createComponent() 함수는 선택적으로 다음 옵션을 취합니다.
it ( '해야 ...', () => {
Spectator = createComponent ({// 구성 요소 입력 스프러스 : {title : 'click'}, // 구성 요소의 제공자를 재정의 //`createComponentFactory`providers에서 한 번 선언해야한다는 점에 유의하십시오. [], // 변경 사항을 실행 해야하는지 여부 (기본값으로 참조) DetectChanges : False
});
expling (spectator.query ( 'button')). toHavetext ( 'click');}); createComponent() 함수의 범위에서 overrideComponents 옵션을 제공하여 독립형 구성 요소를 재정의하는 방법을 정의 할 수 있으며 종속성입니다.
@요소({
선택기 :`app-standalone-with-Import`,
템플릿 :`<div id = "standalone"> 가져 오기가있는 독립형 구성 요소! </div> <app-standalone-with-dependency> </app-standalone-with-dependency>`,
가져 오기 : [standalOnecomponentwithDependency],
독립형 : true,}) 내보내기 클래스 독립형 이시적 인 Component {} @component ({
선택기 :`app-standalone with-dependency`,
템플릿 :`<div id = "독립형 의존성"> 종속성이있는 독립형 구성 요소! </div >`,
독립형 : true,}) 내보내기 클래스 standalonecomponentwithdependency {
생성자 (공개 쿼리 : QueryService) {}}@component ({
선택기 :`app-standalone with-dependency`,
템플릿 :`<div id = "standalonewithdependency"> 오버라이드 종속성이있는 독립형 구성 요소! </div >`,
독립형 : true,}) 내보내기 클래스 mockstandalonecomponentwithdependency {
생성자 () {}} it ( 'whist ...', () => {
const spectator = createhostFactory ({구성 요소 : standalonewithimportscomponent, 템플릿 :`<div> <app-standalone-with-import> </app-standalone-with-import> </div >`, ResponseComponents : [[Standalonewithimportscomponent, {remove {imports : [standalOnecomponentwithDependency]}, 추가 : {imports : [mockstandalOnecomponentwithDependency]},},],],],
});
expling (host.query ( '#standalone')). tocontaintext ( 'import!');
excling (host.query ( '#standalonewithdependency')). tocontaintext ( '오버라이드 종속성을 가진 독립형 구성 요소!');}); createComponent() 메소드는 다음 API를 노출시키는 Spectator 의 인스턴스를 반환합니다.
fixture - 테스트 된 구성 요소의 고정물
component - 테스트 된 구성 요소의 인스턴스
element - 테스트 된 구성 요소의 기본 요소
debugElement - 테스트 된 고정 장치의 디버그 요소
flushEffects() - TestBed.flushEffects() 에 래퍼를 제공합니다.
inject() - TestBed.inject() 에 래퍼를 제공합니다.
const service = spectator.inject (QueryService); const fromComponentInjector = true; const service = spectator.inject (QueryService, fromComponentInjector);
detectChanges() - 테스트 된 요소/호스트에서 DetectChanges를 실행합니다.
Spectator.detectChanges ();
detectComponentChanges() - 테스트 된 구성 요소 ( host 가 아님)에서 detectChanges 실행합니다. host 사용할 때 드문 경우 에이 방법이 필요하며 테스트 된 구성 요소는 onPush 일 것이므로 변경 감지주기를 실행하도록 강요하려고합니다.
Spectator.detectComponentChanges ();
setInput() - 테스트 된 구성 요소의 @Input () 값을 변경합니다. 메소드는 ngOnChanges 존재하면 수동으로 SimpleChanges 상태로 실행됩니다.
it ( '해야 ...', () => {
Spectator.setInput ( 'className', 'Danger');
Spectator.setInput ({className : '위험'
});}); output - 테스트 된 구성 요소의 관찰 가능한 @output ()을 반환합니다.
( '클릭에 $ 이벤트를 방출해야합니다', () => {
출력하자;
spectator.output ( 'click'). 구독 (result => (output = result));
spectator.component.onclick ({type : 'click'});
expling (output) .toequal ({type : 'click'});}); tick(millis?: number) - fakeasync tick() 함수를 실행하고 detectChanges() 호출합니다.
( '진드기로 작동해야합니다', fakeasync (() => {
Spectator = CreateComponent (zippycomponent);
spectator.component.update ();
excaper (spectator.component.updatedasync) .tobefalsy ();
Spectator.tick (6000);
excling (spectator.component.updatedasync) .not.tobefalsy ();})))) 각 이벤트는 다음 중 하나 일 수있는 SpectatorElement 을 수락 할 수 있습니다.
SpectatorElement = String |를 입력하십시오 요소 | 디버거 멘트 | ElementRef | 창 | 문서 | Domselector;
제공되지 않으면 기본 요소는 테스트중인 구성 요소의 호스트 요소입니다.
click() - 클릭 이벤트를 트리거합니다.
spectator.click (spectatorelement); spectator.click (bytext ( 'element'));
blur() - 블러 이벤트를 트리거합니다.
spectator.blur (spectatorelement); spectator.blur (bytext ( 'element'));
Jest 프레임 워크를 사용하는 경우 Blur ()는 요소가 집중된 경우에만 작동합니다. 세부.
focus() - 포커스 이벤트를 트리거합니다.
Spectator.focus (SpectatorElement); Spectator.focus (ByText ( 'element'));
typeInElement() - 사용자 입력 시뮬레이션 :
Spectator.typeinlement (값, 스펙터 rement); Spectator.TypeinElement (값, 바이트 텍스트 ( 'element'));
dispatchMouseEvent() - 마우스 이벤트를 트리거합니다.
Spectator.dispatchMouseevent (SpectatorElement, 'MouseOut'); Spectator.DispatchMouseevent (SpectatorElement, 'MouseOut'), X, Y, Event); Spectator.DisPatchMouseevent (ByText ( 'Element'), 'MouseOut'); Spectator.dispatchMouseevent (Bytetext ( '요소'), '마우스 아웃', x, y, 이벤트);
dispatchKeyboardEvent() - 키보드 이벤트를 트리거합니다.
Spectator.dispatchKeyboardEvent (SpectatorElement, 'keyUp', 'Escape'); Spectator.DispatchKeyboardEvent (SpectatorElement, 'keyup', {key : 'exca : 27}) spectator.dispatchKeyboardEvent ('element '),'keyup ','Escape '); Spectator.dispatchKeyboardEvent (ByText ('element '),'keyup ', {key :'Escape ', KeyCode : 27}) dispatchTouchEvent() - 터치 이벤트를 트리거합니다.
spectator.dispatchtouchevent (spectatorelement, type, x, y); spectator.dispatchtouchevent (bytext ( 'element'), type, x, y);
다음 방법을 사용하여 사용자 정의 이벤트 (@output ())를 트리거 할 수 있습니다.
Spectator.triggereventhandler (MyChildComponent, 'MyCustomevent', 'EventValue'); Spectator.triggereventhandler (MyChildComponent, 'MyCustomevent', 'EventValue', {root : true}); True.triggereventhandler ( 'App-Chand-Component', MyCustomental ','eventValue '); spectator.triggereventhandler ('app-Child-component ','mycustomevent ','eventvalue ', {root : true});모든 템플릿 (예 : 발표자 서비스)과 독립적으로 이벤트를 테스트하려는 경우 기본 이벤트 제작자를 중단 할 수 있습니다. 그들은 기본적으로 앞의 요소없이 동일한 서명을 제공합니다.
const keyboardevent = createKeyboardEvent ( 'keyup', 'Arrowdown'/, targetElement */); const Mouseevent = createmouseevent ( 'mouseout'); const touchevent = createTouchevent ( 'touchmove'); const gakeevent = createFakeEvent ( 'Input');
Spectator.keyboard.pressenter (); Spectator.keyboard.pressescape (); Spectator.keyboard.pressab (); Spectator.keyboard.pressbackspace (); Spectator.keyboard.presskey ( 'A'); Spectator.keyboard.keyboard.keyboard ( ' ctrl.a '); spectator.keyboard.presskey ('ctrl.shift.a ');spectator.mouse.contextMenu ( '. selector'); spectator.mouse.dblClick ( '. selector');
위의 방법 각각은 detectChanges() 실행합니다.
Spectator API에는 query , queryAll , queryLast , queryHost 및 queryHostAll 과 같은 테스트의 일부로 DOM을 쿼리하는 편리한 방법이 포함되어 있습니다. 모든 쿼리 방법은 다형성이며 다음 기술 중 하나를 사용하여 쿼리 할 수 있습니다.
문자열 선택기 (jQuery 또는 docum 이 쿼리 방법은 Angular 's By.css Precticate와 같습니다. 기본 HTML 요소가 반환됩니다. 예를 들어:
// 단일 htmlelementspectator.query ( 'div> ul.nav li : first-Child')를 반환합니다. // 일치하는 모든 일치하는 htmlelementsspectator.queryall ( 'div> ul.nav li')의 배열을 반환합니다. // 쿼리 문서 contexpectator.query ( 'div', {root : true}); spectator.query ( 'app-child', {read : childserviceservice}); DOM의 해당 유형의 인스턴스에 대해 유형 (구성 요소, 지침 또는 공급자 클래스 등)을 쿼리로 전달하십시오. 이것은 By.directive 에 의해 동일합니다. 일치하는 요소의 인젝터에서 특정 주입 토큰을 읽기 위해 두 번째 매개 변수를 선택적으로 전달할 수 있습니다. 예를 들어:
// myComponent (현재) spectator.query (myComponent)의 단일 인스턴스를 반환합니다. // dom (현재) spectator.query에 존재하는 'myComponent'의 인스턴스에서 발견 된 'someservice'의 인스턴스를 반환합니다. , {read : someservice}); Spectator.query (MyComponent, {read : elementRef}); host.QueryLast (childComponent); host.queryall (childcomponent);Spectator를 사용하면 Dom-testing-library에서 영감을 얻은 선택기를 사용하여 요소를 쿼리 할 수 있습니다. 사용 가능한 선택기는 다음과 같습니다.
Spectator.query (byplaceholder ( '이메일 주소를 입력하십시오'); Spectator.query (by value ( 'by value')); Spectator.query (Bytitle ( 'title')); Spectator.query (ByAltText ( 'by alt text ')); spectator.query (bylabel ('label ')); spectator.query (bytext ('text ')); spectator.query (bytext ('text ', {selector :'#some. selector '})); spectator.query (bytextContent ('text content ', {selector :'#some .selector '}); spectator.query (byrole ('checkbox ', {checked : true})); byText 와 byTextContent 의 차이점은 전자가 중첩 요소 내부의 텍스트와 일치하지 않는다는 것입니다.
예를 들어, 다음 html byText('foobar', {selector: 'div'}) 에서 다음 div 와 일치하지 않지만 byTextContent 다음과 같습니다.
<div> <span> foo </span> <span> bar </span> </div>
Spectator를 사용하면 부모 요소 내의 중첩 요소를 쿼리 할 수 있습니다. 이것은 페이지에 동일한 구성 요소의 여러 인스턴스가 있고 특정 아이의 어린이를 쿼리하려는 경우 유용합니다. 상위 선택기는 부모 요소를 찾는 데 사용되는 문자열 선택기입니다. 상위 선택기는 쿼리 메소드의 두 번째 매개 변수로 전달됩니다. 예를 들어:
Spectator.query (ChildComponent, {ParentsEctor : '#Parent-Component-1'}); Spectator.QueryAll (ChildComponent, {ParentsEctor : '#Parent-Component-1'}); Spectator를 사용하면 <select></select> 요소를 쉽게 테스트하고 멀티 선택을 지원할 수 있습니다.
예:
It ( 'Multi Select에서 올바른 옵션을 설정해야합니다', () => {
const select = spectator.query ( '#test-multi-select') as htmlSelectElement;
spectator.selectoption (select, [ '1', '2']);
예상 (select) .toHavEselectePtions ([ '1', '2']);}); it ( '표준 select', () => {에서 올바른 옵션을 설정해야합니다.
const select = spectator.query ( '#test-single select') as htmlSelectElement;
spectator.selectoption (select, '1');
예상 (select). 또한 선택한 각 항목에 대해 change 이벤트 핸들러가 올바르게 작동하는지 확인할 수 있습니다. 변경 이벤트를 발송하지 않고 선택을 사전 설정 해야하는 경우이를 비활성화 할 수 있습니다.
API :
spectator.selectOption (selectElement : htmlSelectElement, 옵션 : 문자열 | String [] | htmloptionElement | htmloptionElement [], config : {emitevents : boolean} = {emitevents : true});예:
( '올바른 변경 이벤트 수를 파견해야합니다', () => {
const onchangespy = spyon (spectator.component, 'handlechange');
const select = spectator.query ( '##test-onchange-select') as htmlSelectElement;
spectator.selectoption (select, [ '1', '2'], {emitevents : true});
예상 (select).
excling (onchangespy).
const onchangespy = spyon (spectator.component, 'handlechange');
const select = spectator.query ( '##test-onchange-select') as htmlSelectElement;
spectator.selectOption (select, [ '1', '2'], {emitevents : false});
예상 (select).
기대 (onchangespy) .not.toHaveBeenCalledTimes (2);}); HTMLOptionElement selectOption 및 toHaveSelectedOptions 매칭에 대한 인수로 전달할 수도 있습니다. 이것은 <option> 에서 [ngValue] 바인딩을 사용할 때 특히 유용합니다.
it ( '요소를 전달할 때 단일 선택에서 올바른 옵션을 설정해야합니다', () => {
const select = spectator.query ( '#test-single select-element') as htmlSelectElement;
spectator.selectOption (select, spectator.query (htmloptionElement로서 Bytext ( 'two'));
예상 (select) .toHavEselectOptions (spectator.query (bytext ( 'two')) as htmloptionElement);}); 구성 요소를 조롱 해야하는 경우 NG-Mocks 라이브러리를 사용할 수 있습니다. 몇 가지 문제를 숨길 수 있고 입력, 출력 등을 설정하는 데 도움이되지 않는 CUSTOM_ELEMENTS_SCHEMA 사용하는 대신 ng-mocks 입력, 출력 등을 자동 조롱합니다.
예:
'@ngneat/spectator'에서 {createhostfactory}}; 'ng-mocks'에서 {mockcomponent} import {mockcomponent} import {foocomponent}에서 './path/to/foo.component ';const createhost = createhostFactory ({
구성 요소 : YourComponentTotest,
선언 : [mockcomponent (foocomponent)
]});자체 모듈로 선언 된 구성 요소 (또는 지침)는 구성 요소 공장의 가져 오기 목록에서 구성 요소와 함께 구성 요소와 함께 구성 요소 모듈을 정의하여 테스트 할 수 있습니다. 예를 들어:
const createcomponent = createComponentFactory ({
구성 요소 : ButtonComponent,
가져 오기 : [ButtonComponentModule],}); 그러나 이와 같이 사용될 때 관중은 내부적으로 생성 된 새 모듈의 선언에 구성 요소 ButtonComponent 내부적으로 추가합니다. 따라서 다음 오류가 표시됩니다.
Type ButtonComponent is part of the declarations of 2 modules [...]
Spectator에게 내부 모듈의 선언에 구성 요소를 추가하지 말고 대신 명시 적으로 정의 된 모듈을 그대로 사용하도록 지시 할 수 있습니다. 공장 옵션의 declareComponent 속성을 false 로 설정하기 만하면됩니다.
const createcomponent = createComponentFactory ({
구성 요소 : ButtonComponent,
가져 오기 : [ButtonComponentModule],
선언문 : false,}); CreateBectiveFactory를 사용하는 경우 공장 옵션의 declareDirective 특성을 false 로 설정합니다.
const radeciprection = createCectiveFactory ({
구성 요소 : HighlodComponent,
가져 오기 : [HighlightComponentModule],
declarediprection : false,}); 관중은 연기 가능한 뷰 ( @defer {} )에 액세스하기 위해 편리한 API를 제공합니다.
spectator.deferBlock(optionalIndex) 메소드를 사용하여 원하는 연기 블록에 액세스하십시오. optionalIndex 매개 변수는 선택 사항이며 액세스하려는 연기 블록의 인덱스를 지정할 수 있습니다.
첫 번째 연기 블록 액세스 : 간단히 spectator.deferBlock() 호출하십시오.
후속 연기 블록 액세스 : 해당 색인을 인수로 사용하십시오. 예를 들어, spectator.deferBlock(1) 두 번째 블록 (제로 기반 인덱싱)에 액세스합니다.
spectator.deferBlock(optionalIndex) 은 지정된 연기 블록의 다른 상태를 렌더링하기위한 4 가지 방법을 반환합니다.
renderComplete() - 연기 블록의 완전한 상태를 렌더링합니다.
renderPlaceholder() - 지연 블록의 자리 표시 자 상태를 렌더링합니다.
renderLoading() - 지연 블록의 로딩 상태를 렌더링합니다.
renderError() - 연기 블록의 오차 상태를 렌더링합니다.
예:
@Component ({selector : 'app-cmp', 템플릿 :`@defer (viewport) {<div> 첫 번째 연기 블록의 완전한 상태 </div> <!-부모 완료 상태->} @placeholder { <div> 자리 표시 자 </div>}`,}) 클래스 dummycomponent {} const createComponent = createComponentFactor ({구성 요소 : dummycomponent, deferblockbehavior : deferBlockBehavior.manual,}); > {// constecomponent ()를 정리합니다. 중첩 연기 블록 내에서 상태에 액세스하려면 반환 된 블록 상태 메소드에서 deferBlock 메소드 체인을 호출하십시오.
예 : 중첩 된 완전한 상태 액세스 :
//`spectator.deferblock (0) .rendercomplete () 가정을 가정합니다.` = AWAIT PARIentCompleTestate.renderComplete (). DeferBlock ();
Complete Example :
@Component ({selector : 'app-cmp', 템플릿 :`@defer (viewport) {<div> 첫 번째 연기 블록의 완전한 상태 </div> <!-부모 완료 상태-> @defer {< Div> 중첩 연기 블록의 완전한 상태 </div> <!-중첩 된 완전한 상태->}} @placeholder {<div> 자리 표시 자 </div>}`,}) 클래스 dummycomponent {} createcomponent = createComponentFactory ( {구성 요소 : DummyComponent, DeferBlockBehavior : DeferBlockBehavior.manual,}); It ( '첫 번째 중첩 된 완전 상태를 렌더링해야한다', Async () => {// const spectator = createComponent (); // act // 완전한 state const completestate = spectator.deferblock (). rendercomplete (); 연기 블록 ');});호스트 구성 요소로 구성 요소를 테스트하는 것은 구성 요소를 테스트하는보다 우아하고 강력한 기술입니다. 기본적으로 코드를 작성하는 것과 같은 방식으로 테스트를 작성하는 기능을 제공합니다. 실제로 보자 :
'@ngneat/spectator'에서 {createhostfactory, spectatorhost} import ( 'zippycomponent', () => {묘사
관중 : Spectatorhost <zippycomponent>;
const createhost = createhostfactory (zippycomponent);
( '호스트 속성에서 제목을 표시해야한다', () => {spectator = createhost (`<zippy [title] = "title"> </zippy>`, {hostprops : {title : 'spectator is awesome'} }); excling (spectator.query ( '. zippy__title')). ToHavetext ( 'Spectator is Awesome');
});
It ( 'Open이면 "Close"Word를 표시해야한다', () => {spectator = createhost (`<zippy title = "zippy title"> zippy content </zippy>`); spectator.click ( '. zippy__title' ); excling (spectator.query ( '. Arrow')). toHavetext ( 'close'); excling (spectator.query ( '. Arrow')).
});}); 호스트 메소드는 SpectatorHost 의 인스턴스를 반환하여 다음 추가 API로 Spectator 확장합니다.
hostFixture 호스트의 고정물
hostComponent 호스트의 구성 요소 인스턴스
hostElement - 호스트의 기본 요소
hostDebugElement 호스트의 고정 장치 디버그 요소
setHostInput 호스트 구성 요소의 @Input() 의 값을 변경합니다.
queryHost 관중의 쿼리에 대해 자세히 알아보십시오
queryHostAll 관중의 쿼리에 대해 자세히 알아보십시오
호스트 구성 요소로 테스트 할 때는 setInput 또는 props 사용하여 구성 요소에서 입력을 직접 설정할 수 없습니다. 입력은 대신 hostProps 또는 setHostInput 통해 설정하고 템플릿의 구성 요소로 전달되어야합니다.
때로는 자신의 호스트 구현을 통과하는 것이 도움이됩니다. 사용자 정의 호스트 구성 요소를 createHostFactory() 로 전달하여 기본값을 대체 할 수 있습니다.
@Component ({선택기 : 'Custom-Host', 템플릿 : ''}) 클래스 CustomHostComponent {
title = 'Custom HostComponent';} 설명 ( '사용자 정의 호스트 구성 요소', function () {
관중 : Spectatorhost <zippycomponent, customhostcomponent>;
const createhost = createhostfactory ({구성 요소 : zippycomponent, host : customHostcomponent
});
( '호스트 구성 요소 제목을 표시해야한다', () => {spectator = createhost (`<zippy [title] = "title"> </zippy>`); explice (spectator.query ( '. zippy__title')). .toHavetext ( 'Custom HostComponent');
});}); 라우팅을 사용하는 구성 요소의 경우 기본 공장을 확장 할 수있는 특수 공장이 있으며 추가 라우팅 옵션을 구성 할 수 있도록 스터브 ActivatedRoute 제공합니다.
설명 ( 'ProductDetailScomponent', () => {
관중 : SpectatorRouting <ProductDetailScomponent>;
Const CreateComponent = CreateroutingFactory ({구성 요소 : ProductDetailScomponent, params : {productId : '3'}, data : {title : 'some title'}
});
prevereach (() => spectator = createComponent ());
( '경로 데이터 제목을 표시해야합니다', () => {epction (spectator.query ( '. title')). ToHavetext ( 'some title');
});
( '경로 변경에 반응해야한다', () => {spectator.setrouteparam ( 'productId', '5'); // 여기에서 테스트 ...
});}); SpectatorRouting API에는 현재 경로를 업데이트하는 편리한 방법이 포함되어 있습니다.
인터페이스 spectatorrouting <c> 관중 <c> {
/*** 매개 변수, 쿼리 파람 및 데이터 관찰 가능한 스트림을 업데이트하여 경로 탐색을 시뮬레이션합니다. */
TriggerNavigation (옵션? : RouteOptions) : void;
/*** 경로 매개 변수를 업데이트하고 경로 탐색을 트리거합니다. */
setRouteparam (이름 : 문자열, 값 : 문자열) : void;
/*** 경로 쿼리 매개 변수를 업데이트하고 경로 탐색을 트리거합니다. */
setRoutequeryParam (이름 : 문자열, 값 : 문자열) : void;
/*** 경로 데이터를 업데이트하고 경로 탐색을 트리거합니다. */
setRoutedata (이름 : 문자열, 값 : any) : void;
/*** 경로 조각을 업데이트하고 경로 탐색을 트리거합니다. */
setRouteFragment (조각 : 문자열 | null) : void;
/*** 경로 URL을 업데이트하고 경로 탐색을 트리거합니다. */
setrouteurl (url : urlsegment []) : void;}RouterTestingModule 과 통합 테스트 stubsEnabled 옵션을 false 로 설정하면 실제 라우팅 구성을 전달하고 Angular에서 RouterTestingModule 사용하여 통합 테스트를 설정할 수 있습니다.
이를 위해서는 결의를 약속해야합니다. 이를 다루는 한 가지 방법은 테스트 비동기를 만드는 것입니다.
설명 ( '라우팅 통합 테스트', () => {
const createcomponent = createroutingingfactory ({구성 요소 : myComponent, 선언 : [기타 회사], StubSenabled : False : [{path : '', component : {path : 'foo', component : othercomponent}]
});
it ( '라우터 링크', async () => {const spectator = createcomponent (); // 해결할 약속이 ... Spectator.fixture.Whenstable (); // 현재 경로를 테스트합니다. LocationEppect (spectator.inject (location) .path ()). Tobe ( '/'); // 라우터 linkspectator.click ( '. link-1')을 클릭하십시오. // 대기를 잊지 마십시오. 해결할 약속 ... Spectator.fixture.Whenstable (); // locationExpect (spectator.inject (location ()). tobe ( '/foo')를 주장하여 새 경로를 테스트합니다.
});}); createRoutesFactory 함수는 기본 관중 옵션 위에 다음 옵션을 취할 수 있습니다.
params : ActivatedRoute Stub에서 사용할 초기 매개 변수
queryParams : ActivatedRoute Stub에서 사용할 초기 쿼리 매개 변수
data : ActivatedRoute Stub에서 사용할 초기 데이터
fragment : ActivatedRoute 스터브에서 사용할 초기 조각
url : ActivatedRoute Stub에서 사용할 초기 URL 세그먼트
root : ActivatedRoute 스터브의 root 값
parent : ActivatedRoute Stub의 parent 의 값
children : ActivatedRoute Stub의 children 위한 가치
firstChild : ActivatedRoute 스터브의 firstChild 의 가치
stubsEnabled (기본값 : true ) : ActivatedRoute 스텁을 활성화하고, false 으로 설정하면 대신 RouterTestingModule 사용합니다.
routes : stubsEnabled False로 설정된 경우 RouterTestingModule 에 대한 Routes 구성을 전달할 수 있습니다.
테스트 지침을위한 특별 테스트 공장이 있습니다. 다음과 같은 지침이 있다고 가정 해 봅시다.
@Directive ({셀렉터 : '[하이라이트]'}) 내보내기 클래스 하이라이트 디렉션 {
@hostbinding ( 'style.background-color') BackgroundColor : 문자열;
@hostlistener ( '마우스 오버')
OnHover () {this.backgroundColor = '#000000';
}
@hostlistener ( '마우스 아웃')
onleave () {this.backgroundcolor = '#ffffff';
}}관중으로 지시문을 쉽게 테스트 할 수있는 방법을 살펴 보겠습니다.
설명 ( 'HighlightDirective', () => {
관중 : spectatordipection <Highlightdirection>;
const readirectrive = createBectiveFactory (HighlightDirective);
이전 (() => {spectator = createiprection (<<div 하이라이트> 테스트 하이라이트 지침 </div>`);
});
그것은 ( '배경색을 변경해야한다', () => {spectator.dispatchmouseevent (spectator.element, 'mouseover'); excling (spectator.element) .tohavestyle ({backgroundcolor : 'rgba (0,0,0,0, 0.1 ) '}); spectator.dispatchmouseevent (spectator.element,'mouseout '); explit (spectator.element) .tohavestyle ({backgroundColor :'#fff '});
});
it ( '인스턴스를 가져와야한다', () => {const instance = spectator.directive; expl (instance) .tobedefined ();
});}); setInput 또는 props 사용하여 지시어로 직접 입력을 설정하는 것은 불가능합니다. 입력은 대신 hostProps 또는 setHostInput 통해 설정하고 템플릿의 지시문으로 전달해야합니다.
다음 예는 관중으로 서비스를 테스트하는 방법을 보여줍니다.
'@ngneat/spectator'에서 {createServiceFactory, spectatorService} import {auth.service.ts '; spection ('authservice ', () => {import {authservice}에서}.
Spectator : SpectatorService <Authservice>;
consteService = createServiceFactory (AuthService);
prevereach (() => spectator = createService ());
it ( '로그인해서는 안됩니다', () => {epction (spectator.service.isloggedin ()). tobefalsy ();
});}); createService() 함수는 다음 속성으로 SpectatorService 반환합니다.
service - 서비스 인스턴스를 얻으십시오
inject() - angular TestBed.inject() 의 프록시
옵션이있는 객체를 전달할 수도 있습니다. 예를 들어, 서비스를 테스트 할 때는 테스트중인 서비스에 중점을 두므로 종종 의존성을 조롱하려고합니다.
예를 들어:
@injectable () Export Class Authservice {
생성자 (개인 데이트 서비스 : 날짜 서비스) {}
isloggedin () {if (this.dateservice.isexpired ( 'timestamp')) {return false;} return true;
}} 이 경우 DateService 종속성을 조롱 할 수 있습니다.
'@ngneat/spectator'에서 {createServiceFactory, spectatorService} import {auth.service.ts '; spection ('authservice ', () => {import {authservice}에서}.
Spectator : SpectatorService <Authservice>;
ConsteService = CreateServiceFactory ({Service : Authservice, 제공자 : [], EntrictComponents : [], Mocks : [Dateservice]
});
prevereach (() => spectator = createService ());
It ( '로그인해야한다', () => {const dateservice = spectator.inject (dateservice); dateservice.isexpired.and.returnValue (false); explic (spectator.service.isloggedin ()). tobetruthy ();
});});다음 예는 관중으로 파이프를 테스트하는 방법을 보여줍니다.
'@ngneat/spectator'에서 {spectatorpipe, createPipeFactory}}에서 './stats.service'에서 {import {statsService}}에서 './sum.pipe'; 'ssumpipe', () => {
Spectator : Spectatorpipe <sumpipe>;
Const CreatePipe = CreatePipeFactory (Sumpipe);
it ( '주어진 숫자 목록 (템플릿)', () => {spectator = createPipe ({{{[1, 2, 3] | sum}}}); explic (spectator.element) .toHavetext ( '6');
});
it ( '주어진 숫자 목록 (prop)', () => {spectator = createPipe (`{{{prop | sum}}}, {hostProps : {prop : [1, 2, 3]}}. ); excling (spectator.element) .toHavetext ( '6');
});
( '서비스에 요약을 위임해야한다', () => {const sum = () => 42; const 제공자 = {제공 : statsService, uscevalue : {sum}}; spectator = createPipe (`{{prop | sum}}`, {hostProps : {prop : [2, 40]}, 제공자 : [제공자]}); explit (spectator.element) .toHavetext ('42 ');
});}); createPipe() 함수는 다음 속성으로 SpectatorPipe 반환합니다.
hostComponent - 호스트 구성 요소의 인스턴스
debugElement 호스트 구성 요소 주변의 고정 장치의 디버그 요소
element - 호스트 구성 요소의 기본 요소
detectChanges() - Angular TestBed.fixture.detectChanges() 에 대한 프록시
inject() - angular TestBed.inject() 의 프록시
setInput 또는 props 사용하여 파이프에서 직접 입력을 설정하는 것은 불가능합니다. 입력은 대신 hostProps 또는 setHostInput 통해 설정하고 템플릿의 파이프로 전달되어야합니다.
다음 예제는 사용자 정의 호스트 구성 요소를 사용하여 파이프를 테스트하는 방법을 보여줍니다.
'@angular/core'에서 {component, input}; import {spectatorpipe, createpipefactory} '@ngneat/spectator'에서 {import {averoundpipe}에서 './average.pipe'; import {statservice} from './stats .Service ';@component ({
템플릿 :`<div> {{prop | avg}} </div>`}) 클래스 customHostComponent {
@Input () public prop : number [] = [1, 2, 3];} 설명 ( 'AveragePipe', () => {
Spectator : Spectatorpipe <AveragePipe>;
const createpipe = createPipeFactory ({파이프 : 평균 파이프, 호스트 : CustomHostComponent
});
( '주어진 숫자 목록의 평균을 계산해야한다', () => {spectator = createpipe (); explit (spectator.element) .toHavetext ( '2');
});
숫자 목록이 비어있을 때 0으로 발생해야합니다.
});
( '서비스에 계산을 위임해야한다', () => {const avg = () => 42; const 제공자 = {제공 : statsService, useValue : {avg}}; spectator = createPipe ({제공자 : 제공자 : 제공자 : ]}); 기대 (Spectator.element) .toHavetext ('42 ');
});});모든 관중 공장에 대해, 우리는 모든 공급자를 쉽게 조롱 할 수 있습니다.
우리가 mocks 속성에 전달하는 모든 서비스는 mockProvider() 함수를 사용하여 조롱됩니다. mockProvider() 함수는 각 방법을 Jasmine Spy로 변환합니다. (예 : jasmine.createSpy() ).
다음은 다음과 같이 노출되는 방법입니다.
dateservice.isexpired.and.callthrough (); dateservice.isexpired.and.callfake (() => fake); dateservice.isexpired.and.thowerror ( 'error'); dateservice.isexpired.andcallfake (() => 가짜) ;
그러나 Jest를 테스트 프레임 워크로 사용하고 대신 조롱 메커니즘을 사용하려면 @ngneat/spectator/jest 에서 mockProvider() 가져 오십시오. 이것은 jest.fn() 함수를 자동으로 사용하여 대신 Jest 호환 모의를 만듭니다.
mockProvider() 속성이 포함되어 있지 않습니다. 모의에 속성이 필요한 경우 두 번째 인수를 사용할 수 있습니다.
consteService = createServiceFactory ({
서비스 : Authservice,
제공자 : [MockProvider (OtherService, {Name : 'Martin', Emitter : New Subject (), MockedMethod : () => 'mocked'})
],});구성 요소가 Oninit 라이프 사이클 방법에서 조롱되는 서비스에 의존하는 경우 서비스가 주입 된 후까지 변경 감지를 비활성화해야합니다.
이를 구성하려면 createComponent 메소드를 변경하여 detectChanges 옵션을 False로 설정 한 다음 주입 된 서비스를 설정 한 후 관중에서 detectChanges 수동으로 호출하십시오.
const createcomponent = createComponentFactory ({
구성 요소 : WeatherDashboardComponent}); it ( 'init에서 날씨 API를 호출해야합니다', () => {
const spectator = createcomponent ({detectchanges : false
});
const weatherservice = spectator.inject (weatherdataapi);
weatherservice.getweatherdata.andreturn (of (mockweatherdata));
Spectator.detectChanges ();
기대 (weatherservice.getWeatherData) .toHaveBeenCalled ();});구성 요소가 생성자에 조롱되는 서비스에 의존하는 경우 모의를 작성하고 구성하고 구성 요소를 생성 할 때 모의를 제공해야합니다.
const createcomponent = createComponentFactory ({
구성 요소 : WeatherDashboardComponent}); it ( '생성자의 Weather API를 호출해야합니다', () => {
const weatherservice = createSpyObject (WeatherDataapi);
weatherservice.getweatherdata.andreturn (of (mockweatherdata));
Spectator = CreateComponent ({제공자 : [{제공 : WeatherDataapi, usevalue : weatherservice}]
});
기대 (weatherservice.getWeatherData) .toHaveBeenCalled ();});기본적으로 Spectator는 Jasmine을 사용하여 스파이를 만듭니다. 대신 Jest를 테스트 프레임 워크로 사용하는 경우 관중이 Jest 호환 스파이를 만들 수 있습니다.
@ngneat/spectator/jest ( @ngneat/spectator 대신)에서 다음 기능 중 하나를 가져 오면 Jasmine 대신 Jest를 사용합니다. createComponentFactory() , createHostFactory() , createServiceFactory() , createHttpFactory() , mockProvider() .
'@ngneat/spectator/jest'에서 {createServiceFactory, spectatorService} import './auth.service'; import {dateservice} from './date.service'; describe('AuthService ', (). => {
Spectator : SpectatorService <Authservice>;
consteService = createServiceFactory ({service : authservice, mocks : [dateservice]
});
prevereach (() => spectator = createService ());
It ( '로그인해서는 안됩니다', () => {const dateservice = spectator.inject <dateservice> (dateservice); dateservice.isexpired.mockreturnvalue (true); explic (spectator.service.islogedin ()). );
});
IT ( '로그인해야한다', () => {const dateservice = spectator.inject.inject <dateservice> (dateservice); dateservice.isexpired.mockreturnvalue (false); excment (spectator.service.islogedin ()). tobetruthy (). ;
});}); 구성 요소 회로도를 사용하는 경우 --jest 플래그를 지정하여 JEST 가져 오기를 사용하도록 할 수 있습니다. 기본값을 가져 오려면 angular.json 업데이트합니다.
"회로도": { "@ngneat/spectator : Spectator-Component": { "Jest": true
}
}관중은 각도 HTTP 모듈을 사용하는 테스트 데이터 서비스를 훨씬 쉽게 만듭니다. 예를 들어, 세 가지 방법으로 서비스가 있고, 하나는 Get, 하나는 게시물 및 하나는 동시 요청을 수행한다고 가정 해 봅시다.
수출 클래스 TODOSDATASERVICE {
생성자 (개인 httpclient : httpclient) {}
getTodos () {return this.httpclient.get ( 'api/todos');
}
posttodo (id : number) {return this.httpclient.post ( 'api/todos', {id});
}
collecttodos () {return merge (this.httpclient.get ( '/api1/todos'), this.httpclient.get ( '/api2/todos'));
}}위의 서비스 테스트는 다음과 같습니다.
'@ngneat/spectator'에서 {createhttpfactory, httpmethod} import {todosdataservice}에서 './todos-data.service';describe ('httpclient testing ', () => {
관중 : Spectatorhttp <Todosdataservice>;
const createhttp = createhttpfactory (Todosdataservice);
이전 (() => spectator = createhttp ());
it ( 'httpclient.get', () => {spectator.service.gettodos (). subscribe (); spectator.expectone ( 'api/todos', httpmethod.get);
});
it ( 'httpclient.post', () => {spectator.service.posttodo (1) .subscribe (); const req = spectator.expectone ( 'api/todos', httpmethod.post); report (req. request.body [ 'id']). Toequal (1);
});
IT ( '현재의 http requests', () => {spectator.service.gettodos (). subscribe (); const reqs = spectator.expectConcurrent ([{url : '/api1/todos', 방법 : httpmethod.get. }, {url : '/api2/todos', 메소드 : httpmethod.get}); spectator.flushall (reqs, [{}, {}, {}]);
});}); createHttpFactory() 함수를 사용하여 테스트하려는 서비스를 전달하여 HTTP 공장을 만들어야합니다. createHttpFactory() 다음 속성으로 spectatorhttp의 인스턴스를 얻기 위해 호출 할 수있는 함수를 반환합니다.
controller - 각도 HttpTestingController 의 프록시
httpClient 각도 HttpClient 의 프록시
service - 서비스 인스턴스
inject() - angular TestBed.inject() 의 프록시
expectOne() - 주어진 URL과 메소드와 일치하는 단일 요청이 이루어졌으며 모의 요청을 반환 할 것으로 예상됩니다.
각 테스트에서이를 다시 해제 할 필요없이 각 테스트에 사용할 수있는 주사를 정의 할 수 있습니다.
// testimport {defineglobalsinjections} 'from'@ngneat/spectator '; import {translocomodule}에서'@ngneat/transloco '; defineglobalsinjections ({
가져 오기 : [Tranlocomodule],}); 모듈이로드되기 전에 defineGlobalsInjections() 호출해야합니다. 기본 각도 test.ts 에서 이것은이 줄 앞에서 의미합니다.
context.keys ().지도 (컨텍스트);
기본적으로 원래 구성 요소 제공 업체 (예 : @Component 의 providers )는 촉감되지 않습니다.
그러나 대부분의 경우 테스트에서 구성 요소 제공 업체에 액세스하거나 모의로 교체하려고합니다.
예를 들어:
@요소({
템플릿 : '...',
제공자 : [fooservice]}) 클래스 foocomponent {
생성자 (개인 fooservice : fooservice} {}
// ...} componentProviders 사용하여 FooService 제공 업체를 교체하십시오.
const createcomponent = createComponentFactory ({
구성 요소 : foocomponent,
ComponentProviders : [{제공 : fooservice, usevalue : somethingelse}
]}) 또는 componentMocks 사용하여 서비스를 조롱합니다.
const createcomponent = createComponentFactory ({
구성 요소 : foocomponent,
componentMocks : [fooservice]}); 공급자에 액세스하려면 fromComponentInjector 매개 변수를 사용하여 구성 요소 인젝터에서 가져옵니다.
spectator.inject (fooservice, true)
같은 방식으로 componentViewProviders 및 componentViewProvidersMocks 를 사용하여 컴포넌트보기 제공 업체를 대체 할 수도 있습니다.
동일한 규칙은 directiveProviders 및 directiveMocks 매개 변수를 사용한 지침에도 적용됩니다.
expect ( '. zippy__content'). not.toExist (); explit ( '. zippy__content'). ToHivelength (3); explit ( '. zippy__content'). ToHaveId ( 'id'); excling (spectator.query ( '. zippy ')). TohaveatTribute ('id ','zippy '); excling (spectator.query ('. zippy ')). ToHaveatTribute ({id :'zippy '}); explic (spectator.query ('. Checkbox ') )). ToHaveProperty ( 'Checked', True); expling (spectator.query ( '. img')). TohaveProperty ({src : 'assets/myimg.jpg'}); explic (spectator.query ( '. img'). )). TocontainProperty ({src : 'myimg.jpg'}); // ToHaveClass는 엄격한 순서로 만 클래스를 받아들입니다. 순서가 관련이없는 경우 수동으로 엄격한 모드를 비활성화합니다 .expect ( '. zippy__content'). ToHaveClass ( 'class'); explit ( '. zippy__content'). ToHaveClass ( 'class-a, class-b'); eccess ( '. zippy__content '). ) .not.toHaveClass ([ 'class-B', 'class-A']); excling ( '. zippy__content'). ToHeveClass ( 'class', {strict : false}); explit ( '. zippy__content'). ToHaveClass ( 'class-A, class-B', {strict : false}); expl ( '. zippy__content'). ToHaveClass ( 'class-B, class-A', {strict : false}); explic ( '. zippy__content '). ToHaveClass (['class-b ','class-A '], {strict : false}); 기대 ('. zippy__content '). ToHaveClass (['class-B ','class-A '] , {strict : false}); // toHavetext는 문자열이 정확히 동일하지 않은 것이 아니라 문자열의 존재 만 찾습니다. 문자열이 완전히 동일인지 확인하려면 ToHaveExactText를 사용하십시오 .// 문자열이 완전히 동일하지만 먼저 트림 된지 확인하려면 ToHaveExactTrimMedText.//를 사용하십시오. Spectator는 found.expect ( '. zippy__content')의 인덱스에 대해 각 배열 요소의 텍스트를 확인합니다. ToHavetext ( 'content'); expling ( '. zippy__content'). ToHavetext ([ 'content a', 'content b ']); 기대 ('. zippy__content '). ToHavetext ((text) => text.includes ('.. ')); excles ('. zippy__content '). tocontaintext ('content '); explit ('. zippy__content ') .tocontainText (['content a ','content b ']; excling ('. zippy__content '). ToHaveExActText ('content '); explit ('. zippy__content '). ToHaveExActText (['content a ',' ' Content B ']); excling ('. zippy__content '). ToHaveExActTrimMedText ('content '); expling ('. zippy__content '). toHaveExactTrimMedText (['content a ','content b ']; excling ('. zippy__content '); ) .toHaveValue ( 'value'); expling ( '. zippy__content'). tocontainValue ( 'value'); // 클래스의 여러 요소를 찾아 각 배열 요소의 값을 확인하여 FoundExect의 요소에 대해 각 배열 요소의 값을 확인합니다. ( '.zippy__content'). ToHaveValue ([ 'value a', 'value b']); explit ( '. zippy__content'). tocontainvalue ([ 'value a', 'value b']); explit (spectator.element ) .ToHavestyle ({backgroundColor : 'rgba (0, 0, 0, 0.1)'); explit ( '. zippy__content'). ToHavedata ({data : 'role', val : 'admin'}); explice ( ' .checkbox '). TobeChecked (); expling ('. checkbox '). toBeindErminate (); explice ('. button '). tobedisabled (); expler ('div '); tobeempty (); expling ('div '). .tobeHidden (); expling ( 'element'). tobeselected (); // Jest 내의 제한으로 인해 (Virtual DOM에 실제 레이아웃 로직을 적용하지 않음) 특정 매치자가 잘못된 위치를 초래할 수 있습니다. 예를 들어 너비와 높이는 0expect ( 'element'). tobevisible (); expl ( 'input'). tobefocused (); explit ( 'div'). tobematchedby ( '. js-something'); explat (Spectator. component.object) .tobepartial ({aproperty : 'avalue'}); expling ( 'div'). ToHavedEscendant ( '. child'); expling ( 'div'). ToHavedEscendantwithText ({selector : '.child', text : '텍스트'});각도 CLI가있는 Spectator Spec 템플릿으로 구성 요소, 서비스 및 지시 사항을 생성하십시오. (기본값으로 사용할 때)
요소
기본 사양 : ng g cs dashrized-name
호스트가있는 사양 : ng g cs dashrized-name --withHost=true
사용자 정의 호스트가 포함 된 사양 : ng g cs dashrized-name --withCustomHost=true
서비스:
기본 사양 : ng g ss dashrized-name
HTTP 데이터 서비스 테스트 사양 : ng g ss dashrized-name --isDataService=true
지령:
ng g ds dashrized-name
Angular CLI 프로젝트에서 spectator 기본 컬렉션으로 사용하려면 angular.json 에 추가하십시오.
ng config cli.defaultCollection @ngneat/spectator
spectator 회로도는 기본 @schematics/angular Collection을 확장합니다. SCSS 파일로 구성 요소 생성과 같은 회로도의 기본값을 설정하려면 @schematics/angular 에서 @ngneat/spectator 에서 chematics 패키지 이름을 변경해야합니다 angular.json
"회로도": { "@ngneat/spectator : Spectator-component": { "style": "scss"
}
}Angular Docs Testing Developer Guide의 업장의 예는 관중과 농담에서 재현되었습니다. (편의상 이것은 카르마 예제의 로컬 버전입니다.)
Spectator & Jest 버전은 여기에서 액세스 할 수 있습니다.
네타넬 기초 | Dirk Luijk | 벤 엘리엇 |
이 멋진 사람들에게 감사드립니다 (이모티콘 키) : ~~~~
I. 시나이 ? ? | 발렌타인 버리 아코프 ? | 벤 그린 하우스 ? | 마틴 핵 | Lars Gyrup Brink Nielsen ? | Andrew Grekov ? | Jeroen Zwartepoorte |
올리버 슐레 겔 | 렉스 너 ? | tchmura | Yoeri nijs | 앤더스 스카비 | Gregor Woiwode | Alexander Sheremetev ? |
마이크 | Mehmet erim | Brett Eckert | Ismail Faizi | 맥주 | Jonathan Bonnefoy | 콜럼 페리 |
크리스 쿠퍼 | Marc Scheib | DGSMITH2 | MedwardStech ? | Tamasfoldi ? | Paolo Caleffi | 토니 빌레나 |
itay oded | Guillaume de Jabrun | Anand tiwary | Ales Doganoc | 졸탄 | Vitalii Baziuk | Clementlemarc-certua |
유리 그루 닌 | Andrey Chalkin | 스티븐 해리스 | Richard Sahrakorpi | 도미니 크레머 | Mehmet Ozan Turhan | 블라드 라슈코 |
윌리엄 Tjondrosuharto | Chaz Gatian | Pavel Korobov | Enno Lohmann | Pawel Boguslawski | 토비아스 wittwer | 마테오 티 바키 라 |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
