summaryrefslogtreecommitdiff
path: root/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
blob: cdb355f5a9b2a1ecd48c5cb9ee1453b2b52d4575 (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
import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import ServiceDeskTemplateDropdown from '~/projects/settings_service_desk/components/service_desk_setting.vue';
import { TEMPLATES } from './mock_data';

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

  const findTemplateDropdown = () => wrapper.find(GlDropdown);

  const createComponent = ({ props = {} } = {}) =>
    extendedWrapper(
      mount(ServiceDeskTemplateDropdown, {
        propsData: {
          isEnabled: true,
          ...props,
        },
      }),
    );

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

  describe('templates dropdown', () => {
    it('renders a dropdown to choose a template', () => {
      wrapper = createComponent();

      expect(findTemplateDropdown().exists()).toBe(true);
    });

    it('renders a dropdown with a default value of "Choose a template"', () => {
      wrapper = createComponent();

      expect(findTemplateDropdown().props('text')).toEqual('Choose a template');
    });

    it('renders a dropdown with a value of "Bug" when it is the initial value', () => {
      const templates = TEMPLATES;

      wrapper = createComponent({
        props: { initialSelectedTemplate: 'Bug', initialSelectedTemplateProjectId: 1, templates },
      });

      expect(findTemplateDropdown().props('text')).toEqual('Bug');
    });

    it('renders a dropdown with header items', () => {
      wrapper = createComponent({
        props: { templates: TEMPLATES },
      });

      const headerItems = wrapper.findAll(GlDropdownSectionHeader);

      expect(headerItems).toHaveLength(1);
      expect(headerItems.at(0).text()).toBe(TEMPLATES[0]);
    });

    it('renders a dropdown with options when the project has templates', () => {
      const templates = TEMPLATES;

      wrapper = createComponent({
        props: { templates },
      });

      const expectedTemplates = templates[1];

      const items = wrapper.findAll(GlDropdownItem);
      const dropdownList = expectedTemplates.map((_, index) => items.at(index).text());

      expect(items).toHaveLength(expectedTemplates.length);
      expect(dropdownList.includes('Bug')).toEqual(true);
      expect(dropdownList.includes('Documentation')).toEqual(true);
      expect(dropdownList.includes('Security release')).toEqual(true);
    });
  });
});