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
|
import { createWrapper } from '@vue/test-utils';
import Vue from 'vue';
import { injectVueAppBreadcrumbs } from '~/lib/utils/breadcrumbs';
import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
import createMockApollo from 'helpers/mock_apollo_helper';
describe('Breadcrumbs utils', () => {
const breadcrumbsHTML = `
<nav>
<ul class="js-breadcrumbs-list">
<li>
<a href="/group-name" data-testid="existing-crumb">Group name</a>
</li>
<li>
<a href="/group-name/project-name/-/subpage" data-testid="last-crumb">Subpage</a>
</li>
</ul>
</nav>
`;
const emptyBreadcrumbsHTML = `
<nav>
<ul class="js-breadcrumbs-list" data-testid="breadcumbs-list">
</ul>
</nav>
`;
const mockRouter = jest.fn();
let MockComponent;
let mockApolloProvider;
beforeEach(() => {
MockComponent = Vue.component('MockComponent', {
render: (createElement) =>
createElement('span', {
attrs: {
'data-testid': 'mock-component',
},
}),
});
mockApolloProvider = createMockApollo();
});
afterEach(() => {
resetHTMLFixture();
MockComponent = null;
});
describe('injectVueAppBreadcrumbs', () => {
describe('without any breadcrumbs', () => {
beforeEach(() => {
setHTMLFixture(emptyBreadcrumbsHTML);
});
it('returns early and stops trying to inject', () => {
expect(injectVueAppBreadcrumbs(mockRouter, MockComponent)).toBe(false);
});
});
describe('with breadcrumbs', () => {
beforeEach(() => {
setHTMLFixture(breadcrumbsHTML);
});
describe.each`
testLabel | apolloProvider
${'set'} | ${mockApolloProvider}
${'not set'} | ${null}
`('given the apollo provider is $testLabel', ({ apolloProvider }) => {
beforeEach(() => {
createWrapper(injectVueAppBreadcrumbs(mockRouter, MockComponent, apolloProvider));
});
it('returns a new breadcrumbs component replacing the inject HTML', () => {
// Using `querySelectorAll` because we're not testing a full Vue app.
// We are testing a partial Vue app added into the pages HTML.
expect(document.querySelectorAll('[data-testid="existing-crumb"]')).toHaveLength(1);
expect(document.querySelectorAll('[data-testid="last-crumb"]')).toHaveLength(0);
expect(document.querySelectorAll('[data-testid="mock-component"]')).toHaveLength(1);
});
});
});
});
});
|
