@Input() के साथ Angular2 यूनिट टेस्ट




typescript unit-testing (3)

आपके परीक्षण के भीतर लोड होने के बाद आपको घटक उदाहरण पर 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

मुझे एक घटक मिला है जो एक उदाहरण चर पर @Input() एनोटेशन का उपयोग करता है और मैं openProductPage() विधि के लिए अपनी इकाई परीक्षण लिखने की कोशिश कर रहा हूं, लेकिन मैं अपनी इकाई परीक्षण कैसे सेट करता हूं, मैं थोड़ा खो गया हूं। मैं उस उदाहरण को सार्वजनिक कर सकता था , लेकिन मुझे नहीं लगता कि मुझे इसका सहारा लेना चाहिए।

मैं अपना जैस्मीन परीक्षण कैसे सेट कर सकता हूं ताकि एक 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}]);
    }
}

मैं आमतौर पर कुछ ऐसा करता हूं:

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 वर्ग पर कोई अन्य फ़ील्ड इस दृष्टिकोण के साथ निजी हो सकता है (जो मुख्य कारण है कि मैं इसे थियरी के दृष्टिकोण से अधिक पसंद करता हूं, इस तथ्य के बावजूद कि यह थोड़ा अधिक क्रिया है)।


यह आधिकारिक प्रलेखन https://angular.io/docs/ts/latest/guide/testing.html#!#component-fixture । इसलिए आप नई इनपुट ऑब्जेक्ट अपेक्षितहेरो बना सकते हैं और इसे कंपोनेंट कंपेरो = अपेक्षितहेरो को पास कर सकते हैं

इसके अलावा सुनिश्चित करें कि fixture.detectChanges(); को कॉल करें 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
});






angular-test