Merge branch 'jdb/refactor-diff-rows-utils' into 'master'

Move shared logic into utils

See merge request gitlab-org/gitlab!42407

app/assets/javascripts/diffs/components/diff_row_utils.js

+import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+import {
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  LINE_HOVER_CLASS_NAME,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  EMPTY_CELL_TYPE,
+} from '../constants';
+
+export const isHighlighted = (state, line, isCommented) => {
+  if (isCommented) return true;
+
+  const lineCode = line?.line_code;
+  return lineCode ? lineCode === state.diffs.highlightedRow : false;
+};
+
+export const isContextLine = type => type === CONTEXT_LINE_TYPE;
+
+export const isMatchLine = type => type === MATCH_LINE_TYPE;
+
+export const isMetaLine = type =>
+  [OLD_NO_NEW_LINE_TYPE, NEW_NO_NEW_LINE_TYPE, EMPTY_CELL_TYPE].includes(type);
+
+export const shouldRenderCommentButton = (
+  isLoggedIn,
+  isCommentButtonRendered,
+  featureMergeRefHeadComments = false,
+) => {
+  if (!isCommentButtonRendered) {
+    return false;
+  }
+
+  if (isLoggedIn) {
+    const isDiffHead = parseBoolean(getParameterByName('diff_head'));
+    return !isDiffHead || featureMergeRefHeadComments;
+  }
+
+  return false;
+};
+
+export const hasDiscussions = line => line?.discussions?.length > 0;
+
+export const lineHref = line => `#${line?.line_code || ''}`;
+
+export const lineCode = line => {
+  if (!line) return undefined;
+  return line.line_code || line.left?.line_code || line.right?.line_code;
+};
+
+export const classNameMapCell = (line, hll, isLoggedIn, isHover) => {
+  if (!line) return [];
+  const { type } = line;
+
+  return [
+    type,
+    {
+      hll,
+      [LINE_HOVER_CLASS_NAME]: isLoggedIn && isHover && !isContextLine(type) && !isMetaLine(type),
+    },
+  ];
+};
+
+export const addCommentTooltip = line => {
+  let tooltip;
+  if (!line) return tooltip;
+
+  tooltip = __('Add a comment to this line');
+  const brokenSymlinks = line.commentsDisabled;
+
+  if (brokenSymlinks) {
+    if (brokenSymlinks.wasSymbolic || brokenSymlinks.isSymbolic) {
+      tooltip = __(
+        'Commenting on symbolic links that replace or are replaced by files is currently not supported.',
+      );
+    } else if (brokenSymlinks.wasReal || brokenSymlinks.isReal) {
+      tooltip = __(
+        'Commenting on files that replace or are replaced by symbolic links is currently not supported.',
+      );
+    }
+  }
+
+  return tooltip;
+};
+
+export const parallelViewLeftLineType = (line, hll) => {
+  if (line?.right?.type === NEW_NO_NEW_LINE_TYPE) {
+    return OLD_NO_NEW_LINE_TYPE;
+  }
+
+  const lineTypeClass = line?.left ? line.left.type : EMPTY_CELL_TYPE;
+
+  return [lineTypeClass, { hll }];
+};
+
+export const shouldShowCommentButton = (hover, context, meta, discussions) => {
+  return hover && !context && !meta && !discussions;
+};

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

-<script>
-import { mapGetters, mapActions } from 'vuex';
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
-import DiffGutterAvatars from './diff_gutter_avatars.vue';
-import { __ } from '~/locale';
-import {
-  CONTEXT_LINE_TYPE,
-  LINE_POSITION_RIGHT,
-  EMPTY_CELL_TYPE,
-  OLD_NO_NEW_LINE_TYPE,
-  OLD_LINE_TYPE,
-  NEW_NO_NEW_LINE_TYPE,
-  LINE_HOVER_CLASS_NAME,
-} from '../constants';
-
-export default {
-  components: {
-    DiffGutterAvatars,
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    line: {
-      type: Object,
-      required: true,
-    },
-    fileHash: {
-      type: String,
-      required: true,
-    },
-    isHighlighted: {
-      type: Boolean,
-      required: true,
-    },
-    showCommentButton: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    linePosition: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    lineType: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    isBottom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isHover: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isCommentButtonRendered: false,
-    };
-  },
-  computed: {
-    ...mapGetters(['isLoggedIn']),
-    lineCode() {
-      return (
-        this.line.line_code ||
-        (this.line.left && this.line.left.line_code) ||
-        (this.line.right && this.line.right.line_code)
-      );
-    },
-    lineHref() {
-      return `#${this.line.line_code || ''}`;
-    },
-    shouldShowCommentButton() {
-      return this.isHover && !this.isContextLine && !this.isMetaLine && !this.hasDiscussions;
-    },
-    hasDiscussions() {
-      return this.line.discussions && this.line.discussions.length > 0;
-    },
-    shouldShowAvatarsOnGutter() {
-      if (!this.line.type && this.linePosition === LINE_POSITION_RIGHT) {
-        return false;
-      }
-      return this.showCommentButton && this.hasDiscussions;
-    },
-    shouldRenderCommentButton() {
-      if (!this.isCommentButtonRendered) {
-        return false;
-      }
-
-      if (this.isLoggedIn && this.showCommentButton) {
-        const isDiffHead = parseBoolean(getParameterByName('diff_head'));
-        return !isDiffHead || gon.features?.mergeRefHeadComments;
-      }
-
-      return false;
-    },
-    isContextLine() {
-      return this.line.type === CONTEXT_LINE_TYPE;
-    },
-    isMetaLine() {
-      const { type } = this.line;
-
-      return (
-        type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
-      );
-    },
-    classNameMap() {
-      const { type } = this.line;
-
-      return [
-        type,
-        {
-          hll: this.isHighlighted,
-          [LINE_HOVER_CLASS_NAME]:
-            this.isLoggedIn && this.isHover && !this.isContextLine && !this.isMetaLine,
-        },
-      ];
-    },
-    lineNumber() {
-      return this.lineType === OLD_LINE_TYPE ? this.line.old_line : this.line.new_line;
-    },
-    addCommentTooltip() {
-      const brokenSymlinks = this.line.commentsDisabled;
-      let tooltip = __('Add a comment to this line');
-
-      if (brokenSymlinks) {
-        if (brokenSymlinks.wasSymbolic || brokenSymlinks.isSymbolic) {
-          tooltip = __(
-            'Commenting on symbolic links that replace or are replaced by files is currently not supported.',
-          );
-        } else if (brokenSymlinks.wasReal || brokenSymlinks.isReal) {
-          tooltip = __(
-            'Commenting on files that replace or are replaced by symbolic links is currently not supported.',
-          );
-        }
-      }
-
-      return tooltip;
-    },
-  },
-  mounted() {
-    this.unwatchShouldShowCommentButton = this.$watch('shouldShowCommentButton', newVal => {
-      if (newVal) {
-        this.isCommentButtonRendered = true;
-        this.unwatchShouldShowCommentButton();
-      }
-    });
-  },
-  beforeDestroy() {
-    this.unwatchShouldShowCommentButton();
-  },
-  methods: {
-    ...mapActions('diffs', ['showCommentForm', 'setHighlightedRow', 'toggleLineDiscussions']),
-    handleCommentButton() {
-      this.showCommentForm({ lineCode: this.line.line_code, fileHash: this.fileHash });
-    },
-  },
-};
-</script>
-
-<template>
-  <td ref="td" :class="classNameMap">
-    <span
-      ref="addNoteTooltip"
-      v-gl-tooltip
-      class="add-diff-note tooltip-wrapper"
-      :title="addCommentTooltip"
-    >
-      <button
-        v-if="shouldRenderCommentButton"
-        v-show="shouldShowCommentButton"
-        ref="addDiffNoteButton"
-        type="button"
-        class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
-        :disabled="line.commentsDisabled"
-        @click="handleCommentButton"
-      >
-        <gl-icon :size="12" name="comment" />
-      </button>
-    </span>
-    <a
-      v-if="lineNumber"
-      ref="lineNumberRef"
-      :data-linenumber="lineNumber"
-      :href="lineHref"
-      @click="setHighlightedRow(lineCode)"
-    >
-    </a>
-    <diff-gutter-avatars
-      v-if="shouldShowAvatarsOnGutter"
-      :discussions="line.discussions"
-      :discussions-expanded="line.discussionsExpanded"
-      @toggleLineDiscussions="
-        toggleLineDiscussions({ lineCode, fileHash, expanded: !line.discussionsExpanded })
-      "
-    />
-  </td>
-</template>

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import {
-  MATCH_LINE_TYPE,
-  NEW_LINE_TYPE,
-  OLD_LINE_TYPE,
-  CONTEXT_LINE_TYPE,
-  CONTEXT_LINE_CLASS_NAME,
-  LINE_POSITION_LEFT,
-  LINE_POSITION_RIGHT,
-  LINE_HOVER_CLASS_NAME,
-  OLD_NO_NEW_LINE_TYPE,
-  NEW_NO_NEW_LINE_TYPE,
-  EMPTY_CELL_TYPE,
-} from '../constants';
-import { __ } from '~/locale';
-import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { CONTEXT_LINE_CLASS_NAME } from '../constants';
 import DiffGutterAvatars from './diff_gutter_avatars.vue';
+import * as utils from './diff_row_utils';
 
 export default {
   components: {
@@ -61,14 +48,11 @@ export default {
     ...mapGetters('diffs', ['fileLineCoverage']),
     ...mapState({
       isHighlighted(state) {
-        if (this.isCommented) return true;
-
-        const lineCode = this.line.line_code;
-        return lineCode ? lineCode === state.diffs.highlightedRow : false;
+        return utils.isHighlighted(state, this.line, this.isCommented);
       },
     }),
     isContextLine() {
-      return this.line.type === CONTEXT_LINE_TYPE;
+      return utils.isContextLine(this.line.type);
     },
     classNameMap() {
       return [
@@ -82,82 +66,48 @@ export default {
       return this.line.line_code || `${this.fileHash}_${this.line.old_line}_${this.line.new_line}`;
     },
     isMatchLine() {
-      return this.line.type === MATCH_LINE_TYPE;
+      return utils.isMatchLine(this.line.type);
     },
     coverageState() {
       return this.fileLineCoverage(this.filePath, this.line.new_line);
     },
     isMetaLine() {
-      const { type } = this.line;
-
-      return (
-        type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
-      );
+      return utils.isMetaLine(this.line.type);
     },
     classNameMapCell() {
-      const { type } = this.line;
-
-      return [
-        type,
-        {
-          hll: this.isHighlighted,
-          [LINE_HOVER_CLASS_NAME]:
-            this.isLoggedIn && this.isHover && !this.isContextLine && !this.isMetaLine,
-        },
-      ];
+      return utils.classNameMapCell(this.line, this.isHighlighted, this.isLoggedIn, this.isHover);
     },
     addCommentTooltip() {
-      const brokenSymlinks = this.line.commentsDisabled;
-      let tooltip = __('Add a comment to this line');
-
-      if (brokenSymlinks) {
-        if (brokenSymlinks.wasSymbolic || brokenSymlinks.isSymbolic) {
-          tooltip = __(
-            'Commenting on symbolic links that replace or are replaced by files is currently not supported.',
-          );
-        } else if (brokenSymlinks.wasReal || brokenSymlinks.isReal) {
-          tooltip = __(
-            'Commenting on files that replace or are replaced by symbolic links is currently not supported.',
-          );
-        }
-      }
-
-      return tooltip;
+      return utils.addCommentTooltip(this.line);
     },
     shouldRenderCommentButton() {
-      if (this.isLoggedIn) {
-        const isDiffHead = parseBoolean(getParameterByName('diff_head'));
-        return !isDiffHead || gon.features?.mergeRefHeadComments;
-      }
-
-      return false;
+      return utils.shouldRenderCommentButton(
+        this.isLoggedIn,
+        true,
+        gon.features?.mergeRefHeadComments,
+      );
     },
     shouldShowCommentButton() {
-      return this.isHover && !this.isContextLine && !this.isMetaLine && !this.hasDiscussions;
+      return utils.shouldShowCommentButton(
+        this.isHover,
+        this.isContextLine,
+        this.isMetaLine,
+        this.hasDiscussions,
+      );
     },
     hasDiscussions() {
-      return this.line.discussions && this.line.discussions.length > 0;
+      return utils.hasDiscussions(this.line);
     },
     lineHref() {
-      return `#${this.line.line_code || ''}`;
+      return utils.lineHref(this.line);
     },
     lineCode() {
-      return (
-        this.line.line_code ||
-        (this.line.left && this.line.left.line_code) ||
-        (this.line.right && this.line.right.line_code)
-      );
+      return utils.lineCode(this.line);
     },
     shouldShowAvatarsOnGutter() {
       return this.hasDiscussions;
     },
   },
-  created() {
-    this.newLineType = NEW_LINE_TYPE;
-    this.oldLineType = OLD_LINE_TYPE;
-    this.linePositionLeft = LINE_POSITION_LEFT;
-    this.linePositionRight = LINE_POSITION_RIGHT;
-  },
   mounted() {
     this.scrollToLineIfNeededInline(this.line);
   },

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

@@ -2,21 +2,9 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import $ from 'jquery';
 import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import {
-  MATCH_LINE_TYPE,
-  NEW_LINE_TYPE,
-  OLD_LINE_TYPE,
-  CONTEXT_LINE_TYPE,
-  CONTEXT_LINE_CLASS_NAME,
-  OLD_NO_NEW_LINE_TYPE,
-  PARALLEL_DIFF_VIEW_TYPE,
-  NEW_NO_NEW_LINE_TYPE,
-  EMPTY_CELL_TYPE,
-  LINE_HOVER_CLASS_NAME,
-} from '../constants';
-import { __ } from '~/locale';
-import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { CONTEXT_LINE_CLASS_NAME, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
 import DiffGutterAvatars from './diff_gutter_avatars.vue';
+import * as utils from './diff_row_utils';
 
 export default {
   components: {
@@ -63,20 +51,15 @@ export default {
     ...mapGetters(['isLoggedIn']),
     ...mapState({
       isHighlighted(state) {
-        if (this.isCommented) return true;
-
-        const lineCode =
-          (this.line.left && this.line.left.line_code) ||
-          (this.line.right && this.line.right.line_code);
-
-        return lineCode ? lineCode === state.diffs.highlightedRow : false;
+        const line = this.line.left?.line_code ? this.line.left : this.line.right;
+        return utils.isHighlighted(state, line, this.isCommented);
       },
     }),
     isContextLineLeft() {
-      return this.line.left && this.line.left.type === CONTEXT_LINE_TYPE;
+      return utils.isContextLine(this.line.left?.type);
     },
     isContextLineRight() {
-      return this.line.right && this.line.right.type === CONTEXT_LINE_TYPE;
+      return utils.isContextLine(this.line.right?.type);
     },
     classNameMap() {
       return {
@@ -85,157 +68,84 @@ export default {
       };
     },
     parallelViewLeftLineType() {
-      if (this.line.right && this.line.right.type === NEW_NO_NEW_LINE_TYPE) {
-        return OLD_NO_NEW_LINE_TYPE;
-      }
-
-      const lineTypeClass = this.line.left ? this.line.left.type : EMPTY_CELL_TYPE;
-
-      return [
-        lineTypeClass,
-        {
-          hll: this.isHighlighted,
-        },
-      ];
+      return utils.parallelViewLeftLineType(this.line, this.isHighlighted);
     },
     isMatchLineLeft() {
-      return this.line.left && this.line.left.type === MATCH_LINE_TYPE;
+      return utils.isMatchLine(this.line.left?.type);
     },
     isMatchLineRight() {
-      return this.line.right && this.line.right.type === MATCH_LINE_TYPE;
+      return utils.isMatchLine(this.line.right?.type);
     },
     coverageState() {
       return this.fileLineCoverage(this.filePath, this.line.right.new_line);
     },
     classNameMapCellLeft() {
-      const { type } = this.line.left;
-
-      return [
-        type,
-        {
-          hll: this.isHighlighted,
-          [LINE_HOVER_CLASS_NAME]:
-            this.isLoggedIn && this.isLeftHover && !this.isContextLineLeft && !this.isMetaLineLeft,
-        },
-      ];
+      return utils.classNameMapCell(
+        this.line.left,
+        this.isHighlighted,
+        this.isLoggedIn,
+        this.isLeftHover,
+      );
     },
     classNameMapCellRight() {
-      const { type } = this.line.right;
-
-      return [
-        type,
-        {
-          hll: this.isHighlighted,
-          [LINE_HOVER_CLASS_NAME]:
-            this.isLoggedIn &&
-            this.isRightHover &&
-            !this.isContextLineRight &&
-            !this.isMetaLineRight,
-        },
-      ];
+      return utils.classNameMapCell(
+        this.line.right,
+        this.isHighlighted,
+        this.isLoggedIn,
+        this.isRightHover,
+      );
     },
     addCommentTooltipLeft() {
-      const brokenSymlinks = this.line.left.commentsDisabled;
-      let tooltip = __('Add a comment to this line');
-
-      if (brokenSymlinks) {
-        if (brokenSymlinks.wasSymbolic || brokenSymlinks.isSymbolic) {
-          tooltip = __(
-            'Commenting on symbolic links that replace or are replaced by files is currently not supported.',
-          );
-        } else if (brokenSymlinks.wasReal || brokenSymlinks.isReal) {
-          tooltip = __(
-            'Commenting on files that replace or are replaced by symbolic links is currently not supported.',
-          );
-        }
-      }
-
-      return tooltip;
+      return utils.addCommentTooltip(this.line.left);
     },
     addCommentTooltipRight() {
-      const brokenSymlinks = this.line.right.commentsDisabled;
-      let tooltip = __('Add a comment to this line');
-
-      if (brokenSymlinks) {
-        if (brokenSymlinks.wasSymbolic || brokenSymlinks.isSymbolic) {
-          tooltip = __(
-            'Commenting on symbolic links that replace or are replaced by files is currently not supported.',
-          );
-        } else if (brokenSymlinks.wasReal || brokenSymlinks.isReal) {
-          tooltip = __(
-            'Commenting on files that replace or are replaced by symbolic links is currently not supported.',
-          );
-        }
-      }
-
-      return tooltip;
+      return utils.addCommentTooltip(this.line.right);
     },
     shouldRenderCommentButton() {
-      if (!this.isCommentButtonRendered) {
-        return false;
-      }
-
-      if (this.isLoggedIn) {
-        const isDiffHead = parseBoolean(getParameterByName('diff_head'));
-        return !isDiffHead || gon.features?.mergeRefHeadComments;
-      }
-
-      return false;
+      return utils.shouldRenderCommentButton(
+        this.isLoggedIn,
+        this.isCommentButtonRendered,
+        gon.features?.mergeRefHeadComments,
+      );
     },
     shouldShowCommentButtonLeft() {
-      return (
-        this.isLeftHover &&
-        !this.isContextLineLeft &&
-        !this.isMetaLineLeft &&
-        !this.hasDiscussionsLeft
+      return utils.shouldShowCommentButton(
+        this.isLeftHover,
+        this.isContextLineLeft,
+        this.isMetaLineLeft,
+        this.hasDiscussionsLeft,
       );
     },
     shouldShowCommentButtonRight() {
-      return (
-        this.isRightHover &&
-        !this.isContextLineRight &&
-        !this.isMetaLineRight &&
-        !this.hasDiscussionsRight
+      return utils.shouldShowCommentButton(
+        this.isRightHover,
+        this.isContextLineRight,
+        this.isMetaLineRight,
+        this.hasDiscussionsRight,
       );
     },
     hasDiscussionsLeft() {
-      return this.line.left?.discussions?.length > 0;
+      return utils.hasDiscussions(this.line.left);
     },
     hasDiscussionsRight() {
-      return this.line.right?.discussions?.length > 0;
+      return utils.hasDiscussions(this.line.right);
     },
     lineHrefOld() {
-      return `#${this.line.left.line_code || ''}`;
+      return utils.lineHref(this.line.left);
     },
     lineHrefNew() {
-      return `#${this.line.right.line_code || ''}`;
+      return utils.lineHref(this.line.right);
     },
     lineCode() {
-      return (
-        (this.line.left && this.line.left.line_code) ||
-        (this.line.right && this.line.right.line_code)
-      );
+      return utils.lineCode(this.line);
     },
     isMetaLineLeft() {
-      const type = this.line.left?.type;
-
-      return (
-        type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
-      );
+      return utils.isMetaLine(this.line.left?.type);
     },
     isMetaLineRight() {
-      const type = this.line.right?.type;
-
-      return (
-        type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
-      );
+      return utils.isMetaLine(this.line.right?.type);
     },
   },
-  created() {
-    this.newLineType = NEW_LINE_TYPE;
-    this.oldLineType = OLD_LINE_TYPE;
-    this.parallelDiffViewType = PARALLEL_DIFF_VIEW_TYPE;
-  },
   mounted() {
     this.scrollToLineIfNeededParallel(this.line);
     this.unwatchShouldShowCommentButton = this.$watch(

changelogs/unreleased/jdb-refactor-diff-rows-utils.yml

+---
+title: Move shared logic into utils
+merge_request: 42407
+author:
+type: other

spec/frontend/diffs/components/diff_row_utils_spec.js

+import * as utils from '~/diffs/components/diff_row_utils';
+import {
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  EMPTY_CELL_TYPE,
+} from '~/diffs/constants';
+
+const LINE_CODE = 'abc123';
+
+describe('isHighlighted', () => {
+  it('should return true if line is highlighted', () => {
+    const state = { diffs: { highlightedRow: LINE_CODE } };
+    const line = { line_code: LINE_CODE };
+    const isCommented = false;
+    expect(utils.isHighlighted(state, line, isCommented)).toBe(true);
+  });
+
+  it('should return false if line is not highlighted', () => {
+    const state = { diffs: { highlightedRow: 'xxx' } };
+    const line = { line_code: LINE_CODE };
+    const isCommented = false;
+    expect(utils.isHighlighted(state, line, isCommented)).toBe(false);
+  });
+
+  it('should return true if isCommented is true', () => {
+    const state = { diffs: { highlightedRow: 'xxx' } };
+    const line = { line_code: LINE_CODE };
+    const isCommented = true;
+    expect(utils.isHighlighted(state, line, isCommented)).toBe(true);
+  });
+});
+
+describe('isContextLine', () => {
+  it('return true if line type is context', () => {
+    expect(utils.isContextLine(CONTEXT_LINE_TYPE)).toBe(true);
+  });
+
+  it('return false if line type is not context', () => {
+    expect(utils.isContextLine('xxx')).toBe(false);
+  });
+});
+
+describe('isMatchLine', () => {
+  it('return true if line type is match', () => {
+    expect(utils.isMatchLine(MATCH_LINE_TYPE)).toBe(true);
+  });
+
+  it('return false if line type is not match', () => {
+    expect(utils.isMatchLine('xxx')).toBe(false);
+  });
+});
+
+describe('isMetaLine', () => {
+  it.each`
+    type                    | expectation
+    ${OLD_NO_NEW_LINE_TYPE} | ${true}
+    ${NEW_NO_NEW_LINE_TYPE} | ${true}
+    ${EMPTY_CELL_TYPE}      | ${true}
+    ${'xxx'}                | ${false}
+  `('should return $expectation if type is $type', ({ type, expectation }) => {
+    expect(utils.isMetaLine(type)).toBe(expectation);
+  });
+});
+
+describe('shouldRenderCommentButton', () => {
+  it('should return false if comment button is not rendered', () => {
+    expect(utils.shouldRenderCommentButton(true, false)).toBe(false);
+  });
+
+  it('should return false if not logged in', () => {
+    expect(utils.shouldRenderCommentButton(false, true)).toBe(false);
+  });
+
+  it('should return true logged in and rendered', () => {
+    expect(utils.shouldRenderCommentButton(true, true)).toBe(true);
+  });
+});
+
+describe('hasDiscussions', () => {
+  it('should return false if line is undefined', () => {
+    expect(utils.hasDiscussions()).toBe(false);
+  });
+
+  it('should return false if discussions is undefined', () => {
+    expect(utils.hasDiscussions({})).toBe(false);
+  });
+
+  it('should return false if discussions has legnth of 0', () => {
+    expect(utils.hasDiscussions({ discussions: [] })).toBe(false);
+  });
+
+  it('should return true if discussions has legnth > 0', () => {
+    expect(utils.hasDiscussions({ discussions: [1] })).toBe(true);
+  });
+});
+
+describe('lineHref', () => {
+  it(`should return #${LINE_CODE}`, () => {
+    expect(utils.lineHref({ line_code: LINE_CODE })).toEqual(`#${LINE_CODE}`);
+  });
+
+  it(`should return '#' if line is undefined`, () => {
+    expect(utils.lineHref()).toEqual('#');
+  });
+
+  it(`should return '#' if line_code is undefined`, () => {
+    expect(utils.lineHref({})).toEqual('#');
+  });
+});
+
+describe('lineCode', () => {
+  it(`should return undefined if line_code is undefined`, () => {
+    expect(utils.lineCode()).toEqual(undefined);
+    expect(utils.lineCode({ left: {} })).toEqual(undefined);
+    expect(utils.lineCode({ right: {} })).toEqual(undefined);
+  });
+
+  it(`should return ${LINE_CODE}`, () => {
+    expect(utils.lineCode({ line_code: LINE_CODE })).toEqual(LINE_CODE);
+    expect(utils.lineCode({ left: { line_code: LINE_CODE } })).toEqual(LINE_CODE);
+    expect(utils.lineCode({ right: { line_code: LINE_CODE } })).toEqual(LINE_CODE);
+  });
+});
+
+describe('classNameMapCell', () => {
+  it.each`
+    line               | hll      | loggedIn | hovered  | expectation
+    ${undefined}       | ${true}  | ${true}  | ${true}  | ${[]}
+    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true }]}
+  `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => {
+    const classes = utils.classNameMapCell(line, hll, loggedIn, hovered);
+    expect(classes).toEqual(expectation);
+  });
+});
+
+describe('addCommentTooltip', () => {
+  const brokenSymLinkTooltip =
+    'Commenting on symbolic links that replace or are replaced by files is currently not supported.';
+  const brokenRealTooltip =
+    'Commenting on files that replace or are replaced by symbolic links is currently not supported.';
+  it('should return default tooltip', () => {
+    expect(utils.addCommentTooltip()).toBeUndefined();
+  });
+
+  it('should return broken symlink tooltip', () => {
+    expect(utils.addCommentTooltip({ commentsDisabled: { wasSymbolic: true } })).toEqual(
+      brokenSymLinkTooltip,
+    );
+    expect(utils.addCommentTooltip({ commentsDisabled: { isSymbolic: true } })).toEqual(
+      brokenSymLinkTooltip,
+    );
+  });
+
+  it('should return broken real tooltip', () => {
+    expect(utils.addCommentTooltip({ commentsDisabled: { wasReal: true } })).toEqual(
+      brokenRealTooltip,
+    );
+    expect(utils.addCommentTooltip({ commentsDisabled: { isReal: true } })).toEqual(
+      brokenRealTooltip,
+    );
+  });
+});
+
+describe('parallelViewLeftLineType', () => {
+  it(`should return ${OLD_NO_NEW_LINE_TYPE}`, () => {
+    expect(utils.parallelViewLeftLineType({ right: { type: NEW_NO_NEW_LINE_TYPE } })).toEqual(
+      OLD_NO_NEW_LINE_TYPE,
+    );
+  });
+
+  it(`should return 'new'`, () => {
+    expect(utils.parallelViewLeftLineType({ left: { type: 'new' } })).toContain('new');
+  });
+
+  it(`should return ${EMPTY_CELL_TYPE}`, () => {
+    expect(utils.parallelViewLeftLineType({})).toContain(EMPTY_CELL_TYPE);
+  });
+
+  it(`should return hll:true`, () => {
+    expect(utils.parallelViewLeftLineType({}, true)[1]).toEqual({ hll: true });
+  });
+});
+
+describe('shouldShowCommentButton', () => {
+  it.each`
+    hover    | context  | meta     | discussions | expectation
+    ${true}  | ${false} | ${false} | ${false}    | ${true}
+    ${false} | ${false} | ${false} | ${false}    | ${false}
+    ${true}  | ${true}  | ${false} | ${false}    | ${false}
+    ${true}  | ${true}  | ${true}  | ${false}    | ${false}
+    ${true}  | ${true}  | ${true}  | ${true}     | ${false}
+  `(
+    'should return $expectation when hover is $hover',
+    ({ hover, context, meta, discussions, expectation }) => {
+      expect(utils.shouldShowCommentButton(hover, context, meta, discussions)).toBe(expectation);
+    },
+  );
+});

spec/frontend/diffs/components/diff_table_cell_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { TEST_HOST } from 'helpers/test_constants';
-import DiffTableCell from '~/diffs/components/diff_table_cell.vue';
-import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue';
-import { LINE_POSITION_RIGHT } from '~/diffs/constants';
-import { createStore } from '~/mr_notes/stores';
-import discussionsMockData from '../mock_data/diff_discussions';
-import diffFileMockData from '../mock_data/diff_file';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const TEST_USER_ID = 'abc123';
-const TEST_USER = { id: TEST_USER_ID };
-const TEST_LINE_NUMBER = 1;
-const TEST_LINE_CODE = 'LC_42';
-const TEST_FILE_HASH = diffFileMockData.file_hash;
-
-describe('DiffTableCell', () => {
-  const symlinkishFileTooltip =
-    'Commenting on symbolic links that replace or are replaced by files is currently not supported.';
-  const realishFileTooltip =
-    'Commenting on files that replace or are replaced by symbolic links is currently not supported.';
-  const otherFileTooltip = 'Add a comment to this line';
-
-  let wrapper;
-  let line;
-  let store;
-
-  beforeEach(() => {
-    store = createStore();
-    store.state.notes.userData = TEST_USER;
-
-    line = {
-      line_code: TEST_LINE_CODE,
-      type: 'new',
-      old_line: null,
-      new_line: 1,
-      discussions: [{ ...discussionsMockData }],
-      discussionsExpanded: true,
-      text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-      rich_text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-      meta_data: null,
-    };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const setWindowLocation = value => {
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value,
-    });
-  };
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(DiffTableCell, {
-      localVue,
-      store,
-      propsData: {
-        line,
-        fileHash: TEST_FILE_HASH,
-        contextLinesPath: '/context/lines/path',
-        isHighlighted: false,
-        ...props,
-      },
-    });
-  };
-
-  const findTd = () => wrapper.find({ ref: 'td' });
-  const findNoteButton = () => wrapper.find({ ref: 'addDiffNoteButton' });
-  const findLineNumber = () => wrapper.find({ ref: 'lineNumberRef' });
-  const findTooltip = () => wrapper.find({ ref: 'addNoteTooltip' });
-  const findAvatars = () => wrapper.find(DiffGutterAvatars);
-
-  describe('td', () => {
-    it('highlights when isHighlighted true', () => {
-      createComponent({ isHighlighted: true });
-
-      expect(findTd().classes()).toContain('hll');
-    });
-
-    it('does not highlight when isHighlighted false', () => {
-      createComponent({ isHighlighted: false });
-
-      expect(findTd().classes()).not.toContain('hll');
-    });
-  });
-
-  describe('comment button', () => {
-    it.each`
-      showCommentButton | userData     | query                | mergeRefHeadComments | expectation
-      ${true}           | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${true}
-      ${true}           | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${true}
-      ${true}           | ${TEST_USER} | ${'diff_head=true'}  | ${false}             | ${false}
-      ${false}          | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${false}
-      ${false}          | ${TEST_USER} | ${'bogus'}           | ${true}              | ${false}
-      ${true}           | ${null}      | ${''}                | ${true}              | ${false}
-    `(
-      'exists is $expectation - with showCommentButton ($showCommentButton) userData ($userData) query ($query)',
-      ({ showCommentButton, userData, query, mergeRefHeadComments, expectation }) => {
-        store.state.notes.userData = userData;
-        gon.features = { mergeRefHeadComments };
-        setWindowLocation({ href: `${TEST_HOST}?${query}` });
-        createComponent({ showCommentButton });
-
-        wrapper.setData({ isCommentButtonRendered: showCommentButton });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().exists()).toBe(expectation);
-        });
-      },
-    );
-
-    it.each`
-      isHover  | otherProps                                      | discussions | expectation
-      ${true}  | ${{}}                                           | ${[]}       | ${true}
-      ${false} | ${{}}                                           | ${[]}       | ${false}
-      ${true}  | ${{ line: { ...line, type: 'context' } }}       | ${[]}       | ${false}
-      ${true}  | ${{ line: { ...line, type: 'old-nonewline' } }} | ${[]}       | ${false}
-      ${true}  | ${{}}                                           | ${[{}]}     | ${false}
-    `(
-      'visible is $expectation - with isHover ($isHover), discussions ($discussions), otherProps ($otherProps)',
-      ({ isHover, otherProps, discussions, expectation }) => {
-        line.discussions = discussions;
-        createComponent({
-          showCommentButton: true,
-          isHover,
-          ...otherProps,
-        });
-
-        wrapper.setData({
-          isCommentButtonRendered: true,
-        });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().isVisible()).toBe(expectation);
-        });
-      },
-    );
-
-    it.each`
-      disabled      | commentsDisabled
-      ${'disabled'} | ${true}
-      ${undefined}  | ${false}
-    `(
-      'has attribute disabled=$disabled when the outer component has prop commentsDisabled=$commentsDisabled',
-      ({ disabled, commentsDisabled }) => {
-        line.commentsDisabled = commentsDisabled;
-
-        createComponent({
-          showCommentButton: true,
-          isHover: true,
-        });
-
-        wrapper.setData({ isCommentButtonRendered: true });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().attributes('disabled')).toBe(disabled);
-        });
-      },
-    );
-
-    it.each`
-      tooltip                  | commentsDisabled
-      ${symlinkishFileTooltip} | ${{ wasSymbolic: true }}
-      ${symlinkishFileTooltip} | ${{ isSymbolic: true }}
-      ${realishFileTooltip}    | ${{ wasReal: true }}
-      ${realishFileTooltip}    | ${{ isReal: true }}
-      ${otherFileTooltip}      | ${false}
-    `(
-      'has the correct tooltip when commentsDisabled=$commentsDisabled',
-      ({ tooltip, commentsDisabled }) => {
-        line.commentsDisabled = commentsDisabled;
-
-        createComponent({
-          showCommentButton: true,
-          isHover: true,
-        });
-
-        wrapper.setData({ isCommentButtonRendered: true });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findTooltip().attributes('title')).toBe(tooltip);
-        });
-      },
-    );
-  });
-
-  describe('line number', () => {
-    describe('without lineNumber prop', () => {
-      it('does not render', () => {
-        createComponent({ lineType: 'old' });
-
-        expect(findLineNumber().exists()).toBe(false);
-      });
-    });
-
-    describe('with lineNumber prop', () => {
-      describe.each`
-        lineProps                                                         | expectedHref            | expectedClickArg
-        ${{ line_code: TEST_LINE_CODE }}                                  | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE}
-        ${{ line_code: undefined }}                                       | ${'#'}                  | ${undefined}
-        ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE } }}  | ${'#'}                  | ${TEST_LINE_CODE}
-        ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE } }} | ${'#'}                  | ${TEST_LINE_CODE}
-      `('with line ($lineProps)', ({ lineProps, expectedHref, expectedClickArg }) => {
-        beforeEach(() => {
-          jest.spyOn(store, 'dispatch').mockImplementation();
-          Object.assign(line, lineProps);
-          createComponent({ lineNumber: TEST_LINE_NUMBER });
-        });
-
-        it('renders', () => {
-          expect(findLineNumber().exists()).toBe(true);
-          expect(findLineNumber().attributes()).toEqual({
-            href: expectedHref,
-            'data-linenumber': TEST_LINE_NUMBER.toString(),
-          });
-        });
-
-        it('on click, dispatches setHighlightedRow', () => {
-          expect(store.dispatch).not.toHaveBeenCalled();
-
-          findLineNumber().trigger('click');
-
-          expect(store.dispatch).toHaveBeenCalledWith('diffs/setHighlightedRow', expectedClickArg);
-        });
-      });
-    });
-  });
-
-  describe('diff-gutter-avatars', () => {
-    describe('with showCommentButton', () => {
-      beforeEach(() => {
-        jest.spyOn(store, 'dispatch').mockImplementation();
-
-        createComponent({ showCommentButton: true });
-      });
-
-      it('renders', () => {
-        expect(findAvatars().props()).toEqual({
-          discussions: line.discussions,
-          discussionsExpanded: line.discussionsExpanded,
-        });
-      });
-
-      it('toggles line discussion', () => {
-        expect(store.dispatch).not.toHaveBeenCalled();
-
-        findAvatars().vm.$emit('toggleLineDiscussions');
-
-        expect(store.dispatch).toHaveBeenCalledWith('diffs/toggleLineDiscussions', {
-          lineCode: TEST_LINE_CODE,
-          fileHash: TEST_FILE_HASH,
-          expanded: !line.discussionsExpanded,
-        });
-      });
-    });
-
-    it.each`
-      props                                                             | lineProps              | expectation
-      ${{ showCommentButton: true }}                                    | ${{}}                  | ${true}
-      ${{ showCommentButton: false }}                                   | ${{}}                  | ${false}
-      ${{ showCommentButton: true, linePosition: LINE_POSITION_RIGHT }} | ${{ type: null }}      | ${false}
-      ${{ showCommentButton: true }}                                    | ${{ discussions: [] }} | ${false}
-    `(
-      'exists is $expectation - with props ($props), line ($lineProps)',
-      ({ props, lineProps, expectation }) => {
-        Object.assign(line, lineProps);
-        createComponent(props);
-
-        expect(findAvatars().exists()).toBe(expectation);
-      },
-    );
-  });
-});