1

我无法弄清楚如何测试在“已安装”生命周期挂钩中发生的 API 调用。

我有一个文件组件，负责显示有关“所有者”的一些信息。

这完全符合我在浏览器中想要/期望的方式。

<template>
  <div>
    <h3>Owner Information</h3>
    <table class="table table-striped table-condensed">
      <thead>
        <th>Name</th>
        <th>Address</th>
        <th>Social Security Number</th>
        <th>Ownership Percentage</th>
      </thead>
      <tbody>
        <tr :data-owner-id="owner.id" v-for="owner in owners">
          <td>{{ owner.name }}</td>
          <td>{{ owner.address }}</td>
          <td>{{ owner.censored_ssn }}</td>
          <td>{{ owner.ownership_percentage }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        principal_id: '',
        owners: []
      }
    },
    mounted() {
      const el = document.querySelector('#owner-information');
      this.principal_id = el.dataset.principal;

      var self = this;
      axios.get(`/principals/${this.principal_id}.json`).then(response => {
        response.data.owners.map((owner) => {
          owner.score = '';
          owner.link = '';
          owner.last_pull_date = '';
          self.owners.push(owner);
        });
      });
      .catch(e => {
        console.log(e);
      });
    }
  }
</script>

对于测试，我使用的是 Karma、Jasmine 和 Avoriaz。

这是一个失败的测试：

import { mount } from 'avoriaz'
import OwnerInformation from '../../app/javascript/packs/OwnerInformation.vue'

describe('OwnerInformation', () => {
  let component

  beforeAll(() => {
    const element = document.createElement('div')
    element.setAttribute('id', 'owner-information')
    element.setAttribute('data-principal', '84033')
    document.body.appendChild(element)

    component = mount(OwnerInformation)
    component.vm.$mount('#owner-information')
  })

  it('retrieves owner information from the API', () => {
    expect(component.data().owners.length).toBe(1)
  })
})

上面期望 1，但得到 0。

所以现在我认为我需要以某种方式存根/模拟我的 API 请求。快速的 Google 搜索将我带到 moxios。所以我用 Yarn 安装它并最终想出了这个。我不是 100% 确定将 moxios.stubRequest 放在哪里，但尝试将它放在 beforeAll()、beforeEach() 和“它”内。

```

import moxios from moxios
import { mount } from 'avoriaz'
import OwnerInformation from '../../app/javascript/packs/OwnerInformation.vue'

describe('OwnerInformation', () => {
  let component

  beforeAll(() => {
    const element = document.createElement('div')
    element.setAttribute('id', 'owner-information')
    element.setAttribute('data-principal', '12345')
    document.body.appendChild(element)

    component = mount(OwnerInformation)
    component.vm.$mount('#owner-information')
  })

  beforeEach(() => {
    moxios.install()
  })

  afterEach(() => {
    moxios.uninstall()
  })

  it('retrieves owner information from the API', () => {
    moxios.stubRequest('/principals/12345', {
      status: 200,
      response: {
        id: 1, owners: [
          { name: 'Test Owner', address: '123 Test St.', ssn: '123-12-1234', ownership_percentage: 100 
          }
        ]
      }
    })
    expect(component.data().owners.length).toBe(1)
  })

看来该请求实际上并没有被删除。为了进行故障排除，我在 axios.get() 调用（成功注销）之前放置了一个 console.log 语句，并且我还放置了一个 console.log 来注销响应，但是这个从未出现，这让我认为axios 请求不起作用，并且没有被 moxios“拦截”。

...
      console.log('CALLING API...')
      axios.get(`/principals/${this.principal_id}.json`).then(response => {
        console.log('***********************')
...

当我运行测试时，我确实看到了 404，但不确定原因：

01 08 2017 12:49:43.483:WARN [web-server]: 404: /principals/12345.json

对我来说，在 的顶部存根请求是最有意义的beforeAll()，但这也不起作用。

我该如何安排，以便 moxios 存根 API 请求并返回，以便我的测试通过？

4

1 回答 1

3

您需要使用moxios.wait()来等待 moxios 请求完成：

/*** note the "done" argument -- you must call this method within wait()! ***/
it('retrieves owner information from the API', (done) => {
  moxios.stubRequest('/principals/12345', {
    status: 200,
    response: {
      id: 1, owners: [{ name: 'Test', address: '123 Test St.' }]
    }
  })
  moxios.wait(function() {
    expect(component.data().owners.length).toBe(1)
    done()
  })
})
于 2017-08-02T15:33:08.760 回答