1 files changed, 62 insertions, 7 deletions

diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index f03df8cf2ac..495039b4ccb 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -5,6 +5,7 @@ import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue';
+import BlobReplace from '~/repository/components/blob_replace.vue';
 
 let wrapper;
 const simpleMockData = {
@@ -75,10 +76,11 @@ const factory = createFactory(shallowMount);
 const fullFactory = createFactory(mount);
 
 describe('Blob content viewer component', () => {
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findBlobHeader = () => wrapper.find(BlobHeader);
-  const findBlobHeaderEdit = () => wrapper.find(BlobHeaderEdit);
-  const findBlobContent = () => wrapper.find(BlobContent);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findBlobHeader = () => wrapper.findComponent(BlobHeader);
+  const findBlobHeaderEdit = () => wrapper.findComponent(BlobHeaderEdit);
+  const findBlobContent = () => wrapper.findComponent(BlobContent);
+  const findBlobReplace = () => wrapper.findComponent(BlobReplace);
 
   afterEach(() => {
     wrapper.destroy();
@@ -162,15 +164,23 @@ describe('Blob content viewer component', () => {
   });
 
   describe('BlobHeader action slot', () => {
-    it('renders BlobHeaderEdit button in simple viewer', async () => {
+    const { ideEditPath, editBlobPath } = simpleMockData;
+
+    it('renders BlobHeaderEdit buttons in simple viewer', async () => {
       fullFactory({
         mockData: { blobInfo: simpleMockData },
         stubs: {
           BlobContent: true,
+          BlobReplace: true,
         },
       });
+
       await nextTick();
-      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
+
+      expect(findBlobHeaderEdit().props()).toMatchObject({
+        editPath: editBlobPath,
+        webIdePath: ideEditPath,
+      });
     });
 
     it('renders BlobHeaderEdit button in rich viewer', async () => {
@@ -178,10 +188,55 @@ describe('Blob content viewer component', () => {
         mockData: { blobInfo: richMockData },
         stubs: {
           BlobContent: true,
+          BlobReplace: true,
         },
       });
+
       await nextTick();
-      expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
+
+      expect(findBlobHeaderEdit().props()).toMatchObject({
+        editPath: editBlobPath,
+        webIdePath: ideEditPath,
+      });
+    });
+
+    describe('BlobReplace', () => {
+      const { name, path } = simpleMockData;
+
+      it('renders component', async () => {
+        window.gon.current_user_id = 1;
+
+        fullFactory({
+          mockData: { blobInfo: simpleMockData },
+          stubs: {
+            BlobContent: true,
+            BlobReplace: true,
+          },
+        });
+
+        await nextTick();
+
+        expect(findBlobReplace().props()).toMatchObject({
+          name,
+          path,
+        });
+      });
+
+      it('does not render if not logged in', async () => {
+        window.gon.current_user_id = null;
+
+        fullFactory({
+          mockData: { blobInfo: simpleMockData },
+          stubs: {
+            BlobContent: true,
+            BlobReplace: true,
+          },
+        });
+
+        await nextTick();
+
+        expect(findBlobReplace().exists()).toBe(false);
+      });
     });
   });
 });