Merge branch '345987-rememoize-inline-coverage-when-finished-loading' into 'master'

Recache coverage data when it's fully loaded

See merge request gitlab-org/gitlab!76808

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

@@ -42,6 +42,11 @@ export default {
       required: false,
       default: false,
     },
+    coverageLoaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     inline: {
       type: Boolean,
       required: false,
@@ -83,14 +88,15 @@ export default {
       if (!props.inline || !props.line.left) return {};
       return props.fileLineCoverage(props.filePath, props.line.left.new_line);
     },
-    (props) => [props.inline, props.filePath, props.line.left?.new_line].join(':'),
+    (props) =>
+      [props.inline, props.filePath, props.line.left?.new_line, props.coverageLoaded].join(':'),
   ),
   coverageStateRight: memoize(
     (props) => {
       if (!props.line.right) return {};
       return props.fileLineCoverage(props.filePath, props.line.right.new_line);
     },
-    (props) => [props.line.right?.new_line, props.filePath].join(':'),
+    (props) => [props.line.right?.new_line, props.filePath, props.coverageLoaded].join(':'),
   ),
   showCodequalityLeft: memoize(
     (props) => {

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

@@ -52,7 +52,7 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId', 'fileLineCoverage']),
-    ...mapState('diffs', ['codequalityDiff', 'highlightedRow']),
+    ...mapState('diffs', ['codequalityDiff', 'highlightedRow', 'coverageLoaded']),
     ...mapState({
       selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
       selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
@@ -180,6 +180,7 @@ export default {
         :index="index"
         :is-highlighted="isHighlighted(line)"
         :file-line-coverage="fileLineCoverage"
+        :coverage-loaded="coverageLoaded"
         @showCommentForm="(code) => singleLineComment(code, line)"
         @setHighlightedRow="setHighlightedRow"
         @toggleLineDiscussions="

app/assets/javascripts/diffs/store/modules/diff_state.js

@@ -21,6 +21,7 @@ export default () => ({
   startVersion: null, // Null unless a target diff is selected for comparison that is not the "base" diff
   diffFiles: [],
   coverageFiles: {},
+  coverageLoaded: false,
   mergeRequestDiffs: [],
   mergeRequestDiff: null,
   diffViewType: getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,

app/assets/javascripts/diffs/store/mutations.js

@@ -86,7 +86,7 @@ export default {
   },
 
   [types.SET_COVERAGE_DATA](state, coverageFiles) {
-    Object.assign(state, { coverageFiles });
+    Object.assign(state, { coverageFiles, coverageLoaded: true });
   },
 
   [types.RENDER_FILE](state, file) {

spec/frontend/diffs/components/diff_row_spec.js

@@ -277,3 +277,36 @@ describe('DiffRow', () => {
     });
   });
 });
+
+describe('coverage state memoization', () => {
+  it('updates when coverage is loaded', () => {
+    const lineWithoutCoverage = {};
+    const lineWithCoverage = {
+      text: 'Test coverage: 5 hits',
+      class: 'coverage',
+    };
+
+    const unchangedProps = {
+      inline: true,
+      filePath: 'file/path',
+      line: { left: { new_line: 3 } },
+    };
+
+    const noCoverageProps = {
+      fileLineCoverage: () => lineWithoutCoverage,
+      coverageLoaded: false,
+      ...unchangedProps,
+    };
+    const coverageProps = {
+      fileLineCoverage: () => lineWithCoverage,
+      coverageLoaded: true,
+      ...unchangedProps,
+    };
+
+    // this caches no coverage for the line
+    expect(DiffRow.coverageStateLeft(noCoverageProps)).toStrictEqual(lineWithoutCoverage);
+
+    // this retrieves coverage for the line because it has been recached
+    expect(DiffRow.coverageStateLeft(coverageProps)).toStrictEqual(lineWithCoverage);
+  });
+});

spec/frontend/diffs/store/mutations_spec.js

@@ -112,6 +112,7 @@ describe('DiffsStoreMutations', () => {
       mutations[types.SET_COVERAGE_DATA](state, coverage);
 
       expect(state.coverageFiles).toEqual(coverage);
+      expect(state.coverageLoaded).toEqual(true);
     });
   });