path: root/spec/frontend/ref/components/ref_selector_spec.js

import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { GlLoadingIcon, GlSearchBoxByType, GlNewDropdownItem, GlIcon } from '@gitlab/ui';
import { trimText } from 'helpers/text_helper';
import { sprintf } from '~/locale';
import RefSelector from '~/ref/components/ref_selector.vue';
import { X_TOTAL_HEADER, DEFAULT_I18N } from '~/ref/constants';
import createStore from '~/ref/stores/';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('Ref selector component', () => {
  const fixtures = {
    branches: getJSONFixture('api/branches/branches.json'),
    tags: getJSONFixture('api/tags/tags.json'),
    commit: getJSONFixture('api/commits/commit.json'),
  };

  const projectId = '8';

  let wrapper;
  let branchesApiCallSpy;
  let tagsApiCallSpy;
  let commitApiCallSpy;

  const createComponent = () => {
    wrapper = mount(RefSelector, {
      propsData: {
        projectId,
        value: '',
      },
      listeners: {
        // simulate a parent component v-model binding
        input: selectedRef => {
          wrapper.setProps({ value: selectedRef });
        },
      },
      stubs: {
        GlSearchBoxByType: true,
      },
      localVue,
      store: createStore(),
    });
  };

  beforeEach(() => {
    const mock = new MockAdapter(axios);
    gon.api_version = 'v4';

    branchesApiCallSpy = jest
      .fn()
      .mockReturnValue([200, fixtures.branches, { [X_TOTAL_HEADER]: '123' }]);
    tagsApiCallSpy = jest.fn().mockReturnValue([200, fixtures.tags, { [X_TOTAL_HEADER]: '456' }]);
    commitApiCallSpy = jest.fn().mockReturnValue([200, fixtures.commit]);

    mock
      .onGet(`/api/v4/projects/${projectId}/repository/branches`)
      .reply(config => branchesApiCallSpy(config));
    mock
      .onGet(`/api/v4/projects/${projectId}/repository/tags`)
      .reply(config => tagsApiCallSpy(config));
    mock
      .onGet(new RegExp(`/api/v4/projects/${projectId}/repository/commits/.*`))
      .reply(config => commitApiCallSpy(config));
  });

  afterEach(() => {
    wrapper.destroy();
    wrapper = null;
  });

  //
  // Finders
  //
  const findButtonContent = () => wrapper.find('[data-testid="button-content"]');

  const findNoResults = () => wrapper.find('[data-testid="no-results"]');

  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);

  const findBranchesSection = () => wrapper.find('[data-testid="branches-section"]');
  const findBranchDropdownItems = () => findBranchesSection().findAll(GlNewDropdownItem);
  const findFirstBranchDropdownItem = () => findBranchDropdownItems().at(0);

  const findTagsSection = () => wrapper.find('[data-testid="tags-section"]');
  const findTagDropdownItems = () => findTagsSection().findAll(GlNewDropdownItem);
  const findFirstTagDropdownItem = () => findTagDropdownItems().at(0);

  const findCommitsSection = () => wrapper.find('[data-testid="commits-section"]');
  const findCommitDropdownItems = () => findCommitsSection().findAll(GlNewDropdownItem);
  const findFirstCommitDropdownItem = () => findCommitDropdownItems().at(0);

  //
  // Expecters
  //
  const branchesSectionContainsErrorMessage = () => {
    const branchesSection = findBranchesSection();

    return branchesSection.text().includes(DEFAULT_I18N.branchesErrorMessage);
  };

  const tagsSectionContainsErrorMessage = () => {
    const tagsSection = findTagsSection();

    return tagsSection.text().includes(DEFAULT_I18N.tagsErrorMessage);
  };

  const commitsSectionContainsErrorMessage = () => {
    const commitsSection = findCommitsSection();

    return commitsSection.text().includes(DEFAULT_I18N.commitsErrorMessage);
  };

  //
  // Convenience methods
  //
  const updateQuery = newQuery => {
    wrapper.find(GlSearchBoxByType).vm.$emit('input', newQuery);
  };

  const selectFirstBranch = () => {
    findFirstBranchDropdownItem().vm.$emit('click');
  };

  const selectFirstTag = () => {
    findFirstTagDropdownItem().vm.$emit('click');
  };

  const selectFirstCommit = () => {
    findFirstCommitDropdownItem().vm.$emit('click');
  };

  const waitForRequests = ({ andClearMocks } = { andClearMocks: false }) =>
    axios.waitForAll().then(() => {
      if (andClearMocks) {
        branchesApiCallSpy.mockClear();
        tagsApiCallSpy.mockClear();
        commitApiCallSpy.mockClear();
      }
    });

  describe('initialization behavior', () => {
    beforeEach(createComponent);

    it('initializes the dropdown with branches and tags when mounted', () => {
      return waitForRequests().then(() => {
        expect(branchesApiCallSpy).toHaveBeenCalledTimes(1);
        expect(tagsApiCallSpy).toHaveBeenCalledTimes(1);
        expect(commitApiCallSpy).not.toHaveBeenCalled();
      });
    });

    it('shows a spinner while network requests are in progress', () => {
      expect(findLoadingIcon().exists()).toBe(true);

      return waitForRequests().then(() => {
        expect(findLoadingIcon().exists()).toBe(false);
      });
    });
  });

  describe('post-initialization behavior', () => {
    describe('when the search query is updated', () => {
      beforeEach(() => {
        createComponent();

        return waitForRequests({ andClearMocks: true });
      });

      it('requeries the endpoints when the search query is updated', () => {
        updateQuery('v1.2.3');

        return waitForRequests().then(() => {
          expect(branchesApiCallSpy).toHaveBeenCalledTimes(1);
          expect(tagsApiCallSpy).toHaveBeenCalledTimes(1);
        });
      });

      it("does not make a call to the commit endpoint if the query doesn't look like a SHA", () => {
        updateQuery('not a sha');

        return waitForRequests().then(() => {
          expect(commitApiCallSpy).not.toHaveBeenCalled();
        });
      });

      it('searches for a commit if the query could potentially be a SHA', () => {
        updateQuery('abcdef');

        return waitForRequests().then(() => {
          expect(commitApiCallSpy).toHaveBeenCalled();
        });
      });
    });

    describe('when no results are found', () => {
      beforeEach(() => {
        branchesApiCallSpy = jest.fn().mockReturnValue([200, [], { [X_TOTAL_HEADER]: '0' }]);
        tagsApiCallSpy = jest.fn().mockReturnValue([200, [], { [X_TOTAL_HEADER]: '0' }]);
        commitApiCallSpy = jest.fn().mockReturnValue([404]);

        createComponent();

        return waitForRequests();
      });

      describe('when the search query is empty', () => {
        it('renders a "no results" message', () => {
          expect(findNoResults().text()).toBe(DEFAULT_I18N.noResults);
        });
      });

      describe('when the search query is not empty', () => {
        const query = 'hello';

        beforeEach(() => {
          updateQuery(query);

          return waitForRequests();
        });

        it('renders a "no results" message that includes the search query', () => {
          expect(findNoResults().text()).toBe(sprintf(DEFAULT_I18N.noResultsWithQuery, { query }));
        });
      });
    });

    describe('branches', () => {
      describe('when the branches search returns results', () => {
        beforeEach(() => {
          createComponent();

          return waitForRequests();
        });

        it('renders the branches section in the dropdown', () => {
          expect(findBranchesSection().exists()).toBe(true);
        });

        it('renders the "Branches" heading with a total number indicator', () => {
          expect(
            findBranchesSection()
              .find('[data-testid="section-header"]')
              .text(),
          ).toBe('Branches 123');
        });

        it("does not render an error message in the branches section's body", () => {
          expect(branchesSectionContainsErrorMessage()).toBe(false);
        });

        it('renders each non-default branch as a selectable item', () => {
          const dropdownItems = findBranchDropdownItems();

          fixtures.branches.forEach((b, i) => {
            if (!b.default) {
              expect(dropdownItems.at(i).text()).toBe(b.name);
            }
          });
        });

        it('renders the default branch as a selectable item with a "default" badge', () => {
          const dropdownItems = findBranchDropdownItems();

          const defaultBranch = fixtures.branches.find(b => b.default);
          const defaultBranchIndex = fixtures.branches.indexOf(defaultBranch);

          expect(trimText(dropdownItems.at(defaultBranchIndex).text())).toBe(
            `${defaultBranch.name} default`,
          );
        });
      });

      describe('when the branches search returns no results', () => {
        beforeEach(() => {
          branchesApiCallSpy = jest.fn().mockReturnValue([200, [], { [X_TOTAL_HEADER]: '0' }]);

          createComponent();

          return waitForRequests();
        });

        it('does not render the branches section in the dropdown', () => {
          expect(findBranchesSection().exists()).toBe(false);
        });
      });

      describe('when the branches search returns an error', () => {
        beforeEach(() => {
          branchesApiCallSpy = jest.fn().mockReturnValue([500]);

          createComponent();

          return waitForRequests();
        });

        it('renders the branches section in the dropdown', () => {
          expect(findBranchesSection().exists()).toBe(true);
        });

        it("renders an error message in the branches section's body", () => {
          expect(branchesSectionContainsErrorMessage()).toBe(true);
        });
      });
    });

    describe('tags', () => {
      describe('when the tags search returns results', () => {
        beforeEach(() => {
          createComponent();

          return waitForRequests();
        });

        it('renders the tags section in the dropdown', () => {
          expect(findTagsSection().exists()).toBe(true);
        });

        it('renders the "Tags" heading with a total number indicator', () => {
          expect(
            findTagsSection()
              .find('[data-testid="section-header"]')
              .text(),
          ).toBe('Tags 456');
        });

        it("does not render an error message in the tags section's body", () => {
          expect(tagsSectionContainsErrorMessage()).toBe(false);
        });

        it('renders each tag as a selectable item', () => {
          const dropdownItems = findTagDropdownItems();

          fixtures.tags.forEach((t, i) => {
            expect(dropdownItems.at(i).text()).toBe(t.name);
          });
        });
      });

      describe('when the tags search returns no results', () => {
        beforeEach(() => {
          tagsApiCallSpy = jest.fn().mockReturnValue([200, [], { [X_TOTAL_HEADER]: '0' }]);

          createComponent();

          return waitForRequests();
        });

        it('does not render the tags section in the dropdown', () => {
          expect(findTagsSection().exists()).toBe(false);
        });
      });

      describe('when the tags search returns an error', () => {
        beforeEach(() => {
          tagsApiCallSpy = jest.fn().mockReturnValue([500]);

          createComponent();

          return waitForRequests();
        });

        it('renders the tags section in the dropdown', () => {
          expect(findTagsSection().exists()).toBe(true);
        });

        it("renders an error message in the tags section's body", () => {
          expect(tagsSectionContainsErrorMessage()).toBe(true);
        });
      });
    });

    describe('commits', () => {
      describe('when the commit search returns results', () => {
        beforeEach(() => {
          createComponent();

          updateQuery('abcd1234');

          return waitForRequests();
        });

        it('renders the commit section in the dropdown', () => {
          expect(findCommitsSection().exists()).toBe(true);
        });

        it('renders the "Commits" heading with a total number indicator', () => {
          expect(
            findCommitsSection()
              .find('[data-testid="section-header"]')
              .text(),
          ).toBe('Commits 1');
        });

        it("does not render an error message in the comits section's body", () => {
          expect(commitsSectionContainsErrorMessage()).toBe(false);
        });

        it('renders each commit as a selectable item with the short SHA and commit title', () => {
          const dropdownItems = findCommitDropdownItems();

          const { commit } = fixtures;

          expect(dropdownItems.at(0).text()).toBe(`${commit.short_id} ${commit.title}`);
        });
      });

      describe('when the commit search returns no results (i.e. a 404)', () => {
        beforeEach(() => {
          commitApiCallSpy = jest.fn().mockReturnValue([404]);

          createComponent();

          updateQuery('abcd1234');

          return waitForRequests();
        });

        it('does not render the commits section in the dropdown', () => {
          expect(findCommitsSection().exists()).toBe(false);
        });
      });

      describe('when the commit search returns an error (other than a 404)', () => {
        beforeEach(() => {
          commitApiCallSpy = jest.fn().mockReturnValue([500]);

          createComponent();

          updateQuery('abcd1234');

          return waitForRequests();
        });

        it('renders the commits section in the dropdown', () => {
          expect(findCommitsSection().exists()).toBe(true);
        });

        it("renders an error message in the commits section's body", () => {
          expect(commitsSectionContainsErrorMessage()).toBe(true);
        });
      });
    });

    describe('selection', () => {
      beforeEach(() => {
        createComponent();

        updateQuery(fixtures.commit.short_id);

        return waitForRequests();
      });

      it('renders a checkmark by the selected item', () => {
        expect(findFirstBranchDropdownItem().find(GlIcon).element).toHaveClass(
          'gl-visibility-hidden',
        );

        selectFirstBranch();

        return localVue.nextTick().then(() => {
          expect(findFirstBranchDropdownItem().find(GlIcon).element).not.toHaveClass(
            'gl-visibility-hidden',
          );
        });
      });

      describe('when a branch is seleceted', () => {
        it("displays the branch name in the dropdown's button", () => {
          expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);

          selectFirstBranch();

          return localVue.nextTick().then(() => {
            expect(findButtonContent().text()).toBe(fixtures.branches[0].name);
          });
        });

        it("updates the v-model binding with the branch's name", () => {
          expect(wrapper.vm.value).toEqual('');

          selectFirstBranch();

          expect(wrapper.vm.value).toEqual(fixtures.branches[0].name);
        });
      });

      describe('when a tag is seleceted', () => {
        it("displays the tag name in the dropdown's button", () => {
          expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);

          selectFirstTag();

          return localVue.nextTick().then(() => {
            expect(findButtonContent().text()).toBe(fixtures.tags[0].name);
          });
        });

        it("updates the v-model binding with the tag's name", () => {
          expect(wrapper.vm.value).toEqual('');

          selectFirstTag();

          expect(wrapper.vm.value).toEqual(fixtures.tags[0].name);
        });
      });

      describe('when a commit is selected', () => {
        it("displays the full SHA in the dropdown's button", () => {
          expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);

          selectFirstCommit();

          return localVue.nextTick().then(() => {
            expect(findButtonContent().text()).toBe(fixtures.commit.id);
          });
        });

        it("updates the v-model binding with the commit's full SHA", () => {
          expect(wrapper.vm.value).toEqual('');

          selectFirstCommit();

          expect(wrapper.vm.value).toEqual(fixtures.commit.id);
        });
      });
    });
  });
});