![](/img/trans.png)
[英]How do I update state object when an event is emitted from an outside component using ngrx with Angular 6?
[英]Angular Integration test: testing a function that is called when event from other component is emitted, how do I mock the event data?
在我的組件AI中,有一個功能可以根據從組件B發出的數據來更新視圖。我不想集成組件B並進行實際操作,即使此測試太復雜了。
我只想調用該函數並將數據傳遞給該函數。 問題是,將數據作為“事件”發送到組件A中的函數似乎不起作用:
it('should update the video with the data from the edit component', () => {
let event;
event.title = 'New Title';
event.description = 'New Description';
event.link = 'New Link';
event.videoCategory = 'New Category';
event.categories = '2';
event.a14Only = 0;
component.updateVideoCard(event);
fixture.detectChanges();
expect(component.videoTitle).toBe('New Title');
expect(component.videoLink).toBe('New Link');
expect(component.videoDescription).toBe('New Description');
expect(component.videoCategory).toBe('New Category');
expect(component.categoryID).toBe('2');
expect(component.a14Only).toBe('0');
expect(component.editDisabled).toBeTruthy();
});
並且該事件最終顯示為“未定義”。 我也嘗試過使它成為一個名為'event'的javascript對象,該對象內部具有鍵-值對,但也沒有產生任何運氣。
component.updateEvent(data)代碼:
updateVideoCard(event) {
this.videoTitle = event.title;
this.videoDescription = event.description;
this.videoLink = event.link;
this.videoCategory = event.category;
this.categoryID = event.categories;
if (event.a14Only === 1) {
this.a14Only = true;
} else {
this.a14Only = false;
}
this.enableEditor = false;
this.notification.done(`${this.videoTitle} updated successfully.`);
}
我已經看過DebugElement.triggerEvent,但是不幸的是文檔已經過時,而且我自己沒有辦法確定如何做到這一點。 無論如何,它似乎也需要集成第二個組件。
我最終集成了這兩個組件,並使用來自第二個組件的標准JSON對象觸發了它,如下所示:
describe('VideoCardComponent', () => {
let component: VideoCardComponent;
let fixture: ComponentFixture<VideoCardComponent>;
let fixture2: ComponentFixture<EditVideoComponent>;
let component2: EditVideoComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MatCardModule,
MatButtonModule,
BrowserAnimationsModule,
FontAwesomeModule,
BrowserModule,
FlexLayoutModule,
RouterTestingModule,
ReactiveFormsModule,
FormsModule,
MatSelectModule,
MatOptionModule,
MatInputModule,
MatSlideToggleModule
],
declarations: [VideoCardComponent, SafepipePipe, EditVideoComponent],
providers: [
{ provide: RestService, useClass: RestStub },
{ provide: NotificationService, useClass: NotificationStub }
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents()
.then(() => {
fixture2 = TestBed.createComponent(EditVideoComponent);
fixture = TestBed.createComponent(VideoCardComponent);
component = fixture.componentInstance;
component2 = fixture2.componentInstance;
fixture2.detectChanges();
fixture.detectChanges();
});
}));
您可以看到我剛剛將其命名為component2和Fixture2,並在相同的1個測試床上添加了兩者的依賴關系。
我可能會給它們命名更相關的名稱,而不是component和component2。
固定測試:
it('should update the video with the data from the edit component', () => {
const data = [
{
title: 'New Title',
description: 'New Description',
link: 'New Link',
category: 'New Category',
categories: '2',
a14Only: 0
}
];
component2.updateVideoCard.subscribe(newVideo => {
component.updateVideoCard(newVideo);
expect(component.videoTitle).toBe('New Title');
expect(component.videoLink).toBe('New Link');
expect(component.videoDescription).toBe('New Description');
expect(component.videoCategory).toBe('New Category');
expect(component.categoryID).toBe('2');
expect(component.a14Only).toBeFalsy();
expect(component.editDisabled).toBeFalsy();
});
component2.updateLocalVideoData(data);
fixture2.detectChanges();
fixture.detectChanges();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.