Add latest changes from gitlab-org/gitlab@master

6 files changed, 123 insertions, 20 deletions

diff --git a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
index cc251104811..7be68df61de 100644
--- a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
+++ b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
@@ -11,7 +11,7 @@ import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeli
 import { COMMIT_BOX_POLL_INTERVAL } from '~/projects/commit_box/info/constants';
 import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql';
 import getPipelineStagesQuery from '~/projects/commit_box/info/graphql/queries/get_pipeline_stages.query.graphql';
-import * as graphQlUtils from '~/pipelines/components/graph/utils';
+import * as sharedGraphQlUtils from '~/graphql_shared/utils';
 import {
   mockDownstreamQueryResponse,
   mockPipelineStagesQueryResponse,
@@ -241,16 +241,16 @@ describe('Commit box pipeline mini graph', () => {
     });
 
     it('toggles query polling with visibility check', async () => {
-      jest.spyOn(graphQlUtils, 'toggleQueryPollingByVisibility');
+      jest.spyOn(sharedGraphQlUtils, 'toggleQueryPollingByVisibility');
 
       createComponent();
 
       await waitForPromises();
 
-      expect(graphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
+      expect(sharedGraphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
         wrapper.vm.$apollo.queries.pipelineStages,
       );
-      expect(graphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
+      expect(sharedGraphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
         wrapper.vm.$apollo.queries.pipeline,
       );
     });
diff --git a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
index 5df35cc6dda..80b75a0a65e 100644
--- a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
+++ b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
@@ -12,7 +12,7 @@ import {
   PIPELINE_STATUS_FETCH_ERROR,
 } from '~/projects/commit_box/info/constants';
 import getLatestPipelineStatusQuery from '~/projects/commit_box/info/graphql/queries/get_latest_pipeline_status.query.graphql';
-import * as graphQlUtils from '~/pipelines/components/graph/utils';
+import * as sharedGraphQlUtils from '~/graphql_shared/utils';
 import { mockPipelineStatusResponse } from '../mock_data';
 
 const mockProvide = {
@@ -132,13 +132,13 @@ describe('Commit box pipeline status', () => {
     });
 
     it('toggles pipelineStatus polling with visibility check', async () => {
-      jest.spyOn(graphQlUtils, 'toggleQueryPollingByVisibility');
+      jest.spyOn(sharedGraphQlUtils, 'toggleQueryPollingByVisibility');
 
       createComponent();
 
       await waitForPromises();
 
-      expect(graphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
+      expect(sharedGraphQlUtils.toggleQueryPollingByVisibility).toHaveBeenCalledWith(
         wrapper.vm.$apollo.queries.pipelineStatus,
       );
     });
diff --git a/spec/frontend/environments/confirm_rollback_modal_spec.js b/spec/frontend/environments/confirm_rollback_modal_spec.js
index 2163814528a..d6601447cff 100644
--- a/spec/frontend/environments/confirm_rollback_modal_spec.js
+++ b/spec/frontend/environments/confirm_rollback_modal_spec.js
@@ -5,6 +5,7 @@ import VueApollo from 'vue-apollo';
 import { trimText } from 'helpers/text_helper';
 import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import eventHub from '~/environments/event_hub';
 
 describe('Confirm Rollback Modal Component', () => {
@@ -53,6 +54,8 @@ describe('Confirm Rollback Modal Component', () => {
     });
   };
 
+  const findModal = () => component.findComponent(GlModal);
+
   describe.each`
     hasMultipleCommits | environmentData             | retryUrl     | primaryPropsAttrs
     ${true}            | ${envWithLastDeployment}    | ${null}      | ${[{ variant: 'danger' }]}
@@ -73,7 +76,7 @@ describe('Confirm Rollback Modal Component', () => {
           hasMultipleCommits,
           retryUrl,
         });
-        const modal = component.findComponent(GlModal);
+        const modal = findModal();
 
         expect(modal.attributes('title')).toContain('Rollback');
         expect(modal.attributes('title')).toContain('test');
@@ -92,7 +95,7 @@ describe('Confirm Rollback Modal Component', () => {
           hasMultipleCommits,
         });
 
-        const modal = component.findComponent(GlModal);
+        const modal = findModal();
 
         expect(modal.attributes('title')).toContain('Re-deploy');
         expect(modal.attributes('title')).toContain('test');
@@ -110,7 +113,7 @@ describe('Confirm Rollback Modal Component', () => {
         });
 
         const eventHubSpy = jest.spyOn(eventHub, '$emit');
-        const modal = component.findComponent(GlModal);
+        const modal = findModal();
         modal.vm.$emit('ok');
 
         expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env);
@@ -155,7 +158,7 @@ describe('Confirm Rollback Modal Component', () => {
             },
             { apolloProvider },
           );
-          const modal = component.findComponent(GlModal);
+          const modal = findModal();
 
           expect(trimText(modal.text())).toContain('commit abc0123');
           expect(modal.text()).toContain('Are you sure you want to continue?');
@@ -177,7 +180,7 @@ describe('Confirm Rollback Modal Component', () => {
             },
             { apolloProvider },
           );
-          const modal = component.findComponent(GlModal);
+          const modal = findModal();
 
           expect(modal.attributes('title')).toContain('Rollback');
           expect(modal.attributes('title')).toContain('test');
@@ -201,7 +204,7 @@ describe('Confirm Rollback Modal Component', () => {
             { apolloProvider },
           );
 
-          const modal = component.findComponent(GlModal);
+          const modal = findModal();
 
           expect(modal.attributes('title')).toContain('Re-deploy');
           expect(modal.attributes('title')).toContain('test');
@@ -220,7 +223,7 @@ describe('Confirm Rollback Modal Component', () => {
             { apolloProvider },
           );
 
-          const modal = component.findComponent(GlModal);
+          const modal = findModal();
           modal.vm.$emit('ok');
 
           await nextTick();
@@ -231,6 +234,25 @@ describe('Confirm Rollback Modal Component', () => {
             expect.anything(),
           );
         });
+
+        it('should emit the "rollback" event when "ok" is clicked', async () => {
+          const env = { ...environmentData, isLastDeployment: true };
+
+          createComponent(
+            {
+              environment: env,
+              hasMultipleCommits,
+              graphql: true,
+            },
+            { apolloProvider },
+          );
+
+          const modal = findModal();
+          modal.vm.$emit('ok');
+
+          await waitForPromises();
+          expect(component.emitted('rollback')).toEqual([[]]);
+        });
       },
     );
   });
diff --git a/spec/frontend/environments/environment_details/page_spec.js b/spec/frontend/environments/environment_details/index_spec.js
index ed7e0feb6ed..4bf5194b86e 100644
--- a/spec/frontend/environments/environment_details/page_spec.js
+++ b/spec/frontend/environments/environment_details/index_spec.js
@@ -5,15 +5,19 @@ import resolvedEnvironmentDetails from 'test_fixtures/graphql/environments/graph
 import emptyEnvironmentDetails from 'test_fixtures/graphql/environments/graphql/queries/environment_details.query.graphql.empty.json';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import EnvironmentsDetailPage from '~/environments/environment_details/index.vue';
+import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
 import EmptyState from '~/environments/environment_details/empty_state.vue';
 import getEnvironmentDetails from '~/environments/graphql/queries/environment_details.query.graphql';
-import createMockApollo from '../../__helpers__/mock_apollo_helper';
-import waitForPromises from '../../__helpers__/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 
-describe('~/environments/environment_details/page.vue', () => {
+const GRAPHQL_ETAG_KEY = '/graphql/environments';
+
+describe('~/environments/environment_details/index.vue', () => {
   Vue.use(VueApollo);
 
   let wrapper;
+  let routerMock;
 
   const emptyEnvironmentToRollbackData = { id: '', name: '', lastDeployment: null, retryUrl: '' };
   const environmentToRollbackMock = jest.fn();
@@ -41,16 +45,23 @@ describe('~/environments/environment_details/page.vue', () => {
       environmentToRollbackData || emptyEnvironmentToRollbackData,
     );
     const projectFullPath = 'gitlab-group/test-project';
+    routerMock = {
+      push: jest.fn(),
+    };
 
     return mountExtended(EnvironmentsDetailPage, {
       apolloProvider: mockApollo,
       provide: {
         projectPath: projectFullPath,
+        graphqlEtagKey: GRAPHQL_ETAG_KEY,
       },
       propsData: {
         projectFullPath,
         environmentName: 'test-environment-name',
       },
+      mocks: {
+        $router: routerMock,
+      },
     });
   };
 
@@ -73,6 +84,14 @@ describe('~/environments/environment_details/page.vue', () => {
         expect(wrapper.findComponent(GlLoadingIcon).exists()).not.toBe(true);
         expect(wrapper.findComponent(GlTableLite).exists()).toBe(true);
       });
+
+      describe('on rollback', () => {
+        it('sets the page back to default', () => {
+          wrapper.findComponent(ConfirmRollbackModal).vm.$emit('rollback');
+
+          expect(routerMock.push).toHaveBeenCalledWith({ query: {} });
+        });
+      });
     });
 
     describe('and there are no deployments', () => {
diff --git a/spec/frontend/graphql_shared/utils_spec.js b/spec/frontend/graphql_shared/utils_spec.js
index cd334ef0d97..35ae8de1b1f 100644
--- a/spec/frontend/graphql_shared/utils_spec.js
+++ b/spec/frontend/graphql_shared/utils_spec.js
@@ -1,3 +1,5 @@
+import Visibility from 'visibilityjs';
+
 import {
   isGid,
   getIdFromGraphQLId,
@@ -6,6 +8,8 @@ import {
   convertFromGraphQLIds,
   convertNodeIdsFromGraphQLIds,
   getNodesOrDefault,
+  toggleQueryPollingByVisibility,
+  etagQueryHeaders,
 } from '~/graphql_shared/utils';
 
 const mockType = 'Group';
@@ -160,3 +164,52 @@ describe('getNodesOrDefault', () => {
     expect(result).toEqual(expected);
   });
 });
+
+describe('toggleQueryPollingByVisibility', () => {
+  let query;
+  let changeFn;
+  let interval;
+  let hidden;
+
+  beforeEach(() => {
+    hidden = jest.spyOn(Visibility, 'hidden').mockReturnValue(true);
+    jest.spyOn(Visibility, 'change').mockImplementation((fn) => {
+      changeFn = fn;
+    });
+
+    query = { startPolling: jest.fn(), stopPolling: jest.fn() };
+    interval = 5000;
+
+    toggleQueryPollingByVisibility(query, 5000);
+  });
+
+  it('starts polling not hidden', () => {
+    hidden.mockReturnValue(false);
+
+    changeFn();
+    expect(query.startPolling).toHaveBeenCalledWith(interval);
+  });
+
+  it('stops polling when hidden', () => {
+    query.stopPolling.mockReset();
+    hidden.mockReturnValue(true);
+
+    changeFn();
+    expect(query.stopPolling).toHaveBeenCalled();
+  });
+});
+
+describe('etagQueryHeaders', () => {
+  it('returns headers necessary for etag caching', () => {
+    expect(etagQueryHeaders('myFeature', 'myResource')).toEqual({
+      fetchOptions: {
+        method: 'GET',
+      },
+      headers: {
+        'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'myFeature',
+        'X-GITLAB-GRAPHQL-RESOURCE-ETAG': 'myResource',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/menu_section_spec.js b/spec/frontend/super_sidebar/components/menu_section_spec.js
index 751c4da5a3d..556e07a2e31 100644
--- a/spec/frontend/super_sidebar/components/menu_section_spec.js
+++ b/spec/frontend/super_sidebar/components/menu_section_spec.js
@@ -7,6 +7,7 @@ import { stubComponent } from 'helpers/stub_component';
 describe('MenuSection component', () => {
   let wrapper;
 
+  const findButton = () => wrapper.find('button');
   const findCollapse = () => wrapper.getComponent(GlCollapse);
   const findNavItems = () => wrapper.findAllComponents(NavItem);
   const createWrapper = (item, otherProps) => {
@@ -22,7 +23,7 @@ describe('MenuSection component', () => {
 
   it('renders its title', () => {
     createWrapper({ title: 'Asdf' });
-    expect(wrapper.find('button').text()).toBe('Asdf');
+    expect(findButton().text()).toBe('Asdf');
   });
 
   it('renders all its subitems', () => {
@@ -36,6 +37,12 @@ describe('MenuSection component', () => {
     expect(findNavItems().length).toBe(2);
   });
 
+  it('associates button with list with aria-controls', () => {
+    createWrapper({ title: 'Asdf' });
+    expect(findButton().attributes('aria-controls')).toBe('asdf');
+    expect(findCollapse().attributes('id')).toBe('asdf');
+  });
+
   describe('collapse behavior', () => {
     describe('when active', () => {
       it('is expanded', () => {
@@ -47,6 +54,7 @@ describe('MenuSection component', () => {
     describe('when set to expanded', () => {
       it('is expanded', () => {
         createWrapper({ title: 'Asdf' }, { expanded: true });
+        expect(findButton().attributes('aria-expanded')).toBe('true');
         expect(findCollapse().props('visible')).toBe(true);
       });
     });
@@ -54,6 +62,7 @@ describe('MenuSection component', () => {
     describe('when not active nor set to expanded', () => {
       it('is not expanded', () => {
         createWrapper({ title: 'Asdf' });
+        expect(findButton().attributes('aria-expanded')).toBe('false');
         expect(findCollapse().props('visible')).toBe(false);
       });
     });
@@ -77,9 +86,9 @@ describe('MenuSection component', () => {
 
   describe('`tag` prop', () => {
     describe('by default', () => {
-      it('renders as <section> tag', () => {
+      it('renders as <div> tag', () => {
         createWrapper({ title: 'Asdf' });
-        expect(wrapper.element.tagName).toBe('SECTION');
+        expect(wrapper.element.tagName).toBe('DIV');
       });
     });