Angular2 में EventEmitter का परीक्षण करने का कोई तरीका?

Question 1

मेरे पास एक घटक है जो एक EventEmitter का उपयोग करता है और EventEmitter का उपयोग तब किया जाता है जब पृष्ठ पर किसी को क्लिक किया जाता है। क्या कोई तरीका है कि मैं एक इकाई परीक्षण के दौरान EventEmitter का निरीक्षण कर सकता हूं, और TestComponentBuilder का उपयोग करके उस तत्व पर क्लिक कर सकता हूं जो EventEmitter.next () विधि को ट्रिगर करता है और देखें कि क्या भेजा गया था?

Question 2

आपका परीक्षण हो सकता है:

it('should emit on click', () => {
   const fixture = TestBed.createComponent(MyComponent);
   // spy on event emitter
   const component = fixture.componentInstance; 
   spyOn(component.myEventEmitter, 'emit');

   // trigger the click
   const nativeElement = fixture.nativeElement;
   const button = nativeElement.querySelector('button');
   button.dispatchEvent(new Event('click'));

   fixture.detectChanges();

   expect(component.myEventEmitter.emit).toHaveBeenCalledWith('hello');
});

जब आपका घटक है:

@Component({ ... })
class MyComponent {
  @Output myEventEmitter = new EventEmitter<string>();

  buttonClick() {
    this.myEventEmitter.emit('hello');
  }
}

Question 3

आप एक जासूस का उपयोग कर सकते हैं, आपकी शैली पर निर्भर करता है। यहां बताया गया है कि आप जासूसी का इस्तेमाल आसानी से कर सकते हैं कि emitक्या इसे बंद किया जा रहा है ...

it('should emit on click', () => {
    spyOn(component.eventEmitter, 'emit');
    component.buttonClick();
    expect(component.eventEmitter.emit).toHaveBeenCalled();
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
});

Question 4

आप emitter के लिए सदस्यता ले सकते हैं या इसे बाँध सकते हैं, यदि यह एक है @Output(), तो मूल टेम्पलेट में और यदि बंधन अद्यतन किया गया था, तो मूल घटक में जाँच करें। आप एक क्लिक ईवेंट भी भेज सकते हैं और फिर सदस्यता को आग लगनी चाहिए।

Question 5

मुझे उत्सर्जित सरणी की लंबाई का परीक्षण करने की आवश्यकता थी। तो यह है कि मैंने अन्य उत्तरों के शीर्ष पर यह कैसे किया।

expect(component.myEmitter.emit).toHaveBeenCalledWith([anything(), anything()]);

Question 6

हालांकि उच्चतम मतदान जवाब काम करते हैं, वे अच्छे परीक्षण प्रथाओं का प्रदर्शन नहीं कर रहे हैं, इसलिए मैंने सोचा कि मैं गुंटर के उत्तर पर अपने व्यावहारिक उदाहरणों के साथ विस्तार करूंगा ।

आइए कल्पना करें कि हमारे पास निम्नलिखित सरल घटक हैं:

@Component({
  selector: 'my-demo',
  template: `
    <button (click)="buttonClicked()">Click Me!</button>
  `
})
export class DemoComponent {
  @Output() clicked = new EventEmitter<string>();

  constructor() { }

  buttonClicked(): void {
    this.clicked.emit('clicked!');
  }
}

घटक परीक्षण के तहत प्रणाली है, इसके कुछ हिस्सों पर जासूसी करने से इनकैप्सुलेशन टूट जाता है। कोणीय घटक परीक्षणों को केवल तीन चीजों के बारे में जानना चाहिए:

DOM (जैसे के माध्यम से पहुँचा) fixture.nativeElement.querySelector );
के नाम @Inputऔर@Output s के ; तथा
सहयोगात्मक सेवाएँ (DI प्रणाली के माध्यम से इंजेक्शन)।

कुछ भी जिसमें इंस्टेंस पर सीधे तौर पर इनवॉइस करने के तरीके शामिल हैं या कंपोनेंट के कुछ हिस्सों पर जासूसी को लागू करने के लिए बहुत बारीकी से जोड़ा गया है, और रिफैक्टरिंग के लिए घर्षण को जोड़ देगा - परीक्षण डबल्स केवल सहयोगियों के लिए उपयोग किया जाना चाहिए। इस मामले में, जैसा कि हमारे पास कोई सहयोगी नहीं है, हमें किसी भी नकली, जासूस या अन्य परीक्षण डबल्स की आवश्यकता नहीं होनी चाहिए ।

इसका परीक्षण करने का एक तरीका सीधे एमिटर की सदस्यता लेना है, फिर क्लिक एक्शन को लागू करना ( इनपुट्स और आउटपुट के साथ घटक देखें ):

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DemoComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DemoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should emit when clicked', () => {
    let emitted: string;
    component.clicked.subscribe((event: string) => {
      emitted = event;
    });

    fixture.nativeElement.querySelector('button').click();

    expect(emitted).toBe('clicked!');
  });
});

हालांकि यह सीधे घटक उदाहरण के साथ इंटरैक्ट करता है, का नाम है @Output सार्वजनिक एपीआई का हिस्सा है, इसलिए यह बहुत कसकर युग्मित नहीं है।

वैकल्पिक रूप से, आप एक साधारण परीक्षण होस्ट बना सकते हैं (परीक्षण होस्ट के अंदर घटक देखें ) और वास्तव में अपने घटक को माउंट करें:

@Component({
  selector: 'test-host',
  template: `
    <my-demo (clicked)="onClicked($event)"></my-demo>
  `
})
class TestHostComponent {
  lastClick = '';

  onClicked(value: string): void {
    this.lastClick = value;
  }
}

फिर संदर्भ में घटक का परीक्षण करें:

describe('DemoComponent', () => {
  let component: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestHostComponent, DemoComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should emit when clicked', () => {
    fixture.nativeElement.querySelector('button').click();

    expect(component.lastClick).toBe('clicked!');
  });
});

componentInstanceयहाँ है परीक्षण मेजबान है, तो हम विश्वास है कि हम बहुत ज्यादा घटक हम वास्तव में परीक्षण कर रहे हैं के लिए युग्मित नहीं कर रहे हैं हो सकता है।