summaryrefslogtreecommitdiff
path: root/spec/frontend/sidebar/sidebar_labels_spec.js
blob: 9d59dc750fb34ae13ff138a9fde16cd197ed7275 (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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { createLocalVue, shallowMount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
import {
  mockLabels,
  mockRegularLabel,
} from 'jest/vue_shared/components/sidebar/labels_select_vue/mock_data';
import axios from '~/lib/utils/axios_utils';
import SidebarLabels from '~/sidebar/components/labels/sidebar_labels.vue';
import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants';
import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('sidebar labels', () => {
  let axiosMock;
  let wrapper;

  const store = new Vuex.Store(labelsSelectModule());

  const defaultProps = {
    allowLabelCreate: true,
    allowLabelEdit: true,
    allowScopedLabels: true,
    canEdit: true,
    iid: '1',
    initiallySelectedLabels: mockLabels,
    issuableType: 'issue',
    labelsFetchPath: '/gitlab-org/gitlab-test/-/labels.json?include_ancestor_groups=true',
    labelsManagePath: '/gitlab-org/gitlab-test/-/labels',
    labelsUpdatePath: '/gitlab-org/gitlab-test/-/issues/1.json',
    projectIssuesPath: '/gitlab-org/gitlab-test/-/issues',
    projectPath: 'gitlab-org/gitlab-test',
  };

  const findLabelsSelect = () => wrapper.find(LabelsSelect);

  const mountComponent = () => {
    wrapper = shallowMount(SidebarLabels, {
      localVue,
      provide: {
        ...defaultProps,
      },
      store,
    });
  };

  beforeEach(() => {
    axiosMock = new AxiosMockAdapter(axios);
  });

  afterEach(() => {
    wrapper.destroy();
    wrapper = null;
    axiosMock.restore();
  });

  describe('LabelsSelect props', () => {
    beforeEach(() => {
      mountComponent();
    });

    it('are as expected', () => {
      expect(findLabelsSelect().props()).toMatchObject({
        allowLabelCreate: defaultProps.allowLabelCreate,
        allowLabelEdit: defaultProps.allowLabelEdit,
        allowMultiselect: true,
        allowScopedLabels: defaultProps.allowScopedLabels,
        footerCreateLabelTitle: 'Create project label',
        footerManageLabelTitle: 'Manage project labels',
        labelsCreateTitle: 'Create project label',
        labelsFetchPath: defaultProps.labelsFetchPath,
        labelsFilterBasePath: defaultProps.projectIssuesPath,
        labelsManagePath: defaultProps.labelsManagePath,
        labelsSelectInProgress: false,
        selectedLabels: defaultProps.initiallySelectedLabels,
        variant: DropdownVariant.Sidebar,
      });
    });
  });

  describe('when labels are changed', () => {
    beforeEach(() => {
      mountComponent();
    });

    it('makes an API call to update labels', async () => {
      const labels = [
        {
          ...mockRegularLabel,
          set: false,
        },
        {
          id: 40,
          title: 'Security',
          color: '#ddd',
          text_color: '#fff',
          set: true,
        },
        {
          id: 55,
          title: 'Tooling',
          color: '#ddd',
          text_color: '#fff',
          set: false,
        },
      ];

      findLabelsSelect().vm.$emit('updateSelectedLabels', labels);

      await axios.waitForAll();

      const expected = {
        [defaultProps.issuableType]: {
          label_ids: [27, 28, 29, 40],
        },
      };

      expect(axiosMock.history.put[0].data).toEqual(JSON.stringify(expected));
    });
  });
});