mercredi 26 avril 2017

Mocking HttpClient for component testing an aurelia class

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