Add latest changes from gitlab-org/gitlab@13-3-stable-ee

3 files changed, 275 insertions, 0 deletions

diff --git a/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap
new file mode 100644
index 00000000000..5fad0d07f97
--- /dev/null
+++ b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddContextCommitsModal renders modal with 2 tabs 1`] = `
+<gl-modal-stub
+  body-class="add-review-item pt-0"
+  cancel-variant="light"
+  modalclass=""
+  modalid="add-review-item"
+  ok-disabled="true"
+  ok-title="Save changes"
+  scrollable="true"
+  size="md"
+  title="Add or remove previously merged commits"
+  titletag="h4"
+>
+  <gl-tabs-stub
+    contentclass="pt-0"
+    theme="indigo"
+    value="0"
+  >
+    <gl-tab-stub>
+       
+      <div
+        class="mt-2"
+      >
+        <gl-search-box-by-type-stub
+          clearbuttontitle="Clear"
+          placeholder="Search by commit title or SHA"
+          value=""
+        />
+         
+        <review-tab-container-stub
+          commits=""
+          emptylisttext="Your search didn't match any commits. Try a different query."
+          loadingfailedtext="Unable to load commits. Try again later."
+        />
+      </div>
+    </gl-tab-stub>
+     
+    <gl-tab-stub>
+       
+      <review-tab-container-stub
+        commits=""
+        emptylisttext="Commits you select appear here. Go to the first tab and select commits to add to this merge request."
+        loadingfailedtext="Unable to load commits. Try again later."
+      />
+    </gl-tab-stub>
+  </gl-tabs-stub>
+</gl-modal-stub>
+`;
diff --git a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
new file mode 100644
index 00000000000..6904e34db5d
--- /dev/null
+++ b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
@@ -0,0 +1,174 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlModal, GlSearchBoxByType } from '@gitlab/ui';
+import AddReviewItemsModal from '~/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue';
+import getDiffWithCommit from '../../diffs/mock_data/diff_with_commit';
+
+import defaultState from '~/add_context_commits_modal/store/state';
+import mutations from '~/add_context_commits_modal/store/mutations';
+import * as actions from '~/add_context_commits_modal/store/actions';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('AddContextCommitsModal', () => {
+  let wrapper;
+  let store;
+  const createContextCommits = jest.fn();
+  const removeContextCommits = jest.fn();
+  const resetModalState = jest.fn();
+  const searchCommits = jest.fn();
+  const { commit } = getDiffWithCommit();
+
+  const createWrapper = (props = {}) => {
+    store = new Vuex.Store({
+      mutations,
+      state: {
+        ...defaultState(),
+      },
+      actions: {
+        ...actions,
+        searchCommits,
+        createContextCommits,
+        removeContextCommits,
+        resetModalState,
+      },
+    });
+
+    wrapper = shallowMount(AddReviewItemsModal, {
+      localVue,
+      store,
+      propsData: {
+        contextCommitsPath: '',
+        targetBranch: 'master',
+        mergeRequestIid: 1,
+        projectId: 1,
+        ...props,
+      },
+    });
+    return wrapper;
+  };
+
+  const findModal = () => wrapper.find(GlModal);
+  const findSearch = () => wrapper.find(GlSearchBoxByType);
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders modal with 2 tabs', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('an ok button labeled "Save changes"', () => {
+    expect(findModal().attributes('ok-title')).toEqual('Save changes');
+  });
+
+  describe('when in first tab, renders a modal with', () => {
+    it('renders the search box component', () => {
+      expect(findSearch().exists()).toBe(true);
+    });
+
+    it('when user starts entering text in search box, it calls action "searchCommits" after waiting for 500s', () => {
+      const searchText = 'abcd';
+      findSearch().vm.$emit('input', searchText);
+      expect(searchCommits).not.toBeCalled();
+      jest.advanceTimersByTime(500);
+      expect(searchCommits).toHaveBeenCalledWith(expect.anything(), searchText, undefined);
+    });
+
+    it('disabled ok button when no row is selected', () => {
+      expect(findModal().attributes('ok-disabled')).toBe('true');
+    });
+
+    it('enabled ok button when atleast one row is selected', () => {
+      wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findModal().attributes('ok-disabled')).toBeFalsy();
+      });
+    });
+  });
+
+  describe('when in second tab, renders a modal with', () => {
+    beforeEach(() => {
+      wrapper.vm.$store.state.tabIndex = 1;
+    });
+    it('a disabled ok button when no row is selected', () => {
+      expect(findModal().attributes('ok-disabled')).toBe('true');
+    });
+
+    it('an enabled ok button when atleast one row is selected', () => {
+      wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findModal().attributes('ok-disabled')).toBeFalsy();
+      });
+    });
+
+    it('a disabled ok button in first tab, when row is selected in second tab', () => {
+      createWrapper({ selectedContextCommits: [commit] });
+      expect(wrapper.find(GlModal).attributes('ok-disabled')).toBe('true');
+    });
+  });
+
+  describe('has an ok button when clicked calls action', () => {
+    it('"createContextCommits" when only new commits to be added ', () => {
+      wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
+      findModal().vm.$emit('ok');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(createContextCommits).toHaveBeenCalledWith(
+          expect.anything(),
+          { commits: [{ ...commit, isSelected: true }], forceReload: true },
+          undefined,
+        );
+      });
+    });
+    it('"removeContextCommits" when only added commits are to be removed ', () => {
+      wrapper.vm.$store.state.toRemoveCommits = [commit.short_id];
+      findModal().vm.$emit('ok');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), true, undefined);
+      });
+    });
+    it('"createContextCommits" and "removeContextCommits" when new commits are to be added and old commits are to be removed', () => {
+      wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
+      wrapper.vm.$store.state.toRemoveCommits = [commit.short_id];
+      findModal().vm.$emit('ok');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(createContextCommits).toHaveBeenCalledWith(
+          expect.anything(),
+          { commits: [{ ...commit, isSelected: true }] },
+          undefined,
+        );
+        expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), undefined, undefined);
+      });
+    });
+  });
+
+  describe('has a cancel button when clicked', () => {
+    it('does not call "createContextCommits" or "removeContextCommits"', () => {
+      findModal().vm.$emit('cancel');
+      expect(createContextCommits).not.toHaveBeenCalled();
+      expect(removeContextCommits).not.toHaveBeenCalled();
+    });
+    it('"resetModalState" to reset all the modal state', () => {
+      findModal().vm.$emit('cancel');
+      expect(resetModalState).toHaveBeenCalledWith(expect.anything(), undefined, undefined);
+    });
+  });
+
+  describe('when model is closed by clicking the "X" button or by pressing "ESC" key', () => {
+    it('does not call "createContextCommits" or "removeContextCommits"', () => {
+      findModal().vm.$emit('close');
+      expect(createContextCommits).not.toHaveBeenCalled();
+      expect(removeContextCommits).not.toHaveBeenCalled();
+    });
+    it('"resetModalState" to reset all the modal state', () => {
+      findModal().vm.$emit('close');
+      expect(resetModalState).toHaveBeenCalledWith(expect.anything(), undefined, undefined);
+    });
+  });
+});
diff --git a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
new file mode 100644
index 00000000000..4e65713a680
--- /dev/null
+++ b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
@@ -0,0 +1,51 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import ReviewTabContainer from '~/add_context_commits_modal/components/review_tab_container.vue';
+import CommitItem from '~/diffs/components/commit_item.vue';
+import getDiffWithCommit from '../../diffs/mock_data/diff_with_commit';
+
+describe('ReviewTabContainer', () => {
+  let wrapper;
+  const { commit } = getDiffWithCommit();
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMount(ReviewTabContainer, {
+      propsData: {
+        tab: 'commits',
+        isLoading: false,
+        loadingError: false,
+        loadingFailedText: 'Failed to load commits',
+        commits: [],
+        selectedRow: [],
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows loading icon when commits are being loaded', () => {
+    createWrapper({ isLoading: true });
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  it('shows loading error text when API call fails', () => {
+    createWrapper({ loadingError: true });
+    expect(wrapper.text()).toContain('Failed to load commits');
+  });
+
+  it('shows "No commits present here" when commits are not present', () => {
+    expect(wrapper.text()).toContain('No commits present here');
+  });
+
+  it('renders all passed commits as list', () => {
+    createWrapper({ commits: [commit] });
+    expect(wrapper.findAll(CommitItem).length).toBe(1);
+  });
+});