diff options
Diffstat (limited to 'spec/frontend/gfm_auto_complete_spec.js')
| -rw-r--r-- | spec/frontend/gfm_auto_complete_spec.js | 128 |
1 files changed, 30 insertions, 98 deletions
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js index c2ff66f6afc..08368e1f2ca 100644 --- a/spec/frontend/gfm_auto_complete_spec.js +++ b/spec/frontend/gfm_auto_complete_spec.js @@ -1,16 +1,12 @@ /* eslint no-param-reassign: "off" */ - +import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; -import { emojiFixtureMap, initEmojiMock, describeEmojiFields } from 'helpers/emoji'; -import '~/lib/utils/jquery_at_who'; import GfmAutoComplete, { membersBeforeSave } from 'ee_else_ce/gfm_auto_complete'; - -import { TEST_HOST } from 'helpers/test_constants'; +import { initEmojiMock } from 'helpers/emoji'; +import '~/lib/utils/jquery_at_who'; import { getJSONFixture } from 'helpers/fixtures'; - +import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; - -import MockAdapter from 'axios-mock-adapter'; import AjaxCache from '~/lib/utils/ajax_cache'; import axios from '~/lib/utils/axios_utils'; @@ -493,7 +489,7 @@ describe('GfmAutoComplete', () => { username: 'my-group', avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>', title: 'My Group (2)', - search: 'my-group My Group', + search: 'MyGroup my-group', icon: '', }, ]); @@ -506,7 +502,7 @@ describe('GfmAutoComplete', () => { avatarTag: '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>', title: 'My Group (2)', - search: 'my-group My Group', + search: 'MyGroup my-group', icon: '', }, ]); @@ -519,7 +515,7 @@ describe('GfmAutoComplete', () => { avatarTag: '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>', title: 'My Group', - search: 'my-group My Group', + search: 'MyGroup my-group', icon: '<svg class="s16 vertical-align-middle gl-ml-2"><use xlink:href="undefined#notifications-off" /></svg>', }, @@ -537,7 +533,7 @@ describe('GfmAutoComplete', () => { avatarTag: '<img src="./users.jpg" alt="my-user" class="avatar avatar-inline center s26"/>', title: 'My User', - search: 'my-user My User', + search: 'MyUser my-user', icon: '', }, ]); @@ -717,16 +713,20 @@ describe('GfmAutoComplete', () => { }); describe('emoji', () => { - const { atom, heart, star } = emojiFixtureMap; - const assertInserted = ({ input, subject, emoji }) => - expect(subject).toBe(`:${emoji?.name || input}:`); - const assertTemplated = ({ input, subject, emoji, field }) => - expect(subject.replace(/\s+/g, ' ')).toBe( - `<li>${field || input} <gl-emoji data-name="${emoji?.name || input}"></gl-emoji> </li>`, - ); - let mock; + const mockItem = { + 'atwho-at': ':', + emoji: { + c: 'symbols', + d: 'negative squared ab', + e: '🆎', + name: 'ab', + u: '6.0', + }, + fieldValue: 'ab', + }; + beforeEach(async () => { mock = await initEmojiMock(); @@ -738,90 +738,22 @@ describe('GfmAutoComplete', () => { mock.restore(); }); - describe.each` - name | inputFormat | assert - ${'insertTemplateFunction'} | ${(name) => ({ name })} | ${assertInserted} - ${'templateFunction'} | ${(name) => name} | ${assertTemplated} - `('Emoji.$name', ({ name, inputFormat, assert }) => { - const execute = (accessor, input, emoji) => - assert({ - input, - emoji, - field: accessor && accessor(emoji), - subject: GfmAutoComplete.Emoji[name](inputFormat(input)), - }); - - describeEmojiFields('for $field', ({ accessor }) => { - it('should work with lowercase', () => { - execute(accessor, accessor(atom), atom); - }); - - it('should work with uppercase', () => { - execute(accessor, accessor(atom).toUpperCase(), atom); - }); - - it('should work with partial value', () => { - execute(accessor, accessor(atom).slice(1), atom); - }); - }); - - it('should work with unicode value', () => { - execute(null, atom.moji, atom); - }); + describe('Emoji.templateFunction', () => { + it('should return a correct template', () => { + const actual = GfmAutoComplete.Emoji.templateFunction(mockItem); + const glEmojiTag = `<gl-emoji data-name="${mockItem.emoji.name}"></gl-emoji>`; + const expected = `<li>${mockItem.fieldValue} ${glEmojiTag}</li>`; - it('should pass through unknown value', () => { - execute(null, 'foo bar baz'); + expect(actual).toBe(expected); }); }); - const expectEmojiOrder = (first, second) => { - const keys = Object.keys(emojiFixtureMap); - const firstIndex = keys.indexOf(first); - const secondIndex = keys.indexOf(second); - expect(firstIndex).toBeGreaterThanOrEqual(0); - expect(secondIndex).toBeGreaterThanOrEqual(0); - expect(firstIndex).toBeLessThan(secondIndex); - }; - describe('Emoji.insertTemplateFunction', () => { - it('should map ":heart" to :heart: [regression]', () => { - // the bug mapped heart to black_heart because the latter sorted first - expectEmojiOrder('black_heart', 'heart'); - - const item = GfmAutoComplete.Emoji.insertTemplateFunction({ name: 'heart' }); - expect(item).toEqual(`:${heart.name}:`); - }); - - it('should map ":star" to :star: [regression]', () => { - // the bug mapped star to custard because the latter sorted first - expectEmojiOrder('custard', 'star'); - - const item = GfmAutoComplete.Emoji.insertTemplateFunction({ name: 'star' }); - expect(item).toEqual(`:${star.name}:`); - }); - }); - - describe('Emoji.templateFunction', () => { - it('should map ":heart" to ❤ [regression]', () => { - // the bug mapped heart to black_heart because the latter sorted first - expectEmojiOrder('black_heart', 'heart'); - - const item = GfmAutoComplete.Emoji.templateFunction('heart') - .replace(/(<gl-emoji)\s+(data-name)/, '$1 $2') - .replace(/>\s+|\s+</g, (s) => s.trim()); - expect(item).toEqual( - `<li>${heart.name}<gl-emoji data-name="${heart.name}"></gl-emoji></li>`, - ); - }); - - it('should map ":star" to ⭐ [regression]', () => { - // the bug mapped star to custard because the latter sorted first - expectEmojiOrder('custard', 'star'); + it('should return a correct template', () => { + const actual = GfmAutoComplete.Emoji.insertTemplateFunction(mockItem); + const expected = `:${mockItem.emoji.name}:`; - const item = GfmAutoComplete.Emoji.templateFunction('star') - .replace(/(<gl-emoji)\s+(data-name)/, '$1 $2') - .replace(/>\s+|\s+</g, (s) => s.trim()); - expect(item).toEqual(`<li>${star.name}<gl-emoji data-name="${star.name}"></gl-emoji></li>`); + expect(actual).toBe(expected); }); }); }); |