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
|
import { GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import LinksSection from '~/monitoring/components/links_section.vue';
import { createStore } from '~/monitoring/stores';
describe('Links Section component', () => {
let store;
let wrapper;
const createShallowWrapper = () => {
wrapper = shallowMount(LinksSection, {
store,
});
};
const setState = (links) => {
store.state.monitoringDashboard = {
...store.state.monitoringDashboard,
emptyState: null,
links,
};
};
const findLinks = () => wrapper.findAllComponents(GlLink);
beforeEach(() => {
store = createStore();
createShallowWrapper();
});
it('does not render a section if no links are present', async () => {
setState();
await nextTick();
expect(findLinks().length).toBe(0);
});
it('renders a link inside a section', async () => {
setState([
{
title: 'GitLab Website',
url: 'https://gitlab.com',
},
]);
await nextTick();
expect(findLinks()).toHaveLength(1);
const firstLink = findLinks().at(0);
expect(firstLink.attributes('href')).toBe('https://gitlab.com');
expect(firstLink.text()).toBe('GitLab Website');
});
it('renders multiple links inside a section', async () => {
const links = new Array(10)
.fill(null)
.map((_, i) => ({ title: `Title ${i}`, url: `https://gitlab.com/projects/${i}` }));
setState(links);
await nextTick();
expect(findLinks()).toHaveLength(10);
});
});
|
