diff options
Diffstat (limited to 'spec/frontend/super_sidebar/components/global_search')
8 files changed, 193 insertions, 108 deletions
diff --git a/spec/frontend/super_sidebar/components/global_search/command_palette/__snapshots__/search_item_spec.js.snap b/spec/frontend/super_sidebar/components/global_search/command_palette/__snapshots__/search_item_spec.js.snap index d16d137db2f..e6635672ccf 100644 --- a/spec/frontend/super_sidebar/components/global_search/command_palette/__snapshots__/search_item_spec.js.snap +++ b/spec/frontend/super_sidebar/components/global_search/command_palette/__snapshots__/search_item_spec.js.snap @@ -2,7 +2,7 @@ exports[`SearchItem should render the item 1`] = ` <div - class="gl-display-flex gl-align-items-center" + class="gl-align-items-center gl-display-flex" > <gl-avatar-stub alt="avatar" @@ -14,33 +14,25 @@ exports[`SearchItem should render the item 1`] = ` size="16" src="https://www.gravatar.com/avatar/a9638f4ec70148d51e56bf05ad41e993?s=80&d=identicon" /> - - <!----> - <span class="gl-display-flex gl-flex-direction-column" > <span class="gl-text-gray-900" /> - - <!----> </span> </div> `; exports[`SearchItem should render the item 2`] = ` <div - class="gl-display-flex gl-align-items-center" + class="gl-align-items-center gl-display-flex" > - <!----> - <gl-icon-stub class="gl-mr-3" name="users" size="16" /> - <span class="gl-display-flex gl-flex-direction-column" > @@ -49,15 +41,13 @@ exports[`SearchItem should render the item 2`] = ` > Manage > Activity </span> - - <!----> </span> </div> `; exports[`SearchItem should render the item 3`] = ` <div - class="gl-display-flex gl-align-items-center" + class="gl-align-items-center gl-display-flex" > <gl-avatar-stub alt="avatar" @@ -69,9 +59,6 @@ exports[`SearchItem should render the item 3`] = ` size="32" src="/project/avatar/1/avatar.png" /> - - <!----> - <span class="gl-display-flex gl-flex-direction-column" > @@ -80,7 +67,6 @@ exports[`SearchItem should render the item 3`] = ` > MockProject1 </span> - <span class="gl-font-sm gl-text-gray-500" > @@ -92,7 +78,7 @@ exports[`SearchItem should render the item 3`] = ` exports[`SearchItem should render the item 4`] = ` <div - class="gl-display-flex gl-align-items-center" + class="gl-align-items-center gl-display-flex" > <gl-avatar-stub alt="avatar" @@ -104,9 +90,6 @@ exports[`SearchItem should render the item 4`] = ` size="16" src="" /> - - <!----> - <span class="gl-display-flex gl-flex-direction-column" > @@ -115,8 +98,6 @@ exports[`SearchItem should render the item 4`] = ` > Dismiss Cipher with no integrity </span> - - <!----> </span> </div> `; diff --git a/spec/frontend/super_sidebar/components/global_search/command_palette/command_palette_items_spec.js b/spec/frontend/super_sidebar/components/global_search/command_palette/command_palette_items_spec.js index 85eb7e2e241..7d85dbcbdd3 100644 --- a/spec/frontend/super_sidebar/components/global_search/command_palette/command_palette_items_spec.js +++ b/spec/frontend/super_sidebar/components/global_search/command_palette/command_palette_items_spec.js @@ -9,6 +9,7 @@ import { PATH_GROUP_TITLE, USER_HANDLE, PATH_HANDLE, + PROJECT_HANDLE, SEARCH_SCOPE, MAX_ROWS, } from '~/super_sidebar/components/global_search/command_palette/constants'; @@ -20,6 +21,7 @@ import { import { getFormattedItem } from '~/super_sidebar/components/global_search/utils'; import axios from '~/lib/utils/axios_utils'; import { HTTP_STATUS_OK } from '~/lib/utils/http_status'; +import { mockTracking } from 'helpers/tracking_helper'; import waitForPromises from 'helpers/wait_for_promises'; import { COMMANDS, LINKS, USERS, FILES } from './mock_data'; @@ -32,7 +34,7 @@ describe('CommandPaletteItems', () => { const projectFilesPath = 'project/files/path'; const projectBlobPath = '/blob/main'; - const createComponent = (props) => { + const createComponent = (props, options = {}) => { wrapper = shallowMount(CommandPaletteItems, { propsData: { handle: COMMAND_HANDLE, @@ -51,6 +53,7 @@ describe('CommandPaletteItems', () => { projectFilesPath, projectBlobPath, }, + ...options, }); }; @@ -227,4 +230,41 @@ describe('CommandPaletteItems', () => { expect(axios.get).toHaveBeenCalledTimes(1); }); }); + + describe('Tracking', () => { + let trackingSpy; + let mockAxios; + + beforeEach(() => { + trackingSpy = mockTracking(undefined, undefined, jest.spyOn); + mockAxios = new MockAdapter(axios); + createComponent({ attachTo: document.body }); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('tracks event immediately', () => { + expect(trackingSpy).toHaveBeenCalledTimes(1); + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'activate_command_palette', { + label: 'command', + }); + }); + + it.each` + handle | label + ${USER_HANDLE} | ${'user'} + ${PROJECT_HANDLE} | ${'project'} + ${PATH_HANDLE} | ${'path'} + `('tracks changing the handle to "$handle"', async ({ handle, label }) => { + trackingSpy.mockClear(); + + await wrapper.setProps({ handle }); + expect(trackingSpy).toHaveBeenCalledTimes(1); + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'activate_command_palette', { + label, + }); + }); + }); }); diff --git a/spec/frontend/super_sidebar/components/global_search/command_palette/mock_data.js b/spec/frontend/super_sidebar/components/global_search/command_palette/mock_data.js index d01e5c85741..25a23433b1e 100644 --- a/spec/frontend/super_sidebar/components/global_search/command_palette/mock_data.js +++ b/spec/frontend/super_sidebar/components/global_search/command_palette/mock_data.js @@ -69,24 +69,41 @@ export const TRANSFORMED_LINKS = [ icon: 'users', keywords: 'Manage', text: 'Manage', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'item_without_id', + 'data-track-extra': '{"title":"Manage"}', + }, }, { href: '/flightjs/Flight/activity', icon: 'users', keywords: 'Activity', text: 'Manage > Activity', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'activity', + }, }, { href: '/flightjs/Flight/-/project_members', icon: 'users', keywords: 'Members', text: 'Manage > Members', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'members', + }, }, { href: '/flightjs/Flight/-/labels', icon: 'users', keywords: 'Labels', text: 'Manage > Labels', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'labels', + }, }, ]; diff --git a/spec/frontend/super_sidebar/components/global_search/command_palette/utils_spec.js b/spec/frontend/super_sidebar/components/global_search/command_palette/utils_spec.js index ebc52e2d910..76768bd8da9 100644 --- a/spec/frontend/super_sidebar/components/global_search/command_palette/utils_spec.js +++ b/spec/frontend/super_sidebar/components/global_search/command_palette/utils_spec.js @@ -26,6 +26,10 @@ describe('fileMapper', () => { icon: 'doc-code', text: file, href: `${projectBlobPath}/${file}`, + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'file', + }, }); }); }); diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_default_places_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_default_places_spec.js index c6126a348f5..f91c8034fe9 100644 --- a/spec/frontend/super_sidebar/components/global_search/components/global_search_default_places_spec.js +++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_default_places_spec.js @@ -67,10 +67,26 @@ describe('GlobalSearchDefaultPlaces', () => { { text: 'Explore', href: '/explore', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-extra': '{"title":"Explore"}', + 'data-track-label': 'item_without_id', + 'data-track-property': 'nav_panel_unknown', + 'data-testid': 'places-item-link', + 'data-qa-places-item': 'Explore', + }, }, { text: 'Admin area', href: '/admin', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-extra': '{"title":"Admin area"}', + 'data-track-label': 'item_without_id', + 'data-track-property': 'nav_panel_unknown', + 'data-testid': 'places-item-link', + 'data-qa-places-item': 'Admin area', + }, }, ]); }); diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js index f9a6690a391..038c7a96adc 100644 --- a/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js +++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js @@ -23,7 +23,6 @@ import { ICON_SUBGROUP, SCOPE_TOKEN_MAX_LENGTH, } from '~/super_sidebar/components/global_search/constants'; -import { SEARCH_GITLAB } from '~/vue_shared/global_search/constants'; import { truncate } from '~/lib/utils/text_utility'; import { visitUrl } from '~/lib/utils/url_utility'; import { ENTER_KEY } from '~/lib/utils/keys'; @@ -52,7 +51,7 @@ describe('GlobalSearchModal', () => { clearAutocomplete: jest.fn(), }; - const deafaultMockState = { + const defaultMockState = { searchContext: { project: MOCK_PROJECT, group: MOCK_GROUP, @@ -66,15 +65,14 @@ describe('GlobalSearchModal', () => { }; const createComponent = ({ - initialState = deafaultMockState, + initialState = defaultMockState, mockGetters = defaultMockGetters, stubs, - glFeatures = { commandPalette: false }, ...mountOptions } = {}) => { const store = new Vuex.Store({ state: { - ...deafaultMockState, + ...defaultMockState, ...initialState, }, actions: actionSpies, @@ -89,7 +87,6 @@ describe('GlobalSearchModal', () => { wrapper = shallowMountExtended(GlobalSearchModal, { store, stubs, - provide: { glFeatures }, ...mountOptions, }); }; @@ -271,49 +268,28 @@ describe('GlobalSearchModal', () => { }); describe('Command palette', () => { - describe('when FF `command_palette` is disabled', () => { + describe.each([...COMMON_HANDLES, PATH_HANDLE])('when search handle is %s', (handle) => { beforeEach(() => { - createComponent(); + createComponent({ + initialState: { search: handle }, + }); }); - it('should not render command mode components', () => { - expect(findCommandPaletteItems().exists()).toBe(false); - expect(findFakeSearchInput().exists()).toBe(false); + it('should render command mode components', () => { + expect(findCommandPaletteItems().exists()).toBe(true); + expect(findFakeSearchInput().exists()).toBe(true); }); - it('should provide default placeholder to the search input', () => { - expect(findGlobalSearchInput().attributes('placeholder')).toBe(SEARCH_GITLAB); + it('should provide an alternative placeholder to the search input', () => { + expect(findGlobalSearchInput().attributes('placeholder')).toBe( + SEARCH_OR_COMMAND_MODE_PLACEHOLDER, + ); }); - }); - - describe.each([...COMMON_HANDLES, PATH_HANDLE])( - 'when FF `command_palette` is enabled and search handle is %s', - (handle) => { - beforeEach(() => { - createComponent({ - initialState: { search: handle }, - glFeatures: { - commandPalette: true, - }, - }); - }); - it('should render command mode components', () => { - expect(findCommandPaletteItems().exists()).toBe(true); - expect(findFakeSearchInput().exists()).toBe(true); - }); - - it('should provide an alternative placeholder to the search input', () => { - expect(findGlobalSearchInput().attributes('placeholder')).toBe( - SEARCH_OR_COMMAND_MODE_PLACEHOLDER, - ); - }); - - it('should not render the scope token', () => { - expect(findScopeToken().exists()).toBe(false); - }); - }, - ); + it('should not render the scope token', () => { + expect(findScopeToken().exists()).toBe(false); + }); + }); }); }); @@ -373,9 +349,6 @@ describe('GlobalSearchModal', () => { beforeEach(() => { createComponent({ initialState: { search: '>' }, - glFeatures: { - commandPalette: true, - }, }); submitSearch(); }); diff --git a/spec/frontend/super_sidebar/components/global_search/mock_data.js b/spec/frontend/super_sidebar/components/global_search/mock_data.js index dfa8b458844..61ddfb6cae1 100644 --- a/spec/frontend/super_sidebar/components/global_search/mock_data.js +++ b/spec/frontend/super_sidebar/components/global_search/mock_data.js @@ -109,6 +109,10 @@ export const MOCK_SCOPED_SEARCH_OPTIONS_DEF = [ scopeCategory: PROJECTS_CATEGORY, icon: ICON_PROJECT, href: MOCK_PROJECT.path, + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'scoped_in_project', + }, }, { text: 'scoped-in-group', @@ -116,11 +120,19 @@ export const MOCK_SCOPED_SEARCH_OPTIONS_DEF = [ scopeCategory: GROUPS_CATEGORY, icon: ICON_GROUP, href: MOCK_GROUP.path, + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'scoped_in_group', + }, }, { text: 'scoped-in-all', description: MSG_IN_ALL_GITLAB, href: MOCK_ALL_PATH, + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'scoped_in_all', + }, }, ]; export const MOCK_SCOPED_SEARCH_OPTIONS = [ @@ -263,6 +275,10 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ avatar_size: 32, entity_id: 1, entity_name: 'MockGroup1', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'groups', + }, }, ], }, @@ -281,6 +297,10 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ avatar_size: 32, entity_id: 1, entity_name: 'MockProject1', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'projects', + }, }, { category: 'Projects', @@ -294,6 +314,10 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ avatar_size: 32, entity_id: 2, entity_name: 'MockProject2', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'projects', + }, }, ], }, @@ -307,6 +331,10 @@ export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [ href: 'help/gitlab', avatar_size: 16, entity_name: 'GitLab Help', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'help', + }, }, ], }, @@ -325,6 +353,10 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ avatar_size: 32, entity_id: 1, entity_name: 'MockGroup1', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'groups', + }, }, { avatar_size: 32, @@ -338,6 +370,10 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ namespace: 'Gitlab Org / MockProject1', text: 'MockProject1', value: 'MockProject1', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'projects', + }, }, { avatar_size: 32, @@ -351,6 +387,10 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ namespace: 'Gitlab Org / MockProject2', text: 'MockProject2', value: 'MockProject2', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'projects', + }, }, { avatar_size: 16, @@ -359,6 +399,10 @@ export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [ label: 'GitLab Help', text: 'GitLab Help', href: 'help/gitlab', + extraAttrs: { + 'data-track-action': 'click_command_palette_item', + 'data-track-label': 'help', + }, }, ]; diff --git a/spec/frontend/super_sidebar/components/global_search/utils_spec.js b/spec/frontend/super_sidebar/components/global_search/utils_spec.js index 3b12063e733..3c30445e936 100644 --- a/spec/frontend/super_sidebar/components/global_search/utils_spec.js +++ b/spec/frontend/super_sidebar/components/global_search/utils_spec.js @@ -13,48 +13,58 @@ import { describe('getFormattedItem', () => { describe.each` - item | avatarSize | searchContext | entityId | entityName - ${{ category: PROJECTS_CATEGORY, label: 'project1' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 29 } }} | ${29} | ${'project1'} - ${{ category: GROUPS_CATEGORY, label: 'project1' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 12 } }} | ${12} | ${'project1'} - ${{ category: 'Help', label: 'project1' }} | ${SMALL_AVATAR_PX} | ${null} | ${undefined} | ${'project1'} - ${{ category: 'Settings', label: 'project1' }} | ${SMALL_AVATAR_PX} | ${null} | ${undefined} | ${'project1'} - ${{ category: GROUPS_CATEGORY, value: 'group1', label: 'Group 1' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 1, name: 'test1' } }} | ${1} | ${'group1'} - ${{ category: PROJECTS_CATEGORY, value: 'group2', label: 'Group2' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 2, name: 'test2' } }} | ${2} | ${'group2'} - ${{ category: ISSUES_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 3, name: 'test3' } }} | ${3} | ${'test3'} - ${{ category: MERGE_REQUEST_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 4, name: 'test4' } }} | ${4} | ${'test4'} - ${{ category: RECENT_EPICS_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ group: { id: 5, name: 'test5' } }} | ${5} | ${'test5'} - ${{ category: GROUPS_CATEGORY, group_id: 6, group_name: 'test6' }} | ${LARGE_AVATAR_PX} | ${null} | ${6} | ${'test6'} - ${{ category: PROJECTS_CATEGORY, project_id: 7, project_name: 'test7' }} | ${LARGE_AVATAR_PX} | ${null} | ${7} | ${'test7'} - ${{ category: ISSUES_CATEGORY, project_id: 8, project_name: 'test8' }} | ${SMALL_AVATAR_PX} | ${null} | ${8} | ${'test8'} - ${{ category: MERGE_REQUEST_CATEGORY, project_id: 9, project_name: 'test9' }} | ${SMALL_AVATAR_PX} | ${null} | ${9} | ${'test9'} - ${{ category: RECENT_EPICS_CATEGORY, group_id: 10, group_name: 'test10' }} | ${SMALL_AVATAR_PX} | ${null} | ${10} | ${'test10'} - ${{ category: GROUPS_CATEGORY, group_id: 11, group_name: 'test11' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 1, name: 'test1' } }} | ${11} | ${'test11'} - ${{ category: PROJECTS_CATEGORY, project_id: 12, project_name: 'test12' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 2, name: 'test2' } }} | ${12} | ${'test12'} - ${{ category: ISSUES_CATEGORY, project_id: 13, project_name: 'test13' }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 3, name: 'test3' } }} | ${13} | ${'test13'} - ${{ category: MERGE_REQUEST_CATEGORY, project_id: 14, project_name: 'test14' }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 4, name: 'test4' } }} | ${14} | ${'test14'} - ${{ category: RECENT_EPICS_CATEGORY, group_id: 15, group_name: 'test15' }} | ${SMALL_AVATAR_PX} | ${{ group: { id: 5, name: 'test5' } }} | ${15} | ${'test15'} - `('formats the item', ({ item, avatarSize, searchContext, entityId, entityName }) => { - describe(`when item is ${JSON.stringify(item)}`, () => { - let formattedItem; - beforeEach(() => { - formattedItem = getFormattedItem(item, searchContext); - }); + item | avatarSize | searchContext | entityId | entityName | trackingLabel + ${{ category: PROJECTS_CATEGORY, label: 'project1' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 29 } }} | ${29} | ${'project1'} | ${'projects'} + ${{ category: GROUPS_CATEGORY, label: 'project1' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 12 } }} | ${12} | ${'project1'} | ${'groups'} + ${{ category: 'Help', label: 'project1' }} | ${SMALL_AVATAR_PX} | ${null} | ${undefined} | ${'project1'} | ${'help'} + ${{ category: 'Settings', label: 'project1' }} | ${SMALL_AVATAR_PX} | ${null} | ${undefined} | ${'project1'} | ${'settings'} + ${{ category: GROUPS_CATEGORY, value: 'group1', label: 'Group 1' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 1, name: 'test1' } }} | ${1} | ${'group1'} | ${'groups'} + ${{ category: PROJECTS_CATEGORY, value: 'group2', label: 'Group2' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 2, name: 'test2' } }} | ${2} | ${'group2'} | ${'projects'} + ${{ category: ISSUES_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 3, name: 'test3' } }} | ${3} | ${'test3'} | ${'recent_issues'} + ${{ category: MERGE_REQUEST_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 4, name: 'test4' } }} | ${4} | ${'test4'} | ${'recent_merge_requests'} + ${{ category: RECENT_EPICS_CATEGORY }} | ${SMALL_AVATAR_PX} | ${{ group: { id: 5, name: 'test5' } }} | ${5} | ${'test5'} | ${'recent_epics'} + ${{ category: GROUPS_CATEGORY, group_id: 6, group_name: 'test6' }} | ${LARGE_AVATAR_PX} | ${null} | ${6} | ${'test6'} | ${'groups'} + ${{ category: PROJECTS_CATEGORY, project_id: 7, project_name: 'test7' }} | ${LARGE_AVATAR_PX} | ${null} | ${7} | ${'test7'} | ${'projects'} + ${{ category: ISSUES_CATEGORY, project_id: 8, project_name: 'test8' }} | ${SMALL_AVATAR_PX} | ${null} | ${8} | ${'test8'} | ${'recent_issues'} + ${{ category: MERGE_REQUEST_CATEGORY, project_id: 9, project_name: 'test9' }} | ${SMALL_AVATAR_PX} | ${null} | ${9} | ${'test9'} | ${'recent_merge_requests'} + ${{ category: RECENT_EPICS_CATEGORY, group_id: 10, group_name: 'test10' }} | ${SMALL_AVATAR_PX} | ${null} | ${10} | ${'test10'} | ${'recent_epics'} + ${{ category: GROUPS_CATEGORY, group_id: 11, group_name: 'test11' }} | ${LARGE_AVATAR_PX} | ${{ group: { id: 1, name: 'test1' } }} | ${11} | ${'test11'} | ${'groups'} + ${{ category: PROJECTS_CATEGORY, project_id: 12, project_name: 'test12' }} | ${LARGE_AVATAR_PX} | ${{ project: { id: 2, name: 'test2' } }} | ${12} | ${'test12'} | ${'projects'} + ${{ category: ISSUES_CATEGORY, project_id: 13, project_name: 'test13' }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 3, name: 'test3' } }} | ${13} | ${'test13'} | ${'recent_issues'} + ${{ category: MERGE_REQUEST_CATEGORY, project_id: 14, project_name: 'test14' }} | ${SMALL_AVATAR_PX} | ${{ project: { id: 4, name: 'test4' } }} | ${14} | ${'test14'} | ${'recent_merge_requests'} + ${{ category: RECENT_EPICS_CATEGORY, group_id: 15, group_name: 'test15' }} | ${SMALL_AVATAR_PX} | ${{ group: { id: 5, name: 'test5' } }} | ${15} | ${'test15'} | ${'recent_epics'} + `( + 'formats the item', + ({ item, avatarSize, searchContext, entityId, entityName, trackingLabel }) => { + describe(`when item is ${JSON.stringify(item)}`, () => { + let formattedItem; + beforeEach(() => { + formattedItem = getFormattedItem(item, searchContext); + }); - it(`should set text to ${item.value || item.label}`, () => { - expect(formattedItem.text).toBe(item.value || item.label); - }); + it(`should set text to ${item.value || item.label}`, () => { + expect(formattedItem.text).toBe(item.value || item.label); + }); - it(`should set avatarSize to ${avatarSize}`, () => { - expect(formattedItem.avatar_size).toBe(avatarSize); - }); + it(`should set avatarSize to ${avatarSize}`, () => { + expect(formattedItem.avatar_size).toBe(avatarSize); + }); - it(`should set avatar entityId to ${entityId}`, () => { - expect(formattedItem.entity_id).toBe(entityId); - }); + it(`should set avatar entityId to ${entityId}`, () => { + expect(formattedItem.entity_id).toBe(entityId); + }); + + it(`should set avatar entityName to ${entityName}`, () => { + expect(formattedItem.entity_name).toBe(entityName); + }); - it(`should set avatar entityName to ${entityName}`, () => { - expect(formattedItem.entity_name).toBe(entityName); + it('should add tracking label', () => { + expect(formattedItem.extraAttrs).toEqual({ + 'data-track-action': 'click_command_palette_item', + 'data-track-label': trackingLabel, + }); + }); }); - }); - }); + }, + ); }); |