прокрутка окна vue-test-utils - PullRequest
Новая
       0

прокрутка окна vue-test-utils

0 голосов
/ 10 сентября 2018

Нужен совет о том, как проверить событие прокрутки окна с помощью 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)
const wrapper = shallow(Banner, {
  localVue,
  router,
  attachToDocument: true
})
localVue.use(Vuex)
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

1 Ответ

0 голосов
/ 11 сентября 2018

Вы запускаете событие scroll в оболочке div#topB, но прослушиватель событий включен window. JSDom, используемый Mocha и Jest, не поддерживает обычные JavaScript-методы прокрутки window с помощью window.scrollTo / window.scroll, но при условии, что вы подключаете экземпляр теста с помощью 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 repro 1

В качестве альтернативы вы можете предположить, что обработчик события scroll будет вызываться при прокрутке; и протестируйте, запустив обработчик scroll -event (wrapper.vm.topBResize()) напрямую, а затем проверив ожидаемый результат. Вы можете установить window.pageYOffset перед запуском обработчика: 

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

см. GitHub repro 2

...