Commit 171b9c08 authored by Mikhail's avatar Mikhail Committed by Peter Hegman

Replace `GlAvatar` shape prop with a constant

parent ef4b7929
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { filterBySearchTerm } from '~/analytics/shared/utils'; import { filterBySearchTerm } from '~/analytics/shared/utils';
import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
import { n__, s__, __ } from '~/locale'; import { n__, s__, __ } from '~/locale';
import getProjects from '../graphql/projects.query.graphql'; import getProjects from '../graphql/projects.query.graphql';
...@@ -204,6 +205,7 @@ export default { ...@@ -204,6 +205,7 @@ export default {
return getIdFromGraphQLId(project.id); return getIdFromGraphQLId(project.id);
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
<template> <template>
...@@ -227,7 +229,7 @@ export default { ...@@ -227,7 +229,7 @@ export default {
:entity-id="getEntityId(selectedProjects[0])" :entity-id="getEntityId(selectedProjects[0])"
:entity-name="selectedProjects[0].name" :entity-name="selectedProjects[0].name"
:size="16" :size="16"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="selectedProjects[0].name" :alt="selectedProjects[0].name"
class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2" class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
/> />
...@@ -255,7 +257,7 @@ export default { ...@@ -255,7 +257,7 @@ export default {
:entity-id="getEntityId(project)" :entity-id="getEntityId(project)"
:entity-name="project.name" :entity-name="project.name"
:src="project.avatarUrl" :src="project.avatarUrl"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
/> />
<div> <div>
<div data-testid="project-name">{{ project.name }}</div> <div data-testid="project-name">{{ project.name }}</div>
...@@ -279,7 +281,7 @@ export default { ...@@ -279,7 +281,7 @@ export default {
:entity-id="getEntityId(project)" :entity-id="getEntityId(project)"
:entity-name="project.name" :entity-name="project.name"
:src="project.avatarUrl" :src="project.avatarUrl"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
/> />
<div> <div>
<div data-testid="project-name">{{ project.name }}</div> <div data-testid="project-name">{{ project.name }}</div>
......
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
} from '@gitlab/ui'; } from '@gitlab/ui';
import { visitUrl } from '~/lib/utils/url_utility'; import { visitUrl } from '~/lib/utils/url_utility';
import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue'; import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants'; import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -112,6 +113,7 @@ export default { ...@@ -112,6 +113,7 @@ export default {
}, },
}, },
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -145,7 +147,7 @@ export default { ...@@ -145,7 +147,7 @@ export default {
:aria-label="group.name" :aria-label="group.name"
> >
<gl-avatar <gl-avatar
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="group.name" :entity-name="group.name"
:src="group.avatarUrl" :src="group.avatarUrl"
:alt="group.name" :alt="group.name"
......
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import highlight from '~/lib/utils/highlight'; import highlight from '~/lib/utils/highlight';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { GROUPS_CATEGORY, PROJECTS_CATEGORY, LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants'; import { GROUPS_CATEGORY, PROJECTS_CATEGORY, LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
export default { export default {
...@@ -66,6 +67,7 @@ export default { ...@@ -66,6 +67,7 @@ export default {
return this.currentFocusedOption?.html_id === data.html_id; return this.currentFocusedOption?.html_id === data.html_id;
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -93,7 +95,7 @@ export default { ...@@ -93,7 +95,7 @@ export default {
:entity-id="data.id" :entity-id="data.id"
:entity-name="data.label" :entity-name="data.label"
:size="avatarSize(data)" :size="avatarSize(data)"
shape="square" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
/> />
<span v-safe-html="highlightedName(data.label)"></span> <span v-safe-html="highlightedName(data.label)"></span>
</div> </div>
......
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
GlAvatarLabeled, GlAvatarLabeled,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { PROJECTS_PER_PAGE } from '../constants'; import { PROJECTS_PER_PAGE } from '../constants';
import getProjectsQuery from '../graphql/queries/get_projects.query.graphql'; import getProjectsQuery from '../graphql/queries/get_projects.query.graphql';
...@@ -80,6 +81,7 @@ export default { ...@@ -80,6 +81,7 @@ export default {
i18n: { i18n: {
selectProjectText: __('Select a project'), selectProjectText: __('Select a project'),
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -107,7 +109,7 @@ export default { ...@@ -107,7 +109,7 @@ export default {
> >
<gl-avatar-labeled <gl-avatar-labeled
class="gl-text-truncate" class="gl-text-truncate"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32" :size="32"
:src="project.avatarUrl" :src="project.avatarUrl"
:label="project.name" :label="project.name"
......
<script> <script>
import { GlAvatar, GlIcon } from '@gitlab/ui'; import { GlAvatar, GlIcon } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default { export default {
components: { components: {
...@@ -12,6 +13,7 @@ export default { ...@@ -12,6 +13,7 @@ export default {
required: true, required: true,
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -19,7 +21,12 @@ export default { ...@@ -19,7 +21,12 @@ export default {
<div class="gl-display-flex gl-align-items-center"> <div class="gl-display-flex gl-align-items-center">
<gl-icon name="folder-o" class="gl-mr-3" /> <gl-icon name="folder-o" class="gl-mr-3" />
<div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"> <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3">
<gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" /> <gl-avatar
:size="32"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="group.name"
:src="group.avatar_url"
/>
</div> </div>
<div> <div>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui'; import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui';
import { mergeUrlParams } from '~/lib/utils/url_utility'; import { mergeUrlParams } from '~/lib/utils/url_utility';
import { sprintf } from '~/locale'; import { sprintf } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { import {
STARTER_TEMPLATE_NAME, STARTER_TEMPLATE_NAME,
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME, RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
...@@ -33,6 +34,7 @@ export default { ...@@ -33,6 +34,7 @@ export default {
RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT, RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT,
RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT, RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT,
I18N, I18N,
AVATAR_SHAPE_OPTION_RECT,
inject: ['pipelineEditorPath', 'suggestedCiTemplates'], inject: ['pipelineEditorPath', 'suggestedCiTemplates'],
props: { props: {
ciRunnerSettingsPath: { ciRunnerSettingsPath: {
...@@ -187,7 +189,7 @@ export default { ...@@ -187,7 +189,7 @@ export default {
:src="template.logo" :src="template.logo"
:size="48" :size="48"
class="gl-mr-5 gl-bg-white dark-mode-override" class="gl-mr-5 gl-bg-white dark-mode-override"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="template.name" :alt="template.name"
data-testid="template-logo" data-testid="template-logo"
/> />
......
...@@ -83,13 +83,7 @@ export default { ...@@ -83,13 +83,7 @@ export default {
@input="searchAuthors" @input="searchAuthors"
> >
<template #view="{ inputValue }"> <template #view="{ inputValue }">
<gl-avatar <gl-avatar v-if="activeUser" :size="16" :src="activeUser.avatar_url" class="gl-mr-2" />
v-if="activeUser"
:size="16"
:src="activeUser.avatar_url"
shape="circle"
class="gl-mr-2"
/>
<span>{{ activeUser ? activeUser.name : inputValue }}</span> <span>{{ activeUser ? activeUser.name : inputValue }}</span>
</template> </template>
<template #suggestions> <template #suggestions>
......
<script> <script>
import { GlTokenSelector, GlAvatarLabeled } from '@gitlab/ui'; import { GlTokenSelector, GlAvatarLabeled } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import searchProjectTopics from '../queries/project_topics_search.query.graphql'; import searchProjectTopics from '../queries/project_topics_search.query.graphql';
export default { export default {
...@@ -65,6 +66,7 @@ export default { ...@@ -65,6 +66,7 @@ export default {
this.$emit('update', tokens); this.$emit('update', tokens);
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
<template> <template>
...@@ -85,7 +87,7 @@ export default { ...@@ -85,7 +87,7 @@ export default {
:entity-name="dropdownItem.name" :entity-name="dropdownItem.name"
:label="dropdownItem.name" :label="dropdownItem.name"
:size="32" :size="32"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
/> />
</template> </template>
</gl-token-selector> </gl-token-selector>
......
<script> <script>
import { GlAvatar, GlLink } from '@gitlab/ui'; import { GlAvatar, GlLink } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default { export default {
components: { components: {
...@@ -25,13 +26,20 @@ export default { ...@@ -25,13 +26,20 @@ export default {
default: null, default: null,
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
<template> <template>
<div class="gl-display-flex gl-align-items-center gl-py-5"> <div class="gl-display-flex gl-align-items-center gl-py-5">
<gl-link :href="href" data-testid="item-avatar" class="gl-text-decoration-none! gl-mr-3"> <gl-link :href="href" data-testid="item-avatar" class="gl-text-decoration-none! gl-mr-3">
<gl-avatar shape="rect" :entity-name="name" :alt="name" :src="avatarUrl" :size="48" /> <gl-avatar
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="name"
:alt="name"
:src="avatarUrl"
:size="48"
/>
</gl-link> </gl-link>
<gl-link :href="href" class="gl-font-weight-bold gl-text-gray-900!">{{ fullName }}</gl-link> <gl-link :href="href" class="gl-font-weight-bold gl-text-gray-900!">{{ fullName }}</gl-link>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import highlight from '~/lib/utils/highlight'; import highlight from '~/lib/utils/highlight';
import { truncateNamespace } from '~/lib/utils/text_utility'; import { truncateNamespace } from '~/lib/utils/text_utility';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default { export default {
name: 'SearchableDropdownItem', name: 'SearchableDropdownItem',
...@@ -46,6 +47,7 @@ export default { ...@@ -46,6 +47,7 @@ export default {
return highlight(this.item[this.name], this.searchText); return highlight(this.item[this.name], this.searchText);
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -61,7 +63,7 @@ export default { ...@@ -61,7 +63,7 @@ export default {
:src="item.avatar_url" :src="item.avatar_url"
:entity-id="item.id" :entity-id="item.id"
:entity-name="item[name]" :entity-name="item[name]"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32" :size="32"
/> />
<div class="gl-display-flex gl-flex-direction-column"> <div class="gl-display-flex gl-flex-direction-column">
......
...@@ -95,7 +95,6 @@ export default { ...@@ -95,7 +95,6 @@ export default {
v-if="activeTokenValue" v-if="activeTokenValue"
:size="16" :size="16"
:src="getAvatarUrl(activeTokenValue)" :src="getAvatarUrl(activeTokenValue)"
shape="circle"
class="gl-mr-2" class="gl-mr-2"
/> />
{{ activeTokenValue ? activeTokenValue.name : inputValue }} {{ activeTokenValue ? activeTokenValue.name : inputValue }}
......
<script> <script>
import { GlAvatar } from '@gitlab/ui'; import { GlAvatar } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default { export default {
components: { components: {
...@@ -31,12 +32,13 @@ export default { ...@@ -31,12 +32,13 @@ export default {
return this.alt ?? this.projectName; return this.alt ?? this.projectName;
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
<template> <template>
<gl-avatar <gl-avatar
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="projectName" :entity-name="projectName"
:src="projectAvatarUrl" :src="projectAvatarUrl"
:alt="avatarAlt" :alt="avatarAlt"
......
<script> <script>
import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui'; import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default { export default {
name: 'TitleArea', name: 'TitleArea',
...@@ -53,6 +54,7 @@ export default { ...@@ -53,6 +54,7 @@ export default {
} }
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -64,7 +66,7 @@ export default { ...@@ -64,7 +66,7 @@ export default {
<gl-avatar <gl-avatar
v-if="avatar" v-if="avatar"
:src="avatar" :src="avatar"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
class="gl-align-self-center gl-mr-4" class="gl-align-self-center gl-mr-4"
/> />
......
...@@ -13,6 +13,7 @@ import { debounce } from 'lodash'; ...@@ -13,6 +13,7 @@ import { debounce } from 'lodash';
import { filterBySearchTerm } from '~/analytics/shared/utils'; import { filterBySearchTerm } from '~/analytics/shared/utils';
import Api from '~/api'; import Api from '~/api';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { DATA_REFETCH_DELAY } from '../constants'; import { DATA_REFETCH_DELAY } from '../constants';
export default { export default {
...@@ -112,6 +113,7 @@ export default { ...@@ -112,6 +113,7 @@ export default {
.join(' / '); .join(' / ');
}, },
}, },
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -125,7 +127,7 @@ export default { ...@@ -125,7 +127,7 @@ export default {
:entity-id="selectedGroup.id" :entity-id="selectedGroup.id"
:entity-name="selectedGroup.name" :entity-name="selectedGroup.name"
:size="16" :size="16"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="selectedGroup.name" :alt="selectedGroup.name"
class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2" class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
/> />
...@@ -150,7 +152,7 @@ export default { ...@@ -150,7 +152,7 @@ export default {
:entity-id="group.id" :entity-id="group.id"
:entity-name="group.name" :entity-name="group.name"
:src="group.avatar_url" :src="group.avatar_url"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
/> />
<div <div
v-safe-html="formatGroupPath(group.full_name)" v-safe-html="formatGroupPath(group.full_name)"
......
...@@ -161,7 +161,6 @@ export default { ...@@ -161,7 +161,6 @@ export default {
:entity-name="activeItemName" :entity-name="activeItemName"
:entity-id="activeItem.id" :entity-id="activeItem.id"
:alt="getAvatarString(activeItem.name)" :alt="getAvatarString(activeItem.name)"
shape="circle"
class="gl-mr-2" class="gl-mr-2"
data-testid="audit-filter-item-avatar" data-testid="audit-filter-item-avatar"
/> />
...@@ -186,7 +185,6 @@ export default { ...@@ -186,7 +185,6 @@ export default {
:entity-id="item.id" :entity-id="item.id"
:entity-name="item.name" :entity-name="item.name"
:alt="getAvatarString(item.name)" :alt="getAvatarString(item.name)"
shape="circle"
/> />
<div> <div>
<slot name="suggestion" :item="item"></slot> <slot name="suggestion" :item="item"></slot>
......
...@@ -12,6 +12,7 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus'; ...@@ -12,6 +12,7 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { SEARCH_DEBOUNCE } from '../constants'; import { SEARCH_DEBOUNCE } from '../constants';
export default { export default {
...@@ -107,6 +108,7 @@ export default { ...@@ -107,6 +108,7 @@ export default {
}, },
}, },
debounce: SEARCH_DEBOUNCE, debounce: SEARCH_DEBOUNCE,
AVATAR_SHAPE_OPTION_RECT,
}; };
</script> </script>
...@@ -153,7 +155,7 @@ export default { ...@@ -153,7 +155,7 @@ export default {
<gl-dropdown-item v-if="canShowParentGroup" class="w-100" @click="selectedGroup = null"> <gl-dropdown-item v-if="canShowParentGroup" class="w-100" @click="selectedGroup = null">
<gl-avatar <gl-avatar
:entity-name="parentItem.groupName" :entity-name="parentItem.groupName"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32" :size="32"
class="d-inline-flex" class="d-inline-flex"
/> />
...@@ -172,7 +174,7 @@ export default { ...@@ -172,7 +174,7 @@ export default {
<gl-avatar <gl-avatar
:src="group.avatar_url" :src="group.avatar_url"
:entity-name="group.name" :entity-name="group.name"
shape="rect" :shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32" :size="32"
class="d-inline-flex" class="d-inline-flex"
/> />
......
...@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue'; import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue';
import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue'; import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from 'ee/approvals/constants'; import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from 'ee/approvals/constants';
import { AVATAR_SHAPE_OPTION_CIRCLE, AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
const TEST_USER = { const TEST_USER = {
id: 1, id: 1,
...@@ -45,7 +46,7 @@ describe('Approvals ApproversListItem', () => { ...@@ -45,7 +46,7 @@ describe('Approvals ApproversListItem', () => {
expect(avatar.attributes()).toMatchObject({ expect(avatar.attributes()).toMatchObject({
'entity-name': TEST_USER.name, 'entity-name': TEST_USER.name,
src: TEST_USER.avatar_url, src: TEST_USER.avatar_url,
shape: 'circle', shape: AVATAR_SHAPE_OPTION_CIRCLE,
alt: TEST_USER.name, alt: TEST_USER.name,
}); });
expect(avatar.props('label')).toBe(TEST_USER.name); expect(avatar.props('label')).toBe(TEST_USER.name);
...@@ -74,7 +75,7 @@ describe('Approvals ApproversListItem', () => { ...@@ -74,7 +75,7 @@ describe('Approvals ApproversListItem', () => {
expect(avatar.attributes()).toMatchObject({ expect(avatar.attributes()).toMatchObject({
'entity-name': TEST_GROUP.name, 'entity-name': TEST_GROUP.name,
src: TEST_GROUP.avatar_url, src: TEST_GROUP.avatar_url,
shape: 'rect', shape: AVATAR_SHAPE_OPTION_RECT,
alt: TEST_GROUP.name, alt: TEST_GROUP.name,
}); });
expect(avatar.props('label')).toBe(TEST_GROUP.full_path); expect(avatar.props('label')).toBe(TEST_GROUP.full_path);
......
import { GlAvatar } from '@gitlab/ui'; import { GlAvatar } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import RunnerAssignedItem from '~/runner/components/runner_assigned_item.vue'; import RunnerAssignedItem from '~/runner/components/runner_assigned_item.vue';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
const mockHref = '/group/project'; const mockHref = '/group/project';
const mockName = 'Project'; const mockName = 'Project';
...@@ -40,7 +41,7 @@ describe('RunnerAssignedItem', () => { ...@@ -40,7 +41,7 @@ describe('RunnerAssignedItem', () => {
alt: mockName, alt: mockName,
entityName: mockName, entityName: mockName,
src: mockAvatarUrl, src: mockAvatarUrl,
shape: 'rect', shape: AVATAR_SHAPE_OPTION_RECT,
size: 48, size: 48,
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment