Commit 888a0346 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch 'Tiny-fixes-to-render-user-inline-avatars-with-gl-avatar' into 'master'

Add CSS class for UserAvatarInline rendered with `GlAvatar`

See merge request gitlab-org/gitlab!83344
parents d9b30205 c66555e9
......@@ -96,11 +96,12 @@ export default {
/>
<gl-tooltip
v-if="tooltipText || $slots.default"
:target="() => $refs.userAvatar.$el"
:placement="tooltipPlacement"
boundary="window"
>
<slot> {{ tooltipText }}</slot>
<slot>{{ tooltipText }}</slot>
</gl-tooltip>
</span>
</template>
......@@ -100,11 +100,12 @@ export default {
class="avatar"
/>
<gl-tooltip
v-if="tooltipText || $slots.default"
:target="() => $refs.userAvatarImage"
:placement="tooltipPlacement"
boundary="window"
>
<slot> {{ tooltipText }}</slot>
<slot>{{ tooltipText }}</slot>
</gl-tooltip>
</span>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { sprintf, __ } from '~/locale';
import UserAvatarLink from './user_avatar_link.vue';
......@@ -8,6 +9,7 @@ export default {
UserAvatarLink,
GlButton,
},
mixins: [glFeatureFlagMixin()],
props: {
items: {
type: Array,
......@@ -57,6 +59,9 @@ export default {
return sprintf(__('%{count} more'), { count });
},
imgCssClasses() {
return this.glFeatures.glAvatarForAllUserAvatars ? 'gl-mr-3' : '';
},
},
methods: {
expand() {
......@@ -80,6 +85,7 @@ export default {
:img-alt="item.name"
:tooltip-text="item.name"
:img-size="imgSize"
:img-css-classes="imgCssClasses"
/>
<template v-if="hasBreakpoint">
<gl-button v-if="hasHiddenItems" variant="link" @click="expand">
......
......@@ -109,19 +109,33 @@ describe('User Avatar Image Component', () => {
default: ['Action!'],
};
describe('when `tooltipText` is provided and no default slot', () => {
beforeEach(() => {
wrapper = shallowMount(UserAvatarImage, {
propsData: PROVIDED_PROPS,
propsData: { ...PROVIDED_PROPS },
});
});
it('renders the tooltip with `tooltipText` as content', () => {
expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
});
});
describe('when `tooltipText` and default slot is provided', () => {
beforeEach(() => {
wrapper = shallowMount(UserAvatarImage, {
propsData: { ...PROVIDED_PROPS },
slots,
});
});
it('renders the tooltip slot', () => {
expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
it('does not render `tooltipText` inside the tooltip', () => {
expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
});
it('renders the tooltip content', () => {
it('renders the content provided via default slot', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
});
});
});
});
......@@ -90,33 +90,38 @@ describe('User Avatar Image Component', () => {
});
});
describe('dynamic tooltip content', () => {
const props = PROVIDED_PROPS;
describe('Dynamic tooltip content', () => {
const slots = {
default: ['Action!'],
};
describe('when `tooltipText` is provided and no default slot', () => {
beforeEach(() => {
wrapper = shallowMount(UserAvatarImage, {
propsData: { props },
slots,
propsData: { ...PROVIDED_PROPS },
});
});
it('renders the tooltip slot', () => {
expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
it('renders the tooltip with `tooltipText` as content', () => {
expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
});
});
it('renders the tooltip content', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
describe('when `tooltipText` and default slot is provided', () => {
beforeEach(() => {
wrapper = shallowMount(UserAvatarImage, {
propsData: { ...PROVIDED_PROPS },
slots,
});
});
it('does not render tooltip data attributes on avatar image', () => {
const avatarImg = wrapper.find('img');
it('does not render `tooltipText` inside the tooltip', () => {
expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
});
expect(avatarImg.attributes('title')).toBeFalsy();
expect(avatarImg.attributes('data-placement')).not.toBeDefined();
expect(avatarImg.attributes('data-container')).not.toBeDefined();
it('renders the content provided via default slot', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
});
});
});
});
......@@ -153,4 +153,29 @@ describe('UserAvatarList', () => {
});
});
});
describe('additional styling for the image', () => {
it('should not add CSS class when feature flag `glAvatarForAllUserAvatars` is disabled', () => {
factory({
propsData: { items: createList(1) },
});
const link = wrapper.findComponent(UserAvatarLink);
expect(link.props('imgCssClasses')).not.toBe('gl-mr-3');
});
it('should add CSS class when feature flag `glAvatarForAllUserAvatars` is enabled', () => {
factory({
propsData: { items: createList(1) },
provide: {
glFeatures: {
glAvatarForAllUserAvatars: true,
},
},
});
const link = wrapper.findComponent(UserAvatarLink);
expect(link.props('imgCssClasses')).toBe('gl-mr-3');
});
});
});
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