Improves performance on MR refactor and adds specs

1 files changed, 82 insertions, 77 deletions

diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index d321f2ce15e..9c2908c477e 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,89 +1,94 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import imageDiffHelper from '~/image_diff/helpers/index';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
+  import { mapState, mapActions } from 'vuex';
+  import imageDiffHelper from '~/image_diff/helpers/index';
+  import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+  import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
+  import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+  import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
 
-export default {
-  components: {
-    DiffFileHeader,
-    SkeletonLoadingContainer,
-  },
-  props: {
-    discussion: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      DiffFileHeader,
+      SkeletonLoadingContainer,
     },
-  },
-  data() {
-    return {
-      error: false,
-    };
-  },
-  computed: {
-    ...mapState({
-      noteableData: state => state.notes.noteableData,
-    }),
-    hasTruncatedDiffLines() {
-      return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
+    props: {
+      discussion: {
+        type: Object,
+        required: true,
+      },
     },
-    isDiscussionsExpanded() {
-      return true; // TODO: @fatihacet - Fix this.
+    data() {
+      return {
+        error: false,
+      };
     },
-    isCollapsed() {
-      return this.diffFile.collapsed || false;
-    },
-    isImageDiff() {
-      return !this.diffFile.text;
-    },
-    diffFileClass() {
-      const { text } = this.diffFile;
-      return text ? 'text-file' : 'js-image-file';
-    },
-    diffFile() {
-      return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
-    },
-    imageDiffHtml() {
-      return this.discussion.imageDiffHtml;
-    },
-    currentUser() {
-      return this.noteableData.current_user;
-    },
-    userColorScheme() {
-      return window.gon.user_color_scheme;
-    },
-    normalizedDiffLines() {
-      const lines = this.discussion.truncatedDiffLines || [];
+    computed: {
+      ...mapState({
+        noteableData: state => state.notes.noteableData,
+      }),
+      hasTruncatedDiffLines() {
+        return this.discussion.truncatedDiffLines &&
+          this.discussion.truncatedDiffLines.length !== 0;
+      },
+      isDiscussionsExpanded() {
+        return true; // TODO: @fatihacet - Fix this.
+      },
+      isCollapsed() {
+        return this.diffFile.collapsed || false;
+      },
+      isImageDiff() {
+        return !this.diffFile.text;
+      },
+      diffFileClass() {
+        const { text } = this.diffFile;
+        return text ? 'text-file' : 'js-image-file';
+      },
+      diffFile() {
+        return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
+      },
+      imageDiffHtml() {
+        return this.discussion.imageDiffHtml;
+      },
+      currentUser() {
+        return this.noteableData.current_user;
+      },
+      userColorScheme() {
+        return window.gon.user_color_scheme;
+      },
+      normalizedDiffLines() {
+        if (this.discussion.truncatedDiffLines) {
+          return this.discussion.truncatedDiffLines.map(line =>
+            trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
+          );
+        }
 
-      return lines.map(line => trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)));
+        return [];
+      },
     },
-  },
-  mounted() {
-    if (this.isImageDiff) {
-      const canCreateNote = false;
-      const renderCommentBadge = true;
-      imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
-    } else if (!this.hasTruncatedDiffLines) {
-      this.fetchDiff();
-    }
-  },
-  methods: {
-    ...mapActions(['fetchDiscussionDiffLines']),
-    rowTag(html) {
-      return html.outerHTML ? 'tr' : 'template';
+    mounted() {
+      if (this.isImageDiff) {
+        const canCreateNote = false;
+        const renderCommentBadge = true;
+        imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
+      } else if (!this.hasTruncatedDiffLines) {
+        this.fetchDiff();
+      }
     },
-    fetchDiff() {
-      this.error = false;
-      this.fetchDiscussionDiffLines(this.discussion)
-        .then(this.highlight)
-        .catch(() => {
-          this.error = true;
-        });
+    methods: {
+      ...mapActions(['fetchDiscussionDiffLines']),
+      rowTag(html) {
+        return html.outerHTML ? 'tr' : 'template';
+      },
+      fetchDiff() {
+        this.error = false;
+        this.fetchDiscussionDiffLines(this.discussion)
+          .then(this.highlight)
+          .catch(() => {
+            this.error = true;
+          });
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>