1 files changed, 127 insertions, 0 deletions
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
new file mode 100644
index 00000000000..f9e76cf8107
--- /dev/null
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -0,0 +1,127 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import diffsModule from '~/diffs/store/modules';
+import DiffRow from '~/diffs/components/diff_row.vue';
+
+describe('DiffRow', () => {
+  const testLines = [
+    {
+      left: { old_line: 1, discussions: [] },
+      right: { new_line: 1, discussions: [] },
+      hasDiscussionsLeft: true,
+      hasDiscussionsRight: true,
+    },
+    {
+      left: {},
+      right: {},
+      isMatchLineLeft: true,
+      isMatchLineRight: true,
+    },
+    {},
+    {
+      left: { old_line: 1, discussions: [] },
+      right: { new_line: 1, discussions: [] },
+    },
+  ];
+
+  const createWrapper = ({ props, state, isLoggedIn = true }) => {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const diffs = diffsModule();
+    diffs.state = { ...diffs.state, ...state };
+
+    const getters = { isLoggedIn: () => isLoggedIn };
+
+    const store = new Vuex.Store({
+      modules: { diffs },
+      getters,
+    });
+
+    const propsData = {
+      fileHash: 'abc',
+      filePath: 'abc',
+      line: {},
+      ...props,
+    };
+    return shallowMount(DiffRow, { propsData, localVue, store });
+  };
+
+  it('isHighlighted returns true if isCommented is true', () => {
+    const props = { isCommented: true };
+    const wrapper = createWrapper({ props });
+    expect(wrapper.vm.isHighlighted).toBe(true);
+  });
+
+  it('isHighlighted returns true given line.left', () => {
+    const props = {
+      line: {
+        left: {
+          line_code: 'abc',
+        },
+      },
+    };
+    const state = { highlightedRow: 'abc' };
+    const wrapper = createWrapper({ props, state });
+    expect(wrapper.vm.isHighlighted).toBe(true);
+  });
+
+  it('isHighlighted returns true given line.right', () => {
+    const props = {
+      line: {
+        right: {
+          line_code: 'abc',
+        },
+      },
+    };
+    const state = { highlightedRow: 'abc' };
+    const wrapper = createWrapper({ props, state });
+    expect(wrapper.vm.isHighlighted).toBe(true);
+  });
+
+  it('isHighlighted returns false given line.left', () => {
+    const props = {
+      line: {
+        left: {
+          line_code: 'abc',
+        },
+      },
+    };
+    const wrapper = createWrapper({ props });
+    expect(wrapper.vm.isHighlighted).toBe(false);
+  });
+
+  describe.each`
+    side
+    ${'left'}
+    ${'right'}
+  `('$side side', ({ side }) => {
+    it(`renders empty cells if ${side} is unavailable`, () => {
+      const wrapper = createWrapper({ props: { line: testLines[2] } });
+      expect(wrapper.find(`[data-testid="${side}LineNumber"]`).exists()).toBe(false);
+      expect(wrapper.find(`[data-testid="${side}EmptyCell"]`).exists()).toBe(true);
+    });
+
+    it('renders comment button', () => {
+      const wrapper = createWrapper({ props: { line: testLines[3] } });
+      expect(wrapper.find(`[data-testid="${side}CommentButton"]`).exists()).toBe(true);
+    });
+
+    it('renders avatars', () => {
+      const wrapper = createWrapper({ props: { line: testLines[0] } });
+      expect(wrapper.find(`[data-testid="${side}Discussions"]`).exists()).toBe(true);
+    });
+  });
+
+  it('renders left line numbers', () => {
+    const wrapper = createWrapper({ props: { line: testLines[0] } });
+    const lineNumber = testLines[0].left.old_line;
+    expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
+  });
+
+  it('renders right line numbers', () => {
+    const wrapper = createWrapper({ props: { line: testLines[0] } });
+    const lineNumber = testLines[0].right.new_line;
+    expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
+  });
+});