85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
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);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|