Merge branch '38031-monitoring-hover-info-is-clipped' into 'master'

Resolve "Monitoring hover info is clipped"

Closes #38031

See merge request gitlab-org/gitlab-ce!14514

1 files changed, 25 insertions, 0 deletions

diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index c2ff38ffab9..dea42d755d4 100644
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ b/spec/javascripts/monitoring/graph/deployment_spec.js
@@ -21,6 +21,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -36,6 +37,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -49,6 +51,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -62,6 +65,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -75,6 +79,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -82,12 +87,29 @@ describe('MonitoringDeployment', () => {
       expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull();
     });
 
+    it('positions the flag to the left when the xPos is too far right', () => {
+      reducedDeploymentData[0].showDeploymentFlag = false;
+      reducedDeploymentData[0].xPos = 250;
+      const component = createComponent({
+        showDeployInfo: true,
+        deploymentData: reducedDeploymentData,
+        graphWidth: 440,
+        graphHeight: 300,
+        graphHeightOffset: 120,
+      });
+
+      expect(
+        component.positionFlag(reducedDeploymentData[0]),
+      ).toBeLessThan(0);
+    });
+
     it('shows the deployment flag', () => {
       reducedDeploymentData[0].showDeploymentFlag = true;
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -102,6 +124,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -115,6 +138,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -127,6 +151,7 @@ describe('MonitoringDeployment', () => {
           showDeployInfo: true,
           deploymentData: reducedDeploymentData,
           graphHeight: 300,
+          graphWidth: 440,
           graphHeightOffset: 120,
         });