summaryrefslogtreecommitdiff
path: root/spec/frontend/vue_shared
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-02-14 18:08:45 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-02-14 18:08:45 +0000
commit26a50872e9da9509c52c70f74dc21698fec906db (patch)
treeb1bd36bd72e701e346ef880fc7a905f6186525e7 /spec/frontend/vue_shared
parentb3a736ed88a1db0391cd9881e70b987bab7d89d1 (diff)
downloadgitlab-ce-26a50872e9da9509c52c70f74dc21698fec906db.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared')
-rw-r--r--spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap86
-rw-r--r--spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js27
-rw-r--r--spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js81
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);
+ });
+ });
+ });
+});