vue-test-utils 窗口滚动

Question

需要一些关于如何使用 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')
  })
})

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

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

谢谢， 研发

Answer 1

您正在div#topB 包装器上触发scroll 事件，但事件侦听器位于window 上。 Mocha 和 Jest 使用的 JSDom 不支持通过 window.scrollTo/window.scroll 滚动 window 的普通 JavaScript 方法，但假设您使用 attachToDocument 挂载测试实例，您仍然可以手动调度 @987654333 @事件与：

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

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

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

see GitHub repro 1

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

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

see GitHub repro 2