Add coverage to 'left' side of parallel diff view

Add tests for line coverage

app/assets/javascripts/diffs/components/diff_row.vue

@@ -76,7 +76,12 @@ export default {
     parallelViewLeftLineType() {
       return utils.parallelViewLeftLineType(this.line, this.isHighlighted || this.isCommented);
     },
-    coverageState() {
+    coverageStateLeft() {
+      if (!this.inline || !this.line.left) return {};
+      return this.fileLineCoverage(this.filePath, this.line.left.new_line);
+    },
+    coverageStateRight() {
+      if (!this.line.right) return {};
       return this.fileLineCoverage(this.filePath, this.line.right.new_line);
     },
     classNameMapCellLeft() {
@@ -243,7 +248,12 @@ export default {
           >
           </a>
         </div>
-        <div :class="parallelViewLeftLineType" class="diff-td line-coverage left-side"></div>
+        <div
+          v-gl-tooltip.hover
+          :title="coverageStateLeft.text"
+          :class="[...parallelViewLeftLineType, coverageStateLeft.class]"
+          class="diff-td line-coverage left-side"
+        ></div>
         <div
           :id="line.left.line_code"
           :key="line.left.line_code"
@@ -333,8 +343,12 @@ export default {
         </div>
         <div
           v-gl-tooltip.hover
-          :title="coverageState.text"
-          :class="[line.right.type, coverageState.class, { hll: isHighlighted, hll: isCommented }]"
+          :title="coverageStateRight.text"
+          :class="[
+            line.right.type,
+            coverageStateRight.class,
+            { hll: isHighlighted, hll: isCommented },
+          ]"
           class="diff-td line-coverage right-side"
         ></div>
         <div

changelogs/unreleased/297569-inline-code-coverage-visualization-not-displaying-in-inline-mr-dif.yml

+---
+title: Fix coverage not showing for inline diffs
+merge_request: 51652
+author:
+type: fixed

spec/frontend/diffs/components/diff_row_spec.js

@@ -3,6 +3,8 @@ import { getByTestId, fireEvent } from '@testing-library/dom';
 import Vuex from 'vuex';
 import diffsModule from '~/diffs/store/modules';
 import DiffRow from '~/diffs/components/diff_row.vue';
+import diffFileMockData from '../mock_data/diff_file';
+import { mapParallel } from '~/diffs/components/diff_row_utils';
 
 describe('DiffRow', () => {
   const testLines = [
@@ -157,4 +159,56 @@ describe('DiffRow', () => {
       expect(wrapper.emitted().stopdragging).toBeTruthy();
     });
   });
+
+  describe('sets coverage title and class', () => {
+    const thisLine = diffFileMockData.parallel_diff_lines[2];
+    const rightLine = diffFileMockData.parallel_diff_lines[2].right;
+
+    const mockDiffContent = {
+      diffFile: diffFileMockData,
+      shouldRenderDraftRow: jest.fn(),
+      hasParallelDraftLeft: jest.fn(),
+      hasParallelDraftRight: jest.fn(),
+      draftForLine: jest.fn(),
+    };
+
+    const applyMap = mapParallel(mockDiffContent);
+    const props = {
+      line: applyMap(thisLine),
+      fileHash: diffFileMockData.file_hash,
+      filePath: diffFileMockData.file_path,
+      contextLinesPath: 'contextLinesPath',
+      isHighlighted: false,
+    };
+    const name = diffFileMockData.file_path;
+    const line = rightLine.new_line;
+
+    it('for lines with coverage', () => {
+      const coverageFiles = { files: { [name]: { [line]: 5 } } };
+      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      const coverage = wrapper.find('.line-coverage.right-side');
+
+      expect(coverage.attributes('title')).toContain('Test coverage: 5 hits');
+      expect(coverage.classes('coverage')).toBeTruthy();
+    });
+
+    it('for lines without coverage', () => {
+      const coverageFiles = { files: { [name]: { [line]: 0 } } };
+      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      const coverage = wrapper.find('.line-coverage.right-side');
+
+      expect(coverage.attributes('title')).toContain('No test coverage');
+      expect(coverage.classes('no-coverage')).toBeTruthy();
+    });
+
+    it('for unknown lines', () => {
+      const coverageFiles = {};
+      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      const coverage = wrapper.find('.line-coverage.right-side');
+
+      expect(coverage.attributes('title')).toBeFalsy();
+      expect(coverage.classes('coverage')).toBeFalsy();
+      expect(coverage.classes('no-coverage')).toBeFalsy();
+    });
+  });
 });