Update suggestion diff row

We update the suggestion diff row to
add the needed line class for correct
copy and a extra span for empty lines

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_row.vue

@@ -27,9 +27,14 @@ export default {
     <td class="diff-line-num new_line border-top-0 border-bottom-0" :class="lineType">
       {{ line.new_line }}
     </td>
-    <td class="line_content" :class="[{ 'd-table-cell': displayAsCell }, lineType]">
-      <span v-if="line.rich_text" v-html="line.rich_text"></span>
-      <span v-else-if="line.text">{{ line.text }}</span>
+    <td
+      class="line_content"
+      :class="[{ 'd-table-cell': displayAsCell }, lineType]"
+      data-testid="suggestion-diff-content"
+    >
+      <span v-if="line.rich_text" class="line" v-html="line.rich_text"></span>
+      <span v-else-if="line.text" class="line">{{ line.text }}</span>
+      <span v-else class="line"></span>
     </td>
   </tr>
 </template>

spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js

@@ -34,12 +34,25 @@ describe('SuggestionDiffRow', () => {
 
   const findOldLineWrapper = () => wrapper.find('.old_line');
   const findNewLineWrapper = () => wrapper.find('.new_line');
+  const findSuggestionContent = () => wrapper.find('[data-testid="suggestion-diff-content"]');
 
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('renders correctly', () => {
+    it('renders the correct base suggestion markup', () => {
+      factory({
+        propsData: {
+          line: oldLine,
+        },
+      });
+
+      expect(findSuggestionContent().html()).toBe(
+        '<td data-testid="suggestion-diff-content" class="line_content old"><span class="line">oldrichtext</span></td>',
+      );
+    });
+
     it('has the right classes on the wrapper', () => {
       factory({
         propsData: {
@@ -48,6 +61,11 @@ describe('SuggestionDiffRow', () => {
       });
 
       expect(wrapper.classes()).toContain('line_holder');
+      expect(
+        findSuggestionContent()
+          .find('span')
+          .classes(),
+      ).toContain('line');
     });
 
     it('renders the rich text when it is available', () => {