summaryrefslogtreecommitdiff
path: root/spec/frontend/design_management/components/design_scaler_spec.js
blob: b06d2f924df2e156e276b17c185d1ba608aa28ad (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { shallowMount } from '@vue/test-utils';
import DesignScaler from '~/design_management/components/design_scaler.vue';

describe('Design management design scaler component', () => {
  let wrapper;

  function createComponent(propsData, data = {}) {
    wrapper = shallowMount(DesignScaler, {
      propsData,
    });
    wrapper.setData(data);
  }

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

  const getButton = type => {
    const buttonTypeOrder = ['minus', 'reset', 'plus'];
    const buttons = wrapper.findAll('button');
    return buttons.at(buttonTypeOrder.indexOf(type));
  };

  it('emits @scale event when "plus" button clicked', () => {
    createComponent();

    getButton('plus').trigger('click');
    expect(wrapper.emitted('scale')).toEqual([[1.2]]);
  });

  it('emits @scale event when "reset" button clicked (scale > 1)', () => {
    createComponent({}, { scale: 1.6 });
    return wrapper.vm.$nextTick().then(() => {
      getButton('reset').trigger('click');
      expect(wrapper.emitted('scale')).toEqual([[1]]);
    });
  });

  it('emits @scale event when "minus" button clicked (scale > 1)', () => {
    createComponent({}, { scale: 1.6 });

    return wrapper.vm.$nextTick().then(() => {
      getButton('minus').trigger('click');
      expect(wrapper.emitted('scale')).toEqual([[1.4]]);
    });
  });

  it('minus and reset buttons are disabled when scale === 1', () => {
    createComponent();

    expect(wrapper.element).toMatchSnapshot();
  });

  it('minus and reset buttons are enabled when scale > 1', () => {
    createComponent({}, { scale: 1.2 });
    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.element).toMatchSnapshot();
    });
  });

  it('plus button is disabled when scale === 2', () => {
    createComponent({}, { scale: 2 });
    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.element).toMatchSnapshot();
    });
  });
});