1 files changed, 75 insertions, 19 deletions

diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
index eb6e3711e2e..8994fa522d0 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
@@ -2,6 +2,7 @@ import { GlDropdown, GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { deploymentMockData } from './deployment_mock_data';
 
 const appButtonText = {
@@ -36,6 +37,7 @@ describe('Deployment View App button', () => {
   const findMrWigdetDeploymentDropdownIcon = () =>
     wrapper.findByTestId('mr-wigdet-deployment-dropdown-icon');
   const findDeployUrlMenuItems = () => wrapper.findAllComponents(GlLink);
+  const findCopyButton = () => wrapper.findComponent(ModalCopyButton);
 
   describe('text', () => {
     it('renders text as passed', () => {
@@ -44,39 +46,93 @@ describe('Deployment View App button', () => {
   });
 
   describe('without changes', () => {
+    let deployment;
+
     beforeEach(() => {
-      createComponent({
-        propsData: {
-          deployment: { ...deploymentMockData, changes: null },
-          appButtonText,
-        },
+      deployment = { ...deploymentMockData, changes: null };
+    });
+
+    describe('with safe url', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link to the review app without dropdown', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findReviewAppLink().attributes('href')).toBe(deployment.external_url);
       });
     });
 
-    it('renders the link to the review app without dropdown', () => {
-      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+    describe('without safe URL', () => {
+      beforeEach(() => {
+        deployment = { ...deployment, external_url: 'postgres://example' };
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link as a copy button', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findCopyButton().props('text')).toBe(deployment.external_url);
+      });
     });
   });
 
   describe('with a single change', () => {
+    let deployment;
+    let change;
+
     beforeEach(() => {
-      createComponent({
-        propsData: {
-          deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
-          appButtonText,
-        },
-      });
+      [change] = deploymentMockData.changes;
+      deployment = { ...deploymentMockData, changes: [change] };
     });
 
-    it('renders the link to the review app without dropdown', () => {
-      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
-      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
+    describe('with safe URL', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link to the review app without dropdown', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
+      });
+
+      it('renders the link to the review app linked to to the first change', () => {
+        const expectedUrl = deploymentMockData.changes[0].external_url;
+
+        expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
+      });
     });
 
-    it('renders the link to the review app linked to to the first change', () => {
-      const expectedUrl = deploymentMockData.changes[0].external_url;
+    describe('with unsafe URL', () => {
+      beforeEach(() => {
+        change = { ...change, external_url: 'postgres://example' };
+        deployment = { ...deployment, changes: [change] };
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
 
-      expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
+      it('renders the link as a copy button', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findCopyButton().props('text')).toBe(change.external_url);
+      });
     });
   });