diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js new file mode 100644 index 00000000000..2010bac7060 --- /dev/null +++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js @@ -0,0 +1,119 @@ +import hljs from 'highlight.js/lib/core'; +import { GlLoadingIcon } from '@gitlab/ui'; +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/source_viewer.vue'; +import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants'; +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 language = 'docker'; + const mappedLanguage = ROUGE_TO_HLJS_LANGUAGE_MAP[language]; + const content = `// Some source code`; + const DEFAULT_BLOB_DATA = { language, rawTextBlob: content }; + const highlightedContent = `<span data-testid='test-highlighted' id='LC1'>${content}</span><span id='LC2'></span>`; + + const createComponent = async (blob = {}) => { + wrapper = shallowMountExtended(SourceViewer, { + router, + propsData: { blob: { ...DEFAULT_BLOB_DATA, ...blob } }, + }); + await waitForPromises(); + }; + + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findLineNumbers = () => wrapper.findComponent(LineNumbers); + const findHighlightedContent = () => wrapper.findByTestId('test-highlighted'); + const findFirstLine = () => wrapper.find('#LC1'); + + beforeEach(() => { + hljs.highlight.mockImplementation(() => ({ value: highlightedContent })); + hljs.highlightAuto.mockImplementation(() => ({ value: highlightedContent })); + + return createComponent(); + }); + + afterEach(() => wrapper.destroy()); + + describe('highlight.js', () => { + it('registers the language definition', async () => { + const languageDefinition = await import(`highlight.js/lib/languages/${mappedLanguage}`); + + expect(hljs.registerLanguage).toHaveBeenCalledWith( + mappedLanguage, + languageDefinition.default, + ); + }); + + it('highlights the content', () => { + expect(hljs.highlight).toHaveBeenCalledWith(content, { language: mappedLanguage }); + }); + + describe('auto-detects if a language cannot be loaded', () => { + beforeEach(() => createComponent({ language: 'some_unknown_language' })); + + it('highlights the content with auto-detection', () => { + expect(hljs.highlightAuto).toHaveBeenCalledWith(content); + }); + }); + }); + + describe('rendering', () => { + it('renders a loading icon if no highlighted content is available yet', async () => { + hljs.highlight.mockImplementation(() => ({ value: null })); + await createComponent(); + + expect(findLoadingIcon().exists()).toBe(true); + }); + + 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', + }); + }); + }); +}); |