1 files changed, 53 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 202365ecd35..44d8e467f51 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -9,6 +9,8 @@ import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_w
 import { mockPipelineResponse } from './mock_data';
 
 const defaultProvide = {
+  graphqlResourceEtag: 'frog/amphibirama/etag/',
+  metricsPath: '',
   pipelineProjectPath: 'frog/amphibirama',
   pipelineIid: '22',
 };
@@ -87,6 +89,13 @@ describe('Pipeline graph wrapper', () => {
     it('displays the graph', () => {
       expect(getGraph().exists()).toBe(true);
     });
+
+    it('passes the etag resource and metrics path to the graph', () => {
+      expect(getGraph().props('configPaths')).toMatchObject({
+        graphqlResourceEtag: defaultProvide.graphqlResourceEtag,
+        metricsPath: defaultProvide.metricsPath,
+      });
+    });
   });
 
   describe('when there is an error', () => {
@@ -121,4 +130,48 @@ describe('Pipeline graph wrapper', () => {
       expect(wrapper.vm.$apollo.queries.pipeline.refetch).toHaveBeenCalled();
     });
   });
+
+  describe('when query times out', () => {
+    const advanceApolloTimers = async () => {
+      jest.runOnlyPendingTimers();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+    };
+
+    beforeEach(async () => {
+      const errorData = {
+        data: {
+          project: {
+            pipelines: null,
+          },
+        },
+        errors: [{ message: 'timeout' }],
+      };
+
+      const failSucceedFail = jest
+        .fn()
+        .mockResolvedValueOnce(errorData)
+        .mockResolvedValueOnce(mockPipelineResponse)
+        .mockResolvedValueOnce(errorData);
+
+      createComponentWithApollo(failSucceedFail);
+      await wrapper.vm.$nextTick();
+    });
+
+    it('shows correct errors and does not overwrite populated data when data is empty', async () => {
+      /* fails at first, shows error, no data yet */
+      expect(getAlert().exists()).toBe(true);
+      expect(getGraph().exists()).toBe(false);
+
+      /* succeeds, clears error, shows graph */
+      await advanceApolloTimers();
+      expect(getAlert().exists()).toBe(false);
+      expect(getGraph().exists()).toBe(true);
+
+      /* fails again, alert returns but data persists */
+      await advanceApolloTimers();
+      expect(getAlert().exists()).toBe(true);
+      expect(getGraph().exists()).toBe(true);
+    });
+  });
 });