1 files changed, 37 insertions, 6 deletions

diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
index 8dc3348acfa..d720574ce6d 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -2,6 +2,9 @@ import { GlIntersectionObserver } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
 import ChunkLine from '~/vue_shared/components/source_viewer/components/chunk_line.vue';
+import { scrollToElement } from '~/lib/utils/common_utils';
+
+jest.mock('~/lib/utils/common_utils');
 
 const DEFAULT_PROPS = {
   chunkIndex: 2,
@@ -13,11 +16,17 @@ const DEFAULT_PROPS = {
   blamePath: 'blame/file.js',
 };
 
+const hash = '#L142';
+
 describe('Chunk component', () => {
   let wrapper;
+  let idleCallbackSpy;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMountExtended(Chunk, { propsData: { ...DEFAULT_PROPS, ...props } });
+    wrapper = shallowMountExtended(Chunk, {
+      mocks: { $route: { hash } },
+      propsData: { ...DEFAULT_PROPS, ...props },
+    });
   };
 
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
@@ -26,6 +35,7 @@ describe('Chunk component', () => {
   const findContent = () => wrapper.findByTestId('content');
 
   beforeEach(() => {
+    idleCallbackSpy = jest.spyOn(window, 'requestIdleCallback').mockImplementation((fn) => fn());
     createComponent();
   });
 
@@ -51,18 +61,30 @@ describe('Chunk component', () => {
   });
 
   describe('rendering', () => {
+    it('does not register window.requestIdleCallback if isFirstChunk prop is true, renders lines immediately', () => {
+      jest.clearAllMocks();
+      createComponent({ isFirstChunk: true });
+
+      expect(window.requestIdleCallback).not.toHaveBeenCalled();
+      expect(findContent().exists()).toBe(true);
+    });
+
     it('does not render a Chunk Line component if isHighlighted is false', () => {
       expect(findChunkLines().length).toBe(0);
     });
 
+    it('does not render simplified line numbers and content if browser is not in idle state', () => {
+      idleCallbackSpy.mockRestore();
+      createComponent();
+
+      expect(findLineNumbers()).toHaveLength(0);
+      expect(findContent().exists()).toBe(false);
+    });
+
     it('renders simplified line numbers and content if isHighlighted is false', () => {
       expect(findLineNumbers().length).toBe(DEFAULT_PROPS.totalLines);
 
-      expect(findLineNumbers().at(0).attributes()).toMatchObject({
-        'data-line-number': `${DEFAULT_PROPS.startingFrom + 1}`,
-        href: `#L${DEFAULT_PROPS.startingFrom + 1}`,
-        id: `L${DEFAULT_PROPS.startingFrom + 1}`,
-      });
+      expect(findLineNumbers().at(0).attributes('id')).toBe(`L${DEFAULT_PROPS.startingFrom + 1}`);
 
       expect(findContent().text()).toBe(DEFAULT_PROPS.content);
     });
@@ -80,5 +102,14 @@ describe('Chunk component', () => {
         blamePath: DEFAULT_PROPS.blamePath,
       });
     });
+
+    it('does not scroll to route hash if last chunk is not loaded', () => {
+      expect(scrollToElement).not.toHaveBeenCalled();
+    });
+
+    it('scrolls to route hash if last chunk is loaded', () => {
+      createComponent({ totalChunks: DEFAULT_PROPS.chunkIndex + 1 });
+      expect(scrollToElement).toHaveBeenCalledWith(hash, { behavior: 'auto' });
+    });
   });
 });