diff options
Diffstat (limited to 'spec/frontend/vue_shared')
3 files changed, 194 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap new file mode 100644 index 00000000000..87f2a8f9eff --- /dev/null +++ b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = ` +<div + class="file-content code js-syntax-highlight qa-file-content" +> + <div + class="line-numbers" + > + <a + class="diff-line-num js-line-number" + data-line-number="1" + href="#LC1" + id="L1" + > + <gl-icon-stub + name="link" + size="12" + /> + + 1 + + </a> + <a + class="diff-line-num js-line-number" + data-line-number="2" + href="#LC2" + id="L2" + > + <gl-icon-stub + name="link" + size="12" + /> + + 2 + + </a> + <a + class="diff-line-num js-line-number" + data-line-number="3" + href="#LC3" + id="L3" + > + <gl-icon-stub + name="link" + size="12" + /> + + 3 + + </a> + </div> + + <div + class="blob-content" + > + <pre + class="code highlight" + > + <code + id="blob-code-content" + > + <span + id="LC1" + > + First + </span> + + + <span + id="LC2" + > + Second + </span> + + + <span + id="LC3" + > + Third + </span> + </code> + </pre> + </div> +</div> +`; diff --git a/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js new file mode 100644 index 00000000000..17ea78b5826 --- /dev/null +++ b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js @@ -0,0 +1,27 @@ +import { shallowMount } from '@vue/test-utils'; +import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue'; + +describe('Blob Rich Viewer component', () => { + let wrapper; + const content = '<h1 id="markdown">Foo Bar</h1>'; + + function createComponent() { + wrapper = shallowMount(RichViewer, { + propsData: { + content, + }, + }); + } + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the passed content without transformations', () => { + expect(wrapper.html()).toContain(content); + }); +}); diff --git a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js new file mode 100644 index 00000000000..d12bfc5c686 --- /dev/null +++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js @@ -0,0 +1,81 @@ +import { shallowMount } from '@vue/test-utils'; +import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue'; +import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants'; + +describe('Blob Simple Viewer component', () => { + let wrapper; + const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`; + + function createComponent(content = contentMock) { + wrapper = shallowMount(SimpleViewer, { + propsData: { + content, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + it('does not fail if content is empty', () => { + const spy = jest.spyOn(window.console, 'error'); + createComponent(''); + expect(spy).not.toHaveBeenCalled(); + }); + + describe('rendering', () => { + beforeEach(() => { + createComponent(); + }); + + it('matches the snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('renders exactly three lines', () => { + expect(wrapper.findAll('.js-line-number')).toHaveLength(3); + }); + + it('renders the content without transformations', () => { + expect(wrapper.html()).toContain(contentMock); + }); + }); + + describe('functionality', () => { + const scrollIntoViewMock = jest.fn(); + HTMLElement.prototype.scrollIntoView = scrollIntoViewMock; + + beforeEach(() => { + window.location.hash = '#LC2'; + createComponent(); + }); + + afterEach(() => { + window.location.hash = ''; + }); + + it('scrolls to requested line when rendered', () => { + const linetoBeHighlighted = wrapper.find('#LC2'); + expect(scrollIntoViewMock).toHaveBeenCalled(); + expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element); + expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME); + }); + + it('switches highlighting when another line is selected', () => { + const currentlyHighlighted = wrapper.find('#LC2'); + const hash = '#LC3'; + const linetoBeHighlighted = wrapper.find(hash); + + expect(wrapper.vm.highlightedLine).toBe(currentlyHighlighted.element); + + wrapper.vm.scrollToLine(hash); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element); + expect(currentlyHighlighted.classes()).not.toContain(HIGHLIGHT_CLASS_NAME); + expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME); + }); + }); + }); +}); |