Mocking Httpclient für Komponente Testen eines aurelia Klasse

Question

Ich habe eine aurelia Klasse, die wie folgt aussieht:

import {HttpClient} from 'aurelia-fetch-client' 

export class Lobby { 
    constructor() { 
    this.propertyName = 'description' 
    } 

    fetch() { 
    new HttpClient().fetch('/api/package.json') 
     .then(response => response.json()) 
     .then(data => { 
     this.response = data[this.propertyName] || Object.keys(data) 
     }) 
    } 
} 

ich hinzufügen möchte einen Komponententest für diese Klasse, wo ich #fetch() und Kontrolle der Server-Antwort in meinem Test auslösen, im Wesentlichen das http-Backend verspotten. Meine Tests sieht wie folgt aus:

describe('the lobby',() => { 
    let component 
    beforeEach(done => { 
    component = StageComponent.withResources('lobby') 
     .inView('<lobby></lobby>') 
     .boundTo({}) 

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

    component.create(bootstrap).then(() => { 
     window.Promise = Promise 
     done() 
    }) 
    }) 

    it('should fetch a result via HttpClient', (done) => { 
    const inputElement = document.querySelector('input'); 
    const button = document.querySelector('button') 
    const output =() => document.querySelector('pre') 
    expect(inputElement.value).toBe('description') 
    button.click() 

    waitFor(() => output().innerText !== '').then(() => { 
     expect(output().innerText).toBe('foo'); 
     done() 
    }) 
    }) 
}) 

Das funktioniert nicht, weil aurelia-Fetch-Client führt eine aktuelle HTTP-Anforderung und es gibt keine Backend läuft. Wie verspotte ich den HttpClient so, dass ich die Kontrolle über die Antwort habe?

Hinweis: #waitFor() ist eine Funktion, die ich von here abgeleitet habe, ich habe einen Kern damit here erstellt. Ich habe eine pull request für meine Version der #waitFor() erstellt. Wenn es akzeptiert wird, wird das Wesentliche irrelevant.

Answer 1

Sie müssen zur Verwendung von injizierten Diensten wechseln. Ihre aurelia Klasse würde wie folgt aussehen:

import {HttpClient} from 'aurelia-fetch-client' 
import {inject} from 'aurelia-framework' 

@inject(HttpClient) 
export class Lobby { 
    constructor(httpClient) { 
    this.HttpClient = httpClient 
    this.propertyName = 'description' 
    } 

    fetch() { 
    this.HttpClient.fetch('/api/package.json') 
     .then(response => response.json()) 
     .then(data => { 
     this.response = data[this.propertyName] || Object.keys(data) 
     }) 
    } 
} 

Mitteilung über die @inject(HttpClient) anstatt einfach mit der Httpclient importiert. Auf diese Weise können Sie in Ihren Tests einen Mock für den HttpClient eingeben:

import { StageComponent } from 'aurelia-testing' 
import { bootstrap } from 'aurelia-bootstrapper' 
import { HttpClient } from 'aurelia-fetch-client' 

describe('the lobby',() => { 
    let component 
    beforeEach(done => { 
    component = StageComponent.withResources('lobby') 
     .inView('<lobby></lobby>') 
     .boundTo({}) 

    component.bootstrap(aurelia => { 
     aurelia.use.standardConfiguration() 
     aurelia.container.autoRegister(HttpClient, class { 
     fetch(url) { 
      return new Promise((resolve, reject) => { 
      resolve({ 
       json:() => { return { "description": "foo" } } 
      }) 
      }) 
     } 
     }) 
    }) 

    component.create(bootstrap).then(() => { 
     window.Promise = Promise 
     done() 
    }) 
    }) 
})