Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

7 files changed, 80 insertions, 53 deletions

diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
index 22bec77276b..b3d93906445 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
@@ -13,6 +13,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
      
     <blob-filepath-stub
       blob="[object Object]"
+      showpath="true"
     />
   </div>
    
diff --git a/spec/frontend/blob/components/blob_edit_header_spec.js b/spec/frontend/blob/components/blob_edit_header_spec.js
index 910fc5c946d..b1ce0e9a4c5 100644
--- a/spec/frontend/blob/components/blob_edit_header_spec.js
+++ b/spec/frontend/blob/components/blob_edit_header_spec.js
@@ -1,5 +1,6 @@
 import { GlFormInput, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BlobEditHeader from '~/blob/components/blob_edit_header.vue';
 
 describe('Blob Header Editing', () => {
@@ -40,7 +41,7 @@ describe('Blob Header Editing', () => {
   });
 
   describe('functionality', () => {
-    it('emits input event when the blob name is changed', () => {
+    it('emits input event when the blob name is changed', async () => {
       const inputComponent = wrapper.find(GlFormInput);
       const newValue = 'bar.txt';
 
@@ -51,9 +52,8 @@ describe('Blob Header Editing', () => {
       });
       inputComponent.vm.$emit('change');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted().input[0]).toEqual([newValue]);
-      });
+      await nextTick();
+      expect(wrapper.emitted().input[0]).toEqual([newValue]);
     });
   });
 
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index e321bb41774..af605b257de 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -1,13 +1,13 @@
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import BlobHeaderActions from '~/blob/components/blob_header_default_actions.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
   BTN_RAW_TITLE,
   RICH_BLOB_VIEWER,
 } from '~/blob/components/constants';
-import { Blob } from './mock_data';
+import { Blob, mockEnvironmentName, mockEnvironmentPath } from './mock_data';
 
 describe('Blob Header Default Actions', () => {
   let wrapper;
@@ -17,7 +17,7 @@ describe('Blob Header Default Actions', () => {
   const blobHash = 'foo-bar';
 
   function createComponent(propsData = {}) {
-    wrapper = mount(BlobHeaderActions, {
+    wrapper = shallowMountExtended(BlobHeaderActions, {
       provide: {
         blobHash,
       },
@@ -39,8 +39,8 @@ describe('Blob Header Default Actions', () => {
   });
 
   describe('renders', () => {
-    const findCopyButton = () => wrapper.find('[data-testid="copyContentsButton"]');
-    const findViewRawButton = () => wrapper.find('[data-testid="viewRawButton"]');
+    const findCopyButton = () => wrapper.findByTestId('copyContentsButton');
+    const findViewRawButton = () => wrapper.findByTestId('viewRawButton');
 
     it('gl-button-group component', () => {
       expect(btnGroup.exists()).toBe(true);
@@ -89,4 +89,37 @@ describe('Blob Header Default Actions', () => {
       expect(findViewRawButton().exists()).toBe(false);
     });
   });
+
+  describe('view on environment button', () => {
+    const findEnvironmentButton = () => wrapper.findByTestId('environment');
+
+    it.each`
+      environmentName        | environmentPath        | isVisible
+      ${null}                | ${null}                | ${false}
+      ${null}                | ${mockEnvironmentPath} | ${false}
+      ${mockEnvironmentName} | ${null}                | ${false}
+      ${mockEnvironmentName} | ${mockEnvironmentPath} | ${true}
+    `(
+      'when environmentName is $environmentName and environmentPath is $environmentPath',
+      ({ environmentName, environmentPath, isVisible }) => {
+        createComponent({ environmentName, environmentPath });
+
+        expect(findEnvironmentButton().exists()).toBe(isVisible);
+      },
+    );
+
+    it('renders the correct attributes', () => {
+      createComponent({
+        environmentName: mockEnvironmentName,
+        environmentPath: mockEnvironmentPath,
+      });
+
+      expect(findEnvironmentButton().attributes()).toMatchObject({
+        title: `View on ${mockEnvironmentName}`,
+        href: mockEnvironmentPath,
+      });
+
+      expect(findEnvironmentButton().props('icon')).toBe('external-link');
+    });
+  });
 });
diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js
index bd81b1594bf..8e1b03c6126 100644
--- a/spec/frontend/blob/components/blob_header_spec.js
+++ b/spec/frontend/blob/components/blob_header_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
 import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
@@ -139,26 +140,24 @@ describe('Blob Header Default Actions', () => {
       expect(wrapper.vm.viewer).toBe(null);
     });
 
-    it('watches the changes in viewer data and emits event when the change is registered', () => {
+    it('watches the changes in viewer data and emits event when the change is registered', async () => {
       factory();
       jest.spyOn(wrapper.vm, '$emit');
       wrapper.vm.viewer = newViewer;
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer);
-      });
+      await nextTick();
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer);
     });
 
-    it('does not emit event if the switcher is not rendered', () => {
+    it('does not emit event if the switcher is not rendered', async () => {
       factory(true);
 
       expect(wrapper.vm.showViewerSwitcher).toBe(false);
       jest.spyOn(wrapper.vm, '$emit');
       wrapper.vm.viewer = newViewer;
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.$emit).not.toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
     });
   });
 });
diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
index 9a560ec11f7..91baaf3ea69 100644
--- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
+++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
@@ -1,5 +1,6 @@
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
 import {
   RICH_BLOB_VIEWER,
@@ -72,26 +73,24 @@ describe('Blob Header Viewer Switcher', () => {
       expect(wrapper.vm.$emit).not.toHaveBeenCalled();
     });
 
-    it('emits an event when a Rich Viewer button is clicked', () => {
+    it('emits an event when a Rich Viewer button is clicked', async () => {
       factory();
       expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
 
       richBtn.vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', RICH_BLOB_VIEWER);
-      });
+      await nextTick();
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', RICH_BLOB_VIEWER);
     });
 
-    it('emits an event when a Simple Viewer button is clicked', () => {
+    it('emits an event when a Simple Viewer button is clicked', async () => {
       factory({
         value: RICH_BLOB_VIEWER,
       });
       simpleBtn.vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', SIMPLE_BLOB_VIEWER);
-      });
+      await nextTick();
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', SIMPLE_BLOB_VIEWER);
     });
   });
 });
diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js
index 95789ca13cb..9a345921f16 100644
--- a/spec/frontend/blob/components/mock_data.js
+++ b/spec/frontend/blob/components/mock_data.js
@@ -55,3 +55,6 @@ export const SimpleBlobContentMock = {
   path: 'foo.js',
   plainData: 'Plain',
 };
+
+export const mockEnvironmentName = 'my.testing.environment';
+export const mockEnvironmentPath = 'https://my.testing.environment';
diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js
index 9e9f866d40c..fe55a537b89 100644
--- a/spec/frontend/blob/viewer/index_spec.js
+++ b/spec/frontend/blob/viewer/index_spec.js
@@ -41,34 +41,30 @@ describe('Blob viewer', () => {
     window.location.hash = '';
   });
 
-  it('loads source file after switching views', (done) => {
+  it('loads source file after switching views', async () => {
     document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
-    setImmediate(() => {
-      expect(
-        document
-          .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
-          .classList.contains('hidden'),
-      ).toBeFalsy();
+    await axios.waitForAll();
 
-      done();
-    });
+    expect(
+      document
+        .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+        .classList.contains('hidden'),
+    ).toBeFalsy();
   });
 
-  it('loads source file when line number is in hash', (done) => {
+  it('loads source file when line number is in hash', async () => {
     window.location.hash = '#L1';
 
     new BlobViewer();
 
-    setImmediate(() => {
-      expect(
-        document
-          .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
-          .classList.contains('hidden'),
-      ).toBeFalsy();
+    await axios.waitForAll();
 
-      done();
-    });
+    expect(
+      document
+        .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+        .classList.contains('hidden'),
+    ).toBeFalsy();
   });
 
   it('doesnt reload file if already loaded', () => {
@@ -123,24 +119,20 @@ describe('Blob viewer', () => {
       expect(copyButton.blur).not.toHaveBeenCalled();
     });
 
-    it('enables after switching to simple view', (done) => {
+    it('enables after switching to simple view', async () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
-      setImmediate(() => {
-        expect(copyButton.classList.contains('disabled')).toBeFalsy();
+      await axios.waitForAll();
 
-        done();
-      });
+      expect(copyButton.classList.contains('disabled')).toBeFalsy();
     });
 
-    it('updates tooltip after switching to simple view', (done) => {
+    it('updates tooltip after switching to simple view', async () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
-      setImmediate(() => {
-        expect(copyButtonTooltip.getAttribute('title')).toBe('Copy file contents');
+      await axios.waitForAll();
 
-        done();
-      });
+      expect(copyButtonTooltip.getAttribute('title')).toBe('Copy file contents');
     });
   });