3 files changed, 178 insertions, 0 deletions
diff --git a/spec/frontend/emoji/components/category_spec.js b/spec/frontend/emoji/components/category_spec.js
new file mode 100644
index 00000000000..afd36a1eb88
--- /dev/null
+++ b/spec/frontend/emoji/components/category_spec.js
@@ -0,0 +1,49 @@
+import { GlIntersectionObserver } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Category from '~/emoji/components/category.vue';
+import EmojiGroup from '~/emoji/components/emoji_group.vue';
+
+let wrapper;
+function factory(propsData = {}) {
+  wrapper = shallowMount(Category, { propsData });
+}
+
+describe('Emoji category component', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    factory({
+      category: 'Activity',
+      emojis: [['thumbsup'], ['thumbsdown']],
+    });
+  });
+
+  it('renders emoji groups', () => {
+    expect(wrapper.findAll(EmojiGroup).length).toBe(2);
+  });
+
+  it('renders group', async () => {
+    await wrapper.setData({ renderGroup: true });
+
+    expect(wrapper.find(EmojiGroup).attributes('rendergroup')).toBe('true');
+  });
+
+  it('renders group on appear', async () => {
+    wrapper.find(GlIntersectionObserver).vm.$emit('appear');
+
+    await nextTick();
+
+    expect(wrapper.find(EmojiGroup).attributes('rendergroup')).toBe('true');
+  });
+
+  it('emits appear event on appear', async () => {
+    wrapper.find(GlIntersectionObserver).vm.$emit('appear');
+
+    await nextTick();
+
+    expect(wrapper.emitted().appear[0]).toEqual(['Activity']);
+  });
+});
diff --git a/spec/frontend/emoji/components/emoji_group_spec.js b/spec/frontend/emoji/components/emoji_group_spec.js
new file mode 100644
index 00000000000..1aca2fbb8fc
--- /dev/null
+++ b/spec/frontend/emoji/components/emoji_group_spec.js
@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import EmojiGroup from '~/emoji/components/emoji_group.vue';
+
+Vue.config.ignoredElements = ['gl-emoji'];
+
+let wrapper;
+function factory(propsData = {}) {
+  wrapper = extendedWrapper(
+    shallowMount(EmojiGroup, {
+      propsData,
+    }),
+  );
+}
+
+describe('Emoji group component', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('does not render any buttons', () => {
+    factory({
+      emojis: [],
+      renderGroup: false,
+      clickEmoji: jest.fn(),
+    });
+
+    expect(wrapper.findByTestId('emoji-button').exists()).toBe(false);
+  });
+
+  it('renders emojis', () => {
+    factory({
+      emojis: ['thumbsup', 'thumbsdown'],
+      renderGroup: true,
+      clickEmoji: jest.fn(),
+    });
+
+    expect(wrapper.findAllByTestId('emoji-button').exists()).toBe(true);
+    expect(wrapper.findAllByTestId('emoji-button').length).toBe(2);
+  });
+
+  it('calls clickEmoji', () => {
+    const clickEmoji = jest.fn();
+
+    factory({
+      emojis: ['thumbsup', 'thumbsdown'],
+      renderGroup: true,
+      clickEmoji,
+    });
+
+    wrapper.findByTestId('emoji-button').trigger('click');
+
+    expect(clickEmoji).toHaveBeenCalledWith('thumbsup');
+  });
+});
diff --git a/spec/frontend/emoji/components/emoji_list_spec.js b/spec/frontend/emoji/components/emoji_list_spec.js
new file mode 100644
index 00000000000..9dc73ef191e
--- /dev/null
+++ b/spec/frontend/emoji/components/emoji_list_spec.js
@@ -0,0 +1,73 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import EmojiList from '~/emoji/components/emoji_list.vue';
+
+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;
+async function factory(render, propsData = { searchValue: '' }) {
+  wrapper = extendedWrapper(
+    shallowMount(EmojiList, {
+      propsData,
+      scopedSlots: {
+        default: '<div data-testid="default-slot">{{props.filteredCategories}}</div>',
+      },
+    }),
+  );
+
+  // Wait for categories to be set
+  await nextTick();
+
+  if (render) {
+    wrapper.setData({ render: true });
+
+    // Wait for component to render
+    await nextTick();
+  }
+}
+
+const findDefaultSlot = () => wrapper.findByTestId('default-slot');
+
+describe('Emoji list component', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('does not render until render is set', async () => {
+    await factory(false);
+
+    expect(findDefaultSlot().exists()).toBe(false);
+  });
+
+  it('renders with none filtered list', async () => {
+    await factory(true);
+
+    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 () => {
+    await factory(true, { searchValue: 'smile' });
+
+    expect(JSON.parse(findDefaultSlot().text())).toEqual({
+      search: {
+        emojis: [['smile']],
+        height: expect.any(Number),
+      },
+    });
+  });
+});