Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

2 files changed, 111 insertions, 71 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
index 023895099b1..06753044e93 100644
--- 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
@@ -1,87 +1,88 @@
 // 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"
-  data-qa-selector="file_content"
->
+<div>
   <div
-    class="line-numbers"
+    class="file-content code js-syntax-highlight"
   >
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="1"
-      href="#LC1"
-      id="L1"
+    <div
+      class="line-numbers"
     >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="1"
+        href="#LC1"
+        id="L1"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        1
       
-      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"
-      />
+      </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
       
-      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"
-      />
+      </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
       
-      3
-    
-    </a>
-  </div>
-   
-  <div
-    class="blob-content"
-  >
-    <pre
-      class="code highlight"
+      </a>
+    </div>
+     
+    <div
+      class="blob-content"
     >
-      <code
-        data-blob-hash="foo-bar"
+      <pre
+        class="code highlight"
       >
-        <span
-          id="LC1"
+        <code
+          data-blob-hash="foo-bar"
         >
-          First
-        </span>
-        
+          <span
+            id="LC1"
+          >
+            First
+          </span>
+          
 
-        <span
-          id="LC2"
-        >
-          Second
-        </span>
-        
+          <span
+            id="LC2"
+          >
+            Second
+          </span>
+          
 
-        <span
-          id="LC3"
-        >
-          Third
-        </span>
-      </code>
-    </pre>
+          <span
+            id="LC3"
+          >
+            Third
+          </span>
+        </code>
+      </pre>
+    </div>
   </div>
 </div>
 `;
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
index 9a0616343fe..46d4edad891 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
@@ -1,20 +1,31 @@
 import { shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
 
 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>`;
   const blobHash = 'foo-bar';
 
-  function createComponent(content = contentMock) {
+  function createComponent(
+    content = contentMock,
+    isRawContent = false,
+    isRefactorFlagEnabled = false,
+  ) {
     wrapper = shallowMount(SimpleViewer, {
       provide: {
         blobHash,
+        glFeatures: {
+          refactorBlobViewer: isRefactorFlagEnabled,
+        },
       },
       propsData: {
         content,
         type: 'text',
+        fileName: 'test.js',
+        isRawContent,
       },
     });
   }
@@ -83,4 +94,32 @@ describe('Blob Simple Viewer component', () => {
       });
     });
   });
+
+  describe('Vue refactoring to use Source Editor', () => {
+    const findEditorLite = () => wrapper.find(EditorLite);
+
+    it.each`
+      doesRender    | condition                                          | isRawContent | isRefactorFlagEnabled
+      ${'Does not'} | ${'rawContent is not specified'}                   | ${false}     | ${true}
+      ${'Does not'} | ${'feature flag is disabled is not specified'}     | ${true}      | ${false}
+      ${'Does not'} | ${'both, the FF and rawContent are not specified'} | ${false}     | ${false}
+      ${'Does'}     | ${'both, the FF and rawContent are specified'}     | ${true}      | ${true}
+    `(
+      '$doesRender render Editor Lite component in readonly mode when $condition',
+      async ({ isRawContent, isRefactorFlagEnabled } = {}) => {
+        createComponent('raw content', isRawContent, isRefactorFlagEnabled);
+        await waitForPromises();
+
+        if (isRawContent && isRefactorFlagEnabled) {
+          expect(findEditorLite().exists()).toBe(true);
+
+          expect(findEditorLite().props('value')).toBe('raw content');
+          expect(findEditorLite().props('fileName')).toBe('test.js');
+          expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
+        } else {
+          expect(findEditorLite().exists()).toBe(false);
+        }
+      },
+    );
+  });
 });