Merge branch '213581-step-1-clean-up-unit-test' into 'master'

Step 1 - Clean up `commit_sidebar/form_spec` and commit constants

See merge request gitlab-org/gitlab!51816

app/assets/javascripts/ide/components/commit_sidebar/actions.vue

@@ -3,7 +3,10 @@ import { escape } from 'lodash';
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import consts from '../../stores/modules/commit/constants';
+import {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+} from '../../stores/modules/commit/constants';
 import RadioGroup from './radio_group.vue';
 import NewMergeRequestOption from './new_merge_request_option.vue';
 
@@ -53,14 +56,14 @@ export default {
       }
 
       if (this.shouldDefaultToCurrentBranch) {
-        this.updateCommitAction(consts.COMMIT_TO_CURRENT_BRANCH);
+        this.updateCommitAction(COMMIT_TO_CURRENT_BRANCH);
       } else {
-        this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH);
+        this.updateCommitAction(COMMIT_TO_NEW_BRANCH);
       }
     },
   },
-  commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
-  commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
+  commitToCurrentBranch: COMMIT_TO_CURRENT_BRANCH,
+  commitToNewBranch: COMMIT_TO_NEW_BRANCH,
   currentBranchPermissionsTooltip: s__(
     "IDE|This option is disabled because you don't have write permissions for the current branch.",
   ),

app/assets/javascripts/ide/components/commit_sidebar/form.vue

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlModal, GlSafeHtmlDirective, GlButton } from '@gitlab/ui';
-import { n__, __ } from '~/locale';
+import { n__ } from '~/locale';
 import CommitMessageField from './message_field.vue';
 import Actions from './actions.vue';
 import SuccessMessage from './success_message.vue';
@@ -35,10 +35,6 @@ export default {
     overviewText() {
       return n__('%d changed file', '%d changed files', this.stagedFiles.length);
     },
-    commitButtonText() {
-      return this.stagedFiles.length ? __('Commit') : __('Stage & Commit');
-    },
-
     currentViewIsCommitView() {
       return this.currentActivityView === leftSidebarViews.commit.name;
     },
@@ -160,13 +156,19 @@ export default {
           <gl-button
             :loading="submitCommitLoading"
             class="float-left qa-commit-button"
+            data-testid="commit-button"
             category="primary"
             variant="success"
             @click="commit"
           >
             {{ __('Commit') }}
           </gl-button>
-          <gl-button v-if="!discardDraftButtonDisabled" class="float-right" @click="discardDraft">
+          <gl-button
+            v-if="!discardDraftButtonDisabled"
+            class="float-right"
+            data-testid="discard-draft"
+            @click="discardDraft"
+          >
             {{ __('Discard draft') }}
           </gl-button>
           <gl-button

app/assets/javascripts/ide/lib/errors.js

 import { escape } from 'lodash';
 import { __ } from '~/locale';
-import consts from '../stores/modules/commit/constants';
+import { COMMIT_TO_NEW_BRANCH } from '../stores/modules/commit/constants';
 
 const CODEOWNERS_REGEX = /Push.*protected branches.*CODEOWNERS/;
 const BRANCH_CHANGED_REGEX = /changed.*since.*start.*edit/;
@@ -8,7 +8,7 @@ const BRANCH_ALREADY_EXISTS = /branch.*already.*exists/;
 
 const createNewBranchAndCommit = (store) =>
   store
-    .dispatch('commit/updateCommitAction', consts.COMMIT_TO_NEW_BRANCH)
+    .dispatch('commit/updateCommitAction', COMMIT_TO_NEW_BRANCH)
     .then(() => store.dispatch('commit/commitChanges'));
 
 export const createUnexpectedCommitError = (message) => ({

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -4,7 +4,7 @@ import * as rootTypes from '../../mutation_types';
 import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
 import service from '../../../services';
 import * as types from './mutation_types';
-import consts from './constants';
+import { COMMIT_TO_CURRENT_BRANCH } from './constants';
 import { leftSidebarViews } from '../../../constants';
 import eventHub from '../../../eventhub';
 import { parseCommitError } from '../../../lib/errors';
@@ -112,7 +112,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
   // Pull commit options out because they could change
   // During some of the pre and post commit processing
   const { shouldCreateMR, shouldHideNewMrOption, isCreatingNewBranch, branchName } = getters;
-  const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
+  const newBranch = state.commitAction !== COMMIT_TO_CURRENT_BRANCH;
   const stageFilesPromise = rootState.stagedFiles.length
     ? Promise.resolve()
     : dispatch('stageAllChanges', null, { root: true });
@@ -206,7 +206,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
             dispatch('updateViewer', 'editor', { root: true });
           }
         })
-        .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH))
+        .then(() => dispatch('updateCommitAction', COMMIT_TO_CURRENT_BRANCH))
         .then(() => {
           if (newBranch) {
             const path = rootGetters.activeFile ? rootGetters.activeFile.path : '';

app/assets/javascripts/ide/stores/modules/commit/constants.js

-const COMMIT_TO_CURRENT_BRANCH = '1';
-const COMMIT_TO_NEW_BRANCH = '2';
-
-export default {
-  COMMIT_TO_CURRENT_BRANCH,
-  COMMIT_TO_NEW_BRANCH,
-};
+export const COMMIT_TO_CURRENT_BRANCH = '1';
+export const COMMIT_TO_NEW_BRANCH = '2';

app/assets/javascripts/ide/stores/modules/commit/getters.js

 import { sprintf, n__, __ } from '../../../../locale';
-import consts from './constants';
+import { COMMIT_TO_NEW_BRANCH } from './constants';
 
 const BRANCH_SUFFIX_COUNT = 5;
 const createTranslatedTextForFiles = (files, text) => {
@@ -48,7 +48,7 @@ export const preBuiltCommitMessage = (state, _, rootState) => {
     .join('\n');
 };
 
-export const isCreatingNewBranch = (state) => state.commitAction === consts.COMMIT_TO_NEW_BRANCH;
+export const isCreatingNewBranch = (state) => state.commitAction === COMMIT_TO_NEW_BRANCH;
 
 export const shouldHideNewMrOption = (_state, getters, _rootState, rootGetters) =>
   !getters.isCreatingNewBranch &&

locale/gitlab.pot

@@ -26815,9 +26815,6 @@ msgstr ""
 msgid "Stage"
 msgstr ""
 
-msgid "Stage & Commit"
-msgstr ""
-
 msgid "Stage data updated"
 msgstr ""
 

spec/frontend/__helpers__/stub_component.js

+/**
+ * Returns a new object with keys pointing to stubbed methods
+ *
+ * This is helpful for stubbing components like GlModal where it's supported
+ * in the API to call `.show()` and `.hide()` ([Bootstrap Vue docs][1]).
+ *
+ * [1]: https://bootstrap-vue.org/docs/components/modal#using-show-hide-and-toggle-component-methods
+ *
+ * @param {Object} methods - Object whose keys will be in the returned object.
+ */
+const createStubbedMethods = (methods = {}) => {
+  if (!methods) {
+    return {};
+  }
+
+  return Object.keys(methods).reduce(
+    (acc, key) =>
+      Object.assign(acc, {
+        [key]: () => {},
+      }),
+    {},
+  );
+};
+
 export function stubComponent(Component, options = {}) {
   return {
     props: Component.props,
     model: Component.model,
+    methods: createStubbedMethods(Component.methods),
     // Do not render any slots/scoped slots except default
     // This differs from VTU behavior which renders all slots
     template: '<div><slot></slot></div>',

spec/frontend/ide/components/commit_sidebar/actions_spec.js

@@ -3,7 +3,10 @@ import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { projectData, branches } from 'jest/ide/mock_data';
 import { createStore } from '~/ide/stores';
 import commitActions from '~/ide/components/commit_sidebar/actions.vue';
-import consts from '~/ide/stores/modules/commit/constants';
+import {
+  COMMIT_TO_NEW_BRANCH,
+  COMMIT_TO_CURRENT_BRANCH,
+} from '~/ide/stores/modules/commit/constants';
 
 const ACTION_UPDATE_COMMIT_ACTION = 'commit/updateCommitAction';
 
@@ -126,16 +129,16 @@ describe('IDE commit sidebar actions', () => {
 
     it.each`
       input                                                            | expectedOption
-      ${{ currentBranchId: BRANCH_DEFAULT }}                           | ${consts.COMMIT_TO_NEW_BRANCH}
-      ${{ currentBranchId: BRANCH_DEFAULT, emptyRepo: true }}          | ${consts.COMMIT_TO_CURRENT_BRANCH}
-      ${{ currentBranchId: BRANCH_PROTECTED, hasMR: true }}            | ${consts.COMMIT_TO_CURRENT_BRANCH}
-      ${{ currentBranchId: BRANCH_PROTECTED, hasMR: false }}           | ${consts.COMMIT_TO_CURRENT_BRANCH}
-      ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: true }}  | ${consts.COMMIT_TO_NEW_BRANCH}
-      ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: false }} | ${consts.COMMIT_TO_NEW_BRANCH}
-      ${{ currentBranchId: BRANCH_REGULAR, hasMR: true }}              | ${consts.COMMIT_TO_CURRENT_BRANCH}
-      ${{ currentBranchId: BRANCH_REGULAR, hasMR: false }}             | ${consts.COMMIT_TO_CURRENT_BRANCH}
-      ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: true }}    | ${consts.COMMIT_TO_NEW_BRANCH}
-      ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: false }}   | ${consts.COMMIT_TO_NEW_BRANCH}
+      ${{ currentBranchId: BRANCH_DEFAULT }}                           | ${COMMIT_TO_NEW_BRANCH}
+      ${{ currentBranchId: BRANCH_DEFAULT, emptyRepo: true }}          | ${COMMIT_TO_CURRENT_BRANCH}
+      ${{ currentBranchId: BRANCH_PROTECTED, hasMR: true }}            | ${COMMIT_TO_CURRENT_BRANCH}
+      ${{ currentBranchId: BRANCH_PROTECTED, hasMR: false }}           | ${COMMIT_TO_CURRENT_BRANCH}
+      ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: true }}  | ${COMMIT_TO_NEW_BRANCH}
+      ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: false }} | ${COMMIT_TO_NEW_BRANCH}
+      ${{ currentBranchId: BRANCH_REGULAR, hasMR: true }}              | ${COMMIT_TO_CURRENT_BRANCH}
+      ${{ currentBranchId: BRANCH_REGULAR, hasMR: false }}             | ${COMMIT_TO_CURRENT_BRANCH}
+      ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: true }}    | ${COMMIT_TO_NEW_BRANCH}
+      ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: false }}   | ${COMMIT_TO_NEW_BRANCH}
     `(
       'with $input, it dispatches update commit action with $expectedOption',
       ({ input, expectedOption }) => {

spec/frontend/ide/components/commit_sidebar/form_spec.js

 import Vue from 'vue';
-import { getByText } from '@testing-library/dom';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
 import { projectData } from 'jest/ide/mock_data';
+import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createStore } from '~/ide/stores';
-import consts from '~/ide/stores/modules/commit/constants';
+import { COMMIT_TO_NEW_BRANCH } from '~/ide/stores/modules/commit/constants';
 import CommitForm from '~/ide/components/commit_sidebar/form.vue';
+import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue';
 import { leftSidebarViews } from '~/ide/constants';
 import {
   createCodeownersCommitError,
@@ -15,256 +17,245 @@ import {
 } from '~/ide/lib/errors';
 
 describe('IDE commit form', () => {
-  const Component = Vue.extend(CommitForm);
-  let vm;
+  let wrapper;
   let store;
 
-  const beginCommitButton = () => vm.$el.querySelector('[data-testid="begin-commit-button"]');
+  const createComponent = () => {
+    wrapper = shallowMount(CommitForm, {
+      store,
+      stubs: {
+        GlModal: stubComponent(GlModal),
+      },
+    });
+  };
+
+  const setLastCommitMessage = (msg) => {
+    store.state.lastCommitMsg = msg;
+  };
+  const goToCommitView = () => {
+    store.state.currentActivityView = leftSidebarViews.commit.name;
+  };
+  const goToEditView = () => {
+    store.state.currentActivityView = leftSidebarViews.edit.name;
+  };
+  const findBeginCommitButton = () => wrapper.find('[data-testid="begin-commit-button"]');
+  const findCommitButton = () => wrapper.find('[data-testid="commit-button"]');
+  const findForm = () => wrapper.find('form');
+  const findCommitMessageInput = () => wrapper.find(CommitMessageField);
+  const setCommitMessageInput = (val) => findCommitMessageInput().vm.$emit('input', val);
+  const findDiscardDraftButton = () => wrapper.find('[data-testid="discard-draft"]');
 
   beforeEach(() => {
     store = createStore();
-    store.state.changedFiles.push('test');
+    store.state.stagedFiles.push('test');
     store.state.currentProjectId = 'abcproject';
     store.state.currentBranchId = 'master';
-    Vue.set(store.state.projects, 'abcproject', { ...projectData });
-
-    vm = createComponentWithStore(Component, store).$mount();
+    Vue.set(store.state.projects, 'abcproject', {
+      ...projectData,
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('enables begin commit button when there are changes', () => {
-    expect(beginCommitButton()).not.toHaveAttr('disabled');
-  });
+  describe.each`
+    desc                           | stagedFiles | disabled
+    ${'when there are changes'}    | ${['test']} | ${false}
+    ${'when there are no changes'} | ${[]}       | ${true}
+  `('$desc', ({ stagedFiles, disabled }) => {
+    beforeEach(async () => {
+      store.state.stagedFiles = stagedFiles;
 
-  it('disables begin commit button when there are no changes', async () => {
-    store.state.changedFiles = [];
-    await vm.$nextTick();
+      createComponent();
+    });
 
-    expect(beginCommitButton()).toHaveAttr('disabled');
+    it(`begin button disabled=${disabled}`, async () => {
+      expect(findBeginCommitButton().props('disabled')).toBe(disabled);
+    });
   });
 
-  describe('compact', () => {
-    beforeEach(() => {
-      vm.isCompact = true;
+  describe('on edit tab', () => {
+    beforeEach(async () => {
+      // Test that we react to switching to compact view.
+      goToCommitView();
+
+      createComponent();
+
+      goToEditView();
 
-      return vm.$nextTick();
+      await wrapper.vm.$nextTick();
     });
 
     it('renders commit button in compact mode', () => {
-      expect(beginCommitButton()).not.toBeNull();
-      expect(beginCommitButton().textContent).toContain('Commit');
+      expect(findBeginCommitButton().exists()).toBe(true);
+      expect(findBeginCommitButton().text()).toBe('Commit…');
     });
 
     it('does not render form', () => {
-      expect(vm.$el.querySelector('form')).toBeNull();
+      expect(findForm().exists()).toBe(false);
     });
 
     it('renders overview text', () => {
-      vm.$store.state.stagedFiles.push('test');
-
-      return vm.$nextTick(() => {
-        expect(vm.$el.querySelector('p').textContent).toContain('1 changed file');
-      });
+      expect(wrapper.find('p').text()).toBe('1 changed file');
     });
 
-    it('shows form when clicking commit button', () => {
-      beginCommitButton().click();
+    it('when begin commit button is clicked, shows form', async () => {
+      findBeginCommitButton().vm.$emit('click');
 
-      return vm.$nextTick(() => {
-        expect(vm.$el.querySelector('form')).not.toBeNull();
-      });
-    });
+      await wrapper.vm.$nextTick();
 
-    it('toggles activity bar view when clicking commit button', () => {
-      beginCommitButton().click();
-
-      return vm.$nextTick(() => {
-        expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
-      });
+      expect(findForm().exists()).toBe(true);
     });
 
-    it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => {
-      store.state.lastCommitMsg = 'abc';
-      store.state.currentActivityView = leftSidebarViews.edit.name;
-      await vm.$nextTick();
+    it('when begin commit button is clicked, sets activity view', async () => {
+      findBeginCommitButton().vm.$emit('click');
 
-      // if commit message is set, form is uncollapsed
-      expect(vm.isCompact).toBe(false);
+      await wrapper.vm.$nextTick();
 
-      store.state.lastCommitMsg = '';
-      await vm.$nextTick();
-
-      // collapsed when set to empty
-      expect(vm.isCompact).toBe(true);
+      expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
     });
 
-    it('collapses if in commit view but there are no changes and vice versa', async () => {
-      store.state.currentActivityView = leftSidebarViews.commit.name;
-      await vm.$nextTick();
+    it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => {
+      // Test that it expands when lastCommitMsg is set
+      setLastCommitMessage('test');
+      goToEditView();
 
-      // expanded by default if there are changes
-      expect(vm.isCompact).toBe(false);
+      await wrapper.vm.$nextTick();
 
-      store.state.changedFiles = [];
-      await vm.$nextTick();
+      expect(findForm().exists()).toBe(true);
 
-      expect(vm.isCompact).toBe(true);
+      // Now test that it collapses when lastCommitMsg is cleared
+      setLastCommitMessage('');
 
-      store.state.changedFiles.push('test');
-      await vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      // uncollapsed once again
-      expect(vm.isCompact).toBe(false);
+      expect(findForm().exists()).toBe(false);
     });
+  });
 
-    it('collapses if switched from commit view to edit view and vice versa', async () => {
-      store.state.currentActivityView = leftSidebarViews.edit.name;
-      await vm.$nextTick();
-
-      expect(vm.isCompact).toBe(true);
+  describe('on commit tab when window height is less than MAX_WINDOW_HEIGHT', () => {
+    let oldHeight;
 
-      store.state.currentActivityView = leftSidebarViews.commit.name;
-      await vm.$nextTick();
+    beforeEach(async () => {
+      oldHeight = window.innerHeight;
+      window.innerHeight = 700;
 
-      expect(vm.isCompact).toBe(false);
+      createComponent();
 
-      store.state.currentActivityView = leftSidebarViews.edit.name;
-      await vm.$nextTick();
+      goToCommitView();
 
-      expect(vm.isCompact).toBe(true);
+      await wrapper.vm.$nextTick();
     });
 
-    describe('when window height is less than MAX_WINDOW_HEIGHT', () => {
-      let oldHeight;
-
-      beforeEach(() => {
-        oldHeight = window.innerHeight;
-        window.innerHeight = 700;
-      });
+    afterEach(() => {
+      window.innerHeight = oldHeight;
+    });
 
-      afterEach(() => {
-        window.innerHeight = oldHeight;
-      });
+    it('stays collapsed if changes are added or removed', async () => {
+      expect(findForm().exists()).toBe(false);
 
-      it('stays collapsed when switching from edit view to commit view and back', async () => {
-        store.state.currentActivityView = leftSidebarViews.edit.name;
-        await vm.$nextTick();
+      store.state.stagedFiles = [];
+      await wrapper.vm.$nextTick();
 
-        expect(vm.isCompact).toBe(true);
+      expect(findForm().exists()).toBe(false);
 
-        store.state.currentActivityView = leftSidebarViews.commit.name;
-        await vm.$nextTick();
+      store.state.stagedFiles.push('test');
+      await wrapper.vm.$nextTick();
 
-        expect(vm.isCompact).toBe(true);
+      expect(findForm().exists()).toBe(false);
+    });
+  });
 
-        store.state.currentActivityView = leftSidebarViews.edit.name;
-        await vm.$nextTick();
+  describe('on commit tab', () => {
+    beforeEach(async () => {
+      // Test that the component reacts to switching to full view
+      goToEditView();
 
-        expect(vm.isCompact).toBe(true);
-      });
+      createComponent();
 
-      it('stays uncollapsed if changes are added or removed', async () => {
-        store.state.currentActivityView = leftSidebarViews.commit.name;
-        await vm.$nextTick();
+      goToCommitView();
 
-        expect(vm.isCompact).toBe(true);
+      await wrapper.vm.$nextTick();
+    });
 
-        store.state.changedFiles = [];
-        await vm.$nextTick();
+    it('shows form', () => {
+      expect(findForm().exists()).toBe(true);
+    });
 
-        expect(vm.isCompact).toBe(true);
+    it('hides begin commit button', () => {
+      expect(findBeginCommitButton().exists()).toBe(false);
+    });
 
-        store.state.changedFiles.push('test');
-        await vm.$nextTick();
+    describe('when no changed files', () => {
+      beforeEach(async () => {
+        store.state.stagedFiles = [];
+        await wrapper.vm.$nextTick();
+      });
 
-        expect(vm.isCompact).toBe(true);
+      it('hides form', () => {
+        expect(findForm().exists()).toBe(false);
       });
 
-      it('uncollapses when clicked on Commit button in the edit view', async () => {
-        store.state.currentActivityView = leftSidebarViews.edit.name;
-        beginCommitButton().click();
-        await waitForPromises();
+      it('expands again when staged files are added', async () => {
+        store.state.stagedFiles.push('test');
+        await wrapper.vm.$nextTick();
 
-        expect(vm.isCompact).toBe(false);
+        expect(findForm().exists()).toBe(true);
       });
     });
-  });
 
-  describe('full', () => {
-    beforeEach(() => {
-      vm.isCompact = false;
+    it('updates commitMessage in store on input', async () => {
+      setCommitMessageInput('testing commit message');
+
+      await wrapper.vm.$nextTick();
 
-      return vm.$nextTick();
+      expect(store.state.commit.commitMessage).toBe('testing commit message');
     });
 
-    it('updates commitMessage in store on input', () => {
-      const textarea = vm.$el.querySelector('textarea');
+    describe('discard draft button', () => {
+      it('hidden when commitMessage is empty', () => {
+        expect(findDiscardDraftButton().exists()).toBe(false);
+      });
 
-      textarea.value = 'testing commit message';
+      it('resets commitMessage when clicking discard button', async () => {
+        setCommitMessageInput('testing commit message');
 
-      textarea.dispatchEvent(new Event('input'));
+        await wrapper.vm.$nextTick();
 
-      return vm.$nextTick().then(() => {
-        expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
-      });
-    });
+        expect(findCommitMessageInput().props('text')).toBe('testing commit message');
+
+        // Test that commitMessage is cleared on click
+        findDiscardDraftButton().vm.$emit('click');
 
-    it('updating currentActivityView not to commit view sets compact mode', () => {
-      store.state.currentActivityView = 'a';
+        await wrapper.vm.$nextTick();
 
-      return vm.$nextTick(() => {
-        expect(vm.isCompact).toBe(true);
+        expect(findCommitMessageInput().props('text')).toBe('');
       });
     });
 
-    it('always opens itself in full view current activity view is not commit view when clicking commit button', () => {
-      beginCommitButton().click();
+    describe('when submitting', () => {
+      beforeEach(async () => {
+        goToEditView();
 
-      return vm.$nextTick(() => {
-        expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
-        expect(vm.isCompact).toBe(false);
-      });
-    });
+        createComponent();
 
-    describe('discard draft button', () => {
-      it('hidden when commitMessage is empty', () => {
-        expect(vm.$el.querySelector('.btn-default').textContent).toContain('Collapse');
-      });
+        goToCommitView();
 
-      it('resets commitMessage when clicking discard button', () => {
-        vm.$store.state.commit.commitMessage = 'testing commit message';
-
-        return vm
-          .$nextTick()
-          .then(() => {
-            vm.$el.querySelector('.btn-default').click();
-          })
-          .then(() => vm.$nextTick())
-          .then(() => {
-            expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message');
-          });
-      });
-    });
+        await wrapper.vm.$nextTick();
 
-    describe('when submitting', () => {
-      beforeEach(() => {
-        jest.spyOn(vm, 'commitChanges');
+        setCommitMessageInput('testing commit message');
+
+        await wrapper.vm.$nextTick();
 
-        vm.$store.state.stagedFiles.push('test');
-        vm.$store.state.commit.commitMessage = 'testing commit message';
+        jest.spyOn(store, 'dispatch').mockResolvedValue();
       });
 
       it('calls commitChanges', () => {
-        vm.commitChanges.mockResolvedValue({ success: true });
-
-        return vm.$nextTick().then(() => {
-          vm.$el.querySelector('.btn-success').click();
+        findCommitButton().vm.$emit('click');
 
-          expect(vm.commitChanges).toHaveBeenCalled();
-        });
+        expect(store.dispatch).toHaveBeenCalledWith('commit/commitChanges', undefined);
       });
 
       it.each`
@@ -272,31 +263,32 @@ describe('IDE commit form', () => {
         ${() => createCodeownersCommitError('test message')} | ${{ actionPrimary: { text: 'Create new branch' } }}
         ${createUnexpectedCommitError}                       | ${{ actionPrimary: null }}
       `('opens error modal if commitError with $error', async ({ createError, props }) => {
-        jest.spyOn(vm.$refs.commitErrorModal, 'show');
+        const modal = wrapper.find(GlModal);
+        modal.vm.show = jest.fn();
 
         const error = createError();
         store.state.commit.commitError = error;
 
-        await vm.$nextTick();
+        await wrapper.vm.$nextTick();
 
-        expect(vm.$refs.commitErrorModal.show).toHaveBeenCalled();
-        expect(vm.$refs.commitErrorModal).toMatchObject({
+        expect(modal.vm.show).toHaveBeenCalled();
+        expect(modal.props()).toMatchObject({
           actionCancel: { text: 'Cancel' },
           ...props,
         });
         // Because of the legacy 'mountComponent' approach here, the only way to
         // test the text of the modal is by viewing the content of the modal added to the document.
-        expect(document.body).toHaveText(error.messageHTML);
+        expect(modal.html()).toContain(error.messageHTML);
       });
     });
 
     describe('with error modal with primary', () => {
       beforeEach(() => {
-        jest.spyOn(vm.$store, 'dispatch').mockReturnValue(Promise.resolve());
+        jest.spyOn(store, 'dispatch').mockResolvedValue();
       });
 
       const commitActions = [
-        ['commit/updateCommitAction', consts.COMMIT_TO_NEW_BRANCH],
+        ['commit/updateCommitAction', COMMIT_TO_NEW_BRANCH],
         ['commit/commitChanges'],
       ];
 
@@ -310,27 +302,15 @@ describe('IDE commit form', () => {
         async ({ commitError, expectedActions }) => {
           store.state.commit.commitError = commitError('test message');
 
-          await vm.$nextTick();
+          await wrapper.vm.$nextTick();
 
-          getByText(document.body, 'Create new branch').click();
+          wrapper.find(GlModal).vm.$emit('ok');
 
           await waitForPromises();
 
-          expect(vm.$store.dispatch.mock.calls).toEqual(expectedActions);
+          expect(store.dispatch.mock.calls).toEqual(expectedActions);
         },
       );
     });
   });
-
-  describe('commitButtonText', () => {
-    it('returns commit text when staged files exist', () => {
-      vm.$store.state.stagedFiles.push('testing');
-
-      expect(vm.commitButtonText).toBe('Commit');
-    });
-
-    it('returns stage & commit text when staged files do not exist', () => {
-      expect(vm.commitButtonText).toBe('Stage & Commit');
-    });
-  });
 });

spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js

@@ -4,7 +4,10 @@ import { projectData, branches } from 'jest/ide/mock_data';
 import NewMergeRequestOption from '~/ide/components/commit_sidebar/new_merge_request_option.vue';
 import { createStore } from '~/ide/stores';
 import { PERMISSION_CREATE_MR } from '~/ide/constants';
-import consts from '~/ide/stores/modules/commit/constants';
+import {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+} from '~/ide/stores/modules/commit/constants';
 
 describe('create new MR checkbox', () => {
   let store;
@@ -27,8 +30,8 @@ describe('create new MR checkbox', () => {
     vm = createComponentWithStore(Component, store);
 
     vm.$store.state.commit.commitAction = createNewBranch
-      ? consts.COMMIT_TO_NEW_BRANCH
-      : consts.COMMIT_TO_CURRENT_BRANCH;
+      ? COMMIT_TO_NEW_BRANCH
+      : COMMIT_TO_CURRENT_BRANCH;
 
     vm.$store.state.currentBranchId = currentBranchId;
 

spec/frontend/ide/stores/modules/commit/actions_spec.js

@@ -7,7 +7,10 @@ import { createStore } from '~/ide/stores';
 import service from '~/ide/services';
 import { createRouter } from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
-import consts from '~/ide/stores/modules/commit/constants';
+import {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+} from '~/ide/stores/modules/commit/constants';
 import * as mutationTypes from '~/ide/stores/modules/commit/mutation_types';
 import * as actions from '~/ide/stores/modules/commit/actions';
 import { createUnexpectedCommitError } from '~/ide/lib/errors';
@@ -425,12 +428,12 @@ describe('IDE commit module actions', () => {
       });
 
       it('resets stores commit actions', (done) => {
-        store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+        store.state.commit.commitAction = COMMIT_TO_NEW_BRANCH;
 
         store
           .dispatch('commit/commitChanges')
           .then(() => {
-            expect(store.state.commit.commitAction).not.toBe(consts.COMMIT_TO_NEW_BRANCH);
+            expect(store.state.commit.commitAction).not.toBe(COMMIT_TO_NEW_BRANCH);
           })
           .then(done)
           .catch(done.fail);
@@ -450,7 +453,7 @@ describe('IDE commit module actions', () => {
         it('redirects to new merge request page', (done) => {
           jest.spyOn(eventHub, '$on').mockImplementation();
 
-          store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+          store.state.commit.commitAction = COMMIT_TO_NEW_BRANCH;
           store.state.commit.shouldCreateMR = true;
 
           store
@@ -468,7 +471,7 @@ describe('IDE commit module actions', () => {
         it('does not redirect to new merge request page when shouldCreateMR is not checked', (done) => {
           jest.spyOn(eventHub, '$on').mockImplementation();
 
-          store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+          store.state.commit.commitAction = COMMIT_TO_NEW_BRANCH;
           store.state.commit.shouldCreateMR = false;
 
           store
@@ -483,7 +486,7 @@ describe('IDE commit module actions', () => {
         it('does not redirect to merge request page if shouldCreateMR is checked, but branch is the default branch', async () => {
           jest.spyOn(eventHub, '$on').mockImplementation();
 
-          store.state.commit.commitAction = consts.COMMIT_TO_CURRENT_BRANCH;
+          store.state.commit.commitAction = COMMIT_TO_CURRENT_BRANCH;
           store.state.commit.shouldCreateMR = true;
 
           await store.dispatch('commit/commitChanges');

spec/frontend/ide/stores/modules/commit/getters_spec.js

 import commitState from '~/ide/stores/modules/commit/state';
 import * as getters from '~/ide/stores/modules/commit/getters';
-import consts from '~/ide/stores/modules/commit/constants';
+import {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+} from '~/ide/stores/modules/commit/constants';
 
 describe('IDE commit module getters', () => {
   let state;
@@ -147,13 +150,13 @@ describe('IDE commit module getters', () => {
 
   describe('isCreatingNewBranch', () => {
     it('returns false if NOT creating a new branch', () => {
-      state.commitAction = consts.COMMIT_TO_CURRENT_BRANCH;
+      state.commitAction = COMMIT_TO_CURRENT_BRANCH;
 
       expect(getters.isCreatingNewBranch(state)).toBeFalsy();
     });
 
     it('returns true if creating a new branch', () => {
-      state.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+      state.commitAction = COMMIT_TO_NEW_BRANCH;
 
       expect(getters.isCreatingNewBranch(state)).toBeTruthy();
     });