Refactor diff_stats_spec to improve organization and readability

Group similar tests together and implement createComponent function

spec/frontend/diffs/components/diff_stats_spec.js

@@ -2,39 +2,46 @@ import { shallowMount } from '@vue/test-utils';
 import DiffStats from '~/diffs/components/diff_stats.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
+const TEST_ADDED_LINES = 100;
+const TEST_REMOVED_LINES = 200;
+const DIFF_FILES_LENGTH = 300;
+
 describe('diff_stats', () => {
-  it('does not render a group if diffFileLengths is empty', () => {
-    const wrapper = shallowMount(DiffStats, {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DiffStats, {
       propsData: {
-        addedLines: 1,
-        removedLines: 2,
+        addedLines: TEST_ADDED_LINES,
+        removedLines: TEST_REMOVED_LINES,
+        ...props,
       },
     });
-    const groups = wrapper.findAll('.diff-stats-group');
+  };
 
-    expect(groups.length).toBe(2);
-  });
+  describe('diff stats group', () => {
+    const findDiffStatsGroup = () => wrapper.findAll('.diff-stats-group');
 
-  it('does not render a group if diffFileLengths is not a number', () => {
-    const wrapper = shallowMount(DiffStats, {
-      propsData: {
-        addedLines: 1,
-        removedLines: 2,
-        diffFilesLength: Number.NaN,
-      },
+    it('is not rendered if diffFileLengths is empty', () => {
+      createComponent();
+
+      expect(findDiffStatsGroup().length).toBe(2);
     });
-    const groups = wrapper.findAll('.diff-stats-group');
 
-    expect(groups.length).toBe(2);
+    it('is not rendered if diffFileLengths is not a number', () => {
+      createComponent({
+        diffFilesLength: Number.NaN,
+      });
+
+      expect(findDiffStatsGroup().length).toBe(2);
+    });
   });
 
-  it('shows amount of files changed, lines added and lines removed when passed all props', () => {
-    const wrapper = shallowMount(DiffStats, {
-      propsData: {
-        addedLines: 100,
-        removedLines: 200,
-        diffFilesLength: 300,
-      },
+  describe('amount displayed', () => {
+    beforeEach(() => {
+      createComponent({
+        diffFilesLength: DIFF_FILES_LENGTH,
+      });
     });
 
     const findFileLine = name => wrapper.find(name);
@@ -43,12 +50,17 @@ describe('diff_stats', () => {
         .findAll(Icon)
         .filter(c => c.attributes('name') === name)
         .at(0).element.parentNode;
-    const additions = findFileLine('.js-file-addition-line');
-    const deletions = findFileLine('.js-file-deletion-line');
-    const filesChanged = findIcon('doc-code');
 
-    expect(additions.text()).toBe('100');
-    expect(deletions.text()).toBe('200');
-    expect(filesChanged.textContent).toContain('300');
+    it('shows the amount of lines added', () => {
+      expect(findFileLine('.js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
+    });
+
+    it('shows the amount of lines removed', () => {
+      expect(findFileLine('.js-file-deletion-line').text()).toBe(TEST_REMOVED_LINES.toString());
+    });
+
+    it('shows the amount of files changed', () => {
+      expect(findIcon('doc-code').textContent).toContain(DIFF_FILES_LENGTH);
+    });
   });
 });