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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
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 });
};
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: '',
fallbackOnError: true,
});
});
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 `projectId` prop', () => {
const validatorFunc = ProjectAvatar.props.projectId.validator;
it('prop validators return true for valid types', () => {
expect(validatorFunc(1)).toBe(true);
expect(validatorFunc('gid://gitlab/Project/1')).toBe(true);
});
it('prop validators return false for invalid types', () => {
expect(validatorFunc('1')).toBe(false);
});
it('renders GlAvatar with `entityId` 0 when `projectId` is not informed', () => {
createComponent({ props: { projectId: undefined } });
const avatar = findGlAvatar();
expect(avatar.props('entityId')).toBe(0);
});
it('renders GlAvatar with specified `entityId` when `projectId` is a Number', () => {
const mockProjectId = 1;
createComponent({ props: { projectId: mockProjectId } });
const avatar = findGlAvatar();
expect(avatar.props('entityId')).toBe(mockProjectId);
});
it('renders GlAvatar with specified `entityId` when `projectId` is a gid String', () => {
const mockProjectId = 'gid://gitlab/Project/1';
createComponent({ props: { projectId: mockProjectId } });
const avatar = findGlAvatar();
expect(avatar.props('entityId')).toBe(1);
});
});
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);
});
});
});
|
