gistfile1.js

import _ from 'lodash';
import { shallowMount } from '@vue/test-utils';

import PreorderDeadlineStep from '@/components/sell/steps/PreorderDeadlineStep.vue';
import WizardStep from '@/store/sell/wizardStep';

describe('PreorderDeadlineStep.vue', () => {
  global._ = _;

  let defaultWizardStepData;

  beforeEach(() => {
    global.Application = class {
      constructor() {
        this.isMobile = false;
      }
    };

    defaultWizardStepData = {
      id: 'preorderdeadlinestep',
      values: {
        preorder_deadline: '',
      },
      dictionaries: {},
      state: {
        isActual: true,
        isCurrent: true,
        isFinished: false,
        isFuture: false,
        isPast: false,
        isRequired: true,
        isSkipped: false,
      },
    };
  });

  // ———————————————————————————————————————————————————————————————————————————
  it('При монтировании компонента данные отображаются корректно', () => {
    const wrapper = shallowMount(PreorderDeadlineStep, {
      propsData: {
        step: new WizardStep(defaultWizardStepData),
      },
    });

    expect(wrapper.find('h3.lot-master__subsection-unstarted-heading').text()).toContain('Дата окончания предзаказа');
    expect(wrapper.find('h3.lot-master__subsection-heading').text()).toContain('Дата окончания предзаказа');

    expect(wrapper.findAll('date-picker-stub').length).toBe(1);

    const button = wrapper.findAll('.btn.btn--primary.lot-master__subsection-btn');
    expect(button.length).toBe(1);
    expect(button.at(0).text()).toBe('Продолжить');
  });

  // ———————————————————————————————————————————————————————————————————————————
  it('Строка статуса корректно вычисляется', () => {
    defaultWizardStepData.values.preorder_deadline = '2019-03-14';

    const wrapper = shallowMount(PreorderDeadlineStep, {
      propsData: {
        step: new WizardStep(defaultWizardStepData),
      },
    });

    expect(wrapper.find('h3.lot-master__subsection-filled-heading')
      .html()).toBe('<h3 class="lot-master__subsection-filled-heading">Предзаказ доступен до<span>2019-03-14</span></h3>');
  });

  // ———————————————————————————————————————————————————————————————————————————
  it('Значение datepicker-a коректно определяется из values', () => {
    defaultWizardStepData.values.preorder_deadline = '2019-03-14';

    const wrapper = shallowMount(PreorderDeadlineStep, {
      propsData: {
        step: new WizardStep(defaultWizardStepData),
      },
    });

    expect(wrapper.findAll('date-picker-stub').at(0).attributes('value')).toBe('2019-03-14');
  });

  // ———————————————————————————————————————————————————————————————————————————
  it('При отправке шага данные корректно отправляются', () => {
    const DatePicker = {
      render: () => {}
    }
    const wrapper = shallowMount(PreorderDeadlineStep, {
      propsData: {
        step: new WizardStep(defaultWizardStepData),
      },

      stubs: {
        DatePicker
      },
    });

    const testDate = new Date('2019-03-14');
    const datePicker = wrapper.find(DatePicker)
    datePicker.vm.$emit('change', testDate);

    wrapper.find('.btn.btn--primary.lot-master__subsection-btn').trigger('click');

    expect(wrapper.emitted('send').length).toBe(1);
    expect(wrapper.emitted('send')[0][0]).toEqual({
      step: 'preorderdeadlinestep',
      values: {
        preorder_deadline: '2019-03-14',
      },
    });
  });
});