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挂载测试实例，你仍然可以手动调度一个scroll事件：

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事件处理程序将在滚动时调用;并通过直接运行scroll事件处理程序(wrapper.vm.topBResize()(进行测试，然后检查预期结果。您可以在运行处理程序之前设置window.pageYOffset：

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

请参阅 GitHub 重现 2