Merge branch 'migrate-diffs-specs' into 'master'

Migrate diffs specs to Jest + VTU

See merge request gitlab-org/gitlab!20652

spec/javascripts/diffs/components/compare_versions_spec.js → spec/frontend/diffs/components/compare_versions_spec.js

-import Vue from 'vue';
+import { trimText } from 'helpers/text_helper';
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 import { createStore } from '~/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffsMockData from '../mock_data/merge_request_diffs';
 import getDiffWithCommit from '../mock_data/diff_with_commit';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('CompareVersions', () => {
-  let vm;
+  let wrapper;
   const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
 
-  beforeEach(() => {
+  const createWrapper = props => {
     const store = createStore();
 
     store.state.diffs.addedLines = 10;
     store.state.diffs.removedLines = 20;
     store.state.diffs.diffFiles.push('test');
 
-    vm = createComponentWithStore(Vue.extend(CompareVersionsComponent), store, {
-      mergeRequestDiffs: diffsMockData,
-      mergeRequestDiff: diffsMockData[0],
-      targetBranch,
-    }).$mount();
+    wrapper = mount(CompareVersionsComponent, {
+      sync: false,
+      attachToDocument: true,
+      localVue,
+      store,
+      propsData: {
+        mergeRequestDiffs: diffsMockData,
+        mergeRequestDiff: diffsMockData[0],
+        targetBranch,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('template', () => {
     it('should render Tree List toggle button with correct attribute values', () => {
-      const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
-
-      expect(treeListBtn).not.toBeNull();
-      expect(treeListBtn.dataset.originalTitle).toBe('Hide file browser');
-      expect(treeListBtn.querySelectorAll('svg use').length).not.toBe(0);
-      expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain(
-        '#collapse-left',
-      );
+      const treeListBtn = wrapper.find('.js-toggle-tree-list');
+
+      expect(treeListBtn.exists()).toBe(true);
+      expect(treeListBtn.attributes('data-original-title')).toBe('Hide file browser');
+      expect(treeListBtn.findAll(Icon).length).not.toBe(0);
+      expect(treeListBtn.find(Icon).props('name')).toBe('collapse-left');
     });
 
     it('should render comparison dropdowns with correct values', () => {
-      const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
-      const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
+      const sourceDropdown = wrapper.find('.mr-version-dropdown');
+      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
 
-      expect(sourceDropdown).not.toBeNull();
-      expect(targetDropdown).not.toBeNull();
-      expect(sourceDropdown.querySelector('a span').innerHTML).toContain('latest version');
-      expect(targetDropdown.querySelector('a span').innerHTML).toContain(targetBranch.branchName);
+      expect(sourceDropdown.exists()).toBe(true);
+      expect(targetDropdown.exists()).toBe(true);
+      expect(sourceDropdown.find('a span').html()).toContain('latest version');
+      expect(targetDropdown.find('a span').html()).toContain(targetBranch.branchName);
     });
 
     it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
-      vm.mergeRequestDiffs = [];
+      createWrapper({ mergeRequestDiffs: [] });
 
-      vm.$nextTick(() => {
-        const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
-        const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
+      const sourceDropdown = wrapper.find('.mr-version-dropdown');
+      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
 
-        expect(sourceDropdown).toBeNull();
-        expect(targetDropdown).toBeNull();
-      });
+      expect(sourceDropdown.exists()).toBe(false);
+      expect(targetDropdown.exists()).toBe(false);
     });
 
     it('should render view types buttons with correct values', () => {
-      const inlineBtn = vm.$el.querySelector('#inline-diff-btn');
-      const parallelBtn = vm.$el.querySelector('#parallel-diff-btn');
-
-      expect(inlineBtn).not.toBeNull();
-      expect(parallelBtn).not.toBeNull();
-      expect(inlineBtn.dataset.viewType).toEqual('inline');
-      expect(parallelBtn.dataset.viewType).toEqual('parallel');
-      expect(inlineBtn.innerHTML).toContain('Inline');
-      expect(parallelBtn.innerHTML).toContain('Side-by-side');
+      const inlineBtn = wrapper.find('#inline-diff-btn');
+      const parallelBtn = wrapper.find('#parallel-diff-btn');
+
+      expect(inlineBtn.exists()).toBe(true);
+      expect(parallelBtn.exists()).toBe(true);
+      expect(inlineBtn.attributes('data-view-type')).toEqual('inline');
+      expect(parallelBtn.attributes('data-view-type')).toEqual('parallel');
+      expect(inlineBtn.html()).toContain('Inline');
+      expect(parallelBtn.html()).toContain('Side-by-side');
     });
 
     it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
-      vm.isLimitedContainer = true;
+      createWrapper({ isLimitedContainer: true });
 
-      vm.$nextTick(() => {
-        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
+      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
 
-        expect(limitedContainer).not.toBeNull();
-      });
+      expect(limitedContainer.exists()).toBe(true);
     });
 
     it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
-      vm.isLimitedContainer = false;
+      createWrapper({ isLimitedContainer: false });
 
-      vm.$nextTick(() => {
-        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
+      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
 
-        expect(limitedContainer).toBeNull();
-      });
+      expect(limitedContainer.exists()).toBe(false);
     });
   });
 
   describe('setInlineDiffViewType', () => {
     it('should persist the view type in the url', () => {
-      const viewTypeBtn = vm.$el.querySelector('#inline-diff-btn');
-      viewTypeBtn.click();
+      const viewTypeBtn = wrapper.find('#inline-diff-btn');
+      viewTypeBtn.trigger('click');
 
       expect(window.location.toString()).toContain('?view=inline');
     });
@@ -101,8 +114,8 @@ describe('CompareVersions', () => {
 
   describe('setParallelDiffViewType', () => {
     it('should persist the view type in the url', () => {
-      const viewTypeBtn = vm.$el.querySelector('#parallel-diff-btn');
-      viewTypeBtn.click();
+      const viewTypeBtn = wrapper.find('#parallel-diff-btn');
+      viewTypeBtn.trigger('click');
 
       expect(window.location.toString()).toContain('?view=parallel');
     });
@@ -110,7 +123,7 @@ describe('CompareVersions', () => {
 
   describe('comparableDiffs', () => {
     it('should not contain the first item in the mergeRequestDiffs property', () => {
-      const { comparableDiffs } = vm;
+      const { comparableDiffs } = wrapper.vm;
       const comparableDiffsMock = diffsMockData.slice(1);
 
       expect(comparableDiffs).toEqual(comparableDiffsMock);
@@ -119,27 +132,25 @@ describe('CompareVersions', () => {
 
   describe('baseVersionPath', () => {
     it('should be set correctly from mergeRequestDiff', () => {
-      expect(vm.baseVersionPath).toEqual(vm.mergeRequestDiff.base_version_path);
+      expect(wrapper.vm.baseVersionPath).toEqual(wrapper.vm.mergeRequestDiff.base_version_path);
     });
   });
 
   describe('commit', () => {
     beforeEach(done => {
-      vm.$store.state.diffs.commit = getDiffWithCommit().commit;
-      vm.mergeRequestDiffs = [];
+      wrapper.vm.$store.state.diffs.commit = getDiffWithCommit().commit;
+      wrapper.mergeRequestDiffs = [];
 
-      vm.$nextTick(done);
+      wrapper.vm.$nextTick(done);
     });
 
     it('renders latest version button', () => {
-      expect(vm.$el.querySelector('.js-latest-version').textContent.trim()).toBe(
-        'Show latest version',
-      );
+      expect(trimText(wrapper.find('.js-latest-version').text())).toBe('Show latest version');
     });
 
     it('renders short commit ID', () => {
-      expect(vm.$el.textContent).toContain('Viewing commit');
-      expect(vm.$el.textContent).toContain(vm.commit.short_id);
+      expect(wrapper.text()).toContain('Viewing commit');
+      expect(wrapper.text()).toContain(wrapper.vm.commit.short_id);
     });
   });
 });

spec/frontend/diffs/mock_data/diff_with_commit.js

+const FIXTURE = 'merge_request_diffs/with_commit.json';
+
+preloadFixtures(FIXTURE);
+
+export default function getDiffWithCommit() {
+  return getJSONFixture(FIXTURE);
+}

spec/frontend/diffs/mock_data/merge_request_diffs.js

+export default [
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+    version_index: 4,
+    created_at: '2018-10-23T11:49:16.611Z',
+    commits_count: 4,
+    latest: true,
+    short_commit_sha: 'de7a8f7f',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=de7a8f7f20c3ea2e0bef3ba01cfd41c21f6b4995',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
+    version_index: 3,
+    created_at: '2018-10-23T11:46:40.617Z',
+    commits_count: 3,
+    latest: false,
+    short_commit_sha: 'e78fc18f',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=e78fc18fa37acb2185c59ca94d4a964464feb50e',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
+    version_index: 2,
+    created_at: '2018-10-04T09:57:39.648Z',
+    commits_count: 2,
+    latest: false,
+    short_commit_sha: '48da7e7e',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=48da7e7e9a99d41c852578bd9cb541ca4d864b3e',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
+    version_index: 1,
+    created_at: '2018-09-25T20:30:39.493Z',
+    commits_count: 1,
+    latest: false,
+    short_commit_sha: '47bac2ed',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=47bac2ed972c5bee344c1cea159a22cd7f711dc0',
+  },
+];

spec/javascripts/diffs/mock_data/diff_with_commit.js

-const FIXTURE = 'merge_request_diffs/with_commit.json';
+// No new code should be added to this file. Instead, modify the
+// file this one re-exports from. For more detail about why, see:
+// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
 
-preloadFixtures(FIXTURE);
+import getDiffWithCommit from '../../../frontend/diffs/mock_data/diff_with_commit';
 
-export default function getDiffWithCommit() {
-  return getJSONFixture(FIXTURE);
-}
+export default getDiffWithCommit;

spec/javascripts/diffs/mock_data/merge_request_diffs.js

-export default [
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
-    version_index: 4,
-    created_at: '2018-10-23T11:49:16.611Z',
-    commits_count: 4,
-    latest: true,
-    short_commit_sha: 'de7a8f7f',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=de7a8f7f20c3ea2e0bef3ba01cfd41c21f6b4995',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
-    version_index: 3,
-    created_at: '2018-10-23T11:46:40.617Z',
-    commits_count: 3,
-    latest: false,
-    short_commit_sha: 'e78fc18f',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=e78fc18fa37acb2185c59ca94d4a964464feb50e',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
-    version_index: 2,
-    created_at: '2018-10-04T09:57:39.648Z',
-    commits_count: 2,
-    latest: false,
-    short_commit_sha: '48da7e7e',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=48da7e7e9a99d41c852578bd9cb541ca4d864b3e',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
-    version_index: 1,
-    created_at: '2018-09-25T20:30:39.493Z',
-    commits_count: 1,
-    latest: false,
-    short_commit_sha: '47bac2ed',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=47bac2ed972c5bee344c1cea159a22cd7f711dc0',
-  },
-];
+// No new code should be added to this file. Instead, modify the
+// file this one re-exports from. For more detail about why, see:
+// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
+
+import diffsMockData from '../../../frontend/diffs/mock_data/merge_request_diffs';
+
+export default diffsMockData;