vant/test/unit/specs/tabs.spec.js

import Tabs from 'packages/tabs';
import { mount } from 'avoriaz';
import TabsTestComponent from '../components/tabs';
import MoreTabsTestComponent from '../components/more-tabs';

describe('Tabs', () => {
  let wrapper;

  afterEach(() => {
    wrapper && wrapper.destroy();
  });

  it('create a empty card tabs', () => {
    wrapper = mount(Tabs, {
      propsData: {
        type: 'card'
      }
    });

    expect(wrapper.hasClass('van-tabs')).to.be.true;
    expect(wrapper.hasClass('van-tabs--card')).to.be.true;
  });

  it('create a tabs with four tab', (done) => {
    wrapper = mount(TabsTestComponent);

    expect(wrapper.hasClass('van-tabs')).to.be.true;
    expect(wrapper.hasClass('van-tabs--line')).to.be.true;

    const tabsContainer = wrapper.find('.van-tabs')[0];
    expect(tabsContainer.vNode.child.curActive).to.equal(0);

    wrapper.vm.active = 1;
    wrapper.update();
    wrapper.vm.$nextTick(() => {
      expect(tabsContainer.vNode.child.curActive).to.equal(1);
      done();
    });
  });

  it('listen click event', (done) => {
    wrapper = mount(TabsTestComponent, {
      attachToDocument: true
    });

    const clickSpy = sinon.spy();
    wrapper.vm.$on('click', clickSpy);

    wrapper.vm.$nextTick(() => {
      const nTab = wrapper.find('.van-tab')[0];
      nTab.trigger('click');
      expect(clickSpy.calledOnce).to.be.true;
      done();
    });
  });

  it('listen click disable event', (done) => {
    wrapper = mount(TabsTestComponent, {
      attachToDocument: true
    });

    const clickDisabledSpy = sinon.spy();
    wrapper.vm.$on('disabled', clickDisabledSpy);

    wrapper.vm.$nextTick(() => {
      const nTab = wrapper.find('.van-tab')[2];
      nTab.trigger('click');
      expect(clickDisabledSpy.calledOnce).to.be.true;
      done();
    });
  });

  it('check animation duration', () => {
    wrapper = mount(TabsTestComponent);

    expect(wrapper.style.transitionDuration != '').to.be.true;
  });

  it('create a tabs greater then 4', (done) => {
    wrapper = mount(MoreTabsTestComponent, {
      attachToDocument: true
    });
 
    wrapper.vm.$nextTick(() => {
      const nTab = wrapper.find('.van-tab')[4];
      nTab.trigger('click');
      done();
    });
  });

  it('create a tabs greater then 4 then click last tab', (done) => {
    wrapper = mount(MoreTabsTestComponent, {
      attachToDocument: true,
      propsData: {
        active: 7
      }
    });
 
    wrapper.vm.$nextTick(() => {
      const nTab = wrapper.find('.van-tab')[6];
      nTab.trigger('click');
      done();
    });
  });

  it('test swipe', (done) => {
    wrapper = mount(MoreTabsTestComponent, {
      attachToDocument: true
    });

    setTimeout(() => {
      const nSwipe = wrapper.find('.van-tabs__swipe')[0];

      const eventMouseObject = new window.Event('mousedown');
      eventMouseObject.pageX = 200;
      nSwipe.element.dispatchEvent(eventMouseObject);

      const eventTouchObject = new window.Event('touchstart');
      eventTouchObject.changedTouches = [{ pageX: 200 }];
      nSwipe.element.dispatchEvent(eventTouchObject);
    }, 500);

    setTimeout(() => {
      const nSwipe = wrapper.find('.van-tabs__swipe')[0];

      const eventMouseMoveObject = new window.Event('mousemove');
      eventMouseMoveObject.pageX = 0;
      document.dispatchEvent(eventMouseMoveObject);

      const eventObject = new window.Event('touchmove');
      eventObject.changedTouches = [{ pageX: 0 }];
      nSwipe.element.dispatchEvent(eventObject);

      // 结束滑动
      const eventMouseUpObject = new window.Event('mouseup');
      document.dispatchEvent(eventMouseUpObject);
      const eventEndObject = new window.Event('touchend');
      eventEndObject.changedTouches = [{}];
      nSwipe.element.dispatchEvent(eventEndObject);
    }, 1000);

    setTimeout(() => {
      const nItem = wrapper.find('.van-tab')[0];
      expect(nItem.hasClass('van-tab--active')).to.be.true;

      done();
    }, 1200);
  });

  it('watch tab props changes', (done) => {
    wrapper = mount(TabsTestComponent);
    wrapper.vm.firstTabTitle = '测试标题';
    wrapper.vm.firstTabDisabled = true;

    wrapper.vm.$nextTick(() => {
      expect(wrapper.find('.van-tab')[0].text().replace(/\n|\s/g, '')).to.equal('测试标题');
      done();
    });
  });
});