summaryrefslogtreecommitdiff
path: root/spec/frontend/vue_shared/components/filtered_search_bar/tokens/iteration_token_spec.js
blob: 44bc16adb970eb959658c1f3f1960e22cbd6bafe (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
import {
  GlFilteredSearchToken,
  GlFilteredSearchTokenSegment,
  GlFilteredSearchSuggestion,
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import IterationToken from '~/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue';
import { mockIterationToken, mockIterations } from '../mock_data';

jest.mock('~/flash');

describe('IterationToken', () => {
  const id = 123;
  let wrapper;

  const createComponent = ({
    config = mockIterationToken,
    value = { data: '' },
    active = false,
    stubs = {},
    provide = {},
  } = {}) =>
    mount(IterationToken, {
      propsData: {
        active,
        config,
        value,
      },
      provide: {
        portalName: 'fake target',
        alignSuggestions: function fakeAlignSuggestions() {},
        suggestionsListClass: () => 'custom-class',
        ...provide,
      },
      stubs,
    });

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

  describe('when iteration cadence feature is available', () => {
    beforeEach(async () => {
      wrapper = createComponent({
        active: true,
        config: { ...mockIterationToken, initialIterations: mockIterations },
        value: { data: 'i' },
        stubs: { Portal: true },
        provide: {
          glFeatures: {
            iterationCadences: true,
          },
        },
      });

      await wrapper.setData({ loading: false });
    });

    it('renders iteration start date and due date', () => {
      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);

      expect(suggestions.at(3).text()).toContain('Nov 5, 2021 - Nov 10, 2021');
    });
  });

  it('renders iteration value', async () => {
    wrapper = createComponent({ value: { data: id } });

    await wrapper.vm.$nextTick();

    const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);

    expect(tokenSegments).toHaveLength(3); // `Iteration` `=` `gitlab-org: #1`
    expect(tokenSegments.at(2).text()).toBe(id.toString());
  });

  it('fetches initial values', () => {
    const fetchIterationsSpy = jest.fn().mockResolvedValue();

    wrapper = createComponent({
      config: { ...mockIterationToken, fetchIterations: fetchIterationsSpy },
      value: { data: id },
    });

    expect(fetchIterationsSpy).toHaveBeenCalledWith(id);
  });

  it('fetches iterations on user input', () => {
    const search = 'hello';
    const fetchIterationsSpy = jest.fn().mockResolvedValue();

    wrapper = createComponent({
      config: { ...mockIterationToken, fetchIterations: fetchIterationsSpy },
    });

    wrapper.findComponent(GlFilteredSearchToken).vm.$emit('input', { data: search });

    expect(fetchIterationsSpy).toHaveBeenCalledWith(search);
  });

  it('renders error message when request fails', async () => {
    const fetchIterationsSpy = jest.fn().mockRejectedValue();

    wrapper = createComponent({
      config: { ...mockIterationToken, fetchIterations: fetchIterationsSpy },
    });

    await waitForPromises();

    expect(createFlash).toHaveBeenCalledWith({
      message: 'There was a problem fetching iterations.',
    });
  });
});