1 files changed, 29 insertions, 65 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 657bd59dac6..95ef11d776a 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,27 +2,7 @@ import { nextTick } from 'vue';
 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 LineHighlighter from '~/blob/line_highlighter';
-
-const lineHighlighter = new LineHighlighter();
-jest.mock('~/blob/line_highlighter', () =>
-  jest.fn().mockReturnValue({
-    highlightHash: jest.fn(),
-  }),
-);
-
-const DEFAULT_PROPS = {
-  chunkIndex: 2,
-  isHighlighted: false,
-  content: '// Line 1 content \n // Line 2 content',
-  startingFrom: 140,
-  totalLines: 50,
-  language: 'javascript',
-  blamePath: 'blame/file.js',
-};
-
-const hash = '#L142';
+import { CHUNK_1, CHUNK_2 } from '../mock_data';
 
 describe('Chunk component', () => {
   let wrapper;
@@ -30,14 +10,13 @@ describe('Chunk component', () => {
 
   const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(Chunk, {
-      mocks: { $route: { hash } },
-      propsData: { ...DEFAULT_PROPS, ...props },
+      propsData: { ...CHUNK_1, ...props },
+      provide: { glFeatures: { fileLineBlame: true } },
     });
   };
 
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
-  const findChunkLines = () => wrapper.findAllComponents(ChunkLine);
-  const findLineNumbers = () => wrapper.findAllByTestId('line-number');
+  const findLineNumbers = () => wrapper.findAllByTestId('line-numbers');
   const findContent = () => wrapper.findByTestId('content');
 
   beforeEach(() => {
@@ -52,72 +31,57 @@ describe('Chunk component', () => {
       expect(findIntersectionObserver().exists()).toBe(true);
     });
 
-    it('emits an appear event when intersection-observer appears', () => {
+    it('renders highlighted content if appear event is emitted', async () => {
+      createComponent({ chunkIndex: 1, isHighlighted: false });
       findIntersectionObserver().vm.$emit('appear');
 
-      expect(wrapper.emitted('appear')).toEqual([[DEFAULT_PROPS.chunkIndex]]);
-    });
-
-    it('does not emit an appear event is isHighlighted is true', () => {
-      createComponent({ isHighlighted: true });
-      findIntersectionObserver().vm.$emit('appear');
+      await nextTick();
 
-      expect(wrapper.emitted('appear')).toEqual(undefined);
+      expect(findContent().exists()).toBe(true);
     });
   });
 
   describe('rendering', () => {
-    it('does not register window.requestIdleCallback if isFirstChunk prop is true, renders lines immediately', () => {
+    it('does not register window.requestIdleCallback for the first chunk, renders content 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);
+      expect(findContent().text()).toBe(CHUNK_1.highlightedContent);
     });
 
-    it('does not render simplified line numbers and content if browser is not in idle state', () => {
+    it('does not render content if browser is not in idle state', () => {
       idleCallbackSpy.mockRestore();
-      createComponent();
+      createComponent({ chunkIndex: 1, ...CHUNK_2 });
 
       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);
+    describe('isHighlighted is false', () => {
+      beforeEach(() => createComponent(CHUNK_2));
 
-      expect(findLineNumbers().at(0).attributes('id')).toBe(`L${DEFAULT_PROPS.startingFrom + 1}`);
+      it('does not render line numbers', () => {
+        expect(findLineNumbers()).toHaveLength(0);
+      });
 
-      expect(findContent().text()).toBe(DEFAULT_PROPS.content);
+      it('renders raw content', () => {
+        expect(findContent().text()).toBe(CHUNK_2.rawContent);
+      });
     });
 
-    it('renders Chunk Line components if isHighlighted is true', () => {
-      const splitContent = DEFAULT_PROPS.content.split('\n');
-      createComponent({ isHighlighted: true });
+    describe('isHighlighted is true', () => {
+      beforeEach(() => createComponent({ ...CHUNK_2, isHighlighted: true }));
 
-      expect(findChunkLines().length).toBe(splitContent.length);
+      it('renders line numbers', () => {
+        expect(findLineNumbers()).toHaveLength(CHUNK_2.totalLines);
 
-      expect(findChunkLines().at(0).props()).toMatchObject({
-        number: DEFAULT_PROPS.startingFrom + 1,
-        content: splitContent[0],
-        language: DEFAULT_PROPS.language,
-        blamePath: DEFAULT_PROPS.blamePath,
+        // Opted for a snapshot test here since the output is simple and verifies native HTML elements
+        expect(findLineNumbers().at(0).element).toMatchSnapshot();
       });
-    });
 
-    it('does not scroll to route hash if last chunk is not loaded', () => {
-      expect(LineHighlighter).not.toHaveBeenCalled();
-    });
-
-    it('scrolls to route hash if last chunk is loaded', async () => {
-      createComponent({ totalChunks: DEFAULT_PROPS.chunkIndex + 1 });
-      await nextTick();
-      expect(LineHighlighter).toHaveBeenCalledWith({ scrollBehavior: 'auto' });
-      expect(lineHighlighter.highlightHash).toHaveBeenCalledWith(hash);
+      it('renders highlighted content', () => {
+        expect(findContent().text()).toBe(CHUNK_2.highlightedContent);
+      });
     });
   });
 });