summaryrefslogtreecommitdiff
path: root/spec/frontend/emoji/components/emoji_list_spec.js
blob: f6f6062f8e86abca5020802dbab8f3882d7f30e5 (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
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import EmojiList from '~/emoji/components/emoji_list.vue';
import waitForPromises from 'helpers/wait_for_promises';

jest.mock('~/emoji', () => ({
  initEmojiMap: jest.fn(() => Promise.resolve()),
  searchEmoji: jest.fn((search) => [{ emoji: { name: search } }]),
  getEmojiCategoryMap: jest.fn(() =>
    Promise.resolve({
      activity: ['thumbsup', 'thumbsdown'],
    }),
  ),
}));

let wrapper;

function factory(propsData = { searchValue: '' }) {
  wrapper = extendedWrapper(
    shallowMount(EmojiList, {
      propsData,
      scopedSlots: {
        default: '<div data-testid="default-slot">{{props.filteredCategories}}</div>',
      },
    }),
  );
}

const findDefaultSlot = () => wrapper.findByTestId('default-slot');

describe('Emoji list component', () => {
  it('does not render until render is set', async () => {
    factory();

    expect(findDefaultSlot().exists()).toBe(false);
    await waitForPromises();
    expect(findDefaultSlot().exists()).toBe(true);
  });

  it('renders with none filtered list', async () => {
    factory();

    await waitForPromises();

    expect(JSON.parse(findDefaultSlot().text())).toEqual({
      activity: {
        emojis: [['thumbsup', 'thumbsdown']],
        height: expect.any(Number),
        top: expect.any(Number),
      },
    });
  });

  it('renders filtered list of emojis', async () => {
    factory({ searchValue: 'smile' });

    await waitForPromises();

    expect(JSON.parse(findDefaultSlot().text())).toEqual({
      search: {
        emojis: [['smile']],
        height: expect.any(Number),
      },
    });
  });
});