角茉莉 - 未定義

我的分量代碼不能設置屬性：角茉莉 - 未定義

public save() { 
    this.gridService.gridCellUpdated = false; 
}

我的茉莉代碼

class GridServiceMock { 
    public gridCellUpdated = false; 
} 
let gridService: GridService; 
beforeEach(
    async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ModalComponent, BsModalDirective], 
     providers: [{ provide: GridService, use: GridServiceMock }] 
    }) 
    .compileComponents(); 
    }); 
); 

it('should save assets',() => { 
    gridService = fixture.debugElement.injector.get(GridService); 
    component.save(); 
    expect(gridService.gridCellUpdated).toBeFalsy(); 
});

我的錯誤：

TypeError: Cannot set property 'gridCellUpdated' of undefined

編輯：通過以下更新了代碼低於解決方案，但仍然得到相同的錯誤。

來源

2017-10-10 Ish

downvote的原因是什麼？ – Ish

我不確定，但我不同意他們，所以我會** null **它出來... – Mihailo

你試過把它注入你的測試？ 'inject（[GridService]，（gridService：GridService）'？ – Mihailo

我不知道爲什麼你使用provide和useClass這裏提供這項服務。這通常是在你自己創建一個自定義/輕量級服務實現時完成的（例如，當你將Angular的Router和ActivatedRoute注入爲你的控制器的依賴項時）。

對於當前的場景，您只需要引用已創建的服務的注入依賴關係。

所以，你可以簡單地使用providers陣列將其提供給您的測試模塊，像這樣：

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    declarations: [ ModalComponent ], 
    providers: [ GridService ] 
    }) 
    .compileComponents(); 
}));

然後你就可以使用fixture.debugElement.injector.get(GridService);獲取到GridService參考和測試save方法是這樣：

describe('save',() => { 

    it('should set gridCellUpdated on GridService to false',() => { 

    let gridService = fixture.debugElement.injector.get(GridService); 
    expect(gridService.gridCellUpdated).toBeTruthy(); 

    component.save(); 

    expect(gridService.gridCellUpdated).toBeFalsy(); 

    }); 

});

更新如果仍然必須使用provide方式提供您的服務，請使用useClass而不是use。例如：

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    declarations: [ ModalComponent ], 
    providers: [ { provide: GridService, useClass: GridServiceMock } ] 
    }) 
    .compileComponents(); 
}));

並按照所述方法編寫測試。它應該工作。

UPDATE 這裏是整個測試文件，僅供參考：

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
 

 
import { GridService } from './../../services/grid.service'; 
 
import { ModalComponent } from './modal.component'; 
 

 
class GridServiceMock { 
 
    public gridCellUpdated = false; 
 
} 
 

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

 
    beforeEach(async(() => { 
 
    TestBed.configureTestingModule({ 
 
     declarations: [ ModalComponent ], 
 
     providers: [ { provide: GridService, useClass: GridServiceMock } ] 
 
    }) 
 
    .compileComponents(); 
 
    })); 
 

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

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

 
    describe('save',() => { 
 

 
    it('should set gridCellUpdated on GridService to false',() => { 
 

 
     let gridService = fixture.debugElement.injector.get(GridService); 
 
     expect(gridService.gridCellUpdated).toBeTruthy(); 
 

 
     component.save(); 
 

 
     expect(gridService.gridCellUpdated).toBeFalsy(); 
 

 
    }); 
 

 
    }); 
 

 
});

而且測試都通過：

希望幫助！

來源

2017-10-11 09:22:16

。 – Ish

在你的問題中，你指的是你的服務通過你的控制器（'component.gridService.gridCellUpdated'）。你有更新嗎？你應該再次檢查。可能還有東西丟失。 –

請檢查我的新代碼，我更新了以下解決方案： – Ish

as @Vega在他的評論中提到：該服務不是組件的屬性。它將被注入。

你的測試模塊的設置是正確的，你可以從這樣的測試平臺獲得服務：

let gridService: GridService; 
let fixture: ComponentFixture<ModalComponent>; 
let component: ModalComponent; 

TestBed.configureTestingModule({...}); 

TestBed.compileComponents().then(() => { 
    fixture = TestBed.createComponent(ModalComponent); 
    component = fixture.debugElement.componentInstance; 
    gridService= fixture.debugElement.injector.get(GridService); 
});

它會得到和gridservice作爲GridServiceMock的一個實例。你的測試現在應該會成功。

問候

來源

2017-10-11 08:47:16 Daniomi

與你說的一樣，但是我得到的錯誤是 – Ish

角茉莉 - 未定義

回答

相關問題