1 files changed, 21 insertions, 7 deletions

diff --git a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
index 6b92d448cf5..339352943a9 100644
--- a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
@@ -6,18 +7,24 @@ import diffFileMockData from '../mock_data/diff_file';
 
 describe('ParallelDiffTableRow', () => {
   describe('when one side is empty', () => {
+    let wrapper;
     let vm;
     const thisLine = diffFileMockData.parallel_diff_lines[0];
     const rightLine = diffFileMockData.parallel_diff_lines[0].right;
 
     beforeEach(() => {
-      vm = createComponentWithStore(Vue.extend(ParallelDiffTableRow), createStore(), {
-        line: thisLine,
-        fileHash: diffFileMockData.file_hash,
-        filePath: diffFileMockData.file_path,
-        contextLinesPath: 'contextLinesPath',
-        isHighlighted: false,
-      }).$mount();
+      wrapper = shallowMount(ParallelDiffTableRow, {
+        store: createStore(),
+        propsData: {
+          line: thisLine,
+          fileHash: diffFileMockData.file_hash,
+          filePath: diffFileMockData.file_path,
+          contextLinesPath: 'contextLinesPath',
+          isHighlighted: false,
+        },
+      });
+
+      vm = wrapper.vm;
     });
 
     it('does not highlight non empty line content when line does not match highlighted row', done => {
@@ -42,6 +49,13 @@ describe('ParallelDiffTableRow', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('highlights nonempty line content when line is part of a multiline comment', () => {
+      wrapper.setProps({ isCommented: true });
+      return vm.$nextTick().then(() => {
+        expect(vm.$el.querySelector('.line_content.right-side').classList).toContain('hll');
+      });
+    });
   });
 
   describe('when both sides have content', () => {