0

需要一些关于如何使用 vue-test-utils 测试窗口滚动事件的建议下面是我的 js

export default {
  created () {
      window.addEventListener('scroll', this.bannerResize);
  },
  methods: {
    topBResize () {
      var header = document.getElementById('topB');
      var pos1 = header.offsetTop;
      var pageYOffset = window.pageYOffset;
      if (pageYOffset > pos1) {
        header.classList.add('sticky');
      } else {
        header.classList.remove('sticky');
      }
    }
  }
}

下面是我使用 vue-test-utils 进行的单元测试

import {expect} from 'chai';
import {createLocalVue, shallow} from 'vue-test-utils'

const localVue = createLocalVue()
localVue.use(VueRouter)
localVue.use(Vuex)

const wrapper = shallow(Banner, {
  localVue,
  router,
  attachToDocument: true
})

describe('topB.vue', () => {
  it('topB resize', () => {
    wrapper.setData({ bsize: true })
    const dBanner = wrapper.find('#topB')
    wrapper.trigger('scroll')
    const pageYOffset = 500;
    const pos1 = 200;
    expect(dBanner.classes()).contains('sticky')
  })
})

当您检查是否添加了粘性类时，测试失败。

我如何测试这种方法？我想看看窗口垂直滚动时添加的粘性类

谢谢，研发

4

1 回答 1

2

您在包装器上触发了一个scroll事件，但事件侦听器是 on 。Mocha 和 Jest 使用的 JSDom 不支持通过/滚动的普通 JavaScript 方法，但假设您使用 挂载测试实例，您仍然可以手动调度事件：div#topBwindowwindowwindow.scrollTowindow.scrollattachToDocumentscroll

window.dispatchEvent(new CustomEvent('scroll', { detail: 2000 }))

您的事件处理程序必须解析该值的事件详细信息并回退到window.pageYOffset.

// var pageYOffset = window.pageYOffset;
var pageYOffset = !Number.isNaN(e.detail) ? e.detail : window.pageYOffset;

见 GitHub 重现 1

或者，您可以假设scroll滚动时会调用 -event 处理程序；并通过直接运行scroll-event 处理程序 ( wrapper.vm.topBResize()) 进行测试，然后检查预期结果。您可以window.pageYOffset在运行处理程序之前设置：

window.pageYOffset = 1000;
wrapper.vm.topBResize();
expect(dBanner.classes()).contains('sticky');
wrapper.pageYOffset = 0;

见 GitHub 重现 2

于 2018-09-10T22:10:02.010 回答