1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import { GlAvatar } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
const defaultProps = {
projectName: 'GitLab',
};
describe('ProjectAvatar', () => {
let wrapper;
const findGlAvatar = () => wrapper.findComponent(GlAvatar);
const createComponent = ({ props, attrs } = {}) => {
wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props }, attrs });
};
afterEach(() => {
wrapper.destroy();
});
it('renders GlAvatar with correct props', () => {
createComponent();
const avatar = findGlAvatar();
expect(avatar.exists()).toBe(true);
expect(avatar.props()).toMatchObject({
alt: defaultProps.projectName,
entityName: defaultProps.projectName,
size: 32,
src: '',
});
});
describe('with `size` prop', () => {
it('renders GlAvatar with specified `size` prop', () => {
const mockSize = 48;
createComponent({ props: { size: mockSize } });
const avatar = findGlAvatar();
expect(avatar.props('size')).toBe(mockSize);
});
});
describe('with `projectAvatarUrl` prop', () => {
it('renders GlAvatar with specified `src` prop', () => {
const mockProjectAvatarUrl = 'https://gitlab.com';
createComponent({ props: { projectAvatarUrl: mockProjectAvatarUrl } });
const avatar = findGlAvatar();
expect(avatar.props('src')).toBe(mockProjectAvatarUrl);
});
});
describe.each`
alt
${''}
${'custom-alt'}
`('when `alt` prop is "$alt"', ({ alt }) => {
it('renders GlAvatar with specified `alt` attribute', () => {
createComponent({ props: { alt } });
const avatar = findGlAvatar();
expect(avatar.props('alt')).toBe(alt);
});
});
});
|
