Move shared logic into utils

This is to allow sharing as much logic as possible
between inline and parallel views. This will also help
build out the new unified view in the furture.

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);
+    },
+  );
+});