1 files changed, 49 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']);
+  });
+});