Add latest changes from gitlab-org/gitlab@master

5 files changed, 196 insertions, 217 deletions

diff --git a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
index c061332ba13..8b3b051f8ca 100644
--- a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
+++ b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
@@ -45,9 +45,9 @@ describe('CiResourceHeader', () => {
       expect(wrapper.html()).toContain(resource.description);
     });
 
-    it('renders the namespace and project path', () => {
-      expect(wrapper.html()).toContain(resource.rootNamespace.fullPath);
-      expect(wrapper.html()).toContain(resource.rootNamespace.name);
+    it('renders the project path and name', () => {
+      expect(wrapper.html()).toContain(resource.webPath);
+      expect(wrapper.html()).toContain(resource.name);
     });
 
     it('renders the avatar', () => {
diff --git a/spec/frontend/ci/catalog/mock.js b/spec/frontend/ci/catalog/mock.js
index 125f003224c..49aaadf3c67 100644
--- a/spec/frontend/ci/catalog/mock.js
+++ b/spec/frontend/ci/catalog/mock.js
@@ -39,12 +39,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-42',
           __typename: 'CiCatalogResource',
         },
@@ -55,12 +49,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-41',
           __typename: 'CiCatalogResource',
         },
@@ -71,12 +59,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-40',
           __typename: 'CiCatalogResource',
         },
@@ -87,12 +69,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-39',
           __typename: 'CiCatalogResource',
         },
@@ -103,12 +79,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-38',
           __typename: 'CiCatalogResource',
         },
@@ -119,12 +89,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-37',
           __typename: 'CiCatalogResource',
         },
@@ -135,12 +99,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-36',
           __typename: 'CiCatalogResource',
         },
@@ -151,12 +109,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-35',
           __typename: 'CiCatalogResource',
         },
@@ -167,12 +119,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-34',
           __typename: 'CiCatalogResource',
         },
@@ -183,12 +129,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-33',
           __typename: 'CiCatalogResource',
         },
@@ -199,12 +139,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-32',
           __typename: 'CiCatalogResource',
         },
@@ -215,12 +149,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-31',
           __typename: 'CiCatalogResource',
         },
@@ -231,12 +159,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-30',
           __typename: 'CiCatalogResource',
         },
@@ -247,12 +169,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-29',
           __typename: 'CiCatalogResource',
         },
@@ -263,12 +179,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-28',
           __typename: 'CiCatalogResource',
         },
@@ -279,12 +189,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-27',
           __typename: 'CiCatalogResource',
         },
@@ -295,12 +199,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-26',
           __typename: 'CiCatalogResource',
         },
@@ -311,12 +209,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-25',
           __typename: 'CiCatalogResource',
         },
@@ -327,12 +219,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-24',
           __typename: 'CiCatalogResource',
         },
@@ -343,12 +229,6 @@ export const catalogResponseBody = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-23',
           __typename: 'CiCatalogResource',
         },
@@ -379,12 +259,6 @@ export const catalogSinglePageResponse = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-45',
           __typename: 'CiCatalogResource',
         },
@@ -395,12 +269,6 @@ export const catalogSinglePageResponse = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-44',
           __typename: 'CiCatalogResource',
         },
@@ -411,12 +279,6 @@ export const catalogSinglePageResponse = {
           description: 'A simple component',
           starCount: 0,
           latestVersion: null,
-          rootNamespace: {
-            id: 'gid://gitlab/Group/185',
-            fullPath: 'frontend-fixtures',
-            name: 'frontend-fixtures',
-            __typename: 'Namespace',
-          },
           webPath: '/frontend-fixtures/project-43',
           __typename: 'CiCatalogResource',
         },
@@ -434,7 +296,6 @@ export const catalogSharedDataMock = {
       icon: null,
       description: 'This is the description of the repo',
       name: 'Ruby',
-      rootNamespace: { id: 1, fullPath: '/group/project', name: 'my-dumb-project' },
       starCount: 1,
       latestVersion: {
         __typename: 'Release',
@@ -502,12 +363,6 @@ const generateResourcesNodes = (count = 20, startId = 0) => {
       description: `This is a component that does a bunch of stuff and is really just a number: ${i}`,
       icon: 'my-icon',
       name: `My component #${i}`,
-      rootNamespace: {
-        id: 1,
-        __typename: 'Namespace',
-        name: 'namespaceName',
-        path: 'namespacePath',
-      },
       starCount: 10,
       latestVersion: {
         __typename: 'Release',
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
index 7f0a171d712..af10d7d5eb7 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
@@ -1,10 +1,17 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { removeBreakLine } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import userPermissionsQuery from '~/vue_merge_request_widget/queries/permissions.query.graphql';
+import conflictsStateQuery from '~/vue_merge_request_widget/queries/states/conflicts.query.graphql';
 import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue';
 
+Vue.use(VueApollo);
+
 describe('MRWidgetConflicts', () => {
   let wrapper;
   const path = '/conflicts';
@@ -20,34 +27,57 @@ describe('MRWidgetConflicts', () => {
   const resolveConflictsBtnText = 'Resolve conflicts';
   const mergeLocallyBtnText = 'Resolve locally';
 
-  async function createComponent(propsData = {}) {
-    wrapper = extendedWrapper(
-      mount(ConflictsComponent, {
-        propsData,
-        data() {
-          return {
+  const defaultApolloProvider = (mockData = {}) => {
+    const userData = {
+      data: {
+        project: {
+          id: 234,
+          mergeRequest: {
+            id: 234,
             userPermissions: {
-              canMerge: propsData.mr.canMerge,
-              pushToSourceBranch: propsData.mr.canPushToSourceBranch,
-            },
-            state: {
-              shouldBeRebased: propsData.mr.shouldBeRebased,
-              sourceBranchProtected: propsData.mr.sourceBranchProtected,
+              canMerge: mockData.canMerge || false,
+              pushToSourceBranch: mockData.canPushToSourceBranch || false,
             },
-          };
+          },
         },
-        mocks: {
-          $apollo: {
-            queries: {
-              userPermissions: { loading: false },
-              stateData: { loading: false },
+      },
+    };
+
+    const mrData = {
+      data: {
+        project: {
+          id: 234,
+          mergeRequest: {
+            id: 234,
+            shouldBeRebased: mockData.shouldBeRebased || false,
+            sourceBranchProtected: mockData.sourceBranchProtected || false,
+            userPermissions: {
+              pushToSourceBranch: mockData.canPushToSourceBranch || false,
             },
           },
         },
+      },
+    };
+
+    return createMockApollo([
+      [userPermissionsQuery, jest.fn().mockResolvedValue(userData)],
+      [conflictsStateQuery, jest.fn().mockResolvedValue(mrData)],
+    ]);
+  };
+
+  async function createComponent({
+    propsData,
+    queryData,
+    apolloProvider = defaultApolloProvider(queryData),
+  } = {}) {
+    wrapper = extendedWrapper(
+      mount(ConflictsComponent, {
+        apolloProvider,
+        propsData,
       }),
     );
 
-    await nextTick();
+    await waitForPromises();
   }
 
   // There are two permissions we need to consider:
@@ -62,11 +92,15 @@ describe('MRWidgetConflicts', () => {
   describe('when allowed to merge but not allowed to push to source branch', () => {
     beforeEach(async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canMerge: true,
           canPushToSourceBranch: false,
           conflictResolutionPath: path,
-          conflictsDocsPath: '',
         },
       });
     });
@@ -89,11 +123,15 @@ describe('MRWidgetConflicts', () => {
   describe('when not allowed to merge but allowed to push to source branch', () => {
     beforeEach(async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictResolutionPath: path,
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canMerge: false,
           canPushToSourceBranch: true,
-          conflictResolutionPath: path,
-          conflictsDocsPath: '',
         },
       });
     });
@@ -116,11 +154,15 @@ describe('MRWidgetConflicts', () => {
   describe('when allowed to merge and push to source branch', () => {
     beforeEach(async () => {
       await createComponent({
-        mr: {
+        queryData: {
           canMerge: true,
           canPushToSourceBranch: true,
-          conflictResolutionPath: path,
-          conflictsDocsPath: '',
+        },
+        propsData: {
+          mr: {
+            conflictResolutionPath: path,
+            conflictsDocsPath: '',
+          },
         },
       });
     });
@@ -144,10 +186,14 @@ describe('MRWidgetConflicts', () => {
   describe('when user does not have permission to push to source branch', () => {
     it('should show proper message', async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canMerge: false,
           canPushToSourceBranch: false,
-          conflictsDocsPath: '',
         },
       });
 
@@ -156,10 +202,14 @@ describe('MRWidgetConflicts', () => {
 
     it('should not have action buttons', async () => {
       await createComponent({
-        mr: {
+        queryData: {
           canMerge: false,
           canPushToSourceBranch: false,
-          conflictsDocsPath: '',
+        },
+        propsData: {
+          mr: {
+            conflictsDocsPath: '',
+          },
         },
       });
 
@@ -169,10 +219,14 @@ describe('MRWidgetConflicts', () => {
 
     it('should not have resolve button when no conflict resolution path', async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictResolutionPath: null,
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canMerge: true,
-          conflictResolutionPath: null,
-          conflictsDocsPath: '',
         },
       });
 
@@ -183,9 +237,13 @@ describe('MRWidgetConflicts', () => {
   describe('when fast-forward or semi-linear merge enabled', () => {
     it('should tell you to rebase locally', async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           shouldBeRebased: true,
-          conflictsDocsPath: '',
         },
       });
 
@@ -196,12 +254,16 @@ describe('MRWidgetConflicts', () => {
   describe('when source branch protected', () => {
     beforeEach(async () => {
       await createComponent({
-        mr: {
+        propsData: {
+          mr: {
+            conflictResolutionPath: TEST_HOST,
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canMerge: true,
-          canPushToSourceBranch: true,
-          conflictResolutionPath: TEST_HOST,
           sourceBranchProtected: true,
-          conflictsDocsPath: '',
+          canPushToSourceBranch: true,
         },
       });
     });
@@ -214,12 +276,16 @@ describe('MRWidgetConflicts', () => {
   describe('when source branch not protected', () => {
     beforeEach(async () => {
       await createComponent({
-        mr: {
-          canMerge: true,
+        propsData: {
+          mr: {
+            conflictResolutionPath: TEST_HOST,
+            conflictsDocsPath: '',
+          },
+        },
+        queryData: {
           canPushToSourceBranch: true,
-          conflictResolutionPath: TEST_HOST,
+          canMerge: true,
           sourceBranchProtected: false,
-          conflictsDocsPath: '',
         },
       });
     });
@@ -229,4 +295,21 @@ describe('MRWidgetConflicts', () => {
       expect(findResolveButton().attributes('href')).toEqual(TEST_HOST);
     });
   });
+
+  describe('error states', () => {
+    it('when project is null due to expired session it does not throw', async () => {
+      const fn = async () => {
+        await createComponent({
+          propsData: { mr: {} },
+          apolloProvider: createMockApollo([
+            [conflictsStateQuery, jest.fn().mockResolvedValue({ data: { project: null } })],
+            [userPermissionsQuery, jest.fn().mockResolvedValue({ data: { project: null } })],
+          ]),
+        });
+        await waitForPromises();
+      };
+
+      await expect(fn()).resolves.not.toThrow();
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
index acfe4571cd2..d0fc732afe7 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -1,10 +1,4 @@
-import {
-  GlAlert,
-  GlSkeletonLoader,
-  GlButton,
-  GlEmptyState,
-  GlIntersectionObserver,
-} from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader, GlButton, GlEmptyState } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -23,6 +17,7 @@ import WorkItemTree from '~/work_items/components/work_item_links/work_item_tree
 import WorkItemRelationships from '~/work_items/components/work_item_relationships/work_item_relationships.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
+import WorkItemStickyHeader from '~/work_items/components/work_item_sticky_header.vue';
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 import WorkItemTodos from '~/work_items/components/work_item_todos.vue';
 import { i18n } from '~/work_items/constants';
@@ -84,11 +79,9 @@ describe('WorkItemDetail component', () => {
   const findModal = () => wrapper.findComponent(WorkItemDetailModal);
   const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector);
   const findWorkItemTodos = () => wrapper.findComponent(WorkItemTodos);
-  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
-  const findStickyHeader = () => wrapper.findByTestId('work-item-sticky-header');
+  const findStickyHeader = () => wrapper.findComponent(WorkItemStickyHeader);
   const findWorkItemTwoColumnViewContainer = () => wrapper.findByTestId('work-item-overview');
   const findRightSidebar = () => wrapper.findByTestId('work-item-overview-right-sidebar');
-  const triggerPageScroll = () => findIntersectionObserver().vm.$emit('disappear');
 
   const createComponent = ({
     isGroup = false,
@@ -769,8 +762,7 @@ describe('WorkItemDetail component', () => {
         expect(findWorkItemTwoColumnViewContainer().classes()).not.toContain('work-item-overview');
       });
 
-      it('does not have sticky header', () => {
-        expect(findIntersectionObserver().exists()).toBe(false);
+      it('does not have sticky header component', () => {
         expect(findStickyHeader().exists()).toBe(false);
       });
 
@@ -789,18 +781,7 @@ describe('WorkItemDetail component', () => {
         expect(findWorkItemTwoColumnViewContainer().classes()).toContain('work-item-overview');
       });
 
-      it('does not show sticky header by default', () => {
-        expect(findStickyHeader().exists()).toBe(false);
-      });
-
-      it('has the sticky header when the page is scrolled', async () => {
-        expect(findIntersectionObserver().exists()).toBe(true);
-
-        global.pageYOffset = 100;
-        triggerPageScroll();
-
-        await nextTick();
-
+      it('renders the work item sticky header component', () => {
         expect(findStickyHeader().exists()).toBe(true);
       });
 
diff --git a/spec/frontend/work_items/components/work_item_sticky_header_spec.js b/spec/frontend/work_items/components/work_item_sticky_header_spec.js
new file mode 100644
index 00000000000..21ca1826ecf
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_sticky_header_spec.js
@@ -0,0 +1,60 @@
+import { GlIntersectionObserver } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { STATE_OPEN } from '~/work_items/constants';
+import { workItemResponseFactory } from 'jest/work_items/mock_data';
+import WorkItemStickyHeader from '~/work_items/components/work_item_sticky_header.vue';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
+import WorkItemActions from '~/work_items/components/work_item_actions.vue';
+import WorkItemTodos from '~/work_items/components/work_item_todos.vue';
+
+describe('WorkItemStickyHeader', () => {
+  let wrapper;
+
+  const workItemResponse = workItemResponseFactory({ canUpdate: true, confidential: true }).data
+    .workItem;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(WorkItemStickyHeader, {
+      propsData: {
+        workItem: workItemResponse,
+        fullPath: '/test',
+        isStickyHeaderShowing: true,
+        workItemNotificationsSubscribed: true,
+        workItemParentId: null,
+        updateInProgress: false,
+        parentWorkItemConfidentiality: false,
+        showWorkItemCurrentUserTodos: true,
+        isModal: false,
+        currentUserTodos: [],
+        workItemState: STATE_OPEN,
+      },
+    });
+  };
+  const findStickyHeader = () => wrapper.findByTestId('work-item-sticky-header');
+  const findConfidentialityBadge = () => wrapper.findComponent(ConfidentialityBadge);
+  const findWorkItemActions = () => wrapper.findComponent(WorkItemActions);
+  const findWorkItemTodos = () => wrapper.findComponent(WorkItemTodos);
+  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const triggerPageScroll = () => findIntersectionObserver().vm.$emit('disappear');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('has the sticky header when the page is scrolled', async () => {
+    global.pageYOffset = 100;
+    triggerPageScroll();
+
+    await nextTick();
+
+    expect(findStickyHeader().exists()).toBe(true);
+  });
+
+  it('has the components of confidentiality, actions, todos and title', () => {
+    expect(findConfidentialityBadge().exists()).toBe(true);
+    expect(findWorkItemActions().exists()).toBe(true);
+    expect(findWorkItemTodos().exists()).toBe(true);
+    expect(wrapper.findByText(workItemResponse.title).exists()).toBe(true);
+  });
+});