Welcome to mirror list, hosted at ThFree Co, Russian Federation.

comment_templates_dropdown_spec.js « markdown « components « vue_shared « frontend « spec - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 11c57fc57688a2b535b1bb1826057d2ceba8c994 (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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
import { GlCollapsibleListbox } from '@gitlab/ui';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import savedRepliesResponse from 'test_fixtures/graphql/comment_templates/saved_replies.query.graphql.json';
import { mockTracking } from 'helpers/tracking_helper';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper';
import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
import waitForPromises from 'helpers/wait_for_promises';
import CommentTemplatesDropdown from '~/vue_shared/components/markdown/comment_templates_dropdown.vue';
import savedRepliesQuery from '~/vue_shared/components/markdown/saved_replies.query.graphql';
import {
  TRACKING_SAVED_REPLIES_USE,
  TRACKING_SAVED_REPLIES_USE_IN_MR,
  TRACKING_SAVED_REPLIES_USE_IN_OTHER,
} from '~/vue_shared/components/markdown/constants';

let wrapper;
let savedRepliesResp;

function createMockApolloProvider(response) {
  Vue.use(VueApollo);

  savedRepliesResp = jest.fn().mockResolvedValue(response);

  const requestHandlers = [[savedRepliesQuery, savedRepliesResp]];

  return createMockApollo(requestHandlers);
}

function createComponent(options = {}) {
  const { mockApollo } = options;

  return mountExtended(CommentTemplatesDropdown, {
    propsData: {
      newCommentTemplatePath: '/new',
    },
    apolloProvider: mockApollo,
  });
}

function findDropdownComponent() {
  return wrapper.findComponent(GlCollapsibleListbox);
}

async function selectSavedReply() {
  const dropdown = findDropdownComponent();

  dropdown.vm.$emit('shown');

  await waitForPromises();

  dropdown.vm.$emit('select', savedRepliesResponse.data.currentUser.savedReplies.nodes[0].id);
}

useMockLocationHelper();

describe('Comment templates dropdown', () => {
  it('fetches data when dropdown gets opened', async () => {
    const mockApollo = createMockApolloProvider(savedRepliesResponse);
    wrapper = createComponent({ mockApollo });

    wrapper.find('.js-comment-template-toggle').trigger('click');

    await waitForPromises();

    expect(savedRepliesResp).toHaveBeenCalled();
  });

  describe('when selecting a comment', () => {
    let trackingSpy;
    let mockApollo;

    beforeEach(() => {
      trackingSpy = mockTracking(undefined, window.document, jest.spyOn);
      mockApollo = createMockApolloProvider(savedRepliesResponse);
      wrapper = createComponent({ mockApollo });
    });

    it('emits a select event', async () => {
      wrapper.find('.js-comment-template-toggle').trigger('click');

      await waitForPromises();

      wrapper.find('.gl-new-dropdown-item').trigger('click');

      expect(wrapper.emitted().select[0]).toEqual(['Saved Reply Content']);
    });

    describe('tracking', () => {
      it('always sends two tracking events', async () => {
        await selectSavedReply();

        expect(trackingSpy).toHaveBeenCalledTimes(2);
      });

      it('tracks overall usage', async () => {
        await selectSavedReply();

        expect(trackingSpy).toHaveBeenCalledWith(
          expect.any(String),
          TRACKING_SAVED_REPLIES_USE,
          expect.any(Object),
        );
      });

      describe('MR-specific usage event', () => {
        it('is sent when in an MR', async () => {
          window.location.toString.mockReturnValue('this/looks/like/a/-/merge_requests/1');

          await selectSavedReply();

          expect(trackingSpy).toHaveBeenCalledWith(
            expect.any(String),
            TRACKING_SAVED_REPLIES_USE_IN_MR,
            expect.any(Object),
          );
        });

        it('is not sent when not in an MR', async () => {
          window.location.toString.mockReturnValue('this/looks/like/a/-/issues/1');

          await selectSavedReply();

          expect(trackingSpy).not.toHaveBeenCalledWith(
            expect.any(String),
            TRACKING_SAVED_REPLIES_USE_IN_MR,
            expect.any(Object),
          );
        });
      });

      describe('non-MR usage event', () => {
        it('is sent when not in an MR', async () => {
          window.location.toString.mockReturnValue('this/looks/like/a/-/issues/1');

          await selectSavedReply();

          expect(trackingSpy).toHaveBeenCalledWith(
            expect.any(String),
            TRACKING_SAVED_REPLIES_USE_IN_OTHER,
            expect.any(Object),
          );
        });

        it('is not sent when in an MR', async () => {
          window.location.toString.mockReturnValue('this/looks/like/a/-/merge_requests/1');

          await selectSavedReply();

          expect(trackingSpy).not.toHaveBeenCalledWith(
            expect.any(String),
            TRACKING_SAVED_REPLIES_USE_IN_OTHER,
            expect.any(Object),
          );
        });
      });
    });
  });
});