Merge branch '199195-ide-fix-diff-highlighting' into 'master'

Fix IDE not opening diff correctly when switching to commit view

See merge request gitlab-org/gitlab!29439

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -45,7 +45,7 @@ export default {
     if (this.lastOpenedFile && this.lastOpenedFile.type !== 'tree') {
       this.openPendingTab({
         file: this.lastOpenedFile,
-        keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
+        keyPrefix: this.lastOpenedFile.staged ? stageKeys.staged : stageKeys.unstaged,
       })
         .then(changeViewer => {
           if (changeViewer) {

changelogs/unreleased/199195-ide-fix-diff-highlighting.yml

+---
+title: Fix Web IDE not showing diff when opening commit tab
+merge_request: 29439
+author:
+type: fixed

spec/javascripts/ide/components/repo_commit_section_spec.js → spec/frontend/ide/components/repo_commit_section_spec.js

-import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
+import { mount } from '@vue/test-utils';
+import { createStore } from '~/ide/stores';
 import router from '~/ide/ide_router';
-import repoCommitSection from '~/ide/components/repo_commit_section.vue';
-import { file, resetStore } from '../helpers';
+import RepoCommitSection from '~/ide/components/repo_commit_section.vue';
+import { stageKeys } from '~/ide/constants';
+import { file } from '../helpers';
+
+const TEST_NO_CHANGES_SVG = 'nochangessvg';
 
 describe('RepoCommitSection', () => {
-  let vm;
+  let wrapper;
+  let store;
 
   function createComponent() {
-    const Component = Vue.extend(repoCommitSection);
+    wrapper = mount(RepoCommitSection, { store });
+  }
 
+  function setupDefaultState() {
     store.state.noChangesStateSvgPath = 'svg';
     store.state.committedStateSvgPath = 'commitsvg';
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.currentProjectId = 'abcproject';
-    vm.$store.state.currentBranchId = 'master';
-    vm.$store.state.projects.abcproject = {
+    store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
+    store.state.projects.abcproject = {
       web_url: '',
       branches: {
         master: {
@@ -34,79 +36,98 @@ describe('RepoCommitSection', () => {
       }),
     );
 
-    vm.$store.state.rightPanelCollapsed = false;
-    vm.$store.state.currentBranch = 'master';
-    vm.$store.state.changedFiles = [];
-    vm.$store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }];
-    vm.$store.state.stagedFiles.forEach(f =>
+    store.state.rightPanelCollapsed = false;
+    store.state.currentBranch = 'master';
+    store.state.changedFiles = [];
+    store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }];
+    store.state.stagedFiles.forEach(f =>
       Object.assign(f, {
         changed: true,
+        staged: true,
         content: 'testing',
       }),
     );
 
     files.forEach(f => {
-      vm.$store.state.entries[f.path] = f;
+      store.state.entries[f.path] = f;
     });
-
-    return vm;
   }
 
-  beforeEach(done => {
-    spyOn(router, 'push');
-
-    vm = createComponent();
-
-    spyOn(vm, 'openPendingTab').and.callThrough();
-
-    vm.$mount();
+  beforeEach(() => {
+    store = createStore();
 
-    Vue.nextTick(done);
+    jest.spyOn(store, 'dispatch');
+    jest.spyOn(router, 'push').mockImplementation();
   });
 
   afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
+    wrapper.destroy();
   });
 
   describe('empty Stage', () => {
-    it('renders no changes text', () => {
-      resetStore(vm.$store);
-      const Component = Vue.extend(repoCommitSection);
-
-      store.state.noChangesStateSvgPath = 'nochangessvg';
+    beforeEach(() => {
+      store.state.noChangesStateSvgPath = TEST_NO_CHANGES_SVG;
       store.state.committedStateSvgPath = 'svg';
 
-      vm.$destroy();
-      vm = createComponentWithStore(Component, store).$mount();
+      createComponent();
+    });
 
-      expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes');
-      expect(vm.$el.querySelector('.js-empty-state img').getAttribute('src')).toBe('nochangessvg');
+    it('renders no changes text', () => {
+      expect(
+        wrapper
+          .find('.js-empty-state')
+          .text()
+          .trim(),
+      ).toContain('No changes');
+      expect(wrapper.find('.js-empty-state img').attributes('src')).toBe(TEST_NO_CHANGES_SVG);
     });
   });
 
-  it('renders a commit section', () => {
-    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list > li')];
-    const allFiles = vm.$store.state.changedFiles.concat(vm.$store.state.stagedFiles);
-
-    expect(changedFileElements).toHaveLength(2);
+  describe('default', () => {
+    beforeEach(() => {
+      setupDefaultState();
 
-    changedFileElements.forEach((changedFile, i) => {
-      expect(changedFile.textContent.trim()).toContain(allFiles[i].path);
-    });
+      createComponent();
     });
 
-  describe('mounted', () => {
     it('opens last opened file', () => {
       expect(store.state.openFiles.length).toBe(1);
       expect(store.state.openFiles[0].pending).toBe(true);
     });
 
     it('calls openPendingTab', () => {
-      expect(vm.openPendingTab).toHaveBeenCalledWith({
-        file: vm.lastOpenedFile,
-        keyPrefix: 'unstaged',
+      expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', {
+        file: store.getters.lastOpenedFile,
+        keyPrefix: stageKeys.staged,
+      });
+    });
+
+    it('renders a commit section', () => {
+      const allFiles = store.state.changedFiles.concat(store.state.stagedFiles);
+      const changedFileNames = wrapper
+        .findAll('.multi-file-commit-list > li')
+        .wrappers.map(x => x.text().trim());
+
+      expect(changedFileNames).toEqual(allFiles.map(x => x.path));
+    });
+  });
+
+  describe('with unstaged file', () => {
+    beforeEach(() => {
+      setupDefaultState();
+
+      store.state.changedFiles = store.state.stagedFiles.map(x =>
+        Object.assign(x, { staged: false }),
+      );
+      store.state.stagedFiles = [];
+
+      createComponent();
+    });
+
+    it('calls openPendingTab with unstaged prefix', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', {
+        file: store.getters.lastOpenedFile,
+        keyPrefix: stageKeys.unstaged,
       });
     });
   });