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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui';
import Table from '~/repository/components/table/index.vue';
import TableRow from '~/repository/components/table/row.vue';
let vm;
let $apollo;
const MOCK_BLOBS = [
{
id: '123abc',
sha: '123abc',
flatPath: 'blob',
name: 'blob.md',
type: 'blob',
webPath: '/blob',
},
{
id: '124abc',
sha: '124abc',
flatPath: 'blob2',
name: 'blob2.md',
type: 'blob',
webUrl: 'http://test.com',
},
{
id: '125abc',
sha: '125abc',
flatPath: 'blob3',
name: 'blob3.md',
type: 'blob',
webUrl: 'http://test.com',
mode: '120000',
},
];
function factory({ path, isLoading = false, hasMore = true, entries = {} }) {
vm = shallowMount(Table, {
propsData: {
path,
isLoading,
entries,
hasMore,
},
mocks: {
$apollo,
},
});
}
describe('Repository table component', () => {
afterEach(() => {
vm.destroy();
});
it.each`
path | ref
${'/'} | ${'master'}
${'app/assets'} | ${'master'}
${'/'} | ${'test'}
`('renders table caption for $ref in $path', ({ path, ref }) => {
factory({ path });
vm.setData({ ref });
return vm.vm.$nextTick(() => {
expect(vm.find('.table').attributes('aria-label')).toEqual(
`Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
);
});
});
it('shows loading icon', () => {
factory({ path: '/', isLoading: true });
expect(vm.find(GlSkeletonLoading).exists()).toBe(true);
});
it('renders table rows', () => {
factory({
path: '/',
entries: {
blobs: MOCK_BLOBS,
},
});
const rows = vm.findAll(TableRow);
expect(rows.length).toEqual(3);
expect(rows.at(2).attributes().mode).toEqual('120000');
});
describe('Show more button', () => {
const showMoreButton = () => vm.find(GlButton);
it.each`
hasMore | expectButtonToExist
${true} | ${true}
${false} | ${false}
`('renders correctly', ({ hasMore, expectButtonToExist }) => {
factory({ path: '/', hasMore });
expect(showMoreButton().exists()).toBe(expectButtonToExist);
});
it('when is clicked, emits showMore event', async () => {
factory({ path: '/' });
showMoreButton().vm.$emit('click');
await vm.vm.$nextTick();
expect(vm.emitted('showMore')).toHaveLength(1);
});
});
});
|