summaryrefslogtreecommitdiff
path: root/spec/frontend/pages/profiles/show/emoji_menu_spec.js
blob: fa6e7e51a60ac53524567f174125085e22818f17 (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
import $ from 'jquery';
import { TEST_HOST } from 'helpers/test_constants';
import axios from '~/lib/utils/axios_utils';
import EmojiMenu from '~/pages/profiles/show/emoji_menu';

describe('EmojiMenu', () => {
  const dummyEmojiTag = '<dummy></tag>';
  const dummyToggleButtonSelector = '.toggle-button-selector';
  const dummyMenuClass = 'dummy-menu-class';

  let emojiMenu;
  let dummySelectEmojiCallback;
  let dummyEmojiList;

  beforeEach(() => {
    dummySelectEmojiCallback = jest.fn().mockName('dummySelectEmojiCallback');
    dummyEmojiList = {
      glEmojiTag() {
        return dummyEmojiTag;
      },
      normalizeEmojiName(emoji) {
        return emoji;
      },
      isEmojiNameValid() {
        return true;
      },
      getEmojiCategoryMap() {
        return { dummyCategory: [] };
      },
    };

    emojiMenu = new EmojiMenu(
      dummyEmojiList,
      dummyToggleButtonSelector,
      dummyMenuClass,
      dummySelectEmojiCallback,
    );
  });

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

  describe('addAward', () => {
    const dummyAwardUrl = `${TEST_HOST}/award/url`;
    const dummyEmoji = 'tropical_fish';
    const dummyVotesBlock = () => $('<div />');

    it('calls selectEmojiCallback', async () => {
      expect(dummySelectEmojiCallback).not.toHaveBeenCalled();

      await emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false);
      expect(dummySelectEmojiCallback).toHaveBeenCalledWith(dummyEmoji, dummyEmojiTag);
    });

    it('does not make an axios request', async () => {
      jest.spyOn(axios, 'request').mockReturnValue();

      await emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false);
      expect(axios.request).not.toHaveBeenCalled();
    });
  });

  describe('bindEvents', () => {
    beforeEach(() => {
      jest.spyOn(emojiMenu, 'registerEventListener').mockReturnValue();
    });

    it('binds event listeners to custom toggle button', () => {
      emojiMenu.bindEvents();

      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
        'one',
        expect.anything(),
        'mouseenter focus',
        dummyToggleButtonSelector,
        'mouseenter focus',
        expect.anything(),
      );

      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
        'on',
        expect.anything(),
        'click',
        dummyToggleButtonSelector,
        expect.anything(),
      );
    });

    it('binds event listeners to custom menu class', () => {
      emojiMenu.bindEvents();

      expect(emojiMenu.registerEventListener).toHaveBeenCalledWith(
        'on',
        expect.anything(),
        'click',
        `.js-awards-block .js-emoji-btn, .${dummyMenuClass} .js-emoji-btn`,
        expect.anything(),
      );
    });
  });

  describe('createEmojiMenu', () => {
    it('renders the menu with custom menu class', () => {
      const menuElement = () =>
        document.body.querySelector(`.emoji-menu.${dummyMenuClass} .emoji-menu-content`);

      expect(menuElement()).toBe(null);

      emojiMenu.createEmojiMenu();

      expect(menuElement()).not.toBe(null);
    });
  });
});