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 = `
`;
const emptyBreadcrumbsHTML = `
`;
const mockRouter = jest.fn();
const MockComponent = Vue.component('MockComponent', {
render: (createElement) =>
createElement('span', {
attrs: {
'data-testid': 'mock-component',
},
}),
});
const mockApolloProvider = createMockApollo();
afterEach(() => {
resetHTMLFixture();
});
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);
});
});
});
});
});