102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
import hljs from 'highlight.js/lib/core';
|
|
import Vue, { nextTick } from 'vue';
|
|
import VueRouter from 'vue-router';
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
|
import SourceViewer from '~/vue_shared/components/source_viewer.vue';
|
|
import LineNumbers from '~/vue_shared/components/line_numbers.vue';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
jest.mock('highlight.js/lib/core');
|
|
Vue.use(VueRouter);
|
|
const router = new VueRouter();
|
|
|
|
describe('Source Viewer component', () => {
|
|
let wrapper;
|
|
const content = `// Some source code`;
|
|
const highlightedContent = `<span data-testid='test-highlighted' id='LC1'>${content}</span><span id='LC2'></span>`;
|
|
const language = 'javascript';
|
|
|
|
hljs.highlight.mockImplementation(() => ({ value: highlightedContent }));
|
|
hljs.highlightAuto.mockImplementation(() => ({ value: highlightedContent }));
|
|
|
|
const createComponent = async (props = {}) => {
|
|
wrapper = shallowMountExtended(SourceViewer, {
|
|
router,
|
|
propsData: { content, language, ...props },
|
|
});
|
|
await waitForPromises();
|
|
};
|
|
|
|
const findLineNumbers = () => wrapper.findComponent(LineNumbers);
|
|
const findHighlightedContent = () => wrapper.findByTestId('test-highlighted');
|
|
const findFirstLine = () => wrapper.find('#LC1');
|
|
|
|
beforeEach(() => createComponent());
|
|
|
|
afterEach(() => wrapper.destroy());
|
|
|
|
describe('highlight.js', () => {
|
|
it('registers the language definition', async () => {
|
|
const languageDefinition = await import(`highlight.js/lib/languages/${language}`);
|
|
|
|
expect(hljs.registerLanguage).toHaveBeenCalledWith(language, languageDefinition.default);
|
|
});
|
|
|
|
it('highlights the content', () => {
|
|
expect(hljs.highlight).toHaveBeenCalledWith(content, { language });
|
|
});
|
|
|
|
describe('auto-detect enabled', () => {
|
|
beforeEach(() => createComponent({ autoDetect: true }));
|
|
|
|
it('highlights the content with auto-detection', () => {
|
|
expect(hljs.highlightAuto).toHaveBeenCalledWith(content);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('rendering', () => {
|
|
it('renders Line Numbers', () => {
|
|
expect(findLineNumbers().props('lines')).toBe(1);
|
|
});
|
|
|
|
it('renders the highlighted content', () => {
|
|
expect(findHighlightedContent().exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('selecting a line', () => {
|
|
let firstLine;
|
|
let firstLineElement;
|
|
|
|
beforeEach(() => {
|
|
firstLine = findFirstLine();
|
|
firstLineElement = firstLine.element;
|
|
|
|
jest.spyOn(firstLineElement, 'scrollIntoView');
|
|
jest.spyOn(firstLineElement.classList, 'add');
|
|
jest.spyOn(firstLineElement.classList, 'remove');
|
|
});
|
|
|
|
it('adds the highlight (hll) class', async () => {
|
|
wrapper.vm.$router.push('#LC1');
|
|
await nextTick();
|
|
|
|
expect(firstLineElement.classList.add).toHaveBeenCalledWith('hll');
|
|
});
|
|
|
|
it('removes the highlight (hll) class from a previously highlighted line', async () => {
|
|
wrapper.vm.$router.push('#LC2');
|
|
await nextTick();
|
|
|
|
expect(firstLineElement.classList.remove).toHaveBeenCalledWith('hll');
|
|
});
|
|
|
|
it('scrolls the line into view', () => {
|
|
expect(firstLineElement.scrollIntoView).toHaveBeenCalledWith({
|
|
behavior: 'smooth',
|
|
block: 'center',
|
|
});
|
|
});
|
|
});
|
|
});
|