어린이를 조롱하는 구성 요소 - 각도 2

어린이를 조롱하는 구성 요소 - 각도 2

테스트할 때 어린이 구성 요소를 어떻게 조롱합니까?부모 구성 요소가 있습니다.product-selected템플릿은 다음과 같습니다.

<section id="selected-container" class="container-fluid">
    <hr/>
  <product-settings></product-settings>
  <product-editor></product-editor>
  <product-options></product-options>
</section>

구성 요소 선언은 다음과 같습니다.

import { Component, Input }               from '@angular/core'; 

import { ProductSettingsComponent } from '../settings/product-settings.component';                                      
import { ProductEditorComponent }   from '../editor/product-editor.component';                                      
import { ProductOptionsComponent }  from '../options/product-options.component';                                        

@Component({
    selector: 'product-selected',
    templateUrl: './product-selected.component.html',
    styleUrls: ['./product-selected.component.scss']
})
export class ProductSelectedComponent {}

이 구성 요소는 실제로 다른 구성 요소가 살 수 있는 공간일 뿐이며 다른 기능은 포함하지 않을 것입니다.

그러나 테스트를 설정하면 세 구성 요소 모두에 대해 다음과 같은 템플릿 오류가 발생합니다.

Error: Template parse errors:
    'product-editor' is not a known element:
    1. If 'product-editor' is an Angular component, then verify that it is part of this module.
    2. If 'product-editor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        <hr/>
      <product-settings></product-settings>
      [ERROR ->]<product-editor></product-editor>

저는 조롱당한 버전의 어린이 구성 요소를 로드하려고 했지만 어떻게 해야 할지 모르겠습니다. 제가 본 예는 부모 구성 요소를 무시하고 어린이 구성 요소에 대해서도 언급하지 않았습니다.그럼 어떻게 해야 할까요?

조심해요.NO_ERRORS_SCHEMA. 같은 문서의 다른 부분을 인용해 보겠습니다.

NO_ERRORS_SCHEMA를 사용한 얕은 구성 요소 테스트는 복잡한 템플릿의 단위 테스트를 크게 간소화합니다.그러나 컴파일러는 더 이상 사용자에게 철자가 잘못되었거나 잘못 사용된 구성요소 및 지시사항과 같은 오류를 알려주지 않습니다.

저는 그 단점이 시험을 작성하는 목적과는 정반대라고 생각합니다.그래서 기본적인 구성 요소를 조롱하는 것이 그렇게 어렵지 않습니다.

여기서 아직 언급하지 않은 접근 방식은 단순히 구성 시점에 이를 선언하는 것입니다.

@Component({
  selector: 'product-settings',
  template: '<p>Mock Product Settings Component</p>'
})
class MockProductSettingsComponent {}

@Component({
  selector: 'product-editor',
  template: '<p>Mock Product Editor Component</p>'
})
class MockProductEditorComponent {}

...  // third one

beforeEach(() => {
  TestBed.configureTestingModule({
      declarations: [
        ProductSelectedComponent,
        MockProductSettingsComponent,
        MockProductEditorComponent,
        // ... third one
      ],
      providers: [/* your providers */]
  });
  // ... carry on
});

구성 요소를 리팩터하면 오류가 발생하는 거의 완벽한 솔루션을 찾았습니다. https://www.npmjs.com/package/ng-mocks

npm install ng-mocks --save-dev

이제 .spec.s에서 할 수 있습니다.

import { MockComponent } from 'ng-mocks';
import { ChildComponent } from './child.component.ts';
// ...
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [FormsModule, ReactiveFormsModule, RouterTestingModule],
    declarations: [
      ComponentUnderTest,
      MockComponent(ChildComponent), // <- here is the thing
      // ...
    ],
  });
});

그러면 같은 선택기를 가진 익명의 새 구성요소가 만들어집니다.@Input()그리고.@Output()의 속성ChildComponent, 코드가 첨부되지 않았습니다.

예를 들어, 당신의ChildComponent가 있습니다.@Input() childValue: number, 시험 중인 구성요소에 결합되어 있는 것입니다.<app-child-component [childValue]="inputValue" />

조롱을 당했지만 사용할 수 있습니다.By.directive(ChildComponent)당신의 시험에서 또한By.css('app-child-component')이와 같이

it('sets the right value on the child component', ()=> {
  component.inputValue=5;
  fixture.detectChanges();
  const element = fixture.debugElement.query(By.directive(ChildComponent));
  expect(element).toBeTruthy();

  const child: ChildComponent = element.componentInstance;
  expect(child.childValue).toBe(5);
});

일반적으로 테스트하려는 구성 요소의 보기 내에 사용되는 구성 요소가 있는데 해당 구성 요소가 고유한 종속성을 가지고 있을 수 있기 때문에 해당 구성 요소를 선언하고 싶지 않은 경우 "알 수 없는 요소" 오류를 방지하기 위해 사용해야 합니다.NO_ERRORS_SCHEMA.

import { NO_ERRORS_SCHEMA }          from '@angular/core';

TestBed.configureTestingModule({
        declarations: declarations,
        providers: providers
        schemas:      [ NO_ERRORS_SCHEMA ]
  })

문서 기준:

NO_ERROS_SCHEMA를 테스트 모듈의 스키마 메타데이터에 추가하여 컴파일러가 인식할 수 없는 요소와 속성을 무시하도록 합니다.더 이상 관련성 없는 구성 요소와 지시 사항을 선언할 필요가 없습니다.

자세한 내용 : https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

하루 이틀 이것 때문에 힘들어하면서 답을 올릴 수 있도록 이 질문을 올렸습니다.다음은 다음과 같습니다.

let declarations = [
  ProductSelectedComponent,
  ProductSettingsComponent,
  ProductEditorComponent,
  ProductOptionsComponent
];

beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: declarations,
            providers: providers
        })
        .overrideComponent(ProductSettingsComponent, {
            set: {
                selector: 'product-settings',
                template: `<h6>Product Settings</h6>`
            }
        })
        .overrideComponent(ProductEditorComponent, {
            set: {
                selector: 'product-editor',
                template: `<h6>Product Editor</h6>`
            }
        })
        .overrideComponent(ProductOptionsComponent, {
            set: {
                selector: 'product-options',
                template: `<h6>Product Options</h6>`
            }
        });

        fixture = TestBed.createComponent(ProductSelectedComponent);
        cmp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('section'));
        el = de.nativeElement;
    });

당신은 쇠사슬을 묶어야 합니다.overrideComponent각 하위 구성요소에 대한 기능.

언급URL : https://stackoverflow.com/questions/41240163/mocking-child-components-angular-2