Added constants file to re-use variables

Added comment to SCSS file
Updated category spec

app/assets/javascripts/emoji/components/emoji_list.vue

 <script>
 import { chunk } from 'lodash';
 import { searchEmoji } from '~/emoji';
+import { EMOJIS_PER_ROW } from '../constants';
 import { getEmojiCategories, generateCategoryHeight } from './utils';
 
 export default {
@@ -18,7 +19,7 @@ export default {
       if (this.searchValue !== '') {
         const emojis = chunk(
           searchEmoji(this.searchValue).map(({ emoji }) => emoji.name),
-          9,
+          EMOJIS_PER_ROW,
         );
 
         return {

app/assets/javascripts/emoji/components/picker.vue

@@ -2,21 +2,11 @@
 import { GlIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import VirtualList from 'vue-virtual-scroll-list';
 import { CATEGORY_NAMES } from '~/emoji';
+import { CATEGORY_ICON_MAP } from '../constants';
 import Category from './category.vue';
 import EmojiList from './emoji_list.vue';
 import { getEmojiCategories } from './utils';
 
-const CATEGORY_ICON_MAP = {
-  activity: 'dumbbell',
-  people: 'smiley',
-  nature: 'nature',
-  food: 'food',
-  travel: 'car',
-  objects: 'object',
-  symbols: 'heart',
-  flags: 'flag',
-};
-
 export default {
   components: {
     GlIcon,

app/assets/javascripts/emoji/components/utils.js

 import { chunk, memoize } from 'lodash';
 import { initEmojiMap, getEmojiCategoryMap } from '~/emoji';
+import { EMOJIS_PER_ROW, EMOJI_ROW_HEIGHT, CATEGORY_ROW_HEIGHT } from '../constants';
 
-export const generateCategoryHeight = (emojisLength) => emojisLength * 34 + 29;
+export const generateCategoryHeight = (emojisLength) =>
+  emojisLength * EMOJI_ROW_HEIGHT + CATEGORY_ROW_HEIGHT;
 
 export const getEmojiCategories = memoize(async () => {
   await initEmojiMap();
@@ -11,7 +13,7 @@ export const getEmojiCategories = memoize(async () => {
 
   return Object.freeze(
     Object.keys(categories).reduce((acc, category) => {
-      const emojis = chunk(categories[category], 9);
+      const emojis = chunk(categories[category], EMOJIS_PER_ROW);
       const height = generateCategoryHeight(emojis.length);
       const newAcc = {
         ...acc,

app/assets/javascripts/emoji/constants.js

+export const CATEGORY_ICON_MAP = {
+  activity: 'dumbbell',
+  people: 'smiley',
+  nature: 'nature',
+  food: 'food',
+  travel: 'car',
+  objects: 'object',
+  symbols: 'heart',
+  flags: 'flag',
+};
+
+export const EMOJIS_PER_ROW = 9;
+export const EMOJI_ROW_HEIGHT = 34;
+export const CATEGORY_ROW_HEIGHT = 37;

app/assets/javascripts/emoji/index.js

@@ -2,6 +2,7 @@ import { escape, minBy } from 'lodash';
 import emojiAliases from 'emojis/aliases.json';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
+import { CATEGORY_ICON_MAP } from './constants';
 
 let emojiMap = null;
 let validEmojiNames = null;
@@ -155,16 +156,7 @@ export function sortEmoji(items) {
   return [...items].sort((a, b) => a.score - b.score || a.fieldValue.localeCompare(b.fieldValue));
 }
 
-export const CATEGORY_NAMES = [
-  'activity',
-  'people',
-  'nature',
-  'food',
-  'travel',
-  'objects',
-  'symbols',
-  'flags',
-];
+export const CATEGORY_NAMES = Object.keys(CATEGORY_ICON_MAP);
 
 let emojiCategoryMap;
 export function getEmojiCategoryMap() {

app/assets/stylesheets/framework/emojis.scss

@@ -24,6 +24,7 @@ gl-emoji {
 
 .emoji-picker-emoji {
   height: 30px;
+  // Create a width that fits 9 emojis per row
   width: 100 / 9 * 1%;
 }
 

spec/frontend/emoji/components/category_spec.js

@@ -14,32 +14,24 @@ describe('Emoji category component', () => {
     wrapper.destroy();
   });
 
-  it('renders emoji groups', () => {
+  beforeEach(() => {
     factory({
       category: 'Activity',
       emojis: [['thumbsup'], ['thumbsdown']],
     });
+  });
 
+  it('renders emoji groups', () => {
     expect(wrapper.findAll(EmojiGroup).length).toBe(2);
   });
 
   it('renders group', async () => {
-    factory({
-      category: 'Activity',
-      emojis: [['thumbsup'], ['thumbsdown']],
-    });
-
     await wrapper.setData({ renderGroup: true });
 
     expect(wrapper.find(EmojiGroup).attributes('rendergroup')).toBe('true');
   });
 
   it('renders group on appear', async () => {
-    factory({
-      category: 'Activity',
-      emojis: [['thumbsup'], ['thumbsdown']],
-    });
-
     wrapper.find(GlIntersectionObserver).vm.$emit('appear');
 
     await nextTick();
@@ -48,11 +40,6 @@ describe('Emoji category component', () => {
   });
 
   it('emits appear event on appear', async () => {
-    factory({
-      category: 'Activity',
-      emojis: [['thumbsup'], ['thumbsdown']],
-    });
-
     wrapper.find(GlIntersectionObserver).vm.$emit('appear');
 
     await nextTick();