lundi 3 février 2020

Testing scrolling in Vue JS

I'm trying to write a test to test whether a variable is true or false based or the scroll position. This is the function that's being tested and is triggered on window.addEventListener("scroll", this.onScroll); on mount.

onScroll() {
      this.currentScrollPosition =
        window.pageYOffset || document.documentElement.scrollTop;
      if (this.currentScrollPosition < 0) {
        return;
      }
      if (Math.abs(this.currentScrollPosition - this.lastScrollPosition) < 60) {
        return;
      }
      this.showTablebar = this.currentScrollPosition < this.lastScrollPosition;
      if (this.showTablebar && this.lastScrollPosition > 60) {
        this.top = 0;
      }
      if (document.documentElement.scrollTop < 60) {
        this.top = "unset";
      }
      this.lastScrollPosition = this.currentScrollPosition;
}

and this is my test:

describe("Banner", () => {
  test("Show table should be true on first load", () => {
    const wrapper = factory();
    expect(wrapper.vm.showTablebar).toEqual(true);
  });
  test("Show table should be false if currentScrollPosition is greater then lastScrollPosition", () => {
    const wrapper = factory();
    wrapper.setData({ currentScrollPosition: 300 });
    window.pageYOffset = 200;
    wrapper.vm.onScroll();
    expect(wrapper.vm.showTablebar).toEqual(false);
    wrapper.pageYOffset = 0;
  });
  test("Show table should be true if currentScrollPosition is less then lastScrollPosition", () => {
    const wrapper = factory();
    wrapper.setData({ currentScrollPosition: 100 });
    window.pageYOffset = 300;
    wrapper.vm.onScroll();
    expect(wrapper.vm.showTablebar).toEqual(true);
    wrapper.pageYOffset = 0;
  });
});

The first test passes, the second test also passes but third test fails equalling false when it should be true.

Aucun commentaire:

Enregistrer un commentaire