Шут, ожидалось, что фиктивная функция была вызвана, но она не была вызвана - PullRequest
0 голосов
/ 11 февраля 2019

Тестирование методов жизненного цикла, когда компонент VueJS рендерится в группе переходов.

Я писал тесты для методов жизненного цикла, когда компонент рендерится в группе переходов следующего компонента VueJS. Я добился небольшого прогрессаполучить его на работу и был бы признателен за совет по этому поводу.Я также попытался переключиться между мелким монтажом и монтажом компонента, хотя это, казалось, не имело значения.

import { shallowMount } from '@vue/test-utils';
import StaggeredTransition from '../src/index';

const staggeredTransitionWrapper = componentData => 
    shallowMount(StaggeredTransition, {
      ...componentData,
});

const staggeredTransition = staggeredTransitionWrapper();

describe('StaggeredTransition.vue', () => {
  it('should render a staggered transition component', () => {
    expect(staggeredTransition.element.tagName).toBe('SPAN');

    expect(staggeredTransition.html()).toMatchSnapshot();
  });

  it('should mock calling the enter method', () => {
    const enterMock = jest.fn();

    StaggeredTransition.methods.enter = enterMock;

    const staggeredTransitionWrapper2 = componentData => 
    shallowMount(StaggeredTransition, { ...componentData });

    const staggeredTransition2 = staggeredTransitionWrapper2({
       slots: {
       default: '<h1 :key="1">Staggered transition test</h1>',
      },
    });

    expect(enterMock).toBeCalled();
  });
});

Код для компонента StaggeredTransition

  <template>
    <transition-group
      :tag="tag"
      :name="'staggered-' + type"
      :css="false"
      appear
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <slot />
   </transition-group>
</template>

<script>
const { log } = console;

export default {
  name: 'StaggeredTransition',

  props: {
    type: {
      type: String,
      options: ['fade', 'slide'],
      required: false,
      default: 'fade',
    },

    tag: {
      type: String,
      required: false,
      default: 'div',
    },

    delay: {
      type: Number,
      required: false,
      default: 100,
    },
  },

  methods: {
    beforeEnter(el) {
      console.log('beforeEnter');
      el.classList.add(`staggered-${this.type}-item`);
    },

    enter(el, done) {
      console.log('enter');

      setTimeout(() => {
        el.classList.add(`staggered-${this.type}-item--visible`);
        done();
      }, this.getCalculatedDelay(el));
    },

    leave(el, done) {
      console.log('leave');

      setTimeout(() => {
        el.classList.remove(`staggered-${this.type}-item--visible`);
        done();
      }, this.getCalculatedDelay(el));
    },

    getCalculatedDelay(el) {
      console.log('getCalculatedDelay');

      if (typeof el.dataset.index === 'undefined') {
        log(
          'data-index attribute is not set. Please set it in order to 
make the staggered transition working.',
        );
      }

      return el.dataset.index * this.delay;
    },
  },
};
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...