@Input()을 사용한 각도2 단위 테스트

@Input()을 사용한 각도2 단위 테스트

제가 부품을 가지고 있어요.@Input()인스턴스 변수에 대한 주석과 나는 내 단위 테스트를 작성하려고 합니다.openProductPage()방법이 있습니다만, 유닛 테스트를 어떻게 설정해야 할지 좀 막막합니다.저는 그 사례를 공개할 수는 있겠지만, 굳이 그것에 의존할 필요는 없다고 생각합니다.

모의 제품을 주입(제공)하고 테스트할 수 있도록 재스민 테스트를 어떻게 설정합니까?openProductPage()방법?

내 구성요소:

import {Component, Input} from "angular2/core";
import {Router} from "angular2/router";

import {Product} from "../models/Product";

@Component({
    selector: "product-thumbnail",
    templateUrl: "app/components/product-thumbnail/product-thumbnail.html"
})

export class ProductThumbnail {
    @Input() private product: Product;


    constructor(private router: Router) {
    }

    public openProductPage() {
        let id: string = this.product.id;
        this.router.navigate([“ProductPage”, {id: id}]);
    }
}

이것은 공식 문서 https://angular.io/docs/ts/latest/guide/testing.html#!#component-fixture 에서 가져온 것입니다.새 입력 개체를 생성할 수 있습니다.영웅이 되어 부품 컴포지트에 전달합니다.hero = 예상되는 hero

전화도 꼭 해주시기 바랍니다.fixture.detectChanges();마지막으로, 그렇지 않으면 속성이 구성 요소에 바인딩되지 않습니다.

작업 예시

// async beforeEach
beforeEach( async(() => {
    TestBed.configureTestingModule({
        declarations: [ DashboardHeroComponent ],
    })
    .compileComponents(); // compile template and css
}));

// synchronous beforeEach
beforeEach(() => {
    fixture = TestBed.createComponent(DashboardHeroComponent);
    comp    = fixture.componentInstance;
    heroEl  = fixture.debugElement.query(By.css('.hero')); // find hero element

    // pretend that it was wired to something that supplied a hero
    expectedHero = new Hero(42, 'Test Name');
    comp.hero = expectedHero;
    fixture.detectChanges(); // trigger initial data binding
});

사용하는 경우TestBed.configureTestingModule테스트 구성 요소를 컴파일하기 위해 다른 방법이 있습니다.기본적으로 허용된 답변과 동일하지만, angular-cli가 사양을 생성하는 방법과 더 유사할 수 있습니다.FWIW.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';

describe('ProductThumbnail', () => {
  let component: ProductThumbnail;
  let fixture: ComponentFixture<TestComponentWrapper>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ 
        TestComponentWrapper,
        ProductThumbnail
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    .compileComponents();

    fixture = TestBed.createComponent(TestComponentWrapper);
    component = fixture.debugElement.children[0].componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

@Component({
  selector: 'test-component-wrapper',
  template: '<product-thumbnail [product]="product"></product-thumbnail>'
})
class TestComponentWrapper {
  product = new Product()
}

당신은 당신이 설정할 필요가 있습니다.product구성 요소 인스턴스가 테스트 내에 로드된 후 값을 입력합니다.

샘플은 사용 사례의 기초로 사용할 수 있는 입력 내의 간단한 구성요소입니다.

@Component({
  selector: 'dropdown',
  directives: [NgClass],
  template: `
    <div [ngClass]="{open: open}">
    </div>
  `,
})
export class DropdownComponent {
  @Input('open') open: boolean = false;

  ngOnChanges() {
    console.log(this.open);
  }
}

그리고 그에 상응하는 테스트:

it('should open', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
  return tcb.createAsync(DropdownComponent)
  .then(fixture => {
    let el = fixture.nativeElement;
    let comp: DropdownComponent = fixture.componentInstance;

    expect(el.className).toEqual('');

    // Update the input
    comp.open = true; // <-----------

    // Apply
    fixture.detectChanges(); // <-----------

    var div = fixture.nativeElement.querySelector('div');
    // Test elements that depend on the input
    expect(div.className).toEqual('open');
  });
}));

이 플렁크를 샘플로 보십시오: https://plnkr.co/edit/YAVD4s?p=preview .

저는 보통 다음과 같은 일을 합니다.

describe('ProductThumbnail', ()=> {
  it('should work',
    injectAsync([ TestComponentBuilder ], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TestCmpWrapper).then(rootCmp => {
        let cmpInstance: ProductThumbnail =  
               <ProductThumbnail>rootCmp.debugElement.children[ 0 ].componentInstance;

        expect(cmpInstance.openProductPage()).toBe(/* whatever */)
      });
  }));
}

@Component({
 selector  : 'test-cmp',
 template  : '<product-thumbnail [product]="mockProduct"></product-thumbnail>',
 directives: [ ProductThumbnail ]
})
class TestCmpWrapper { 
    mockProduct = new Product(); //mock your input 
}

참고:product그 밖의 분야는ProductThumbnail수업은 이 접근법으로 비공개가 가능합니다.(이것이 제가 티에리의 접근법보다 더 자세한 것임에도 불구하고 선호하는 주된 이유입니다.)

언급URL : https://stackoverflow.com/questions/36654834/angular2-unit-test-with-input