debian-mirror-gitlab/spec/frontend/gfm_auto_complete_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

932 lines
30 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
/* eslint no-param-reassign: "off" */
2021-03-11 19:13:27 +05:30
import MockAdapter from 'axios-mock-adapter';
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-11-18 22:05:49 +05:30
import labelsFixture from 'test_fixtures/autocomplete_sources/labels.json';
2022-07-16 23:28:13 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2021-12-11 22:18:48 +05:30
import GfmAutoComplete, { membersBeforeSave, highlighter } from 'ee_else_ce/gfm_auto_complete';
2022-01-26 12:08:38 +05:30
import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
2021-03-11 19:13:27 +05:30
import '~/lib/utils/jquery_at_who';
import { TEST_HOST } from 'helpers/test_constants';
2021-03-08 18:12:59 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2021-01-29 00:20:46 +05:30
import AjaxCache from '~/lib/utils/ajax_cache';
import axios from '~/lib/utils/axios_utils';
2022-08-27 11:52:29 +05:30
import { eventlistenersMockDefaultMap } from 'ee_else_ce_jest/gfm_auto_complete/mock_data';
2021-01-29 00:20:46 +05:30
2019-07-07 11:18:12 +05:30
describe('GfmAutoComplete', () => {
2021-01-29 00:20:46 +05:30
const fetchDataMock = { fetchData: jest.fn() };
let gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call(fetchDataMock);
2017-09-10 17:25:29 +05:30
2019-07-07 11:18:12 +05:30
let atwhoInstance;
let sorterValue;
2021-01-29 00:20:46 +05:30
let filterValue;
describe('DefaultOptions.filter', () => {
let items;
beforeEach(() => {
jest.spyOn(fetchDataMock, 'fetchData');
jest.spyOn($.fn.atwho.default.callbacks, 'filter').mockImplementation(() => {});
});
describe('assets loading', () => {
beforeEach(() => {
atwhoInstance = { setting: {}, $inputor: 'inputor', at: '[vulnerability:' };
items = ['loading'];
filterValue = gfmAutoCompleteCallbacks.filter.call(atwhoInstance, '', items);
});
it('should call the fetchData function without query', () => {
expect(fetchDataMock.fetchData).toHaveBeenCalledWith('inputor', '[vulnerability:');
});
it('should not call the default atwho filter', () => {
expect($.fn.atwho.default.callbacks.filter).not.toHaveBeenCalled();
});
it('should return the passed unfiltered items', () => {
expect(filterValue).toEqual(items);
});
});
describe('backend filtering', () => {
beforeEach(() => {
atwhoInstance = { setting: {}, $inputor: 'inputor', at: '[vulnerability:' };
items = [];
});
describe('when previous query is different from current one', () => {
beforeEach(() => {
gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
previousQuery: 'oldquery',
...fetchDataMock,
});
filterValue = gfmAutoCompleteCallbacks.filter.call(atwhoInstance, 'newquery', items);
});
it('should call the fetchData function with query', () => {
expect(fetchDataMock.fetchData).toHaveBeenCalledWith(
'inputor',
'[vulnerability:',
'newquery',
);
});
it('should not call the default atwho filter', () => {
expect($.fn.atwho.default.callbacks.filter).not.toHaveBeenCalled();
});
it('should return the passed unfiltered items', () => {
expect(filterValue).toEqual(items);
});
});
describe('when previous query is not different from current one', () => {
beforeEach(() => {
gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
previousQuery: 'oldquery',
...fetchDataMock,
});
filterValue = gfmAutoCompleteCallbacks.filter.call(
atwhoInstance,
'oldquery',
items,
'searchKey',
);
});
it('should not call the fetchData function', () => {
expect(fetchDataMock.fetchData).not.toHaveBeenCalled();
});
it('should call the default atwho filter', () => {
expect($.fn.atwho.default.callbacks.filter).toHaveBeenCalledWith(
'oldquery',
items,
'searchKey',
);
});
});
});
});
describe('fetchData', () => {
const { fetchData } = GfmAutoComplete.prototype;
let mock;
beforeEach(() => {
mock = new MockAdapter(axios);
jest.spyOn(axios, 'get');
jest.spyOn(AjaxCache, 'retrieve');
});
afterEach(() => {
mock.restore();
});
describe('already loading data', () => {
beforeEach(() => {
const context = {
isLoadingData: { '[vulnerability:': true },
dataSources: {},
cachedData: {},
};
fetchData.call(context, {}, '[vulnerability:', '');
});
it('should not call either axios nor AjaxCache', () => {
expect(axios.get).not.toHaveBeenCalled();
expect(AjaxCache.retrieve).not.toHaveBeenCalled();
});
});
describe('backend filtering', () => {
describe('data is not in cache', () => {
let context;
beforeEach(() => {
context = {
isLoadingData: { '[vulnerability:': false },
dataSources: { vulnerabilities: 'vulnerabilities_autocomplete_url' },
cachedData: {},
};
});
it('should call axios with query', () => {
fetchData.call(context, {}, '[vulnerability:', 'query');
expect(axios.get).toHaveBeenCalledWith('vulnerabilities_autocomplete_url', {
params: { search: 'query' },
});
});
2021-03-08 18:12:59 +05:30
it.each([200, 500])('should set the loading state', async (responseStatus) => {
2021-01-29 00:20:46 +05:30
mock.onGet('vulnerabilities_autocomplete_url').replyOnce(responseStatus);
fetchData.call(context, {}, '[vulnerability:', 'query');
expect(context.isLoadingData['[vulnerability:']).toBe(true);
await waitForPromises();
expect(context.isLoadingData['[vulnerability:']).toBe(false);
});
});
describe('data is in cache', () => {
beforeEach(() => {
const context = {
isLoadingData: { '[vulnerability:': false },
dataSources: { vulnerabilities: 'vulnerabilities_autocomplete_url' },
cachedData: { '[vulnerability:': [{}] },
};
fetchData.call(context, {}, '[vulnerability:', 'query');
});
it('should anyway call axios with query ignoring cache', () => {
expect(axios.get).toHaveBeenCalledWith('vulnerabilities_autocomplete_url', {
params: { search: 'query' },
});
});
});
});
describe('frontend filtering', () => {
describe('data is not in cache', () => {
beforeEach(() => {
const context = {
isLoadingData: { '#': false },
dataSources: { issues: 'issues_autocomplete_url' },
cachedData: {},
};
fetchData.call(context, {}, '#', 'query');
});
it('should call AjaxCache', () => {
expect(AjaxCache.retrieve).toHaveBeenCalledWith('issues_autocomplete_url', true);
});
});
describe('data is in cache', () => {
beforeEach(() => {
const context = {
isLoadingData: { '#': false },
dataSources: { issues: 'issues_autocomplete_url' },
cachedData: { '#': [{}] },
loadData: () => {},
};
fetchData.call(context, {}, '#', 'query');
});
it('should not call AjaxCache', () => {
expect(AjaxCache.retrieve).not.toHaveBeenCalled();
});
});
});
});
2019-07-07 11:18:12 +05:30
describe('DefaultOptions.sorter', () => {
describe('assets loading', () => {
let items;
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
beforeEach(() => {
jest.spyOn(GfmAutoComplete, 'isLoading').mockReturnValue(true);
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
atwhoInstance = { setting: {} };
items = [];
sorterValue = gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, '', items);
2017-08-17 22:00:37 +05:30
});
2019-07-07 11:18:12 +05:30
it('should disable highlightFirst', () => {
expect(atwhoInstance.setting.highlightFirst).toBe(false);
2017-08-17 22:00:37 +05:30
});
2019-07-07 11:18:12 +05:30
it('should return the passed unfiltered items', () => {
expect(sorterValue).toEqual(items);
2017-08-17 22:00:37 +05:30
});
});
2019-07-07 11:18:12 +05:30
describe('assets finished loading', () => {
beforeEach(() => {
jest.spyOn(GfmAutoComplete, 'isLoading').mockReturnValue(false);
jest.spyOn($.fn.atwho.default.callbacks, 'sorter').mockImplementation(() => {});
2017-08-17 22:00:37 +05:30
});
2019-07-07 11:18:12 +05:30
it('should enable highlightFirst if alwaysHighlightFirst is set', () => {
atwhoInstance = { setting: { alwaysHighlightFirst: true } };
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
gfmAutoCompleteCallbacks.sorter.call(atwhoInstance);
2017-08-17 22:00:37 +05:30
expect(atwhoInstance.setting.highlightFirst).toBe(true);
});
2019-07-07 11:18:12 +05:30
it('should enable highlightFirst if a query is present', () => {
atwhoInstance = { setting: {} };
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, 'query');
2017-08-17 22:00:37 +05:30
expect(atwhoInstance.setting.highlightFirst).toBe(true);
});
2019-07-07 11:18:12 +05:30
it('should call the default atwho sorter', () => {
atwhoInstance = { setting: {} };
2017-08-17 22:00:37 +05:30
const query = 'query';
const items = [];
const searchKey = 'searchKey';
2017-09-10 17:25:29 +05:30
gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, query, items, searchKey);
2017-08-17 22:00:37 +05:30
expect($.fn.atwho.default.callbacks.sorter).toHaveBeenCalledWith(query, items, searchKey);
});
});
});
2018-03-17 18:26:18 +05:30
describe('DefaultOptions.beforeInsert', () => {
2018-12-13 13:39:08 +05:30
const beforeInsert = (context, value) =>
gfmAutoCompleteCallbacks.beforeInsert.call(context, value);
2018-03-17 18:26:18 +05:30
2019-07-07 11:18:12 +05:30
beforeEach(() => {
atwhoInstance = { setting: { skipSpecialCharacterTest: false } };
});
2018-03-17 18:26:18 +05:30
it('should not quote if value only contains alphanumeric charecters', () => {
expect(beforeInsert(atwhoInstance, '@user1')).toBe('@user1');
expect(beforeInsert(atwhoInstance, '~label1')).toBe('~label1');
});
it('should quote if value contains any non-alphanumeric characters', () => {
2019-07-31 22:56:46 +05:30
expect(beforeInsert(atwhoInstance, '~label-20')).toBe('~"label-20"');
2018-03-17 18:26:18 +05:30
expect(beforeInsert(atwhoInstance, '~label 20')).toBe('~"label 20"');
});
it('should quote integer labels', () => {
expect(beforeInsert(atwhoInstance, '~1234')).toBe('~"1234"');
});
2018-05-09 12:01:36 +05:30
2019-07-31 22:56:46 +05:30
it('escapes Markdown strikethroughs when needed', () => {
expect(beforeInsert(atwhoInstance, '~a~bug')).toEqual('~"a~bug"');
expect(beforeInsert(atwhoInstance, '~a~~bug~~')).toEqual('~"a\\~~bug\\~~"');
});
it('escapes Markdown emphasis when needed', () => {
expect(beforeInsert(atwhoInstance, '~a_bug_')).toEqual('~a_bug\\_');
expect(beforeInsert(atwhoInstance, '~a _bug_')).toEqual('~"a \\_bug\\_"');
expect(beforeInsert(atwhoInstance, '~a*bug*')).toEqual('~"a\\*bug\\*"');
expect(beforeInsert(atwhoInstance, '~a *bug*')).toEqual('~"a \\*bug\\*"');
});
it('escapes Markdown code spans when needed', () => {
expect(beforeInsert(atwhoInstance, '~a`bug`')).toEqual('~"a\\`bug\\`"');
2018-05-09 12:01:36 +05:30
expect(beforeInsert(atwhoInstance, '~a `bug`')).toEqual('~"a \\`bug\\`"');
});
2018-03-17 18:26:18 +05:30
});
2019-07-07 11:18:12 +05:30
describe('DefaultOptions.matcher', () => {
2018-12-13 13:39:08 +05:30
const defaultMatcher = (context, flag, subtext) =>
gfmAutoCompleteCallbacks.matcher.call(context, flag, subtext);
2017-08-17 22:00:37 +05:30
2021-01-03 14:25:43 +05:30
const flagsUseDefaultMatcher = ['@', '#', '!', '~', '%', '$'];
2017-08-17 22:00:37 +05:30
const otherFlags = ['/', ':'];
const flags = flagsUseDefaultMatcher.concat(otherFlags);
2018-12-13 13:39:08 +05:30
const flagsHash = flags.reduce((hash, el) => {
hash[el] = null;
return hash;
}, {});
2019-07-07 11:18:12 +05:30
beforeEach(() => {
atwhoInstance = { setting: {}, app: { controllers: flagsHash } };
});
2017-08-17 22:00:37 +05:30
const minLen = 1;
const maxLen = 20;
const argumentSize = [minLen, maxLen / 2, maxLen];
2018-12-13 13:39:08 +05:30
const allowedSymbols = [
'',
'a',
'n',
'z',
'A',
'Z',
'N',
'0',
'5',
'9',
'А',
'а',
'Я',
'я',
'.',
"'",
'-',
'_',
];
2017-08-17 22:00:37 +05:30
const jointAllowedSymbols = allowedSymbols.join('');
describe('should match regular symbols', () => {
2021-03-08 18:12:59 +05:30
flagsUseDefaultMatcher.forEach((flag) => {
allowedSymbols.forEach((symbol) => {
argumentSize.forEach((size) => {
2017-08-17 22:00:37 +05:30
const query = new Array(size + 1).join(symbol);
const subtext = flag + query;
it(`matches argument "${flag}" with query "${subtext}"`, () => {
expect(defaultMatcher(atwhoInstance, flag, subtext)).toBe(query);
});
});
});
it(`matches combination of allowed symbols for flag "${flag}"`, () => {
const subtext = flag + jointAllowedSymbols;
expect(defaultMatcher(atwhoInstance, flag, subtext)).toBe(jointAllowedSymbols);
});
});
});
describe('should not match special sequences', () => {
2018-03-17 18:26:18 +05:30
const shouldNotBeFollowedBy = flags.concat(['\x00', '\x10', '\x3f', '\n', ' ']);
const shouldNotBePrependedBy = ['`'];
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
flagsUseDefaultMatcher.forEach((atSign) => {
shouldNotBeFollowedBy.forEach((followedSymbol) => {
2017-08-17 22:00:37 +05:30
const seq = atSign + followedSymbol;
2018-03-17 18:26:18 +05:30
2018-12-05 23:21:45 +05:30
it(`should not match ${JSON.stringify(seq)}`, () => {
2018-03-17 18:26:18 +05:30
expect(defaultMatcher(atwhoInstance, atSign, seq)).toBe(null);
});
});
2021-03-08 18:12:59 +05:30
shouldNotBePrependedBy.forEach((prependedSymbol) => {
2018-03-17 18:26:18 +05:30
const seq = prependedSymbol + atSign;
2017-08-17 22:00:37 +05:30
it(`should not match "${seq}"`, () => {
expect(defaultMatcher(atwhoInstance, atSign, seq)).toBe(null);
});
});
});
});
});
2019-07-31 22:56:46 +05:30
describe('DefaultOptions.highlighter', () => {
beforeEach(() => {
atwhoInstance = { setting: {} };
});
it('should return li if no query is given', () => {
const liTag = '<li></li>';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag);
expect(highlightedTag).toEqual(liTag);
});
it('should highlight search query in li element', () => {
const liTag = '<li><img src="" />string</li>';
const query = 's';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
expect(highlightedTag).toEqual('<li><img src="" /> <strong>s</strong>tring </li>');
});
it('should highlight search query with special char in li element', () => {
const liTag = '<li><img src="" />te.st</li>';
const query = '.';
const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
expect(highlightedTag).toEqual('<li><img src="" /> te<strong>.</strong>st </li>');
});
});
2019-07-07 11:18:12 +05:30
describe('isLoading', () => {
it('should be true with loading data object item', () => {
2017-08-17 22:00:37 +05:30
expect(GfmAutoComplete.isLoading({ name: 'loading' })).toBe(true);
});
2019-07-07 11:18:12 +05:30
it('should be true with loading data array', () => {
2017-08-17 22:00:37 +05:30
expect(GfmAutoComplete.isLoading(['loading'])).toBe(true);
});
2019-07-07 11:18:12 +05:30
it('should be true with loading data object array', () => {
2017-08-17 22:00:37 +05:30
expect(GfmAutoComplete.isLoading([{ name: 'loading' }])).toBe(true);
});
2019-07-07 11:18:12 +05:30
it('should be false with actual array data', () => {
2018-12-13 13:39:08 +05:30
expect(
2022-08-27 11:52:29 +05:30
GfmAutoComplete.isLoading([{ title: 'events' }, { title: 'Bar' }, { title: 'Qux' }]),
2018-12-13 13:39:08 +05:30
).toBe(false);
2017-08-17 22:00:37 +05:30
});
2019-07-07 11:18:12 +05:30
it('should be false with actual data item', () => {
2022-08-27 11:52:29 +05:30
expect(GfmAutoComplete.isLoading({ title: 'events' })).toBe(false);
2017-08-17 22:00:37 +05:30
});
});
2019-02-15 15:39:39 +05:30
2020-01-01 13:55:28 +05:30
describe('membersBeforeSave', () => {
const mockGroup = {
username: 'my-group',
name: 'My Group',
count: 2,
avatar_url: './group.jpg',
type: 'Group',
mentionsDisabled: false,
};
it('should return the original object when username is null', () => {
expect(membersBeforeSave([{ ...mockGroup, username: null }])).toEqual([
{ ...mockGroup, username: null },
]);
});
it('should set the text avatar if avatar_url is null', () => {
expect(membersBeforeSave([{ ...mockGroup, avatar_url: null }])).toEqual([
{
username: 'my-group',
avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>',
title: 'My Group (2)',
2021-03-11 19:13:27 +05:30
search: 'MyGroup my-group',
2020-01-01 13:55:28 +05:30
icon: '',
},
]);
});
it('should set the image avatar if avatar_url is given', () => {
expect(membersBeforeSave([mockGroup])).toEqual([
{
username: 'my-group',
avatarTag:
'<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
title: 'My Group (2)',
2021-03-11 19:13:27 +05:30
search: 'MyGroup my-group',
2020-01-01 13:55:28 +05:30
icon: '',
},
]);
});
it('should set mentions disabled icon if mentionsDisabled is set', () => {
expect(membersBeforeSave([{ ...mockGroup, mentionsDisabled: true }])).toEqual([
{
username: 'my-group',
avatarTag:
'<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
title: 'My Group',
2021-03-11 19:13:27 +05:30
search: 'MyGroup my-group',
2020-01-01 13:55:28 +05:30
icon:
2020-07-28 23:09:34 +05:30
'<svg class="s16 vertical-align-middle gl-ml-2"><use xlink:href="undefined#notifications-off" /></svg>',
2020-01-01 13:55:28 +05:30
},
]);
});
it('should set the right image classes for User type members', () => {
expect(
membersBeforeSave([
{ username: 'my-user', name: 'My User', avatar_url: './users.jpg', type: 'User' },
]),
).toEqual([
{
username: 'my-user',
avatarTag:
'<img src="./users.jpg" alt="my-user" class="avatar avatar-inline center s26"/>',
title: 'My User',
2021-03-11 19:13:27 +05:30
search: 'MyUser my-user',
2020-01-01 13:55:28 +05:30
icon: '',
},
]);
});
});
2019-07-07 11:18:12 +05:30
describe('Issues.insertTemplateFunction', () => {
it('should return default template', () => {
2019-02-15 15:39:39 +05:30
expect(GfmAutoComplete.Issues.insertTemplateFunction({ id: 5, title: 'Some Issue' })).toBe(
'${atwho-at}${id}', // eslint-disable-line no-template-curly-in-string
);
});
2019-07-07 11:18:12 +05:30
it('should return reference when reference is set', () => {
2019-02-15 15:39:39 +05:30
expect(
GfmAutoComplete.Issues.insertTemplateFunction({
id: 5,
title: 'Some Issue',
reference: 'grp/proj#5',
}),
).toBe('grp/proj#5');
});
});
2019-07-07 11:18:12 +05:30
describe('Issues.templateFunction', () => {
it('should return html with id and title', () => {
2019-02-15 15:39:39 +05:30
expect(GfmAutoComplete.Issues.templateFunction({ id: 5, title: 'Some Issue' })).toBe(
'<li><small>5</small> Some Issue</li>',
);
});
2019-07-07 11:18:12 +05:30
it('should replace id with reference if reference is set', () => {
2019-02-15 15:39:39 +05:30
expect(
GfmAutoComplete.Issues.templateFunction({
id: 5,
title: 'Some Issue',
reference: 'grp/proj#5',
}),
).toBe('<li><small>grp/proj#5</small> Some Issue</li>');
});
2021-09-30 23:02:18 +05:30
it('escapes title in the template as it is user input', () => {
expect(
GfmAutoComplete.Issues.templateFunction({
id: 5,
title: '${search}<script>oh no $', // eslint-disable-line no-template-curly-in-string
}),
).toBe('<li><small>5</small> &dollar;{search}&lt;script&gt;oh no &dollar;</li>');
});
2019-02-15 15:39:39 +05:30
});
2019-07-07 11:18:12 +05:30
2021-04-17 20:07:23 +05:30
describe('GfmAutoComplete.Members', () => {
const member = {
name: 'Marge Simpson',
username: 'msimpson',
search: 'MargeSimpson msimpson',
};
2020-01-01 13:55:28 +05:30
2021-04-17 20:07:23 +05:30
describe('templateFunction', () => {
it('should return html with avatarTag and username', () => {
expect(
GfmAutoComplete.Members.templateFunction({
avatarTag: 'IMG',
username: 'my-group',
title: '',
icon: '',
availabilityStatus: '',
}),
).toBe('<li>IMG my-group <small></small> </li>');
});
2020-01-01 13:55:28 +05:30
2021-04-17 20:07:23 +05:30
it('should add icon if icon is set', () => {
expect(
GfmAutoComplete.Members.templateFunction({
avatarTag: 'IMG',
username: 'my-group',
title: '',
icon: '<i class="icon"/>',
availabilityStatus: '',
}),
).toBe('<li>IMG my-group <small></small> <i class="icon"/></li>');
});
2021-01-29 00:20:46 +05:30
2021-09-30 23:02:18 +05:30
it('escapes title in the template as it is user input', () => {
2021-04-17 20:07:23 +05:30
expect(
GfmAutoComplete.Members.templateFunction({
avatarTag: 'IMG',
username: 'my-group',
2021-09-30 23:02:18 +05:30
title: '${search}<script>oh no $', // eslint-disable-line no-template-curly-in-string
2021-04-17 20:07:23 +05:30
icon: '<i class="icon"/>',
availabilityStatus: '',
}),
2021-09-30 23:02:18 +05:30
).toBe(
'<li>IMG my-group <small>&dollar;{search}&lt;script&gt;oh no &dollar;</small> <i class="icon"/></li>',
);
2021-04-17 20:07:23 +05:30
});
it('should add user availability status if availabilityStatus is set', () => {
expect(
GfmAutoComplete.Members.templateFunction({
avatarTag: 'IMG',
username: 'my-group',
title: '',
icon: '<i class="icon"/>',
availabilityStatus: '<span class="gl-text-gray-500"> (Busy)</span>',
}),
).toBe(
'<li>IMG my-group <small><span class="gl-text-gray-500"> (Busy)</span></small> <i class="icon"/></li>',
);
});
describe('nameOrUsernameStartsWith', () => {
it.each`
query | result
${'mar'} | ${true}
${'msi'} | ${true}
${'margesimpson'} | ${true}
${'msimpson'} | ${true}
${'arge'} | ${false}
${'rgesimp'} | ${false}
${'maria'} | ${false}
${'homer'} | ${false}
`('returns $result for $query', ({ query, result }) => {
expect(GfmAutoComplete.Members.nameOrUsernameStartsWith(member, query)).toBe(result);
});
});
describe('nameOrUsernameIncludes', () => {
it.each`
query | result
${'mar'} | ${true}
${'msi'} | ${true}
${'margesimpson'} | ${true}
${'msimpson'} | ${true}
${'arge'} | ${true}
${'rgesimp'} | ${true}
${'maria'} | ${false}
${'homer'} | ${false}
`('returns $result for $query', ({ query, result }) => {
expect(GfmAutoComplete.Members.nameOrUsernameIncludes(member, query)).toBe(result);
});
});
2021-04-29 21:17:54 +05:30
describe('sorter', () => {
const query = 'c';
const items = [
{ search: 'DougHackett elayne.krieger' },
{ search: 'BerylHuel cherie.block' },
{ search: 'ErlindaMayert nicolle' },
{ search: 'Administrator root' },
{ search: 'PhoebeSchaden salina' },
{ search: 'CatherinTerry tommy.will' },
{ search: 'AntoineLedner ammie' },
{ search: 'KinaCummings robena' },
{ search: 'CharlsieHarber xzbdulia' },
];
const expected = [
// Members whose name/username starts with `c` are grouped first
{ search: 'BerylHuel cherie.block' },
{ search: 'CatherinTerry tommy.will' },
{ search: 'CharlsieHarber xzbdulia' },
// Members whose name/username contains `c` are grouped second
{ search: 'DougHackett elayne.krieger' },
{ search: 'ErlindaMayert nicolle' },
{ search: 'PhoebeSchaden salina' },
{ search: 'KinaCummings robena' },
];
2021-06-08 01:23:25 +05:30
it('filters out non-matches, then puts matches with start of name/username first', () => {
2021-04-29 21:17:54 +05:30
expect(GfmAutoComplete.Members.sort(query, items)).toMatchObject(expected);
});
});
2021-01-29 00:20:46 +05:30
});
2020-01-01 13:55:28 +05:30
});
2019-07-07 11:18:12 +05:30
describe('labels', () => {
const dataSources = {
labels: `${TEST_HOST}/autocomplete_sources/labels`,
};
const allLabels = labelsFixture;
2021-03-08 18:12:59 +05:30
const assignedLabels = allLabels.filter((label) => label.set);
const unassignedLabels = allLabels.filter((label) => !label.set);
2019-07-07 11:18:12 +05:30
let autocomplete;
let $textarea;
beforeEach(() => {
2022-07-16 23:28:13 +05:30
setHTMLFixture('<textarea></textarea>');
2019-07-07 11:18:12 +05:30
autocomplete = new GfmAutoComplete(dataSources);
2021-01-03 14:25:43 +05:30
$textarea = $('textarea');
2019-07-07 11:18:12 +05:30
autocomplete.setup($textarea, { labels: true });
});
afterEach(() => {
autocomplete.destroy();
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2019-07-07 11:18:12 +05:30
});
2021-03-08 18:12:59 +05:30
const triggerDropdown = (text) => {
$textarea.trigger('focus').val(text).caret('pos', -1);
2019-07-07 11:18:12 +05:30
$textarea.trigger('keyup');
2022-08-13 15:12:31 +05:30
jest.runOnlyPendingTimers();
2019-07-07 11:18:12 +05:30
};
const getDropdownItems = () => {
const dropdown = document.getElementById('at-view-labels');
const items = dropdown.getElementsByTagName('li');
2021-03-08 18:12:59 +05:30
return [].map.call(items, (item) => item.textContent.trim());
2019-07-07 11:18:12 +05:30
};
2022-08-13 15:12:31 +05:30
const expectLabels = ({ input, output }) => {
triggerDropdown(input);
expect(getDropdownItems()).toEqual(output.map((label) => label.title));
};
2019-07-07 11:18:12 +05:30
describe('with no labels assigned', () => {
beforeEach(() => {
autocomplete.cachedData['~'] = [...unassignedLabels];
});
it.each`
input | output
${'~'} | ${unassignedLabels}
${'/label ~'} | ${unassignedLabels}
${'/relabel ~'} | ${unassignedLabels}
${'/unlabel ~'} | ${[]}
`('$input shows $output.length labels', expectLabels);
});
describe('with some labels assigned', () => {
beforeEach(() => {
autocomplete.cachedData['~'] = allLabels;
});
it.each`
input | output
${'~'} | ${allLabels}
${'/label ~'} | ${unassignedLabels}
${'/relabel ~'} | ${allLabels}
${'/unlabel ~'} | ${assignedLabels}
`('$input shows $output.length labels', expectLabels);
});
describe('with all labels assigned', () => {
beforeEach(() => {
autocomplete.cachedData['~'] = [...assignedLabels];
});
it.each`
input | output
${'~'} | ${assignedLabels}
${'/label ~'} | ${[]}
${'/relabel ~'} | ${assignedLabels}
${'/unlabel ~'} | ${assignedLabels}
`('$input shows $output.length labels', expectLabels);
});
2021-09-30 23:02:18 +05:30
it('escapes title in the template as it is user input', () => {
const color = '#123456';
const title = '${search}<script>oh no $'; // eslint-disable-line no-template-curly-in-string
expect(GfmAutoComplete.Labels.templateFunction(color, title)).toBe(
'<li><span class="dropdown-label-box" style="background: #123456"></span> &dollar;{search}&lt;script&gt;oh no &dollar;</li>',
);
});
2019-07-07 11:18:12 +05:30
});
2021-01-03 14:25:43 +05:30
describe('emoji', () => {
2021-03-11 19:13:27 +05:30
const mockItem = {
'atwho-at': ':',
emoji: {
c: 'symbols',
d: 'negative squared ab',
e: '🆎',
name: 'ab',
u: '6.0',
},
fieldValue: 'ab',
};
2021-01-03 14:25:43 +05:30
beforeEach(async () => {
2022-01-26 12:08:38 +05:30
await initEmojiMock();
2021-01-03 14:25:43 +05:30
await new GfmAutoComplete({}).loadEmojiData({ atwho() {}, trigger() {} }, ':');
if (!GfmAutoComplete.glEmojiTag) throw new Error('emoji not loaded');
});
afterEach(() => {
2022-01-26 12:08:38 +05:30
clearEmojiMock();
2021-01-03 14:25:43 +05:30
});
2021-03-11 19:13:27 +05:30
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>`;
2021-01-03 14:25:43 +05:30
2021-03-11 19:13:27 +05:30
expect(actual).toBe(expected);
2021-01-03 14:25:43 +05:30
});
});
describe('Emoji.insertTemplateFunction', () => {
2021-03-11 19:13:27 +05:30
it('should return a correct template', () => {
const actual = GfmAutoComplete.Emoji.insertTemplateFunction(mockItem);
const expected = `:${mockItem.emoji.name}:`;
2021-01-03 14:25:43 +05:30
2021-03-11 19:13:27 +05:30
expect(actual).toBe(expected);
2021-01-03 14:25:43 +05:30
});
});
});
2021-09-30 23:02:18 +05:30
describe('milestones', () => {
it('escapes title in the template as it is user input', () => {
const expired = false;
const title = '${search}<script>oh no $'; // eslint-disable-line no-template-curly-in-string
expect(GfmAutoComplete.Milestones.templateFunction(title, expired)).toBe(
'<li>&dollar;{search}&lt;script&gt;oh no &dollar;</li>',
);
});
});
2021-12-11 22:18:48 +05:30
describe('highlighter', () => {
it('escapes regex', () => {
const li = '<li>couple (woman,woman) <gl-emoji data-name="couple_ww"></gl-emoji></li>';
expect(highlighter(li, ')')).toBe(
'<li> couple (woman,woman<strong>)</strong> <gl-emoji data-name="couple_ww"></gl-emoji></li>',
);
});
});
2022-07-16 23:28:13 +05:30
describe('Contacts', () => {
it('escapes name and email correct', () => {
const xssPayload = '<script>alert(1)</script>';
const escapedPayload = '&lt;script&gt;alert(1)&lt;/script&gt;';
expect(
GfmAutoComplete.Contacts.templateFunction({
email: xssPayload,
firstName: xssPayload,
lastName: xssPayload,
}),
).toBe(`<li><small>${escapedPayload} ${escapedPayload}</small> ${escapedPayload}</li>`);
});
});
2022-08-27 11:52:29 +05:30
describe('autocomplete show eventlisteners', () => {
let $textarea;
beforeEach(() => {
setHTMLFixture('<textarea></textarea>');
$textarea = $('textarea');
});
it('sets correct eventlisteners when autocomplete features are enabled', () => {
const autocomplete = new GfmAutoComplete({});
autocomplete.setup($textarea);
autocomplete.setupAtWho($textarea);
/* eslint-disable-next-line no-underscore-dangle */
const events = $._data($textarea[0], 'events');
expect(
Object.keys(events)
.filter((x) => {
return x.startsWith('shown');
})
.map((e) => {
return { key: e, namespace: events[e][0].namespace };
}),
).toEqual(expect.arrayContaining(eventlistenersMockDefaultMap));
});
it('sets no eventlisteners when features are disabled', () => {
const autocomplete = new GfmAutoComplete({});
autocomplete.setup($textarea, {});
autocomplete.setupAtWho($textarea);
/* eslint-disable-next-line no-underscore-dangle */
const events = $._data($textarea[0], 'events');
expect(
Object.keys(events)
.filter((x) => {
return x.startsWith('shown');
})
.map((e) => {
return { key: e, namespace: events[e][0].namespace };
}),
).toStrictEqual([]);
});
});
2017-08-17 22:00:37 +05:30
});