I have an aurelia class which looks like this:
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)
})
}
}
I want add a component test for this class where I trigger #fetch()
and control the server response in my test, essentially mock the http backend. My tests looks like this:
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()
})
})
})
This does not work because aurelia-fetch-client performs an actual HTTP request and there is no backend running. How do I mock the HttpClient in a way that I have control over the response?
Note: #waitFor()
is a function that I derived from here, I created a gist with it here. I have created a pull request for my version of the #waitFor()
. When it gets accepted the gist becomes irrelevant.
Aucun commentaire:
Enregistrer un commentaire