vue-test-utils窗口滚动

Question

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

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')
  })
})

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

如何测试此方法？我希望看到粘性类添加时，窗口滚动垂直

谢谢，RD

Answer 1

您在div#topB包装器上触发了一个scroll事件，但事件侦听器在window上。Mocha和Jest使用的JSDom不支持通过window.scrollTo/window.scroll滚动window的普通JavaScript方法，但假设您使用attachToDocument挂载测试实例，您仍然可以使用以下命令手动分派scroll事件：

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