Aurelia注入模擬依賴關係

我有這個aurelia組件用於向用戶顯示一個提要，該提要取決於用於提取提要的稱爲Api的自定義API服務類。 Api類有一個get（）函數，它依次使用HttpClient獲取數據。Aurelia注入模擬依賴關係

試圖測試組件我想模擬服務類，特別是get函數，以返回合適的測試數據，並通過aurelia的DI容器將此模擬注入到組件中。 DI部分我遇到了麻煩。

這裏是組件的js文件

import {bindable, inject} from 'aurelia-framework'; 
 
import {Api} from 'services/api'; 
 

 
@inject(Api) 
 
export class Feed { 
 
    events = null; 
 

 
    constructor(api) { 
 
    console.info('feed.js constructor, api:', api) 
 
    this.api = api; 
 
    }

相關的部分從我的測試相關的代碼

beforeEach(done => { 
 
    ... 
 
    let mockApi = new Api(); 
 
    spyOn(mockApi, 'get').and.returnValue(mockGetResponse); 
 

 
    const customConfig = (aurelia) => { 
 
     let conf = aurelia.use.standardConfiguration().instance("Api", mockApi); 
 
     console.info('Registering Api:', conf.container.get("Api")); 
 
     return conf; 
 
    } 
 

 
    const ct = new ComponentTester(); 
 
    ct.configure = customConfig; 
 

 
    sut = ct.withResources('activityfeed/feed'); 
 
    sut.inView('<feed username.bind="username"></feed>') 
 
     .boundTo({username: TEST_USER}); 
 

 
    sut.create(bootstrap).then(() => { 
 
     done(); 
 
    }); 
 
    });

就我所知，這段代碼實際上按照我的意圖工作。創建組件時，我調用了customConfig函數，並將mockApi實例記錄到控制檯。

但是，在引導程序後期，組件構造函數仍然接收實際的Api服務類的實例，而不是我註冊到容器的模擬實例。

花了最後幾個小時試圖挖掘任何文檔或例如做這樣的事情沒有成功，所以如果任何人都可以協助，我將不勝感激。

或者如果有/有其他方法可以完成這項工作，那麼也可以。

來源

2016-08-22 Eggert Jóhannesson

當測試是由兩部分組成視圖和視圖模型的標準組件，使用aurelia-testing包，我發現一個更清潔的方法可能是讓Aurelia路上同時創建視圖和視圖模型，並對所有視圖模型依賴關係使用模擬類。

export class MockApi { 
    response = undefined; 

    get() { return Promise.resolve(this.response) } 
} 

describe("the feed component",() => { 
    let component; 
    let api = new MockApi(); 

    beforeEach(() => { 
    api.response = null; 

    component = StageComponent 
     .withResources("feed/feed") 
     .inView("<feed></feed>"); 

    component.bootstrap(aurelia => { 
     aurelia.use 
     .standardConfiguration(); 

     aurelia.container.registerInstance(Api, api); 
    }); 
    }); 

    it("should work", done => { 
    api.response = "My response"; 

    component.create(bootstrap).then(() => { 
     const element = document.querySelector("#selector"); 
     expect(element.innerHTML).toBe("My response, or something"); 

     done(); 
    }); 
    }); 
});

該方法允許您使用普通視圖模型類驗證呈現的HTML，嘲笑依賴關係以控制測試數據。

來源

2017-01-11 18:19:40 martin

感謝您的回答。在完善後，我得到了幾乎相同的代碼，這裏使用'aurelia.use.standardConfiguration（）。instance（Api，mockApi）;'而不是'aurelia.container.registerInstance（Api，api）; ' 哪AFAICT做同樣的事情。知道是否有任何區別？ –

查看類FrameworkConfiguration的源代碼，實例調用Container.registerInstance，因此沒有區別。兩者都記錄在API手冊中。 – martin

只是爲了回答我自己的問題，至少部分地回答，如果它對某人有用。

通過使用實際的Api類構造函數作爲鍵而不是字符串「Api」，模擬似乎被正確注入。

I.e.

import {Api} from 'services/api'; 
 

 
... 
 

 
     let conf = aurelia.use.standardConfiguration().instance(Api, mockApi);

來源

2016-08-22 16:16:16

Aurelia注入模擬依賴關係

回答

相關問題