Add latest changes from gitlab-org/gitlab@master

spec/frontend/blob/components/mock_data.js

+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
+
+export const SimpleViewerMock = {
+  collapsed: false,
+  loadingPartialName: 'loading',
+  renderError: null,
+  tooLarge: false,
+  type: SIMPLE_BLOB_VIEWER,
+  fileType: 'text',
+};
+
+export const RichViewerMock = {
+  collapsed: false,
+  loadingPartialName: 'loading',
+  renderError: null,
+  tooLarge: false,
+  type: RICH_BLOB_VIEWER,
+  fileType: 'markdown',
+};
+
 export const Blob = {
   binary: false,
-  highlightedData:
-    '<h1 data-sourcepos="1:1-1:19" dir="auto">\n<a id="user-content-this-one-is-dummy" class="anchor" href="#this-one-is-dummy" aria-hidden="true"></a>This one is dummy</h1>\n<h2 data-sourcepos="3:1-3:21" dir="auto">\n<a id="user-content-and-has-sub-header" class="anchor" href="#and-has-sub-header" aria-hidden="true"></a>And has sub-header</h2>\n<p data-sourcepos="5:1-5:27" dir="auto">Even some  stupid text here</p>',
   name: 'dummy.md',
   path: 'dummy.md',
   rawPath: '/flightjs/flight/snippets/51/raw',
   size: 75,
   simpleViewer: {
-    collapsed: false,
-    fileType: 'text',
-    loadAsync: true,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'simple',
+    ...SimpleViewerMock,
   },
   richViewer: {
-    collapsed: false,
-    fileType: 'markup',
-    loadAsync: true,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'rich',
+    ...RichViewerMock,
   },
 };
+export const RichBlobContentMock = {
+  richData: '<h1>Rich</h1>',
+};
+
+export const SimpleBlobContentMock = {
+  plainData: 'Plain',
+};
+
 export default {};

spec/frontend/snippets/components/snippet_blob_view_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
 import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import BlobContent from '~/blob/components/blob_content.vue';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
 import {
   SNIPPET_VISIBILITY_PRIVATE,
   SNIPPET_VISIBILITY_INTERNAL,
   SNIPPET_VISIBILITY_PUBLIC,
 } from '~/snippets/constants';
+import { Blob as BlobMock, SimpleViewerMock, RichViewerMock } from 'jest/blob/components/mock_data';
+
 describe('Blob Embeddable', () => {
   let wrapper;
   const snippet = {
@@ -16,27 +20,42 @@ describe('Blob Embeddable', () => {
     webUrl: 'https://foo.bar',
     visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
   };
-  function createComponent(props = {}, loading = false) {
+  const dataMock = {
+    blob: BlobMock,
+    activeViewerType: SimpleViewerMock.type,
+  };
+  function createComponent(
+    props = {},
+    data = dataMock,
+    blobLoading = false,
+    contentLoading = false,
+  ) {
     const $apollo = {
       queries: {
         blob: {
-          loading,
+          loading: blobLoading,
+        },
+        blobContent: {
+          loading: contentLoading,
         },
       },
     };
-    wrapper = shallowMount(SnippetBlobView, {
+    wrapper = mount(SnippetBlobView, {
       propsData: {
         snippet: {
           ...snippet,
           ...props,
         },
       },
+      data() {
+        return {
+          ...data,
+        };
+      },
       mocks: { $apollo },
     });
-
-    wrapper.vm.$apollo.queries.blob.loading = false;
   }
   afterEach(() => {
@@ -48,6 +67,7 @@ describe('Blob Embeddable', () => {
       createComponent();
       expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
       expect(wrapper.find(BlobHeader).exists()).toBe(true);
+      expect(wrapper.find(BlobContent).exists()).toBe(true);
     });
     it.each([SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PRIVATE, 'foo'])(
@@ -68,9 +88,92 @@ describe('Blob Embeddable', () => {
     });
     it('shows loading icon while blob data is in flight', () => {
-      createComponent({}, true);
+      createComponent({}, dataMock, true);
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.find('.snippet-file-content').exists()).toBe(false);
     });
+
+    it('sets simple viewer correctly', () => {
+      createComponent();
+      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+    });
+
+    it('sets rich viewer correctly', () => {
+      const data = Object.assign({}, dataMock, {
+        activeViewerType: RichViewerMock.type,
+      });
+      createComponent({}, data);
+      expect(wrapper.find(RichViewer).exists()).toBe(true);
+    });
+
+    it('correctly switches viewer type', () => {
+      createComponent();
+      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+
+      wrapper.vm.switchViewer(RichViewerMock.type);
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.find(RichViewer).exists()).toBe(true);
+          wrapper.vm.switchViewer(SimpleViewerMock.type);
+        })
+        .then(() => {
+          expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+        });
+    });
+
+    describe('URLS with hash', () => {
+      beforeEach(() => {
+        window.location.hash = '#LC2';
+      });
+
+      afterEach(() => {
+        window.location.hash = '';
+      });
+
+      it('renders simple viewer by default if URL contains hash', () => {
+        createComponent();
+
+        expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+        expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+      });
+
+      describe('switchViewer()', () => {
+        it('by default switches to the passed viewer', () => {
+          createComponent();
+
+          wrapper.vm.switchViewer(RichViewerMock.type);
+          return wrapper.vm
+            .$nextTick()
+            .then(() => {
+              expect(wrapper.vm.activeViewerType).toBe(RichViewerMock.type);
+              expect(wrapper.find(RichViewer).exists()).toBe(true);
+
+              wrapper.vm.switchViewer(SimpleViewerMock.type);
+            })
+            .then(() => {
+              expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+              expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+            });
+        });
+
+        it('respects hash over richViewer in the blob when corresponding parameter is passed', () => {
+          createComponent(
+            {},
+            {
+              blob: BlobMock,
+            },
+          );
+          expect(wrapper.vm.blob.richViewer).toEqual(expect.any(Object));
+
+          wrapper.vm.switchViewer(RichViewerMock.type, true);
+          return wrapper.vm.$nextTick().then(() => {
+            expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+            expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+          });
+        });
+      });
+    });
   });
 });

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

+// 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>
+`;

spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js

+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);
+  });
+});

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

+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);
+      });
+    });
+  });
+});

spec/helpers/environments_helper_spec.rb

@@ -20,7 +20,7 @@ describe EnvironmentsHelper do
       expect(metrics_data).to include(
         'settings-path' => edit_project_service_path(project, 'prometheus'),
         'clusters-path' => project_clusters_path(project),
-        'current-environment-name': environment.name,
+        'current-environment-name' => environment.name,
         'documentation-path' => help_page_path('administration/monitoring/prometheus/index.md'),
         'empty-getting-started-svg-path' => match_asset_path('/assets/illustrations/monitoring/getting_started.svg'),
         'empty-loading-svg-path' => match_asset_path('/assets/illustrations/monitoring/loading.svg'),