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

import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem, GlDropdown, GlIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { merge, last } from 'lodash';
import Vuex from 'vuex';
import commit from 'test_fixtures/api/commits/commit.json';
import branches from 'test_fixtures/api/branches/branches.json';
import tags from 'test_fixtures/api/tags/tags.json';
import { trimText } from 'helpers/text_helper';
import { ENTER_KEY } from '~/lib/utils/keys';
import { sprintf } from '~/locale';
import RefSelector from '~/ref/components/ref_selector.vue';
import {
  X_TOTAL_HEADER,
  DEFAULT_I18N,
  REF_TYPE_BRANCHES,
  REF_TYPE_TAGS,
  REF_TYPE_COMMITS,
} from '~/ref/constants';
import createStore from '~/ref/stores/';

Vue.use(Vuex);

describe('Ref selector component', () => {
  const fixtures = { branches, tags, commit };

  const projectId = '8';

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

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

  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]);
    requestSpies = { branchesApiCallSpy, tagsApiCallSpy, commitApiCallSpy };

    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('button');

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

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

  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);

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

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

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

  const findHiddenInputField = () => wrapper.find('[data-testid="selected-ref-form-field"]');

  //
  // 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) => {
    findSearchBox().vm.$emit('input', newQuery);
  };

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

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

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

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

  describe('initialization behavior', () => {
    it('initializes the dropdown with branches and tags when mounted', () => {
      createComponent();

      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', () => {
      createComponent();

      expect(findLoadingIcon().exists()).toBe(true);

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

    describe('when name property is provided', () => {
      it('renders an forrm input hidden field', () => {
        const name = 'default_tag';

        createComponent({ propsData: { name } });

        expect(findHiddenInputField().attributes().name).toBe(name);
      });
    });

    describe('when name property is not provided', () => {
      it('renders an forrm input hidden field', () => {
        createComponent();

        expect(findHiddenInputField().exists()).toBe(false);
      });
    });
  });

  describe('post-initialization behavior', () => {
    describe('when the parent component provides an `id` binding', () => {
      const id = 'git-ref';

      beforeEach(() => {
        createComponent({ attrs: { id } });

        return waitForRequests();
      });

      it('adds the provided ID to the GlDropdown instance', () => {
        expect(wrapper.findComponent(GlDropdown).attributes().id).toBe(id);
      });
    });

    describe('when a ref is pre-selected', () => {
      const preselectedRef = fixtures.branches[0].name;

      beforeEach(() => {
        createComponent({ propsData: { value: preselectedRef, name: 'selectedRef' } });

        return waitForRequests();
      });

      it('renders the pre-selected ref name', () => {
        expect(findButtonContent().text()).toBe(preselectedRef);
      });

      it('binds hidden input field to the pre-selected ref', () => {
        expect(findHiddenInputField().attributes().value).toBe(preselectedRef);
      });
    });

    describe('when the selected ref is updated by the parent component', () => {
      const updatedRef = fixtures.branches[0].name;

      beforeEach(() => {
        createComponent();

        return waitForRequests();
      });

      it('renders the updated ref name', async () => {
        wrapper.setProps({ value: updatedRef });

        await nextTick();
        expect(findButtonContent().text()).toBe(updatedRef);
      });
    });

    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 the Enter is pressed', () => {
      beforeEach(() => {
        createComponent();

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

      it('requeries the endpoints when Enter is pressed', () => {
        findSearchBox().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));

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

    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(),
          ).toMatchInterpolatedText('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(),
          ).toMatchInterpolatedText('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(),
          ).toMatchInterpolatedText('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();

          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', async () => {
        expect(findFirstBranchDropdownItem().findComponent(GlIcon).element).toHaveClass(
          'gl-visibility-hidden',
        );

        await selectFirstBranch();

        expect(findFirstBranchDropdownItem().findComponent(GlIcon).element).not.toHaveClass(
          'gl-visibility-hidden',
        );
      });

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

          await selectFirstBranch();

          await nextTick();
          expect(findButtonContent().text()).toBe(fixtures.branches[0].name);
        });

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

          await 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", async () => {
          expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);

          await selectFirstTag();

          await nextTick();
          expect(findButtonContent().text()).toBe(fixtures.tags[0].name);
        });

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

          await 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", async () => {
          expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);

          await selectFirstCommit();

          await nextTick();
          expect(findButtonContent().text()).toBe(fixtures.commit.id);
        });

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

          await selectFirstCommit();

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

  describe('with non-default ref types', () => {
    it.each`
      enabledRefTypes                      | reqsCalled                | reqsNotCalled
      ${[REF_TYPE_BRANCHES]}               | ${['branchesApiCallSpy']} | ${['tagsApiCallSpy', 'commitApiCallSpy']}
      ${[REF_TYPE_TAGS]}                   | ${['tagsApiCallSpy']}     | ${['branchesApiCallSpy', 'commitApiCallSpy']}
      ${[REF_TYPE_COMMITS]}                | ${[]}                     | ${['branchesApiCallSpy', 'tagsApiCallSpy', 'commitApiCallSpy']}
      ${[REF_TYPE_TAGS, REF_TYPE_COMMITS]} | ${['tagsApiCallSpy']}     | ${['branchesApiCallSpy', 'commitApiCallSpy']}
    `(
      'only calls $reqsCalled requests when $enabledRefTypes are enabled',
      async ({ enabledRefTypes, reqsCalled, reqsNotCalled }) => {
        createComponent({ propsData: { enabledRefTypes } });

        await waitForRequests();

        reqsCalled.forEach((req) => expect(requestSpies[req]).toHaveBeenCalledTimes(1));
        reqsNotCalled.forEach((req) => expect(requestSpies[req]).not.toHaveBeenCalled());
      },
    );

    it('only calls commitApiCallSpy when REF_TYPE_COMMITS is enabled', async () => {
      createComponent({ propsData: { enabledRefTypes: [REF_TYPE_COMMITS] } });
      updateQuery('abcd1234');

      await waitForRequests();

      expect(commitApiCallSpy).toHaveBeenCalledTimes(1);
      expect(branchesApiCallSpy).not.toHaveBeenCalled();
      expect(tagsApiCallSpy).not.toHaveBeenCalled();
    });

    it('triggers another search if enabled ref types change', async () => {
      createComponent({ propsData: { enabledRefTypes: [REF_TYPE_BRANCHES] } });
      await waitForRequests();

      expect(branchesApiCallSpy).toHaveBeenCalledTimes(1);
      expect(tagsApiCallSpy).not.toHaveBeenCalled();

      wrapper.setProps({
        enabledRefTypes: [REF_TYPE_BRANCHES, REF_TYPE_TAGS],
      });
      await waitForRequests();

      expect(branchesApiCallSpy).toHaveBeenCalledTimes(2);
      expect(tagsApiCallSpy).toHaveBeenCalledTimes(1);
    });

    it('if a ref type becomes disabled, its section is hidden, even if it had some results in store', async () => {
      createComponent({ propsData: { enabledRefTypes: [REF_TYPE_BRANCHES, REF_TYPE_COMMITS] } });
      updateQuery('abcd1234');
      await waitForRequests();

      expect(findBranchesSection().exists()).toBe(true);
      expect(findCommitsSection().exists()).toBe(true);

      wrapper.setProps({ enabledRefTypes: [REF_TYPE_COMMITS] });
      await waitForRequests();

      expect(findBranchesSection().exists()).toBe(false);
      expect(findCommitsSection().exists()).toBe(true);
    });

    it.each`
      enabledRefType       | findVisibleSection     | findHiddenSections
      ${REF_TYPE_BRANCHES} | ${findBranchesSection} | ${[findTagsSection, findCommitsSection]}
      ${REF_TYPE_TAGS}     | ${findTagsSection}     | ${[findBranchesSection, findCommitsSection]}
      ${REF_TYPE_COMMITS}  | ${findCommitsSection}  | ${[findBranchesSection, findTagsSection]}
    `(
      'hides section headers if a single ref type is enabled',
      async ({ enabledRefType, findVisibleSection, findHiddenSections }) => {
        createComponent({ propsData: { enabledRefTypes: [enabledRefType] } });
        updateQuery('abcd1234');
        await waitForRequests();

        expect(findVisibleSection().exists()).toBe(true);
        expect(findVisibleSection().find('[data-testid="section-header"]').exists()).toBe(false);
        findHiddenSections.forEach((findHiddenSection) =>
          expect(findHiddenSection().exists()).toBe(false),
        );
      },
    );
  });

  describe('validation state', () => {
    const invalidClass = 'gl-inset-border-1-red-500!';
    const isInvalidClassApplied = () =>
      wrapper.findComponent(GlDropdown).props('toggleClass')[invalidClass];

    describe('valid state', () => {
      describe('when the state prop is not provided', () => {
        it('does not render a red border', () => {
          createComponent();

          expect(isInvalidClassApplied()).toBe(false);
        });
      });

      describe('when the state prop is true', () => {
        it('does not render a red border', () => {
          createComponent({ propsData: { state: true } });

          expect(isInvalidClassApplied()).toBe(false);
        });
      });
    });

    describe('invalid state', () => {
      it('renders the dropdown with a red border if the state prop is false', () => {
        createComponent({ propsData: { state: false } });

        expect(isInvalidClassApplied()).toBe(true);
      });
    });
  });

  describe('footer slot', () => {
    const footerContent = 'This is the footer content';
    const createFooter = jest.fn().mockImplementation(function createMockFooter() {
      return this.$createElement('div', { attrs: { 'data-testid': 'footer-content' } }, [
        footerContent,
      ]);
    });

    beforeEach(() => {
      createComponent({
        scopedSlots: { footer: createFooter },
      });

      updateQuery('abcd1234');

      return waitForRequests();
    });

    afterEach(() => {
      createFooter.mockClear();
    });

    it('allows custom content to be shown at the bottom of the dropdown using the footer slot', () => {
      expect(wrapper.find(`[data-testid="footer-content"]`).text()).toBe(footerContent);
    });

    it('passes the expected slot props', () => {
      // The createFooter function gets called every time one of the scoped properties
      // is updated. For the sake of this test, we'll just test the last call, which
      // represents the final state of the slot props.
      const lastCallProps = last(createFooter.mock.calls)[0];
      expect(lastCallProps).toMatchSnapshot();
    });
  });
});